/* Approved desktop replica v209 — exact visual system from the user-supplied reference. */
:root {
  --replica-blue: #0868e8;
  --replica-blue-dark: #0a367f;
  --replica-ink: #11274d;
  --replica-muted: #71809a;
  --replica-line: #d7e1ef;
  --replica-line-soft: #e8eef6;
  --replica-canvas: #f7faff;
  --replica-sidebar: #f3f8fd;
  --replica-green: #07965d;
  --replica-orange: #ff7200;
  --replica-red: #f03232;
  --replica-sidebar-width: 238px;
  --replica-topbar-height: 66px;
  --replica-taskbar-height: 54px;
  --replica-header-height: 120px;
  --replica-nav-inline-start: 18px;
  --replica-nav-inline-end: 40px;
  --replica-nav-icon-width: 24px;
  --replica-nav-gap: 16px;
  --replica-submenu-row-height: 38px;
  --replica-submenu-font-size: 14px;
  --replica-submenu-active-font-size: 14px;
  --replica-submenu-font-weight: 500;
  --replica-submenu-active-font-weight: 700;
  --replica-submenu-line-height: 1.35;
  --replica-submenu-indent: 16px;
  --replica-submenu-inline-end: 18px;
  --replica-mobile-submenu-row-height: 42px;
  --replica-mobile-submenu-font-size: 14px;
  --replica-mobile-submenu-active-font-size: 14px;
  --desktop-page-header-height: 66px;
  --desktop-task-strip-height: 54px;
  --desktop-shell-header-height: 120px;
  --replica-shadow: 0 2px 7px rgba(21, 57, 105, .09);
}

.visually-hidden {
  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;
}

@media (min-width: 901px) {
  html, body { min-width: 1080px; }
  body.pixel-replica *, body.pixel-replica *::before, body.pixel-replica *::after { box-sizing: border-box !important; }
body.pixel-replica {
    --desktop-page-header-height: 66px !important;
    --desktop-task-strip-height: 54px !important;
    --desktop-shell-header-height: 120px !important;
    min-width: 1080px !important;
    color: var(--replica-ink) !important;
    background: var(--replica-canvas) !important;
    font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
  }

  body.pixel-replica .app-shell { min-height: 100vh !important; background: var(--replica-canvas) !important; }
  body.pixel-replica .sidebar,
  body.pixel-replica.list-workspace .sidebar,
  body.pixel-replica[data-module] .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 30 !important;
    width: var(--replica-sidebar-width) !important;
    min-width: var(--replica-sidebar-width) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    border-right: 1px solid #d4e0ec !important;
    color: var(--replica-ink) !important;
    background: linear-gradient(180deg, #f6faff 0%, #eff6fc 100%) !important;
    box-shadow: 3px 0 10px rgba(34, 72, 115, .04) !important;
    overflow: hidden !important;
  }

  body.pixel-replica .brand {
    width: 100% !important;
    height: var(--replica-topbar-height) !important;
    min-height: var(--replica-topbar-height) !important;
    flex: 0 0 var(--replica-topbar-height) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 28px !important;
    border: 0 !important;
    border-bottom: 1px solid #dce6f1 !important;
    background: transparent !important;
    text-align: left !important;
  }
  body.pixel-replica .brand-mark { display: none !important; }
  body.pixel-replica .brand > div { min-width: 0 !important; display: block !important; text-align: left !important; }
  body.pixel-replica .brand strong {
    display: block !important;
    color: #0562d6 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
  }
  body.pixel-replica .brand small { display: none !important; }

  body.pixel-replica .nav {
    width: 100% !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 38px 10px 16px !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.pixel-replica .nav-item {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    flex: 0 0 48px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--replica-nav-gap) !important;
    margin: 0 !important;
    padding: 0 var(--replica-nav-inline-end) 0 var(--replica-nav-inline-start) !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #17376b !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-align: left !important;
    overflow: visible !important;
  }
  body.pixel-replica .nav-item::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 -10px !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    background: transparent !important;
  }
  body.pixel-replica .nav-item:not([data-page="dashboard"])::after {
    content: "›" !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    color: #234b82 !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    transform: translateY(-50%) rotate(90deg) !important;
    transition: transform .16s ease !important;
  }
  body.pixel-replica .nav-item[aria-expanded="true"]:not([data-page="dashboard"])::after {
    transform: translateY(-50%) rotate(-90deg) !important;
  }
  body.pixel-replica .nav-item:hover { color: #0868e8 !important; background: #eaf3ff !important; }
  body.pixel-replica .nav-item.active {
    color: #0868e8 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.pixel-replica .nav-item.active::before { display: none !important; background: transparent !important; }
  body.pixel-replica .nav-icon {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    flex: 0 0 24px !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 22px !important;
  }
  body.pixel-replica .nav-item.active .nav-icon {
    color: currentColor !important;
  }
  body.pixel-replica .nav-item > span:not(.mobile-nav-label) {
    display: block !important;
    width: auto !important;
    color: currentColor !important;
    text-align: left !important;
  }
  body.pixel-replica .nav-item .mobile-nav-label { display: none !important; }
  body.pixel-replica .nav-item em {
    position: absolute !important;
    top: 8px !important;
    right: 27px !important;
    min-width: 17px !important;
    padding: 1px 4px !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: var(--replica-red) !important;
    font-size: 9px !important;
    font-style: normal !important;
    line-height: 14px !important;
    text-align: center !important;
  }
  body.pixel-replica .mobile-all-functions-trigger { display: none !important; }

  body.pixel-replica .nav > .nav-inline-submenu {
    width: 100% !important;
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin: 0 0 6px !important;
    padding: 2px 0 4px !important;
    border-left: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  body.pixel-replica .nav-inline-submenu[data-inline-domain="dashboard"] { display: none !important; }
  body.pixel-replica .nav-inline-submenu .sub-group {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }
  body.pixel-replica .nav-inline-submenu .sub-group-title { display: none !important; }
  body.pixel-replica .nav-inline-submenu .sub-item {
    width: 100% !important;
    height: auto !important;
    min-height: var(--replica-submenu-row-height) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--replica-nav-gap) !important;
    margin: 0 !important;
    padding: 5px var(--replica-nav-inline-end) 5px var(--replica-nav-inline-start) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #54708e !important;
    background: transparent !important;
    font-size: var(--replica-submenu-font-size) !important;
    font-weight: var(--replica-submenu-font-weight) !important;
    line-height: var(--replica-submenu-line-height) !important;
    text-align: left !important;
  }
  body.pixel-replica .nav-inline-submenu .sub-item:hover,
  body.pixel-replica .nav-inline-submenu .sub-item.active {
    color: #0868e8 !important;
    background: #e8f2ff !important;
    border-left-color: transparent !important;
    box-shadow: none !important;
    font-size: var(--replica-submenu-active-font-size) !important;
    font-weight: var(--replica-submenu-active-font-weight) !important;
    line-height: var(--replica-submenu-line-height) !important;
  }
  body.pixel-replica .nav-inline-submenu .sub-item.active::before,
  body.pixel-replica .nav-inline-submenu .sub-item.active::after { display: none !important; content: none !important; }
  body.pixel-replica .nav-inline-submenu .sub-item-icon {
    width: var(--replica-nav-icon-width) !important;
    flex: 0 0 var(--replica-nav-icon-width) !important;
  }
  body.pixel-replica .nav-inline-submenu .sub-item-content { min-width: 0 !important; display: flex !important; gap: 5px !important; }
  body.pixel-replica .nav-inline-submenu .sub-item-label { line-height: inherit !important; white-space: normal !important; }

  body.pixel-replica #sub-sidebar { display: none !important; }
  body.pixel-replica .sidebar-footer {
    width: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    flex: 0 0 86px !important;
    align-self: stretch !important;
    margin: auto 16px 12px !important;
    padding: 0 !important;
    border: 1px solid #cfdceb !important;
    border-radius: 5px !important;
    color: #22436d !important;
    background: rgba(255,255,255,.36) !important;
    overflow: hidden !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: none !important;
  }
  body.pixel-replica .sidebar-footer .sidebar-service-row {
    display: grid !important;
    grid-template-columns: 12px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid #dce5ef !important;
  }
  body.pixel-replica .sidebar-footer .sidebar-service-row:last-child { border-bottom: 0 !important; }
  body.pixel-replica .sidebar-footer .sidebar-service-row > i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #12a87a !important;
  }
  body.pixel-replica .sidebar-footer strong { color: #22436d !important; font-size: 12px !important; }
  body.pixel-replica .sidebar-footer small { color: #07965d !important; font-size: 12px !important; }

  body.pixel-replica .main,
  body.pixel-replica.list-workspace .main,
  body.pixel-replica[data-module] .main {
    width: calc(100% - var(--replica-sidebar-width)) !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin-left: var(--replica-sidebar-width) !important;
    background: var(--replica-canvas) !important;
  }
  body.pixel-replica[data-module] .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    width: 100% !important;
    height: var(--replica-topbar-height) !important;
    min-height: var(--replica-topbar-height) !important;
    flex: 0 0 var(--replica-topbar-height) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 26px 0 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #d3deeb !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica .topbar > div:first-child { display: none !important; }
  body.pixel-replica .top-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-right: 0 !important;
  }
  body.pixel-replica .account-set-capsule {
    order: 1 !important;
    width: 210px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    gap: 9px !important;
    padding: 0 12px !important;
    border: 1px solid #cbd8e8 !important;
    border-radius: 4px !important;
    color: #20395e !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica .account-set-capsule > i:last-child { display: block !important; margin-left: auto !important; }
  body.pixel-replica .account-set-capsule > span { min-width: 0 !important; }
  body.pixel-replica .account-set-capsule small,
  body.pixel-replica .account-set-capsule em { display: none !important; }
  body.pixel-replica .account-set-capsule strong {
    overflow: hidden !important;
    display: block !important;
    max-width: 148px !important;
    color: #20395e !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .search {
    order: 2 !important;
    width: 330px !important;
    min-width: 330px !important;
    flex: 0 0 330px !important;
    height: 38px !important;
    display: flex !important;
    border: 1px solid #cbd8e8 !important;
    border-radius: 4px !important;
    color: #71809a !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica .search::after { right: 13px !important; color: #18335d !important; }
  body.pixel-replica .search input { height: 36px !important; padding: 0 42px 0 13px !important; font-size: 13px !important; }
  body.pixel-replica .search kbd { display: none !important; }
  body.pixel-replica .replica-date {
    order: 3 !important;
    display: flex !important;
    margin-left: auto !important;
    color: #132849 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  body.pixel-replica .replica-date i { display: none !important; }
  body.pixel-replica .topbar-icon-button {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    flex: 0 0 34px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    color: #17345e !important;
    background: transparent !important;
    font-size: 22px !important;
    cursor: pointer !important;
  }
  body.pixel-replica .topbar-notifications { order: 5 !important; }
  body.pixel-replica .topbar-help { order: 6 !important; }
  body.pixel-replica .topbar-notifications em {
    position: absolute !important;
    top: -3px !important;
    right: -2px !important;
    min-width: 20px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: #ee3737 !important;
    font-size: 10px !important;
    font-style: normal !important;
    line-height: 18px !important;
  }
  body.pixel-replica .avatar {
    order: 7 !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    flex: 0 0 36px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #0872e9 !important;
    font-size: 21px !important;
  }
  body.pixel-replica .replica-user-name { order: 8 !important; display: flex !important; color: #132849 !important; font-size: 13px !important; }
  body.pixel-replica .module-menu-toggle { display: none !important; }

  body.pixel-replica .open-task-strip {
    position: sticky !important;
    top: var(--replica-topbar-height) !important;
    z-index: 24 !important;
    width: 100% !important;
    height: var(--replica-taskbar-height) !important;
    min-height: var(--replica-taskbar-height) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 11px 22px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #cdd9e7 !important;
    background: #eef4fa !important;
  }
  body.pixel-replica .open-task-tabs { width: max-content !important; max-width: calc(100% - 54px) !important; height: 43px !important; flex: 0 1 auto !important; display: flex !important; gap: 2px !important; }
  body.pixel-replica .open-task-tab {
    height: 43px !important;
    min-width: 130px !important;
    max-width: 300px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #c9d6e6 !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    color: #24395a !important;
    background: #f4f7fb !important;
    box-shadow: none !important;
  }
  body.pixel-replica .open-task-tab.active {
    color: #0868e8 !important;
    background: #fff !important;
    box-shadow: inset 0 2px 0 #0874ff !important;
  }
  body.pixel-replica .open-task-main { height: 42px !important; padding: 0 14px 0 18px !important; color: inherit !important; font-size: 13px !important; font-weight: 600 !important; }
  body.pixel-replica .open-task-main > i { display: none !important; }
  body.pixel-replica .open-task-close { width: 28px !important; height: 42px !important; color: #263d5f !important; }
  body.pixel-replica .open-task-overflow { width: 52px !important; height: 43px !important; margin-left: 2px !important; border: 1px solid #c9d6e6 !important; border-bottom: 0 !important; border-radius: 4px 4px 0 0 !important; color: #17345e !important; background: #eaf0f7 !important; }

  body.pixel-replica .page-data-refresh {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    order: 4 !important;
    width: auto !important;
    min-width: 86px !important;
    flex: 0 0 auto !important;
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    gap: 7px !important;
    padding: 0 13px !important;
    border: 1px solid #5e9cff !important;
    border-radius: 4px !important;
    color: #0868e8 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  body.pixel-replica .page-data-refresh-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* Approved dashboard composition. */
  body.pixel-replica[data-module="dashboard"] #dashboard-page {
    width: 100% !important;
    min-height: calc(100vh - var(--replica-header-height)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px 24px 10px !important;
    background: var(--replica-canvas) !important;
  }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading { grid-row: 1 !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .hero { grid-row: 2 !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .stats-grid { grid-row: 3 !important; }
  body.pixel-replica #dashboard-page > .mobile-page-title { display: none !important; }
  body.pixel-replica .dashboard-page-heading {
    min-height: 41px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 0 0 2px 4px !important;
  }
  body.pixel-replica .dashboard-page-heading > div { display: flex !important; align-items: center !important; gap: 18px !important; }
  body.pixel-replica .dashboard-page-heading h2 { margin: 0 !important; color: #102a55 !important; font-size: 25px !important; font-weight: 750 !important; letter-spacing: -.02em !important; }
  body.pixel-replica .dashboard-page-heading span { color: #71809a !important; font-size: 12px !important; }
  body.pixel-replica .dashboard-page-heading span::before { content: ""; display: inline-block; height: 18px; margin-right: 16px; border-left: 1px solid #d7e1ed; vertical-align: middle; }
  body.pixel-replica .dashboard-page-heading > small { margin: 12px 0 0 !important; color: #71809a !important; font-size: 12px !important; }

  body.pixel-replica[data-module="dashboard"] .hero {
    width: max-content !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: -2px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--replica-line) !important;
    border-radius: 4px !important;
    color: var(--replica-ink) !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica[data-module="dashboard"] .hero::before,
  body.pixel-replica[data-module="dashboard"] .hero::after,
  body.pixel-replica[data-module="dashboard"] .health-ring { display: none !important; content: none !important; }
  body.pixel-replica .quick-business-card { width: auto !important; height: 40px !important; }
  body.pixel-replica .quick-business-grid { height: 40px !important; display: flex !important; gap: 0 !important; }
  body.pixel-replica .quick-business-grid > button {
    width: 130px !important;
    min-height: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 9px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-right: 1px solid var(--replica-line) !important;
    border-radius: 0 !important;
    color: #183763 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body.pixel-replica .quick-business-grid > button:last-child { border-right: 0 !important; }
  body.pixel-replica .quick-business-grid > button:hover { color: #0868e8 !important; background: #f2f7ff !important; transform: none !important; }
  body.pixel-replica .quick-business-grid i { color: currentColor !important; font-size: 19px !important; }
  body.pixel-replica .quick-business-grid strong { color: currentColor !important; font-size: 13px !important; font-weight: 500 !important; }

  body.pixel-replica[data-module="dashboard"] .stats-grid {
    width: 100% !important;
    min-height: 114px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 0 !important;
    padding: 16px 0 !important;
    border: 1px solid var(--replica-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: var(--replica-shadow) !important;
  }
  body.pixel-replica .stats-heading { display: none !important; }
  body.pixel-replica[data-module="dashboard"] .stat-card {
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 38px !important;
    border: 0 !important;
    border-right: 1px solid #dbe4ee !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica[data-module="dashboard"] .stat-card:last-child { border-right: 0 !important; }
  body.pixel-replica .stat-head span { color: #30466a !important; font-size: 12px !important; }
  body.pixel-replica[data-module="dashboard"] .stat-card > strong { margin: 8px 0 6px !important; color: #0868e8 !important; font-size: 26px !important; font-weight: 650 !important; line-height: 1 !important; letter-spacing: .01em !important; }
  body.pixel-replica[data-module="dashboard"] .stat-card.profit-card > strong { color: var(--replica-green) !important; }
  body.pixel-replica[data-module="dashboard"] .stat-card.receipt-card > strong { color: var(--replica-orange) !important; }
  body.pixel-replica[data-module="dashboard"] .stat-card p { display: flex !important; gap: 12px !important; margin: 0 !important; color: #405676 !important; font-size: 11px !important; white-space: nowrap !important; }
  body.pixel-replica[data-module="dashboard"] .stat-profit { color: var(--replica-green) !important; }

  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-flow-rail {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
    height: 105px !important;
    min-height: 105px !important;
    display: grid !important;
    grid-template-columns: repeat(7, auto) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 44px 32px 12px !important;
    border: 1px solid var(--replica-line) !important;
    border-radius: 6px 6px 0 0 !important;
    background: #fff !important;
    box-shadow: var(--replica-shadow) !important;
  }
  body.pixel-replica .dashboard-flow-rail .flow-title {
    position: absolute !important;
    top: 14px !important;
    left: 24px !important;
    display: block !important;
  }
  body.pixel-replica .dashboard-flow-rail .flow-title strong { color: #102a55 !important; font-size: 15px !important; }
  body.pixel-replica .dashboard-flow-rail button { min-width: 120px !important; display: flex !important; justify-content: flex-start !important; gap: 12px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  body.pixel-replica .dashboard-flow-rail button > i { width: 34px !important; height: 34px !important; display: grid !important; flex: 0 0 34px !important; place-items: center !important; border: 1px solid #7ca9ef !important; border-radius: 50% !important; color: #0868e8 !important; background: #f4f8ff !important; font-size: 18px !important; }
  body.pixel-replica .dashboard-flow-rail button:nth-of-type(3) > i { border-color: #ff9b44 !important; color: #ff7200 !important; }
  body.pixel-replica .dashboard-flow-rail button:nth-of-type(4) > i { border-color: #46b990 !important; color: #07965d !important; }
  body.pixel-replica .dashboard-flow-rail button span { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  body.pixel-replica .dashboard-flow-rail button strong { color: #30466a !important; font-size: 12px !important; font-weight: 500 !important; }
  body.pixel-replica .dashboard-flow-rail button small { margin-top: 2px !important; color: #132849 !important; font-size: 20px !important; font-weight: 650 !important; }
  body.pixel-replica .dashboard-flow-rail .flow-arrow { color: #aebed2 !important; font-size: 26px !important; }

  body.pixel-replica[data-module="dashboard"] #dashboard-page > .content-grid { display: contents !important; }
  body.pixel-replica[data-module="dashboard"] .content-grid > .replenishment-panel {
    grid-column: 1 !important;
    grid-row: 5 !important;
    min-height: 226px !important;
    height: 226px !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: -12px !important;
    overflow: hidden !important;
  }
  body.pixel-replica[data-module="dashboard"] .content-grid > .right-column { grid-column: 2 !important; grid-row: 4 / span 2 !important; min-height: 343px !important; height: 343px !important; }
  body.pixel-replica[data-module="dashboard"] .content-grid > .panel,
  body.pixel-replica[data-module="dashboard"] .todo-panel {
    min-height: 226px !important;
    padding: 0 16px 14px !important;
    border: 1px solid var(--replica-line) !important;
    border-radius: 0 0 6px 6px !important;
    background: #fff !important;
    box-shadow: var(--replica-shadow) !important;
  }
  body.pixel-replica[data-module="dashboard"] .right-column { display: block !important; }
  body.pixel-replica[data-module="dashboard"] .right-column .todo-panel { height: 100% !important; border-radius: 6px !important; }
  body.pixel-replica[data-module="dashboard"] .panel-heading { min-height: 44px !important; padding: 0 4px !important; }
  body.pixel-replica[data-module="dashboard"] .panel-heading h3 { margin: 0 !important; color: #102a55 !important; font-size: 14px !important; }
  body.pixel-replica .replenishment-panel .table-wrap {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    border: 1px solid #dde6f0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }
  body.pixel-replica .replenishment-panel table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; }
  body.pixel-replica .replenishment-panel th,
  body.pixel-replica .replenishment-panel td { height: 27px !important; padding: 3px 10px !important; border-right: 1px solid #e2e9f2 !important; border-bottom: 1px solid #e2e9f2 !important; color: #244269 !important; font-size: 11px !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body.pixel-replica .replenishment-panel th { color: #17345e !important; background: #f4f7fb !important; font-weight: 650 !important; }
  body.pixel-replica .replenishment-panel th:last-child,
  body.pixel-replica .replenishment-panel td:last-child { border-right: 0 !important; }
  body.pixel-replica .dashboard-record-link { width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; color: #173f7a !important; background: transparent !important; font: inherit !important; }
  body.pixel-replica .dashboard-document-status { color: var(--replica-green) !important; background: transparent !important; }
  body.pixel-replica .dashboard-panel-more { min-height: 28px !important; display: flex !important; flex: 0 0 auto !important; justify-content: center !important; margin: 2px auto 0 !important; border: 0 !important; color: #0868e8 !important; background: transparent !important; font-size: 11px !important; }
  body.pixel-replica .todo-list { display: grid !important; gap: 5px !important; }
  body.pixel-replica .todo-item {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) 42px 18px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 4px !important;
    color: #17345e !important;
    background: #fff !important;
  }
  body.pixel-replica .todo-item > i:first-child { width: 22px !important; height: 22px !important; display: grid !important; place-items: center !important; color: #244a82 !important; background: transparent !important; font-size: 19px !important; }
  body.pixel-replica .todo-item span strong { display: inline !important; color: #17345e !important; font-size: 12px !important; }
  body.pixel-replica .todo-item span small { display: inline !important; margin-left: 28px !important; color: #7888a0 !important; font-size: 10px !important; }
  body.pixel-replica .todo-item em { color: #0868e8 !important; background: transparent !important; font-size: 18px !important; font-style: normal !important; text-align: right !important; }
  body.pixel-replica .todo-item.is-warning em { color: var(--replica-orange) !important; }
  body.pixel-replica .todo-item.is-danger em { color: var(--replica-red) !important; }
  body.pixel-replica .todo-item > i:last-child { color: #17345e !important; }
  body.pixel-replica .todo-panel .count-pill { display: none !important; }

  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-bottom-grid { grid-column: 1 / -1 !important; grid-row: 6 !important; min-height: 206px !important; height: 206px !important; display: grid !important; grid-template-columns: 1.27fr 1fr !important; gap: 12px !important; transform: translateY(-6px) !important; }
  body.pixel-replica .dashboard-bottom-grid > .panel { min-height: 206px !important; padding: 0 16px 12px !important; border: 1px solid var(--replica-line) !important; border-radius: 6px !important; background: #fff !important; box-shadow: var(--replica-shadow) !important; }
  body.pixel-replica .dashboard-exception-panel .table-wrap { border: 1px solid #dde6f0 !important; overflow: hidden !important; }
  body.pixel-replica .dashboard-exception-panel table { width: 100% !important; border-collapse: collapse !important; }
  body.pixel-replica .dashboard-exception-panel th,
  body.pixel-replica .dashboard-exception-panel td { height: 28px !important; padding: 4px 10px !important; border-right: 1px solid #e2e9f2 !important; border-bottom: 1px solid #e2e9f2 !important; color: #244269 !important; font-size: 11px !important; text-align: left !important; }
  body.pixel-replica .dashboard-exception-panel th { background: #f4f7fb !important; }
  body.pixel-replica .dashboard-exception-panel .exception-quantity { color: var(--replica-orange) !important; }
  body.pixel-replica .dashboard-exception-panel .exception-reason { color: var(--replica-red) !important; }
  body.pixel-replica .dashboard-sync-list { border: 1px solid #dde6f0 !important; }
  body.pixel-replica .dashboard-sync-list button { width: 100% !important; min-height: 34px !important; display: grid !important; grid-template-columns: 24px minmax(120px,1fr) 62px minmax(130px,1fr) 62px !important; align-items: center !important; gap: 6px !important; padding: 0 10px !important; border: 0 !important; border-bottom: 1px solid #e2e9f2 !important; color: #244269 !important; background: #fff !important; text-align: left !important; }
  body.pixel-replica .dashboard-sync-list button:last-child { border-bottom: 0 !important; }
  body.pixel-replica .dashboard-sync-list i { color: #345584 !important; font-size: 17px !important; }
  body.pixel-replica .dashboard-sync-list strong { font-size: 12px !important; }
  body.pixel-replica .dashboard-sync-list em { color: var(--replica-green) !important; font-size: 11px !important; font-style: normal !important; }
  body.pixel-replica .dashboard-sync-list small { color: #71809a !important; font-size: 10px !important; }
  body.pixel-replica .dashboard-sync-list span { color: #0868e8 !important; font-size: 10px !important; text-align: right !important; }

  /* Shared page family: every menu inherits the approved compact ERP language. */
  body.pixel-replica .module-page { min-height: calc(100vh - var(--replica-header-height)) !important; padding: 18px 24px 28px !important; background: var(--replica-canvas) !important; }
  body.pixel-replica .module-banner {
    min-height: 54px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin: 0 0 10px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--replica-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.pixel-replica.list-workspace .module-banner {
    height: auto !important;
    min-height: 54px !important;
    padding: 0 4px !important;
  }
  body.pixel-replica.list-workspace .module-banner > div { display: block !important; }
  body.pixel-replica .module-banner #module-action,
  body.pixel-replica.list-workspace #module-action {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: auto !important;
    min-width: 92px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }
  body.pixel-replica .module-banner[hidden],
  body.pixel-replica .module-summary[hidden] { display: none !important; }
  body.pixel-replica .module-banner::before,
  body.pixel-replica .module-banner::after { display: none !important; content: none !important; }
  body.pixel-replica .module-banner p { display: none !important; }
  body.pixel-replica .module-banner h2 { margin: 0 0 5px !important; color: #102a55 !important; font-size: 24px !important; font-weight: 750 !important; letter-spacing: -.02em !important; }
  body.pixel-replica .module-banner span { color: #71809a !important; font-size: 12px !important; }
  body.pixel-replica .primary-module-button,
  body.pixel-replica .primary-button,
  body.pixel-replica .toolbar-primary,
  body.pixel-replica button.primary {
    min-height: 36px !important;
    padding: 0 15px !important;
    border: 1px solid #0872e9 !important;
    border-radius: 4px !important;
    color: #fff !important;
    background: #0872e9 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }
  body.pixel-replica .module-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 1px solid var(--replica-line) !important;
    border-radius: 5px !important;
    background: #fff !important;
    box-shadow: var(--replica-shadow) !important;
  }
  body.pixel-replica .module-summary > * { min-height: 78px !important; margin: 0 !important; padding: 15px 20px !important; border: 0 !important; border-right: 1px solid var(--replica-line-soft) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
  body.pixel-replica .module-summary > *:last-child { border-right: 0 !important; }

  body.pixel-replica :is(
    .business-workspace,.panel,.approval-center-panel,.employee-management-panel,
    .supplier-price-book-panel,.customer-price-book-panel,.partner-unit-sku-panel,
    .purchase-query-panel,.purchase-expense-panel,.inventory-expense-panel,
    .fixed-asset-panel,.stock-count-editor,.stock-count-records-panel,
    .replenishment-reference-panel,.purchase-analysis-panel,.purchase-detail-reference-panel,
    .purchase-inbound-editor,.opening-books-panel,.account-set-panel,.migration-review-panel,
    .lifecycle-workflow-panel,.guanjia-open-api-panel,.kuailv-pairing-panel,.open-platform-panel
  ) {
    border-color: var(--replica-line) !important;
    border-radius: 6px !important;
    color: var(--replica-ink) !important;
    background-color: #fff !important;
    box-shadow: var(--replica-shadow) !important;
  }
  body.pixel-replica .workspace-toolbar,
  body.pixel-replica :is(.approval-center-head,.employee-management-head,.supplier-price-book-head,.purchase-query-head,.purchase-analysis-head,.purchase-detail-reference-head,.account-set-panel-head) {
    min-height: 52px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--replica-line) !important;
    color: var(--replica-ink) !important;
    background: #fff !important;
  }
  /* Generic list tabs live in the task strip and their actions live in the query row.
     Keep that toolbar structurally available, but never reserve an empty white row. */
  body.pixel-replica.list-workspace .workspace-toolbar {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.pixel-replica .workspace-toolbar[hidden] { display: none !important; }
  body.pixel-replica .query-bar,
  body.pixel-replica :is(.purchase-query-filters,.purchase-analysis-filters,.purchase-detail-reference-filters) {
    min-height: 50px !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--replica-line) !important;
    background: #f7f9fc !important;
  }
  body.pixel-replica :is(input,select,textarea) {
    border-color: #c8d5e5 !important;
    border-radius: 4px !important;
    color: #20395e !important;
    background-color: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica :is(input,select,textarea):focus {
    border-color: #5a98f4 !important;
    outline: 2px solid rgba(8, 104, 232, .13) !important;
    outline-offset: 0 !important;
  }
  body.pixel-replica .business-table-wrap { border: 0 !important; background: #fff !important; }
  body.pixel-replica .business-table { border-collapse: collapse !important; }
  body.pixel-replica .business-table th,
  body.pixel-replica .business-table td { height: 38px !important; padding: 7px 12px !important; border-right: 1px solid #e2e9f2 !important; border-bottom: 1px solid #e2e9f2 !important; color: #244269 !important; font-size: 12px !important; }
  body.pixel-replica .business-table th { color: #17345e !important; background: #f2f6fa !important; font-weight: 650 !important; }
  body.pixel-replica .business-table tbody tr:hover { background: #f5f9ff !important; }
  body.pixel-replica .table-footer { min-height: 48px !important; border-top: 1px solid var(--replica-line) !important; background: #fff !important; }

  body.pixel-replica :is(dialog,.modal,.drawer,.form-mask > form) {
    border-radius: 6px !important;
    color: var(--replica-ink) !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(16, 42, 85, .22) !important;
  }
  body.pixel-replica :is(
    .customer-price-modal,.replenishment-strategy-modal,.inventory-expense-modal,
    .account-set-form-mask,.barcode-label-modal,.unified-print-modal
  ) > :is(form,section),
  body.pixel-replica :is(.fixed-asset-drawer-form,.business-drawer,.detail-dialog) {
    border: 1px solid var(--replica-line) !important;
    border-radius: 6px !important;
    color: var(--replica-ink) !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(16, 42, 85, .22) !important;
  }
  body.pixel-replica :is(
    .customer-price-modal,.replenishment-strategy-modal,.inventory-expense-modal,
    .account-set-form-mask,.barcode-label-modal,.unified-print-modal
  ) > :is(form,section) > :is(header,footer),
  body.pixel-replica :is(.fixed-asset-drawer-form,.business-drawer,.detail-dialog) > :is(header,footer) {
    min-height: 54px !important;
    border-color: var(--replica-line) !important;
    color: var(--replica-ink) !important;
    background: #fff !important;
  }
  body.pixel-replica :is(
    .approval-view-list,.employee-department-tree,.purchase-detail-category-tree,
    .purchase-analysis-category-tree,.replenishment-category-tree
  ) {
    border-color: var(--replica-line) !important;
    color: var(--replica-ink) !important;
    background: #f7f9fc !important;
    box-shadow: none !important;
  }
  /* v209 has a 66px command row plus a 54px task strip. Dedicated ERP workbenches
     own the remaining viewport and scroll internally; legacy 35/46/112px offsets
     must not leave their lower edge behind the viewport. */
  body.pixel-replica[data-module] #module-page:has(> :is(
    .employee-management-panel,.supplier-price-book-panel,.customer-price-book-panel,
    .partner-unit-sku-panel,.purchase-query-panel,.purchase-expense-panel,
    .inventory-expense-panel,.fixed-asset-panel,.stock-count-editor,
    .stock-count-records-panel,.purchase-inbound-editor,.opening-books-panel,
    .approval-center-panel,.replenishment-reference-panel,.purchase-analysis-panel,
    .purchase-detail-reference-panel
  ):not([hidden])) {
    height: calc(100vh - var(--replica-header-height)) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.pixel-replica[data-module] #module-page:has(> :is(
    .employee-management-panel,.supplier-price-book-panel,.customer-price-book-panel,
    .partner-unit-sku-panel,.purchase-query-panel,.purchase-expense-panel,
    .inventory-expense-panel,.fixed-asset-panel,.stock-count-editor,
    .stock-count-records-panel,.purchase-inbound-editor,.opening-books-panel,
    .approval-center-panel,.replenishment-reference-panel,.purchase-analysis-panel,
    .purchase-detail-reference-panel
  ):not([hidden])) > :is(.module-banner,.module-summary,.module-flow-rail,.business-workspace) {
    display: none !important;
  }
  body.pixel-replica[data-module] #module-page > :is(
    .employee-management-panel,.supplier-price-book-panel,.customer-price-book-panel,
    .partner-unit-sku-panel,.purchase-query-panel,.purchase-expense-panel,
    .inventory-expense-panel,.fixed-asset-panel,.stock-count-editor,
    .stock-count-records-panel,.purchase-inbound-editor,.opening-books-panel,
    .approval-center-panel,.replenishment-reference-panel,.purchase-analysis-panel,
    .purchase-detail-reference-panel
  ):not([hidden]) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* v223 navigation contract: every secondary menu uses the same hierarchy in
   both the desktop inline host and the responsive independent host. */
body.pixel-replica #sub-menu .sub-group-title {
  display: none !important;
}
body.pixel-replica #sub-menu .sub-group {
  margin: 0 !important;
  padding: 0 !important;
}
body.pixel-replica .all-functions-group h4 {
  display: none !important;
}
body.pixel-replica .all-functions-group + .all-functions-group {
  margin-top: 8px !important;
}
body.pixel-replica .nav-item.active .nav-icon,
body.pixel-replica .nav-item[aria-current="page"] .nav-icon {
  color: currentColor !important;
  opacity: 1 !important;
}

/* The HTML hidden contract always wins over legacy component display rules. */
body.pixel-replica [hidden] { display: none !important; }

/* Keep feedback visually inside the approved light enterprise shell. */
body.pixel-replica .toast {
  right: 24px !important;
  bottom: 24px !important;
  max-width: min(420px,calc(100vw - 32px)) !important;
  padding: 11px 16px 11px 42px !important;
  border: 1px solid #bfd3ff !important;
  border-radius: 6px !important;
  color: #163568 !important;
  background: #f5f9ff !important;
  box-shadow: 0 8px 24px rgba(37,83,155,.14) !important;
}
body.pixel-replica .toast::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #fff;
  background: #1677ff;
  font-size: 11px;
  font-weight: 700;
}
body.pixel-replica .toast[data-tone="success"] { border-color: #b8e4d1 !important; color: #126343 !important; background: #f1fbf6 !important; }
body.pixel-replica .toast[data-tone="success"]::before { content: "✓"; background: #0aa36c; }
body.pixel-replica .toast[data-tone="warning"] { border-color: #ffd8a8 !important; color: #8a4b00 !important; background: #fff9ef !important; }
body.pixel-replica .toast[data-tone="warning"]::before { content: "!"; background: #f58b19; }
body.pixel-replica .toast[data-tone="error"] { border-color: #ffc5c5 !important; color: #9f2323 !important; background: #fff5f5 !important; }
body.pixel-replica .toast[data-tone="error"]::before { content: "×"; background: #df3f45; }

@media (max-width: 1180px) and (min-width: 901px) {
  :root { --replica-sidebar-width: 216px; }
  body.pixel-replica {
    --replica-nav-inline-start: 14px;
    --replica-nav-gap: 12px;
  }
  body.pixel-replica .brand { padding-left: 22px !important; }
  body.pixel-replica .nav-item { padding-left: 14px !important; gap: 12px !important; }
  body.pixel-replica .top-actions { gap: 8px !important; }
  body.pixel-replica .account-set-capsule { width: 190px !important; }
  body.pixel-replica .top-actions .search { width: 220px !important; min-width: 0 !important; flex-basis: 220px !important; }
  body.pixel-replica .replica-date,
  body.pixel-replica .replica-user-name { display: none !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page { grid-template-columns: minmax(0,1fr) !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-flow-rail,
  body.pixel-replica[data-module="dashboard"] .content-grid > .replenishment-panel,
  body.pixel-replica[data-module="dashboard"] .content-grid > .right-column,
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-bottom-grid { grid-column: 1 !important; }
  body.pixel-replica[data-module="dashboard"] .content-grid > .right-column { grid-row: 6 !important; height: auto !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-bottom-grid { grid-row: 7 !important; grid-template-columns: minmax(0,1fr) !important; height: auto !important; transform: none !important; }
  body.pixel-replica .dashboard-flow-rail { gap: 10px !important; padding-right: 18px !important; padding-left: 18px !important; }
  body.pixel-replica .dashboard-flow-rail button { min-width: 105px !important; }
  body.pixel-replica .stat-card { padding-right: 22px !important; padding-left: 22px !important; }
}

@media (max-width: 900px) {
  body.pixel-replica .module-banner[hidden],
  body.pixel-replica .module-summary[hidden] { display: none !important; }
  body.pixel-replica #sub-sidebar .sub-item,
  body.pixel-replica #sub-sidebar .sub-item:hover {
    min-height: var(--replica-mobile-submenu-row-height) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: var(--replica-mobile-submenu-font-size) !important;
    font-weight: var(--replica-submenu-font-weight) !important;
    line-height: var(--replica-submenu-line-height) !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item.active {
    font-size: var(--replica-mobile-submenu-active-font-size) !important;
    font-weight: var(--replica-submenu-active-font-weight) !important;
  }
  body.pixel-replica .page-data-refresh {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body.pixel-replica .page-data-refresh span { display: none !important; }
}

/* v229: every route state shares one immutable secondary-menu geometry.
   Active state changes weight/color only; it never changes position or size. */
@media (min-width: 901px) {
  body.pixel-replica .nav > #sub-menu.nav-inline-submenu,
  body.pixel-replica.list-workspace .nav > #sub-menu.nav-inline-submenu,
  body.pixel-replica.module-menu-open .nav > #sub-menu.nav-inline-submenu,
  body.pixel-replica.list-workspace.module-menu-open .nav > #sub-menu.nav-inline-submenu {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 0 6px !important;
    padding: 2px 0 4px !important;
    overflow: visible !important;
  }
  body.pixel-replica .nav > #sub-menu.nav-inline-submenu .sub-group {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  body.pixel-replica .nav #sub-menu .sub-item,
  body.pixel-replica.list-workspace .nav #sub-menu .sub-item,
  body.pixel-replica.module-menu-open .nav #sub-menu .sub-item,
  body.pixel-replica.list-workspace.module-menu-open .nav #sub-menu .sub-item,
  body.pixel-replica[data-module] .nav #sub-menu .sub-item,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item {
    width: calc(100% - var(--replica-submenu-indent)) !important;
    margin-right: 0 !important;
    margin-left: var(--replica-submenu-indent) !important;
    height: auto !important;
    min-height: var(--replica-submenu-row-height) !important;
    flex: 0 0 auto !important;
    gap: var(--replica-nav-gap) !important;
    padding: 5px var(--replica-submenu-inline-end) 5px var(--replica-nav-inline-start) !important;
    border-radius: 6px !important;
    font-size: var(--replica-submenu-font-size) !important;
    font-weight: var(--replica-submenu-font-weight) !important;
    line-height: var(--replica-submenu-line-height) !important;
  }
  body.pixel-replica .nav #sub-menu .sub-item:hover,
  body.pixel-replica .nav #sub-menu .sub-item:focus-visible,
  body.pixel-replica.list-workspace .nav #sub-menu .sub-item:hover,
  body.pixel-replica.list-workspace .nav #sub-menu .sub-item:focus-visible,
  body.pixel-replica.module-menu-open .nav #sub-menu .sub-item:hover,
  body.pixel-replica.module-menu-open .nav #sub-menu .sub-item:focus-visible,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item:hover,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item:focus-visible {
    font-size: var(--replica-submenu-font-size) !important;
    font-weight: var(--replica-submenu-font-weight) !important;
  }
  body.pixel-replica .nav #sub-menu .sub-item.active,
  body.pixel-replica.list-workspace .nav #sub-menu .sub-item.active,
  body.pixel-replica.module-menu-open .nav #sub-menu .sub-item.active,
  body.pixel-replica.list-workspace.module-menu-open .nav #sub-menu .sub-item.active,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item.active {
    font-size: var(--replica-submenu-active-font-size) !important;
    font-weight: var(--replica-submenu-active-font-weight) !important;
  }
}
body.pixel-replica #sub-menu .sub-item-label {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v230: one touch-first H5 contract for every real module.
   This block intentionally comes last so route-specific legacy mobile rules
   cannot move the shell, enlarge cards, or squeeze tables into vertical text. */
@media (max-width: 900px) {
  :root {
    --mobile-module-rail-height: 48px;
    --mobile-bottom-rail-height: 64px;
    --mobile-page-gutter: 12px;
    --mobile-control-height: 44px;
  }

  html,
  body.pixel-replica {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  body.pixel-replica {
    padding: 0 0 calc(var(--mobile-bottom-rail-height) + env(safe-area-inset-bottom)) !important;
    color: var(--replica-ink) !important;
    background: #f4f7fb !important;
    font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif !important;
  }
  body.pixel-replica *,
  body.pixel-replica *::before,
  body.pixel-replica *::after { box-sizing: border-box !important; }

  /* The secondary rail is the phone's module switcher. */
  body.pixel-replica .sub-sidebar,
  body.pixel-replica .app-shell.sub-collapsed .sub-sidebar,
  body.pixel-replica.module-menu-open .sub-sidebar,
  body.pixel-replica.list-workspace.module-menu-open .sub-sidebar,
  body.pixel-replica[data-module] #sub-sidebar,
  body.pixel-replica[data-module].list-workspace #sub-sidebar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    height: calc(var(--mobile-module-rail-height) + env(safe-area-inset-top)) !important;
    min-height: calc(var(--mobile-module-rail-height) + env(safe-area-inset-top)) !important;
    display: block !important;
    padding-top: env(safe-area-inset-top) !important;
    border: 0 !important;
    border-bottom: 1px solid #dce5f0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 2px 8px rgba(29,55,91,.05) !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body.pixel-replica .sub-sidebar-head,
  body.pixel-replica .sub-collapse,
  body.pixel-replica #sub-menu .sub-group-title { display: none !important; }
  body.pixel-replica #sub-menu,
  body.pixel-replica .app-shell.sub-collapsed #sub-menu,
  body.pixel-replica.module-menu-open #sub-menu,
  body.pixel-replica.list-workspace.module-menu-open #sub-menu {
    width: 100% !important;
    height: var(--mobile-module-rail-height) !important;
    min-height: var(--mobile-module-rail-height) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
  }
  body.pixel-replica #sub-menu::-webkit-scrollbar { display: none !important; }
  body.pixel-replica #sub-menu .sub-group {
    width: max-content !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item:hover,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item:focus-visible,
  body.pixel-replica #sub-sidebar #sub-menu .sub-item.active {
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: max-content !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #61718a !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item.active {
    color: var(--replica-blue) !important;
    background: #edf3ff !important;
    font-weight: 700 !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item:focus-visible {
    outline: 2px solid #87b5ff !important;
    outline-offset: -2px !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item-content {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item-label {
    overflow: visible !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  body.pixel-replica #sub-sidebar #sub-menu .sub-item-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 17px !important;
  }

  /* Compact utility row: account, search, refresh and notifications all fit. */
  body.pixel-replica .main,
  body.pixel-replica .app-shell.sub-collapsed .main,
  body.pixel-replica.list-workspace .main,
  body.pixel-replica[data-module] .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - var(--mobile-module-rail-height)) !important;
    margin: calc(var(--mobile-module-rail-height) + env(safe-area-inset-top)) 0 0 !important;
    overflow: visible !important;
  }
  body.pixel-replica .topbar,
  body.pixel-replica.list-workspace .topbar,
  body.pixel-replica[data-module] .topbar {
    position: relative !important;
    inset: auto !important;
    z-index: 30 !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #dfe7f1 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.pixel-replica .topbar > div:first-child,
  body.pixel-replica.list-workspace .topbar > div:first-child,
  body.pixel-replica[data-module] .topbar > div:first-child { display: none !important; }
  body.pixel-replica .top-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body.pixel-replica .account-set-capsule {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 9px !important;
    background: #fff !important;
  }
  body.pixel-replica .account-set-capsule > i:first-child {
    flex: 0 0 auto !important;
    font-size: 19px !important;
  }
  body.pixel-replica .account-set-capsule > i:last-child,
  body.pixel-replica .account-set-capsule small,
  body.pixel-replica .account-set-capsule em { display: none !important; }
  body.pixel-replica .account-set-capsule strong {
    overflow: hidden !important;
    display: block !important;
    color: #263a58 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .top-actions .search {
    width: auto !important;
    min-width: 0 !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    display: flex !important;
    flex: 1 1 auto !important;
    padding: 0 10px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 9px !important;
    background: #f7f9fc !important;
  }
  body.pixel-replica .top-actions .search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #243957 !important;
    background: transparent !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }
  body.pixel-replica .top-actions .search kbd,
  body.pixel-replica .replica-date,
  body.pixel-replica .replica-user-name,
  body.pixel-replica .topbar-help,
  body.pixel-replica #user-menu { display: none !important; }
  body.pixel-replica .page-data-refresh,
  body.pixel-replica .topbar-notifications {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: var(--mobile-control-height) !important;
    min-width: var(--mobile-control-height) !important;
    max-width: var(--mobile-control-height) !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    display: grid !important;
    flex: 0 0 var(--mobile-control-height) !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 9px !important;
    color: #37506f !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica .page-data-refresh span { display: none !important; }
  body.pixel-replica .page-data-refresh-status { position: absolute !important; }
  body.pixel-replica .open-task-strip { display: none !important; }

  /* Fixed bottom rail with five predictable destinations. */
  body.pixel-replica .sidebar,
  body.pixel-replica.list-workspace .sidebar,
  body.pixel-replica[data-module] .sidebar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 90 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(var(--mobile-bottom-rail-height) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--mobile-bottom-rail-height) + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    background: #10213c !important;
    box-shadow: 0 -6px 20px rgba(15,32,58,.14) !important;
    overflow: hidden !important;
  }
  body.pixel-replica .sidebar .brand,
  body.pixel-replica .sidebar-footer { display: none !important; }
  body.pixel-replica .nav {
    width: 100% !important;
    height: var(--mobile-bottom-rail-height) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    overflow: hidden !important;
  }
  body.pixel-replica .nav-item:is([data-page="products"],[data-page="purchase"],[data-page="sales"],[data-page="finance"],[data-page="apps"]) { display: none !important; }
  body.pixel-replica .nav-item:is([data-page="dashboard"],[data-page="reports"],[data-page="inventory"],[data-page="settings"]),
  body.pixel-replica .mobile-all-functions-trigger {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 76px !important;
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    flex: 1 1 20% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #c7d4e8 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  body.pixel-replica .nav-item:is([data-page="dashboard"],[data-page="reports"],[data-page="inventory"],[data-page="settings"]).active,
  body.pixel-replica .mobile-all-functions-trigger[aria-expanded="true"] {
    color: #fff !important;
    background: #19335d !important;
  }
  body.pixel-replica .nav-item.active::before { display: none !important; }
  body.pixel-replica .nav-item:is([data-page="dashboard"],[data-page="reports"],[data-page="inventory"],[data-page="settings"]) > span:not(.mobile-nav-label) { display: none !important; }
  body.pixel-replica .mobile-nav-label { display: inline !important; }
  body.pixel-replica .nav-icon,
  body.pixel-replica .mobile-all-functions-trigger .nav-icon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: inherit !important;
    font-size: 21px !important;
  }
  body.pixel-replica .nav-item em {
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    min-width: 18px !important;
    margin: 0 0 0 6px !important;
    padding: 1px 5px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
    line-height: 16px !important;
  }

  /* Dashboard: dense shortcuts, readable metrics, independently scrollable data. */
  body.pixel-replica #dashboard-page > .mobile-page-title { display: none !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page {
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px var(--mobile-page-gutter) 18px !important;
    background: #f4f7fb !important;
  }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > * {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading {
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 2px !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading > div {
    min-width: 0 !important;
    display: block !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading h2 {
    margin: 0 0 4px !important;
    color: #102847 !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading span {
    color: #697992 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading span::before { display: none !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading > small {
    flex: 0 0 auto !important;
    margin: 5px 0 0 !important;
    color: #7b899e !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  body.pixel-replica[data-module="dashboard"] .hero {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-x: auto !important;
  }
  body.pixel-replica[data-module="dashboard"] .hero::before,
  body.pixel-replica[data-module="dashboard"] .hero::after,
  body.pixel-replica[data-module="dashboard"] .health-ring { display: none !important; }
  body.pixel-replica[data-module="dashboard"] .quick-business-card,
  body.pixel-replica[data-module="dashboard"] .quick-business-grid {
    width: max-content !important;
    min-width: 100% !important;
    height: auto !important;
  }
  body.pixel-replica[data-module="dashboard"] .quick-business-grid {
    display: flex !important;
    gap: 2px !important;
  }
  body.pixel-replica[data-module="dashboard"] .quick-business-grid > button {
    width: 74px !important;
    min-width: 74px !important;
    height: 58px !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #24476f !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.pixel-replica[data-module="dashboard"] .quick-business-grid > button:active { background: #edf3ff !important; }
  body.pixel-replica[data-module="dashboard"] .quick-business-grid i {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--replica-blue) !important;
    font-size: 20px !important;
  }
  body.pixel-replica[data-module="dashboard"] .quick-business-grid strong { font-size: 12px !important; font-weight: 600 !important; }
  body.pixel-replica[data-module="dashboard"] .stats-grid {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.pixel-replica[data-module="dashboard"] .stat-card {
    min-width: 0 !important;
    min-height: 102px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 14px !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.pixel-replica[data-module="dashboard"] .stat-card .stat-head {
    width: 100% !important;
    display: block !important;
  }
  body.pixel-replica[data-module="dashboard"] .stat-card .stat-head span {
    display: block !important;
    color: #61718a !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  body.pixel-replica[data-module="dashboard"] .stat-card > strong {
    overflow: hidden !important;
    margin: 7px 0 5px !important;
    color: #102847 !important;
    font-size: clamp(20px,6vw,26px) !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica[data-module="dashboard"] .stat-card p {
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    color: #748197 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail {
    min-height: 70px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-x: auto !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail .flow-title,
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail .flow-arrow { display: none !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail button {
    min-width: 104px !important;
    min-height: 52px !important;
    flex: 0 0 104px !important;
    gap: 7px !important;
    padding: 4px 6px !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail button > i {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    font-size: 16px !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail button strong { font-size: 11px !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-flow-rail button small { font-size: 16px !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .content-grid { display: block !important; }
  body.pixel-replica[data-module="dashboard"] .content-grid > .replenishment-panel,
  body.pixel-replica[data-module="dashboard"] .content-grid > .right-column,
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-bottom-grid {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.pixel-replica[data-module="dashboard"] .content-grid > .right-column { margin-top: 12px !important; }
  body.pixel-replica[data-module="dashboard"] #dashboard-page > .dashboard-bottom-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
  }
  body.pixel-replica[data-module="dashboard"] :is(.content-grid > .panel,.todo-panel,.dashboard-bottom-grid > .panel) {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 12px 12px !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.pixel-replica[data-module="dashboard"] .panel-heading {
    min-height: 48px !important;
    padding: 0 2px !important;
  }
  body.pixel-replica[data-module="dashboard"] .panel-heading h3 { font-size: 15px !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-panel-more {
    min-height: 44px !important;
    margin: 4px auto 0 !important;
    font-size: 13px !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-sync-list button {
    min-height: 52px !important;
    grid-template-columns: 24px minmax(0,1fr) auto !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }
  body.pixel-replica[data-module="dashboard"] .dashboard-sync-list small,
  body.pixel-replica[data-module="dashboard"] .dashboard-sync-list span { display: none !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-sync-list strong { font-size: 13px !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-sync-list em { font-size: 12px !important; }

  /* Shared module composition: title is compact, metrics scroll instead of ballooning. */
  body.pixel-replica .module-page,
  body.pixel-replica.list-workspace .module-page,
  body.pixel-replica[data-module] .module-page {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px var(--mobile-page-gutter) 18px !important;
    background: #f4f7fb !important;
    overflow: visible !important;
  }
  body.pixel-replica .module-banner,
  body.pixel-replica.list-workspace .module-banner,
  body.pixel-replica[data-module] .module-banner {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 10px !important;
    padding: 13px 14px !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 12px !important;
    color: var(--replica-ink) !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.pixel-replica .module-banner[hidden],
  body.pixel-replica .module-summary[hidden] { display: none !important; }
  body.pixel-replica .module-banner > div { min-width: 0 !important; display: block !important; }
  body.pixel-replica .module-banner p { display: none !important; }
  body.pixel-replica .module-banner h2 {
    overflow: hidden !important;
    margin: 0 0 3px !important;
    color: #102847 !important;
    font-size: 19px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .module-banner span {
    overflow: hidden !important;
    display: block !important;
    max-width: 62vw !important;
    color: #71809a !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .module-banner #module-action,
  body.pixel-replica .module-banner .primary-module-button {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 76px !important;
    max-width: 42% !important;
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .module-summary,
  body.pixel-replica.list-workspace .module-summary,
  body.pixel-replica[data-module] .module-summary {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 0 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }
  body.pixel-replica .module-summary > * {
    width: 152px !important;
    min-width: 152px !important;
    min-height: 78px !important;
    flex: 0 0 152px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
    scroll-snap-align: start !important;
  }
  body.pixel-replica .module-summary :is(strong,b) {
    overflow: hidden !important;
    display: block !important;
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .module-flow-rail,
  body.pixel-replica .business-flow-rail.module-flow-rail {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    display: flex !important;
    gap: 4px !important;
    margin: 0 0 10px !important;
    padding: 7px !important;
    border: 1px solid #e0e7f0 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow-x: auto !important;
  }
  body.pixel-replica .module-flow-rail[hidden] { display: none !important; }
  body.pixel-replica .module-flow-rail button {
    min-width: 126px !important;
    min-height: 50px !important;
    flex: 0 0 126px !important;
    padding: 5px 8px !important;
  }
  body.pixel-replica .module-flow-rail .flow-arrow { display: none !important; }

  /* Workspaces, tabs, filters and form controls share the same mobile rhythm. */
  body.pixel-replica :is(
    .business-workspace,.panel,.approval-center-panel,.employee-management-panel,
    .supplier-price-book-panel,.customer-price-book-panel,.partner-unit-sku-panel,
    .purchase-query-panel,.purchase-expense-panel,.inventory-expense-panel,
    .fixed-asset-panel,.stock-count-editor,.stock-count-records-panel,
    .replenishment-reference-panel,.purchase-analysis-panel,.purchase-detail-reference-panel,
    .purchase-inbound-editor,.opening-books-panel,.account-set-panel,.migration-review-panel,
    .lifecycle-workflow-panel,.guanjia-open-api-panel,.kuailv-pairing-panel,.open-platform-panel
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  body.pixel-replica.list-workspace .workspace-toolbar,
  body.pixel-replica .workspace-toolbar {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid #e3e9f2 !important;
    background: #fff !important;
  }
  body.pixel-replica.list-workspace .workspace-toolbar:empty,
  body.pixel-replica .workspace-toolbar:empty { display: none !important; }
  body.pixel-replica :is(.workspace-tabs,.query-tabs,[class$="-tabs"],[class*="-mode-tabs"]) {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  body.pixel-replica :is(.workspace-tabs,.query-tabs,[class$="-tabs"],[class*="-mode-tabs"]) > * {
    min-height: var(--mobile-control-height) !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  body.pixel-replica :is(
    .query-bar,.filter-bar,.filters,.workspace-query,.workspace-filters,
    [class$="-filters"],[class$="-query-row"],[class$="-action-row"]
  ) {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body.pixel-replica .business-workspace > .query-bar {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-items: center !important;
  }
  body.pixel-replica .business-workspace > .query-bar > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.pixel-replica .business-workspace > .query-bar > :is(.query-search,.product-bulk-actions) {
    grid-column: 1 / -1 !important;
  }
  body.pixel-replica .business-workspace > .query-bar > .query-date-label,
  body.pixel-replica .business-workspace > .query-bar > .date-separator { display: none !important; }
  body.pixel-replica .business-workspace > .query-bar > .reset-button {
    min-height: var(--mobile-control-height) !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
  }
  body.pixel-replica :is(
    .query-bar,.filter-bar,.filters,.workspace-query,.workspace-filters,
    [class$="-filters"],[class$="-query-row"]
  ) :is(label,input:not([type="checkbox"]):not([type="radio"]),select) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.pixel-replica :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,button) {
    touch-action: manipulation;
  }
  body.pixel-replica :is(
    .query-bar,.filter-bar,.filters,.workspace-query,.workspace-filters,
    [class$="-filters"],[class$="-query-row"]
  ) :is(input:not([type="checkbox"]):not([type="radio"]),select,button) {
    min-height: var(--mobile-control-height) !important;
  }
  body.pixel-replica :is(.form-grid,.drawer-grid,.detail-meta,.payment-allocation-form,[class$="-form-grid"]) {
    grid-template-columns: minmax(0,1fr) !important;
  }

  /* Data remains tabular and readable: the table itself scrolls, the page never does. */
  body.pixel-replica :is(
    .table-wrap,.table-card,.module-table-wrap,.business-table-wrap,.detail-body,
    [class$="-table-wrap"],[class$="-table-shell"]
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.pixel-replica :is(
    .table-wrap,.table-card,.module-table-wrap,.business-table-wrap,
    [class$="-table-wrap"],[class$="-table-shell"]
  ) table,
  body.pixel-replica table.business-table,
  body.pixel-replica table.module-table {
    width: max-content !important;
    min-width: 720px !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  body.pixel-replica :is(th,td) {
    min-width: max-content !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
  body.pixel-replica .replenishment-panel .table-wrap,
  body.pixel-replica .dashboard-exception-panel .table-wrap {
    min-height: 0 !important;
    max-height: 292px !important;
    border: 1px solid #e1e7f0 !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  body.pixel-replica .replenishment-panel table { min-width: 680px !important; }
  body.pixel-replica .dashboard-exception-panel table { min-width: 640px !important; }

  /* Full-screen task surfaces and dialogs use the available phone viewport. */
  body.pixel-replica :is(.detail-mask,.drawer-mask,[class$="-mask"]):not([hidden]) { max-width: 100vw !important; }
  body.pixel-replica :is(.detail-dialog,.business-drawer,[class$="-dialog"],[class$="-drawer-form"]) {
    max-width: 100vw !important;
  }
  body.pixel-replica .detail-mask { padding: 0 !important; }
  body.pixel-replica .detail-dialog {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 420px) {
  body.pixel-replica .account-set-capsule {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }
  body.pixel-replica .topbar-notifications { display: none !important; }
  body.pixel-replica[data-module="dashboard"] .dashboard-page-heading > small { display: none !important; }
  body.pixel-replica .module-banner span { max-width: 55vw !important; }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.pixel-replica[data-module="dashboard"] .stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  body.pixel-replica[data-module="dashboard"] .stat-card { min-height: 88px !important; padding: 10px !important; }
  body.pixel-replica .module-summary > * { width: 168px !important; min-width: 168px !important; flex-basis: 168px !important; }
}

/* v239 viewport contract: the application shell never scrolls as a document.
   Page chrome stays in place and only the active page's data region scrolls. */
html {
  height: 100%;
  overflow: hidden;
}

body.pixel-replica {
  height: 100%;
  overflow: hidden !important;
}

body.pixel-replica .app-shell {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.pixel-replica .main,
body.pixel-replica .app-shell.sub-collapsed .main,
body.pixel-replica.list-workspace .main,
body.pixel-replica[data-module] .main {
  height: 100dvh !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.pixel-replica .topbar,
body.pixel-replica .open-task-strip {
  flex-shrink: 0 !important;
}

body.pixel-replica :is(#dashboard-page,#module-page)[hidden] {
  display: none !important;
}

body.pixel-replica :is(#dashboard-page,#module-page):not([hidden]) {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

/* Standard list pages reserve their remaining height for rows only. */
body.pixel-replica.list-workspace #module-page:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.pixel-replica.list-workspace #module-page > :is(.module-banner,.module-summary,.module-flow-rail) {
  flex: 0 0 auto !important;
}

body.pixel-replica.list-workspace .business-workspace {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.pixel-replica.list-workspace .business-workspace > :is(.workspace-toolbar,.query-bar,.opening-account-actions,.opening-account-total,.table-footer) {
  flex: 0 0 auto !important;
}

body.pixel-replica.list-workspace .business-table-wrap {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges !important;
}

body.pixel-replica.list-workspace .business-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

@media (max-width: 900px) {
  body.pixel-replica {
    height: 100dvh !important;
    padding: 0 !important;
  }

  body.pixel-replica .app-shell {
    height: 100dvh !important;
  }

  body.pixel-replica .main,
  body.pixel-replica .app-shell.sub-collapsed .main,
  body.pixel-replica.list-workspace .main,
  body.pixel-replica[data-module] .main {
    height: calc(100dvh - var(--mobile-module-rail-height) - var(--mobile-bottom-rail-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    margin-top: calc(var(--mobile-module-rail-height) + env(safe-area-inset-top)) !important;
    margin-bottom: calc(var(--mobile-bottom-rail-height) + env(safe-area-inset-bottom)) !important;
  }

  body.pixel-replica :is(#dashboard-page,#module-page):not([hidden]) {
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto !important;
  }

  body.pixel-replica.list-workspace .business-table-wrap {
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* v241 data rows: every table value and editor shares one vertical center. */
body.pixel-replica table tbody,
body.pixel-replica table tbody tr,
body.pixel-replica table tbody td {
  vertical-align: middle !important;
}

body.pixel-replica table tbody td > :is(
  input,
  select,
  button,
  span,
  strong
) {
  vertical-align: middle !important;
}

/* v242 dashboard metrics and pagination: five equal desktop blocks and readable page controls. */
@media (min-width: 901px) {
  body.pixel-replica[data-module="dashboard"] .stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

body.pixel-replica :is(.table-footer, [class*="pagination"]) {
  min-height: 54px !important;
  color: #536681 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body.pixel-replica :is(.table-footer, [class*="pagination"]) :is(span, label) {
  font-size: 13px !important;
}

body.pixel-replica :is(.table-footer, [class*="pagination"]) :is(button, b, select, input) {
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  font-size: 13px !important;
  line-height: 34px !important;
}

body.pixel-replica :is(.table-footer, [class*="pagination"]) button {
  width: auto !important;
  padding: 0 11px !important;
  border-radius: 6px !important;
}

body.pixel-replica .table-page-controls,
body.pixel-replica .table-page-numbers {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.pixel-replica .table-page-numbers button {
  width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #38506f !important;
  border-color: #d6e0ec !important;
  background: #fff !important;
}

body.pixel-replica .table-page-numbers button.active {
  color: #fff !important;
  border-color: #2f61ea !important;
  background: #2f61ea !important;
  font-weight: 700 !important;
}

body.pixel-replica .table-page-ellipsis {
  width: 18px;
  color: #7b899d;
  text-align: center;
}

@media (max-width: 900px) {
  body.pixel-replica :is(.table-footer, [class*="pagination"]) :is(button, b, select, input) {
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 38px !important;
  }
}

/* v243 elastic query workspaces: controls never collide with separators or data rows. */
@media (min-width: 901px) {
  body.pixel-replica:is([data-module="purchase-query"],[data-module="sales-query"],[data-module="transfer-query"],[data-module="stock-change-query"]) .purchase-query-workspace {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  body.pixel-replica .purchase-query-filters {
    min-height: 0 !important;
    grid-template-rows: repeat(2, minmax(42px, auto)) !important;
    align-content: start !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.pixel-replica .purchase-query-filter-row,
  body.pixel-replica .purchase-query-filter-row-secondary {
    min-height: 42px !important;
    align-items: center !important;
  }

  body.pixel-replica :is(
    .purchase-query-actions,
    .purchase-expense-list-actions,
    .inventory-expense-actions,
    .stock-count-record-actions,
    .purchase-analysis-actions,
    .purchase-detail-reference-actions
  ) {
    min-height: 50px !important;
    height: auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--replica-line) !important;
    background: #fff !important;
  }

  body.pixel-replica[data-module="purchase-expenses"] .purchase-expense-list {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  body.pixel-replica[data-module="purchase-expenses"] .purchase-expense-list-filters {
    min-height: 58px !important;
    height: auto !important;
    padding: 8px 16px !important;
  }

  body.pixel-replica[data-module="inventory-expenses"] #inventory-expense-records {
    grid-template-rows: auto auto minmax(0, 1fr) auto minmax(180px, 292px) !important;
  }

  body.pixel-replica[data-module="inventory-expenses"] #inventory-expense-allocations {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  body.pixel-replica[data-module="inventory-expenses"] .inventory-expense-filters {
    min-height: 58px !important;
    height: auto !important;
    grid-auto-rows: minmax(42px, auto) !important;
    padding: 8px 16px !important;
  }

  body.pixel-replica[data-module="stock-count-records"] .stock-count-records-panel:not([hidden]) {
    grid-template-rows: auto auto minmax(0, 1fr) auto minmax(180px, 263px) !important;
  }

  body.pixel-replica[data-module="stock-count-records"] .stock-count-record-filters {
    min-height: 58px !important;
    height: auto !important;
    grid-template-rows: repeat(2, minmax(42px, auto)) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.pixel-replica:is([data-module="purchase-analysis"],[data-module="sales-analysis"]) .purchase-analysis-workspace,
  body.pixel-replica:is([data-module="purchase-detail"],[data-module="sales-detail"]) .purchase-detail-reference-workspace {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  }

  body.pixel-replica:is([data-module="purchase-analysis"],[data-module="sales-analysis"]) .purchase-analysis-filters,
  body.pixel-replica:is([data-module="purchase-detail"],[data-module="sales-detail"]) .purchase-detail-reference-filters {
    min-height: 0 !important;
    height: auto !important;
    grid-auto-rows: minmax(36px, auto) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.pixel-replica .purchase-analysis-filters { grid-row: 1 !important; }
  body.pixel-replica .purchase-analysis-options { grid-row: 2 !important; }
  body.pixel-replica .purchase-analysis-actions { grid-row: 3 !important; }
  body.pixel-replica .purchase-analysis-table-wrap { grid-row: 4 !important; }
  body.pixel-replica .purchase-analysis-pagination { grid-row: 5 !important; }

  body.pixel-replica .purchase-detail-reference-filters { grid-row: 1 !important; }
  body.pixel-replica .purchase-detail-reference-options { grid-row: 2 !important; }
  body.pixel-replica .purchase-detail-reference-actions { grid-row: 3 !important; }
  body.pixel-replica .purchase-detail-reference-table-wrap { grid-row: 4 !important; }
  body.pixel-replica .purchase-detail-reference-pagination { grid-row: 5 !important; }
}

@media (min-width: 901px) and (max-width: 1450px) {
  body.pixel-replica .purchase-query-filter-row,
  body.pixel-replica .purchase-query-filter-row-secondary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  body.pixel-replica .purchase-query-filter-row > label,
  body.pixel-replica .purchase-query-filter-row-secondary > label {
    min-width: 220px !important;
    flex: 1 1 240px !important;
  }

  body.pixel-replica .purchase-query-date-group {
    min-width: 580px !important;
    flex: 2 1 620px !important;
  }

  body.pixel-replica .purchase-query-status-tabs,
  body.pixel-replica .purchase-query-filter-controls {
    flex: 0 0 auto !important;
  }
}

/* v244 primary navigation is an accordion on desktop and mobile. */
@media (min-width: 901px) {
  body.pixel-replica:not(.module-menu-open) .nav > #sub-menu.nav-inline-submenu {
    display: none !important;
  }
}

/* v245 compact document rows: line items keep their natural row height instead of
   sharing the remaining editor height. The data viewport owns the empty space and scroll. */
@media (min-width: 901px) {
  body.pixel-replica :is(
    .purchase-inbound-table,
    .purchase-expense-editor-table,
    .stock-count-table
  ) {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  body.pixel-replica :is(
    .purchase-inbound-table,
    .purchase-expense-editor-table,
    .stock-count-table
  ) > tbody > tr:not(:is(
    .stock-transfer-spacer-row,
    .stock-gain-spacer-row,
    .other-outbound-spacer-row,
    .other-inbound-spacer-row,
    .purchase-return-spacer-row
  )) {
    height: 48px !important;
  }

  body.pixel-replica :is(
    .purchase-inbound-table,
    .purchase-expense-editor-table,
    .stock-count-table
  ) > tbody > tr:is(
    .stock-transfer-spacer-row,
    .stock-gain-spacer-row,
    .other-outbound-spacer-row,
    .other-inbound-spacer-row,
    .purchase-return-spacer-row
  ) {
    display: none !important;
    height: 0 !important;
  }
}

body.pixel-replica :is(.purchase-inbound-table,.stock-count-table,.purchase-expense-editor-table) td :is(input:not([type="checkbox"]):not([type="radio"]),select) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* v249 opening workspace follows the same full-width data-scroll shell. */
body.pixel-replica[data-module="go-live"] .module-page {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
body.pixel-replica[data-module="go-live"] .go-live-panel {
  flex: 0 0 auto !important;
  margin: 0 0 12px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
body.pixel-replica[data-module="go-live"] .go-live-head {
  min-height: 48px !important;
  padding: 8px 16px !important;
}
body.pixel-replica[data-module="go-live"] .go-live-head strong { font-size: 16px !important; }
body.pixel-replica[data-module="go-live"] .go-live-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr) !important;
}
body.pixel-replica[data-module="go-live"] :is(.go-live-settings,.go-live-confirm) { padding: 12px 16px !important; }
body.pixel-replica[data-module="go-live"] .go-live-section-head { display: none !important; }
body.pixel-replica[data-module="go-live"] .go-live-form { margin: 0 !important; gap: 8px 12px !important; }
body.pixel-replica[data-module="go-live"] .go-live-backup-field {
  grid-column: 1 !important;
  min-height: 36px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.pixel-replica[data-module="go-live"] .go-live-save-button {
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  align-self: center !important;
}
body.pixel-replica[data-module="go-live"] .go-live-confirm-icon { display: none !important; }
body.pixel-replica[data-module="go-live"] .go-live-confirm .helper-text { margin: 8px 0 !important; padding: 0 !important; border: 0 !important; }
body.pixel-replica[data-module="go-live"] :is(.go-live-save-button,.go-live-execute-button) { min-height: 36px !important; border-radius: 4px !important; }
body.pixel-replica[data-module="go-live"] :is(#warehouse-filter,.query-date-label,.date-filter,.date-separator,#batch-action,#template-button) { display: none !important; }
@media (max-width: 900px) {
  body.pixel-replica[data-module="go-live"] .module-banner { display: none !important; }
  body.pixel-replica[data-module="go-live"] .workspace-toolbar {
    flex-wrap: nowrap !important;
    padding: 4px 8px !important;
    min-height: 48px !important;
  }
  body.pixel-replica[data-module="go-live"] .workspace-tabs { min-width: 0 !important; flex: 1 1 auto !important; overflow-x: auto !important; }
  body.pixel-replica[data-module="go-live"] .workspace-actions { width: auto !important; flex: 0 0 auto !important; }
  body.pixel-replica[data-module="go-live"] .query-bar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  body.pixel-replica[data-module="go-live"] .query-search { grid-column: 1 / -1 !important; }
  body.pixel-replica[data-module="go-live"] :is(#status-filter,#query-button,#reset-query) { grid-column: auto !important; width: auto !important; }
  body.pixel-replica[data-module="go-live"] .go-live-panel {
    max-height: 180px !important;
    overflow-y: auto !important;
  }
  body.pixel-replica[data-module="go-live"] .go-live-layout { grid-template-columns: minmax(0,1fr) !important; }
  body.pixel-replica[data-module="go-live"] .go-live-form { grid-template-columns: minmax(0,1fr) !important; }
  body.pixel-replica[data-module="go-live"] .go-live-save-button { grid-column: 1 !important; }
}

/* v248 shared document fields: content-sized rows, independent input borders. */
@media (min-width: 901px) {
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-body:has(> .purchase-inbound-form) {
    grid-template-rows: auto auto minmax(80px, 1fr) auto auto !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    gap: 8px 12px !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-form > label {
    flex: 1 1 220px !important;
    min-width: 0 !important;
    height: 36px !important;
    gap: 8px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-form > label > span {
    padding: 0 !important;
    white-space: nowrap !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-form :is(input,select) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border: 1px solid #c8d5e5 !important;
    border-radius: 4px !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-form > button {
    flex: 0 0 92px !important;
    width: 92px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 1px solid #c8d5e5 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-toolbar {
    min-height: 52px !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
  }
  body.pixel-replica :is(.purchase-inbound-table,.stock-count-table,.purchase-expense-editor-table) tfoot td {
    width: auto !important;
  }
  body.pixel-replica :is(.purchase-inbound-table,.stock-count-table,.purchase-expense-editor-table) tfoot td:first-child {
    white-space: nowrap !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-form > button {
    width: auto !important;
    min-width: 92px !important;
    justify-self: start !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #c8d5e5 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-toolbar .purchase-inbound-scan {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-toolbar .purchase-inbound-scan i {
    position: absolute !important;
    left: 10px !important;
    top: 13px !important;
    pointer-events: none;
  }
  body.pixel-replica .purchase-inbound-editor:not([hidden]) .purchase-inbound-toolbar .purchase-inbound-scan input {
    padding-left: 32px !important;
  }
}

/* Keep mobile cards independent of desktop table minimum widths. */
@media (max-width: 900px) {
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* v247 sales document composition: the entry path spans the workspace instead of
   leaving a half-width table and disconnected controls on wide screens. */
@media (min-width: 901px) {
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-editor .purchase-inbound-body {
    grid-template-rows: 52px 52px minmax(72px, 1fr) 32px 110px !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-editor.show-sales-more .purchase-inbound-body {
    grid-template-rows: 104px 52px minmax(48px, 1fr) 32px 110px !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-form {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.2fr) minmax(220px, 1fr) 92px !important;
    grid-template-rows: 52px !important;
    padding: 0 12px !important;
    gap: 0 12px !important;
    align-items: center !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .show-sales-more .sales-outbound-form {
    grid-template-rows: 52px 52px !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-form > label {
    min-width: 0 !important;
    height: 44px !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 8px !important;
    background: transparent !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-form > label > span {
    padding: 0 !important;
    white-space: nowrap !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-form :is(input, select) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid #c8d5e5 !important;
    padding: 0 8px !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table :is(tbody, tfoot) td {
    width: auto !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table tfoot td:first-child {
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-form .purchase-inbound-summary {
    grid-column: 2 !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-form > label:nth-child(3) {
    grid-column: 3 !important;
  }

  body.pixel-replica[data-module="sales-outbound"] #sales-outbound-more-fields {
    width: 92px !important;
    height: 36px !important;
    border: 1px solid #c8d5e5 !important;
    border-radius: 4px !important;
    background: #fff !important;
    margin: 4px 0 !important;
    justify-self: end !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .purchase-inbound-toolbar {
    min-width: 0 !important;
    padding-inline: 10px !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .purchase-inbound-scan {
    width: clamp(200px, 24vw, 360px) !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .purchase-inbound-table-wrap {
    width: 100% !important;
    background: #fff !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table {
    width: 100% !important;
    min-width: 1060px !important;
  }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(1) { width: 38px !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(2) { width: 50px !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(3) { width: 58px !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(5) { width: auto !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(6) { width: 16% !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(7) { width: 86px !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(8) { width: 72px !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(9) { width: 18% !important; }
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(10),
  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-table thead th:nth-child(11) { width: 100px !important; }

  body.pixel-replica[data-module="sales-outbound"] .sales-outbound-editor.show-sales-extended .sales-outbound-table {
    width: max(100%, 1700px) !important;
    min-width: 1700px !important;
  }
  body.pixel-replica[data-module="sales-outbound"] .show-sales-extended .sales-outbound-table thead th:nth-child(5) { width: 260px !important; }
  body.pixel-replica[data-module="sales-outbound"] .show-sales-extended .sales-outbound-table thead th:nth-child(6) { width: 160px !important; }
  body.pixel-replica[data-module="sales-outbound"] .show-sales-extended .sales-outbound-table thead th:nth-child(9) { width: 180px !important; }
}

/* Inventory totals share one filter scope; only the on-hand quantity is summarized. */
@media (min-width: 901px) {
  body.pixel-replica:is([data-module="stock-query"], [data-module="stock-alerts"]) #module-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
#module-summary .summary-unit-note { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: #52627a; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  body.pixel-replica:is([data-module="stock-query"], [data-module="stock-alerts"]) #module-summary > * {
    width: min(300px, calc(100vw - 56px)) !important;
    min-width: min(300px, calc(100vw - 56px)) !important;
    flex-basis: min(300px, calc(100vw - 56px)) !important;
  }
}

/* Shared ERP screen typography. Edit these tokens instead of page-specific sizes.
   The named important layer takes precedence over legacy unlayered overrides. */
@layer erp-typography {
  @media screen {
    :root {
      --erp-font-body: 15px;
      --erp-font-name: 16px;
      --erp-font-meta: 14px;
      --erp-font-section: 18px;
      --erp-font-title: 24px;
      --erp-font-metric: 24px;
    }
    body.pixel-replica { font-size:var(--erp-font-body) !important; }
    body.pixel-replica :is(p,td,th,label,dt,dd,li,summary,input,select,textarea,button,span,em) {
      font-size:var(--erp-font-body) !important;
    }
    body.pixel-replica :is(p,td,th,label,dt,dd,li,summary) { line-height:1.5 !important; }
    body.pixel-replica strong { font-size:var(--erp-font-name) !important; }
    body.pixel-replica :is(small,.table-status,.table-link,#table-count,.summary-unit-note,.page-data-refresh-status) {
      font-size:var(--erp-font-meta) !important; line-height:1.5 !important;
    }
    body.pixel-replica :is(h1,h2) { font-size:var(--erp-font-title) !important; line-height:1.35 !important; }
    body.pixel-replica :is(h3,h4,h5,h6) { font-size:var(--erp-font-section) !important; line-height:1.4 !important; }
    body.pixel-replica :is(.summary-card,.metric-card,.stat-card) strong,
    body.pixel-replica .dashboard-flow-rail button small { font-size:var(--erp-font-metric) !important; }
    body.pixel-replica :is(.summary-card,.metric-card,.stat-card) :is(span,small),
    body.pixel-replica :is(.sidebar,.task-tabs) :is(button,span,strong,small) { font-size:var(--erp-font-meta) !important; }
    body.pixel-replica .table-main strong { font-size:var(--erp-font-name) !important; line-height:1.5 !important; }
    body.pixel-replica .table-main small { font-size:var(--erp-font-meta) !important; line-height:1.5 !important; }
    body.pixel-replica .query-bar { height:auto !important; min-height:52px !important; flex-wrap:wrap !important; }
    body.pixel-replica .query-bar :is(button,label) { white-space:nowrap !important; flex-shrink:0 !important; }
    body.pixel-replica .query-bar :is(input,select,button) { min-height:40px !important; }
    body.pixel-replica .query-bar button { min-width:max-content !important; }
    body.pixel-replica :is(.business-table,.data-table) :is(td,th) { height:auto !important; padding-top:10px !important; padding-bottom:10px !important; }
    @media(max-width:900px) {
      body.pixel-replica :is(input,select,textarea) { font-size:var(--erp-font-name) !important; }
    }
  }
}