@media (max-width: 700px) {
  html,
  body,
  #root {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .ant-layout {
    min-width: 0;
  }

  .desktop-sider {
    display: none;
  }

  .topbar {
    height: 58px;
    gap: 8px;
    padding: 0 12px;
  }

  .topbar > .ant-space:first-child {
    min-width: 0;
    flex: 1;
  }

  .topbar > .ant-space:first-child .ant-space-item:last-child,
  .topbar .ant-avatar + span {
    display: none;
  }

  .role-pill {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page {
    padding: 14px 12px 28px;
  }

  .page-title {
    font-size: 24px;
    line-height: 1.2;
  }

  .page-subtitle {
    font-size: 12px;
    line-height: 1.5;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .page-head > div,
  .page-head > .ant-space,
  .page-head button {
    max-width: 100%;
  }

  .page-head > .ant-space {
    display: flex;
    flex-wrap: wrap;
  }

  .panel {
    border-radius: 12px !important;
  }

  .panel .ant-card-body {
    padding: 14px;
  }

  .stat-grid,
  .product-grid,
  .login-wrap {
    grid-template-columns: 1fr;
  }

  .stat-card .ant-card-body {
    padding: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .content-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .login-hero {
    display: none;
  }

  .login-panel {
    padding: 18px;
  }

  .login-card {
    width: 100%;
    border-radius: 14px !important;
  }

  .login-card .ant-card-body {
    padding: 22px 18px;
  }

  .mobile-menu {
    display: inline-flex;
  }

  .ant-form-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .ant-form-inline .ant-form-item {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .ant-input,
  .ant-input-affix-wrapper,
  .ant-select,
  .ant-picker,
  .ant-input-number,
  .ant-btn {
    max-width: 100%;
  }

  .ant-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  .ant-table-wrapper .ant-table {
    min-width: 760px;
  }

  .order-search-panel .ant-row,
  .order-search-panel .ant-space,
  .product-sticky-toolbar .ant-space {
    display: flex;
    flex-wrap: wrap;
  }

  .product-source-card .ant-card-extra,
  .panel .ant-card-extra,
  .product-source-card .ant-card-head-wrapper,
  .panel .ant-card-head-wrapper,
  .product-source-card .ant-card-head-title {
    min-width: 0;
  }

  .product-source-card .ant-card-extra,
  .panel .ant-card-extra {
    width: 100%;
    margin-inline-start: 0;
    padding-top: 10px;
  }

  .product-source-card .ant-card-extra .ant-space,
  .product-source-card .ant-card-extra .ant-space .ant-space-item,
  .panel .ant-card-extra .ant-space,
  .panel .ant-card-extra .ant-space .ant-space-item {
    max-width: 100%;
  }

  .product-source-card .ant-card-extra .ant-space,
  .panel .ant-card-extra .ant-space {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  .product-source-card .ant-card-extra .ant-input-affix-wrapper,
  .product-source-card .ant-card-extra .ant-select,
  .product-source-card .ant-card-extra .ant-btn,
  .panel .ant-card-extra .ant-input-affix-wrapper,
  .panel .ant-card-extra .ant-select,
  .panel .ant-card-extra .ant-btn {
    width: 100% !important;
  }

  .product-source-card .ant-card-extra .ant-btn,
  .panel .ant-card-extra .ant-btn {
    padding-inline: 8px;
  }

  .panel .ant-card-head {
    padding: 12px !important;
  }

  .panel .ant-card-head-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .panel .ant-card-head-title {
    white-space: normal;
  }

  .panel .ant-table-title,
  .panel .ant-table-wrapper + .ant-space,
  .panel .ant-table-selection-extra,
  .panel .ant-alert + .ant-space {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .panel .ant-table-title .ant-btn,
  .panel .ant-table-wrapper + .ant-space .ant-btn,
  .panel .ant-alert + .ant-space .ant-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 128px;
  }

  .product-source-card .ant-table-selection-column {
    position: sticky !important;
    left: 0;
    z-index: 4;
    background: #fff;
  }

  .product-source-card .ant-table-thead .ant-table-selection-column {
    z-index: 5;
    background: #f8f8fc !important;
  }

  .product-source-card .ant-table-cell-fix-right,
  .product-source-card .ant-table-cell-fix-right-first,
  .product-source-card .ant-table-cell-fix-right-last {
    position: static !important;
    box-shadow: none !important;
  }

  .product-source-card .ant-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  .order-search-panel .ant-input-affix-wrapper,
  .order-search-panel .ant-picker,
  .order-search-panel .ant-select,
  .product-sticky-toolbar .ant-input-affix-wrapper,
  .product-sticky-toolbar .ant-select {
    width: 100% !important;
  }

  .product-sticky-toolbar .ant-btn {
    flex: 1 1 calc(50% - 8px);
  }

  .product-order-cell b {
    max-width: 160px;
  }

  .announcement-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .info-row {
    gap: 12px;
    align-items: flex-start;
  }

  .info-row > span:last-child {
    text-align: right;
    word-break: break-word;
  }

  .ant-modal {
    max-width: calc(100vw - 16px) !important;
  }

  .ant-modal-content {
    border-radius: 14px !important;
  }

  .ant-drawer-content-wrapper {
    width: min(88vw, 360px) !important;
    max-width: 88vw;
  }

  .ant-drawer-content {
    border-radius: 0 !important;
  }

  .ant-drawer-header {
    padding: 12px 14px !important;
  }

  .ant-drawer-title {
    font-size: 16px;
    line-height: 1.3;
  }

  .ant-drawer-body {
    padding: 12px !important;
    padding-bottom: 84px !important;
    overflow-x: hidden;
  }

  .ant-drawer-content:has(.ant-form) .ant-drawer-content-wrapper,
  .ant-drawer-root:has(.ant-form) .ant-drawer-content-wrapper {
    width: 100vw !important;
    max-width: 100vw;
  }

  .ant-drawer-body .ant-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ant-drawer-body .ant-col,
  .ant-modal-body .ant-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ant-drawer-body .ant-form-item,
  .ant-modal-body .ant-form-item {
    margin-bottom: 12px;
  }

  .ant-drawer-body textarea.ant-input,
  .ant-modal-body textarea.ant-input {
    min-height: 84px;
  }

  .ant-upload-list-picture-card,
  .ant-upload-list-picture-circle,
  .ant-upload-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  .ant-upload-list-picture-card .ant-upload-list,
  .ant-upload-list-picture-circle .ant-upload-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 6px;
  }

  .ant-upload-list-picture-card .ant-upload-list-item-container,
  .ant-upload-list-picture-circle .ant-upload-list-item-container,
  .ant-upload.ant-upload-select {
    flex: 0 0 96px;
    width: 96px !important;
    height: 96px !important;
  }

  .ant-drawer-body .ant-table-wrapper,
  .ant-modal-body .ant-table-wrapper {
    overflow-x: auto;
  }

  .ant-drawer-body .ant-table,
  .ant-modal-body .ant-table {
    min-width: 640px;
  }

  .ant-drawer-body > .ant-space,
  .ant-modal-body > .ant-space {
    max-width: 100%;
  }

  .ant-drawer-body .ant-space,
  .ant-modal-body .ant-space {
    flex-wrap: wrap;
  }

  .ant-drawer-body .ant-space .ant-btn,
  .ant-modal-body .ant-space .ant-btn {
    flex: 1 1 auto;
  }

  .ant-drawer-body .ant-card,
  .ant-modal-body .ant-card {
    max-width: 100%;
  }

  .ant-modal {
    top: 8px !important;
    padding-bottom: 8px;
  }

  .ant-modal-body {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .ant-modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 2;
    padding-top: 10px !important;
  }

  .ant-modal-footer .ant-btn {
    min-width: 96px;
  }

  .ant-modal:has(.mobile-ai-generate-floating) .ant-modal-footer,
  .ant-drawer:has(.mobile-ai-generate-floating) .ant-drawer-footer {
    position: fixed !important;
    left: 6vw !important;
    right: 6vw !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    height: 58px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.2) !important;
    backdrop-filter: blur(14px);
    z-index: 1101 !important;
  }

  .ant-modal:has(.mobile-ai-generate-floating) .ant-modal-footer .ant-btn,
  .ant-drawer:has(.mobile-ai-generate-floating) .ant-drawer-footer .ant-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  .ant-modal:has(.mobile-ai-generate-floating) .ant-modal-footer .ant-btn:first-child,
  .ant-drawer:has(.mobile-ai-generate-floating) .ant-drawer-footer .ant-btn:first-child {
    grid-column: 3;
  }

  .ant-modal:has(.mobile-ai-generate-floating) .ant-modal-footer .ant-btn:nth-child(2),
  .ant-drawer:has(.mobile-ai-generate-floating) .ant-drawer-footer .ant-btn:nth-child(2) {
    grid-column: 4;
  }

  .mobile-ai-generate-floating {
    position: fixed !important;
    left: 6vw !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    width: calc((88vw - 24px) / 2) !important;
    height: 46px !important;
    z-index: 1102 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    color: #fff !important;
    background: #6f55ff !important;
    border-color: #6f55ff !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .mobile-ai-generate-floating:disabled,
  .mobile-ai-generate-floating.ant-btn-disabled,
  .mobile-ai-generate-floating[disabled] {
    color: #fff !important;
    background: #6f55ff !important;
    border-color: #6f55ff !important;
    opacity: 1 !important;
  }

  .mobile-ai-generate-floating *,
  .mobile-ai-generate-floating:disabled *,
  .mobile-ai-generate-floating.ant-btn-disabled *,
  .mobile-ai-generate-floating[disabled] * {
    color: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #fff !important;
  }

  .mobile-ai-generate-proxy {
    position: fixed !important;
    left: 6vw !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    width: calc((88vw - 24px) / 2) !important;
    height: 46px !important;
    z-index: 1110 !important;
    margin: 0 !important;
    border: 1px solid #6f55ff !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: #6f55ff !important;
    font: 500 16px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    opacity: 1 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-text-fill-color: #fff !important;
  }

  .ant-modal-body:has(.mobile-ai-generate-floating),
  .ant-drawer-body:has(.mobile-ai-generate-floating) {
    padding-bottom: 108px !important;
  }
}