:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ui-primary: #7f56d9;
  --ui-primary-active: #6941c6;
  --ui-primary-soft: rgb(127 86 217 / 20%);
  --ui-primary-hover: rgb(127 86 217 / 80%);
  --ui-link: #1677ff;
  --ui-control-height: 28px;
  --ui-control-radius: 6px;
  --ui-control-border: #d9e0ea;
  --ui-control-background: #ffffff;
  --ui-popover-background: #fdfdfc;
  --ui-page-gap: 8px;
  --ui-focus-ring: 0 0 0 3px rgb(127 86 217 / 16%);
  --ui-inset-focus: inset 0 0 0 1px var(--ui-primary);
  --line: var(--ui-control-border);
  --text: #172033;
  --muted: #667085;
  --blue: var(--ui-primary);
  --green: #168a5a;
  --red: #d92d20;
  --amber: #b76e00;
  --cyan: #0e7490;
  --shadow: 0 8px 24px rgba(16, 24, 40, .08);
  --filter-height: var(--ui-control-height);
  --filter-radius: var(--ui-control-radius);
  --filter-gap: var(--ui-page-gap);
  --filter-popover-gap: 8px;
  --filter-focus: var(--ui-inset-focus);
  --workspace-top-offset: 86px;
  --app-shell-accent: #7f56d9;
  --app-shell-surface: #fdfdfc;
  --unified-filter-height: var(--ui-control-height);
  --unified-filter-radius: var(--ui-control-radius);
  --unified-filter-border: var(--ui-control-border);
  --unified-filter-focus: var(--ui-primary);
  --unified-filter-focus-width: 1px;
  --unified-filter-background: var(--ui-control-background);
  --unified-filter-panel-min-width: 130px;
  --unified-filter-panel-max-width: 200px;
  --unified-filter-panel-edge-space: 20px;
  --unified-filter-option-check-gap: 60px;
  --unified-filter-option-check-width: 6px;
  --unified-filter-panel-shadow:
    0 0 0 1px rgb(255 255 255 / 72%),
    0 8px 22px rgb(29 36 48 / 12%),
    0 0 18px 2px rgb(29 36 48 / 9%),
    0 0 36px 8px rgb(255 255 255 / 42%);
  --dropdown-filter-radius: var(--ui-control-radius);
  --dropdown-filter-border: var(--ui-control-border);
  --dropdown-filter-focus: var(--ui-primary);
  --date-filter-trigger-height: var(--unified-filter-height);
  --date-filter-radius: var(--ui-control-radius);
  --date-filter-trigger-radius: var(--ui-control-radius);
  --date-filter-border: var(--ui-primary);
  --date-filter-trigger-border: var(--ui-control-border);
  --date-filter-trigger-focus: var(--ui-primary);
  --date-filter-quick-accent: var(--ui-primary);
  --date-filter-background: var(--unified-filter-background);
  --date-filter-inline-padding: 12px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--app-font-family);
  color: var(--text);
  background: var(--app-shell-accent);
}
.app-header[hidden],
.workspace[hidden],
.app-startup-status[hidden] { display: none !important; }
.app-startup-status {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 14px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--app-shell-accent);
}

.sidebar {
  height: 52px;
  background: var(--app-shell-accent);
  color: var(--text);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 0;
  box-shadow: none;
}
#nav {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  width: max-content;
  max-width: calc(100% - 360px);
  min-width: 0;
  overflow: visible;
  transform: translateX(-50%);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
}
.nav-btn {
  position: relative;
  border: 0;
  color: #fff;
  background: transparent;
  padding: 0 10px;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  font-family: var(--app-font-family);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 50px;
  white-space: nowrap;
  font-weight: 550;
  line-height: 1;
}
.nav-btn:hover {
  color: #fff;
  background: transparent;
}
.nav-item.active > .nav-btn {
  color: #fff;
  background: transparent;
}
.header-dropdown {
  position: fixed;
  z-index: 30;
  inset: auto;
  display: none;
  width: max-content;
  min-width: 120px;
  max-width: 200px;
  margin: 0;
  padding: 6px 4px;
  overflow: visible;
  border: 0;
  border-radius: 10px;
  background: rgb(76 76 76 / 80%);
  box-shadow: 0 5px 12px -2px rgb(32 32 32 / 40%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.header-dropdown:popover-open {
  display: grid;
}
.header-dropdown::before {
  position: absolute;
  bottom: 100%;
  left: calc(var(--nav-arrow-left) - 7px);
  width: 14px;
  height: 6px;
  background: inherit;
  clip-path: path("M 0 6 L 5.6 0.6 Q 7 -0.6 8.4 0.6 L 14 6 Z");
  content: "";
}
.header-menu-option {
  box-sizing: border-box;
  width: calc(100% + 4px);
  min-height: 32px;
  max-height: 48px;
  height: auto;
  margin-left: -4px;
  padding: 6px 12px 6px 11px;
  overflow: hidden;
  border: 0;
  border-radius: 0 16px 16px 0;
  background: transparent;
  color: #fff;
  text-align: left;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.header-menu-option:hover,
.header-menu-option:focus-visible {
  outline: 0;
  color: #fff;
  background: rgb(255 255 255 / 10%);
}
.header-menu-option:active {
  background: rgb(255 255 255 / 16%);
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: auto;
  color: #fff;
  white-space: nowrap;
}

.top-information-menu {
  position: relative;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  overflow: visible;
}

.top-information-menu:has(.header-dropdown:popover-open)::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 9px;
  content: "";
}

.top-information-badge {
  position: absolute;
  z-index: 2;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ea4335;
  box-sizing: content-box;
}

.top-information-badge.hidden {
  display: none;
}

.top-information-count {
  color: #ea4335;
  font-variant-numeric: tabular-nums;
}

.account-menu {
  display: flex;
  align-items: center;
  height: 52px;
  font-size: 13px;
}
.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.account-menu-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin: -3px 2px 0 0;
}
#currentUserName { display: block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }

.notification-dialog {
  width: min(1280px, calc(100vw - 32px));
  height: min(680px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 50px rgb(16 24 40 / 25%);
  color: #4b5563;
  font-family: var(--table-font-family);
}

.notification-dialog::backdrop {
  background: rgb(15 23 42 / 38%);
}

.authorization-notification-dialog {
  width: min(980px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 32px));
}

.sync-log-detail-dialog {
  width: min(1180px, calc(100vw - 32px));
  height: min(650px, calc(100vh - 32px));
}

.sync-log-detail-body {
  gap: 0;
  padding: 10px;
}

.sync-log-detail-body .notification-dialog-summary:empty {
  display: none;
}

.sync-log-detail-stream {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 14px;
  border: 1px solid var(--table-border-color);
  border-radius: 5px;
  background: #fff;
  color: #4b5563;
  font-family: var(--table-font-family);
  font-size: 13px;
}



.sync-log-stream-row {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f5;
  box-sizing: border-box;
  line-height: 24px;
}

.sync-log-stream-row:last-child {
  border-bottom: 0;
}

.sync-log-stream-time {
  flex: 0 0 82px;
  color: #98a2b3;
  font-variant-numeric: tabular-nums;
}

.sync-log-stream-message {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sync-log-stream-row.is-failed .sync-log-stream-message {
  color: #ea4335;
}

.sync-log-stream-row.is-start .sync-log-stream-message,
.sync-log-stream-row.is-finished .sync-log-stream-message {
  color: #344054;
  font-weight: 600;
}

.sync-log-table tbody tr:not(.placeholder-row) {
  cursor: default;
}

.notification-dialog-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.notification-dialog-shell > header {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid #e4e7ec;
}

.notification-dialog-shell > header h2 {
  margin: 0;
  color: #344054;
  font-size: 15px;
  font-weight: 500;
}

.notification-dialog-shell > header button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.notification-dialog-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.notification-dialog-summary {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #e4e7ec;
  border-radius: 5px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 13px;
}

.notification-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--table-border-color);
  border-radius: 5px;
}

.notification-table-scroll-shell,
.notification-table-scroll {
  height: 100%;
  min-height: 0;
}

.notification-table-scroll-shell {
  border: 0;
  border-radius: 0;
}



.notification-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--table-text-color);
  font-family: var(--table-font-family);
  font-size: 13px;
}

.order-audit-table {
  min-width: 1180px;
}

.notification-table th {
  padding: 5px;
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-table td {
  height: 44px;
  padding: 5px;
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 50px;
  background: var(--table-header-bg);
  color: var(--table-header-text-color);
  font-size: var(--table-header-font-size);
  font-weight: 700;
}

.notification-table th:last-child,
.notification-table td:last-child { border-right: 0; }
.notification-table tbody tr:last-child td { border-bottom: 0; }
.notification-table td.notification-left { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.notification-table .notification-failed { color: #ea4335; }
.notification-table .notification-success { color: #00a65a; }

.notification-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: #98a2b3;
  font-size: 13px;
}

.order-audit-toolbar {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: var(--app-shell-surface);
}

.order-audit-toolbar input,
.order-audit-toolbar select,
.order-audit-toolbar button {
  height: var(--ui-control-height);
  box-sizing: border-box;
  font-family: var(--table-font-family);
  font-size: 13px;
}

.order-audit-toolbar > input[type="date"] { width: 142px; }
.order-audit-toolbar > select { width: 130px; }
.order-audit-date-separator { color: #98a2b3; font-size: 13px; }

.order-audit-search-group {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 60px;
  flex: 1;
  min-width: 250px;
}

.order-audit-search-group input {
  min-width: 0;
  border-radius: var(--ui-control-radius) 0 0 var(--ui-control-radius);
}

.order-audit-search-group button {
  width: 60px;
  border-color: var(--ui-primary);
  border-radius: 0 var(--ui-control-radius) var(--ui-control-radius) 0;
  background: var(--ui-primary);
  color: #fff;
}
.order-audit-search-group button:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}
.order-audit-search-group button:active:not(:disabled) {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}

.notification-dialog-pager {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
}

.notification-dialog-pager button {
  min-width: 32px;
  height: var(--ui-control-height);
  padding: 0 8px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: var(--ui-primary);
  font-family: var(--table-font-family);
  font-size: 13px;
  cursor: pointer;
}
.notification-dialog-pager button:hover:not(:disabled) {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}
.notification-dialog-pager button:active:not(:disabled) {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}

.notification-dialog-pager button:disabled {
  color: #b8c0cc;
  cursor: default;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #f3f6fa;
}

.auth-overlay.hidden { display: none; }
.auth-card label.hidden { display: none; }

.auth-card {
  width: 380px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 28px 32px 30px;
  border: 1px solid #d8e0eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(30, 48, 72, 0.14);
}

button.permission-disabled,
button.permission-disabled:hover {
  color: #98a2b3 !important;
  background: #f2f4f7 !important;
  border-color: #e4e7ec !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.auth-card header { margin-bottom: 22px; text-align: center; }
.auth-card h1 { margin: 0; color: #27364b; font-size: 22px; }
.auth-card header p { margin: 7px 0 0; color: #77849a; font-size: 13px; }
.auth-card label,
.operator-dialog-body label { display: grid; gap: 7px; margin-top: 14px; color: #435168; font-size: 13px; }
.auth-card input,
.operator-dialog input[type="text"],
.operator-dialog input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  outline: none;
  font-size: 13px;
}
.auth-card input:focus,
.operator-dialog input[type="text"]:focus,
.operator-dialog input[type="password"]:focus { border-color: var(--ui-primary); box-shadow: var(--ui-inset-focus); }
.auth-card > button { width: 100%; height: 40px; margin-top: 18px; }
.auth-message { min-height: 18px; margin-top: 10px; color: #c62828; font-size: 12px; }

.staff-management-panel { height: 100%; margin: 0; }
body.staff-active { height: 100vh; overflow: hidden; }
body.staff-active .workspace { padding: 0; background: var(--app-shell-surface); overflow: hidden; }
body.staff-active #staff { height: 100%; min-height: 0; }
.staff-org-heading { display: flex; align-items: center; justify-content: center; height: 34px; color: #334258; font-size: 14px; }
.staff-org-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 0 0; }
.staff-org-actions button { min-width: 0; height: var(--ui-control-height); padding: 0 5px; border-color: var(--ui-control-border); border-radius: var(--ui-control-radius); color: var(--ui-primary); background: var(--ui-control-background); font-family: var(--table-font-family); font-size: 12px; }
#staff .staff-management-panel { border: 0; border-radius: 0; padding: 0; box-shadow: none; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
#staff .staff-toolbar { flex: 0 0 auto; margin: 0; padding: 8px 0; min-height: calc(var(--ui-control-height) + 16px); }
#staffTable { flex: 1; min-height: 0; }
#staffTable .table-scroll-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
#staffTable .table-scroll-shell > .table-wrap { height: auto; min-height: 0; }
#staffTable table { table-layout: fixed; }
#staffTable [data-column="__index"] { width: 42px !important; min-width: 42px !important; max-width: 42px !important; }
#staffTable [data-column="select"] { width: 35px !important; min-width: 35px !important; max-width: 35px !important; }
.staff-toolbar { justify-content: flex-start; gap: var(--ui-page-gap); }
.staff-search-input { width: 260px; height: var(--ui-control-height); padding: 0 10px; border: 1px solid var(--ui-control-border); border-radius: var(--ui-control-radius); color: #435168; background: var(--ui-control-background); font-family: var(--table-font-family); font-size: 13px; outline: none; }
.staff-search-input:focus { border-color: var(--ui-primary); box-shadow: var(--ui-inset-focus); }
.staff-management-status { color: var(--muted); font-size: 13px; }

.operator-dialog {
  width: 660px;
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 1px solid #d6deea;
  border-radius: 8px;
  color: #3d4b61;
  background: #fff;
}
.operator-dialog::backdrop { background: rgba(26, 38, 55, .38); }
.operator-dialog form > header {
  box-sizing: border-box;
  min-height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e7ef;
  padding: 0 18px;
}
.operator-dialog form > footer {
  box-sizing: border-box;
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 0 18px;
}
.operator-dialog form > header h2 { margin: 0; font-size: 16px; color: #334258; }
.operator-dialog form > header button { margin-left: auto; border: 0; background: transparent; color: #748197; font-size: 22px; cursor: pointer; }
.operator-dialog form > footer { justify-content: flex-end; gap: 10px; border-top: 1px solid #e2e7ef; border-bottom: 0; }
.operator-dialog form > footer button { min-width: 78px; height: var(--ui-control-height); border-radius: var(--ui-control-radius); }
.operator-dialog-body { max-height: 560px; overflow-y: auto; padding: 4px 20px 20px; }
.operator-profile-dialog { width: 460px; }
.operator-profile-dialog .operator-dialog-body { max-height: calc(100vh - 132px); padding: 20px 30px; }
.operator-profile-fields { display: grid; gap: 10px; }
.operator-dialog-body .operator-profile-fields > label,
.operator-dialog-body .operator-profile-field { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; }
.operator-profile-fields > label > span,
.operator-profile-field > span { text-align: right; color: #435168; font-size: 13px; }
.operator-profile-fields .required-field::before { content: "*"; margin-right: 4px; color: #f04438; }
.operator-profile-fields input,
.operator-profile-fields select,
.operator-profile-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--ui-control-border); border-radius: var(--ui-control-radius); outline: none; color: #435168; background: var(--ui-control-background); font-family: inherit; font-size: 13px; }
.operator-profile-fields input,
.operator-profile-fields select { height: var(--ui-control-height); padding: 0 10px; }
.operator-profile-fields textarea { height: 48px; padding: 7px 10px; resize: none; }
.operator-profile-fields input:focus,
.operator-profile-fields select:focus,
.operator-profile-fields textarea:focus { border-color: var(--ui-primary); box-shadow: var(--ui-inset-focus); }
.operator-permission-options input:disabled + span,
.operator-function-options .permission-delegation-disabled,
.permission-page-cell .permission-delegation-disabled,
.permission-navigation-cell .permission-delegation-disabled { color: #a5afbf; cursor: not-allowed; }
.operator-single-date-control { position: relative; min-width: 0; }
.operator-single-date-control > .date-range-btn { width: 100%; height: var(--ui-control-height); padding: 0 10px; border-color: var(--ui-control-border); border-radius: var(--ui-control-radius); color: #435168; background: var(--ui-control-background); font-size: 13px; }
.operator-profile-dialog .operator-single-date-picker { top: auto; right: 0; bottom: calc(100% + 5px); left: auto; }
.operator-single-date-picker .quick-ranges { margin-top: 10px; }
.operator-profile-dialog .auth-message:empty { display: none; }
.org-unit-dialog { width: 420px; }
.org-unit-dialog .operator-dialog-body { padding: 20px 30px; }
.org-unit-dialog .operator-dialog-body > label { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; }
.org-unit-dialog .operator-dialog-body > label > span { color: #435168; font-size: 13px; text-align: right; }
.org-unit-dialog .operator-dialog-body input[type="text"] { box-sizing: border-box; width: 100%; height: var(--ui-control-height); padding: 0 10px; border: 1px solid var(--ui-control-border); border-radius: var(--ui-control-radius); color: #435168; background: var(--ui-control-background); font-family: inherit; font-size: 13px; }
.copy-permissions-dialog { width: 760px; }
.copy-permissions-dialog .operator-dialog-body { padding: 12px 20px; overflow: hidden; }
#copyPermissionsTable { height: 410px; min-height: 0; }
#copyPermissionsTable .table-scroll-shell { height: 100%; min-height: 0; }
#copyPermissionsTable .table-wrap { height: 100%; min-height: 0; }
#copyPermissionsTable [data-column="__index"] { width: 42px !important; min-width: 42px !important; max-width: 42px !important; }
#copyPermissionsTable [data-column="copySelect"] { width: 45px !important; min-width: 45px !important; max-width: 45px !important; }
.operator-permission-section { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #dbe2ec; }
.operator-permission-section h3 { margin: 0 0 10px; color: #526077; font-size: 13px; font-weight: 600; }
.operator-cost-options { display: flex; gap: 28px; }
.operator-cost-options label,
.operator-select-all,
.operator-shop-permissions label { display: flex; align-items: center; gap: 8px; margin: 0; }
.operator-shop-permissions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin-top: 12px; }
.operator-shop-permissions label { min-width: 0; }
.operator-shop-permissions span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator-permissions-dialog { width: 1070px; height: 700px; max-height: calc(100vh - 32px); overflow: hidden; }
.operator-permissions-dialog.scope-collapsed { width: 770px; }
.operator-permissions-dialog form { height: 100%; min-height: 0; display: grid; grid-template-rows: 50px minmax(0, 1fr) 50px; }
.operator-permissions-dialog form > header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator-permission-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 708px 20px 300px; gap: 0; overflow-x: auto; }
.operator-permissions-dialog.scope-collapsed .operator-permission-layout { grid-template-columns: 708px 20px; overflow: visible; }
.operator-permissions-dialog.scope-collapsed .operator-permission-columns { display: none; }
.operator-permission-scope-toggle { width: 20px; min-width: 20px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ui-link); font-size: 13px; cursor: pointer; }
.operator-permissions-dialog.scope-collapsed .operator-permission-scope-toggle { position: relative; z-index: 1; width: 20px; min-width: 20px; transform: translateX(10px); overflow: visible; }
.operator-permission-scope-toggle span { display: inline-block; line-height: 20px; writing-mode: vertical-rl; text-orientation: upright; }
.operator-permission-columns { min-width: 0; min-height: 0; display: grid; grid-template-columns: 150px 150px; gap: 0; }
.operator-permissions-dialog .operator-permission-section { position: relative; min-width: 0; min-height: 0; margin: 0; border: 0; padding: 0; display: grid; grid-template-rows: 50px minmax(0, 1fr); }
.operator-permissions-dialog .operator-permission-section:not(:first-child)::after { content: ""; position: absolute; top: 53px; bottom: 3px; left: 0; width: 1px; background: #e2e7ef; pointer-events: none; }
.operator-permissions-dialog .operator-permission-section h3 { height: 50px; display: flex; align-items: center; justify-content: center; margin: 0; border-bottom: 0; background: #f7f9fb; color: var(--table-header-text-color); }
.operator-permission-options { min-height: 0; padding: 12px; overflow-y: auto; }
.operator-permissions-dialog .operator-cost-options { flex-direction: column; gap: 12px; }
.operator-permissions-dialog .operator-cost-options label { justify-content: center; width: 100%; }
.operator-permissions-dialog .operator-shop-permissions { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.operator-permissions-dialog .operator-dialog-body { min-height: 0; max-height: none; padding: 12px 20px; overflow: hidden; display: flex; flex-direction: column; }
.operator-permissions-dialog .auth-message:empty { display: none; }
.operator-general-permissions { min-width: 0; min-height: 0; overflow: hidden; }
.operator-permission-matrix-shell { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.operator-permission-matrix-shell .table-split-frame { height: 100%; }
.operator-permission-matrix-heading { width: 100%; height: 50px; padding-right: 0; border-bottom: 0; background: #f7f9fb; }
.operator-permission-matrix-heading .operator-permission-matrix thead th { position: static; }
.operator-permission-matrix-heading .operator-permission-matrix thead th { border-bottom: 0; }
.operator-permission-matrix-scroll { min-width: 0; min-height: 0; }
.operator-permission-matrix { width: 100%; min-width: 700px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.operator-permission-matrix .permission-nav-col { width: 150px; }
.operator-permission-matrix .permission-page-col { width: 150px; }
.operator-permission-matrix .permission-function-col { width: 400px; }
.operator-permission-matrix thead th { position: sticky; top: 0; height: var(--table-header-height); text-align: center; background: var(--table-header-bg); z-index: 2; }
.permission-navigation-group { position: relative; }
.permission-navigation-group::before,
.permission-navigation-group::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 1px; background: #e2e7ef; z-index: 1; pointer-events: none; }
.permission-navigation-group::before { left: 149px; }
.permission-navigation-group::after { left: 299px; }
.operator-permission-matrix td { height: auto; padding: 12px 8px; text-align: left; white-space: normal; }
.operator-permission-matrix .permission-navigation-cell,
.operator-permission-matrix .permission-page-cell { text-align: center !important; }
.operator-permission-matrix .permission-navigation-cell label,
.operator-permission-matrix .permission-page-cell label { justify-content: center; }
.operator-permission-matrix label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.operator-permission-matrix label span { min-width: 0; overflow-wrap: anywhere; }
.operator-permission-matrix input[type="checkbox"] { flex: 0 0 16px; }
.operator-function-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.permission-owner-only { color: #8a95a5; font-size: 12px; }
.permission-empty-view { padding: 32px; text-align: center; color: var(--muted); }
.permission-query-denied .view.active .table-scroll-shell,
.permission-query-denied .view.active .report-toolbar .filter-control { visibility: hidden; }
.password-dialog { width: 420px; }
.password-dialog .operator-dialog-body { padding-top: 4px; }
@media (max-width: 560px) {
  .operator-shop-permissions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tabbar {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex: 0 0 34px;
  align-items: end;
  justify-content: flex-start;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 18px;
  overflow: visible;
  background: var(--app-shell-accent);
  border-bottom: 0;
  gap: 0;
}
.tabbar-tabs {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: auto;
  max-width: calc(100% - 76px);
  min-width: 0;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  user-select: none;
  cursor: pointer;
}
.tabbar-tabs-track {
  display: flex;
  align-items: end;
  flex-wrap: nowrap;
  gap: 2px;
  width: max-content;
  min-width: 100%;
  height: 34px;
  min-height: 34px;
  padding-inline: 12px;
  transform: none;
}
.tabbar-tabs-track.is-animating {
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.tabbar-tabs.is-dragging,
.tabbar-tabs.is-dragging .tab-btn {
  cursor: grabbing;
}
.tabbar-actions {
  position: absolute;
  right: 16px;
  bottom: 2px;
  flex: 0 0 auto;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
  margin-left: 0;
  background: var(--app-shell-accent);
}
.tabbar-action-btn {
  position: relative;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #667085;
  background: rgb(253 253 252 / 70%);
  line-height: 0;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.tabbar-action-btn:hover {
  color: #111827;
  background: rgb(253 253 252 / 70%);
}
.tabbar-action-btn::before {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.tabbar-refresh-active-btn::before {
  background-color: currentColor;
  background-image: none;
  mask: url("./assets/icons/refresh.svg") center / contain no-repeat;
}
.tabbar-notification-btn::before {
  content: "!";
  font-size: 20px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.tabbar-action-btn:hover::before {
  opacity: 1;
}
.tabbar-action-btn:disabled {
  cursor: default;
}
.tabbar-action-btn:disabled::before {
  opacity: .3;
}
.tabbar-refresh-active-btn.is-refreshing::before {
  animation: tabbar-refresh-spin .8s linear infinite;
}
@keyframes tabbar-refresh-spin {
  to { transform: rotate(360deg); }
}
.tab-btn {
  --tab-curve-inset: 0px;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: calc(130px + 2 * var(--tab-curve-inset));
  max-width: none;
  height: 28px;
  padding: 0 calc(24px + var(--tab-curve-inset));
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px;
  color: #fff;
  background: rgb(253 253 252 / 30%);
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  cursor: pointer;
}

.tab-btn:hover {
  color: #fff;
  background: rgb(253 253 252 / 30%);
}

.tab-btn.active {
  --tab-curve-inset: 12px;
  z-index: 2;
  margin-inline: calc(-1 * var(--tab-curve-inset));
  height: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  color: var(--app-shell-accent);
  background: var(--app-shell-surface);
  clip-path: shape(
    from 0 100%,
    arc to 12px 18px of 12px ccw,
    vline to 10px,
    arc to 22px 0 of 10px cw,
    hline to calc(100% - 22px),
    arc to calc(100% - 12px) 10px of 10px cw,
    vline to 18px,
    arc to 100% 100% of 12px ccw,
    close
  );
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.tab-btn:not(.active) {
  z-index: 1;
  margin-bottom: 2px;
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
}

.tab-btn > span {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}
.tab-close {
  position: absolute;
  z-index: 1;
  right: calc(12px + var(--tab-curve-inset));
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
}
.tab-btn:hover .tab-close {
  opacity: .9;
}
.tab-close:hover {
  background: transparent;
  opacity: 1;
}

.workspace {
  position: relative;
  min-width: 0;
  height: calc(100vh - var(--workspace-top-offset));
  min-height: 0;
  padding: var(--ui-page-gap);
  overflow: auto;
  border-radius: 18px 18px 0 0;
  background: var(--app-shell-surface);
}
body.orders-active .workspace { padding: var(--ui-page-gap); }
h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: 0; }
p { margin: 0; color: var(--muted); }
.filters { display: flex; gap: var(--filter-gap); flex-wrap: wrap; justify-content: flex-end; }
select {
  height: var(--filter-height);
  border: 1px solid var(--line);
  border-radius: var(--filter-radius);
  padding: 0 8px;
  color: var(--text);
  font-size: 13px;
  line-height: var(--filter-height);
}
button,
input {
  height: var(--filter-height);
  border: 1px solid var(--line);
  border-radius: var(--filter-radius);
  padding: 0 8px;
  background: var(--ui-control-background);
  color: var(--text);
  font-size: 13px;
  line-height: var(--filter-height);
}
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea
):focus-visible {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}
.unified-filter-input {
  height: var(--ui-control-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #6d6d72;
  background: var(--ui-control-background);
  box-shadow: none;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
}
.unified-filter-input:focus,
.unified-filter-input:focus-visible {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}
select {
  appearance: none;
  padding-right: 26px;
  background:
    linear-gradient(45deg, transparent 50%, #64748b 50%) right 13px center / 5px 5px no-repeat,
    linear-gradient(135deg, #64748b 50%, transparent 50%) right 8px center / 5px 5px no-repeat,
    #fff;
}
button { cursor: pointer; }
.primary {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary);
}
.primary:hover:not(:disabled) {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}
.primary:focus-visible:not(:disabled) {
  border-color: var(--ui-primary);
  outline: 0;
  color: #fff;
  background: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}
.primary:active:not(:disabled) {
  border-color: var(--ui-primary-active);
  color: #fff;
  background: var(--ui-primary-active);
}
.two-char-primary-btn {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  padding-inline: 0;
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}
.two-char-primary-btn:hover:not(:disabled) {
  background: var(--ui-primary-hover);
}
.two-char-primary-btn:active {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}
.filter-bar {
  display: flex;
  align-items: end;
  gap: var(--filter-gap);
  flex-wrap: wrap;
}
.filter-control {
  display: grid;
  gap: 4px;
}
.filter-control > label {
  color: var(--muted);
  font-size: 13px;
}
.filter-bar :is(input, select, button):focus-visible,
.filter-control :is(input, select, button):focus-visible {
  outline: 0;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-inset-focus);
}
.filter-select-source {
  display: none;
}
.unified-select-field {
  position: relative;
  width: 180px;
}

.view { display: none; }
.view.active { display: block; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.loss { color: var(--red); }
.layout { display: grid; gap: 14px; margin-top: 14px; }
.layout.two { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); }
.panel { padding: 16px; min-width: 0; }

/* Homepage components */

body[data-permission-view="overview"] {
  --home-bg: var(--app-shell-surface);
  --home-surface: #ffffff;
  --home-surface-soft: #f8fafc;
  --home-border: #e3e8ef;
  --home-border-strong: #d5dce6;
  --home-text: #111827;
  --home-text-secondary: #667085;
  --home-text-tertiary: #98a2b3;
  --home-primary: #3b82f6;
  --home-primary-soft: #eff6ff;
  --home-success: #16805d;
  --home-danger: #d92d20;
  --home-warning: #b65f06;
  --home-radius: 8px;
  --home-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 6px 18px rgb(16 24 40 / 5%);
  --home-shadow-raised: 0 2px 5px rgb(16 24 40 / 7%), 0 12px 28px rgb(16 24 40 / 7%);
  background: var(--app-shell-accent);
}

body[data-permission-view="overview"] .home-overview {
  width: 100%;
  color: var(--home-text);
  font-variant-numeric: tabular-nums;
}

body[data-permission-view="overview"] .home-today-surface {
  position: relative;
  z-index: 2;
  overflow: visible;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: rgb(255, 255, 255);
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  margin-bottom: 16px;
}

body[data-permission-view="overview"] .home-today-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgb(237, 240, 244);
  min-height: 58px;
  padding: 10px 16px;
}

body[data-permission-view="overview"] .home-today-heading h2 {
  margin: 0px;
  color: var(--home-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-today-heading p {
  margin: 2px 0px 0px;
  color: var(--home-text-tertiary);
  font-size: 12px;
}

body[data-permission-view="overview"] .home-today-heading > span {
  margin: 2px 0px 0px;
  color: rgb(152, 162, 179);
  font-size: 12px;
}

body[data-permission-view="overview"] .home-today-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-permission-view="overview"] .home-today-filters > .unified-filter-select {
  width: 144px;
  min-width: 144px;
}

body[data-permission-view="overview"] .home-today-filters > .unified-select-field {
  width: 144px;
  min-width: 144px;
}

body[data-permission-view="overview"] .home-today-filters > .home-today-date-field {
  width: 144px;
  min-width: 144px;
}

body[data-permission-view="overview"] .home-today-date-field > .home-today-date-filter {
  width: 100%;
  padding: 0px 10px;
  overflow: hidden;
  background-image: initial;
  background-position: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  font-family: var(--table-font-family);
  text-overflow: ellipsis;
  white-space: nowrap;
  height: var(--ui-control-height);
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: rgb(71, 84, 103);
  background-color: var(--home-surface);
  font-size: 13px;
  line-height: var(--ui-control-height);
  transition: border-color 0.16s, box-shadow 0.16s, background-color 0.16s;
}

body[data-permission-view="overview"] .home-today-date-picker .quick-ranges {
  margin-top: 10px;
}

body[data-permission-view="overview"] .home-today-filters .multi-filter-btn {
  height: var(--ui-control-height);
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: rgb(71, 84, 103);
  background-color: var(--home-surface);
  font-size: 13px;
  line-height: var(--ui-control-height);
  transition: border-color 0.16s, box-shadow 0.16s, background-color 0.16s;
}

body[data-permission-view="overview"] .home-today-status {
  min-height: 32px;
  padding: 7px 14px;
  border-bottom: 1px solid rgb(178, 204, 255);
  font-size: 13px;
  color: rgb(23, 92, 211);
  border-top-color: rgb(178, 204, 255);
  border-right-color: rgb(178, 204, 255);
  border-left-color: rgb(178, 204, 255);
  background: var(--home-primary-soft);
}

body[data-permission-view="overview"] .home-today-status.error {
  color: rgb(180, 35, 24);
  background: rgb(255, 245, 244);
}

body[data-permission-view="overview"] .home-today-status.hidden {
  display: none;
}

body[data-permission-view="overview"] .home-today-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
}

body[data-permission-view="overview"] .home-today-metric {
  min-width: 0px;
  border-right: 1px solid rgb(237, 240, 244);
  position: relative;
  min-height: 122px;
  padding: 16px 18px 14px;
  border-top-color: rgb(237, 240, 244);
  border-bottom-color: rgb(237, 240, 244);
  border-left-color: rgb(237, 240, 244);
  background: var(--home-surface);
  transition: background-color 0.16s;
}

body[data-permission-view="overview"] .home-today-metric:last-child {
  border-right: 0px;
}

body[data-permission-view="overview"] .home-today-metric > span {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-today-metric > em {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-today-metric > strong {
  display: block;
  overflow: hidden;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 8px 0px 10px;
  color: var(--home-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-today-metric.turnover > strong {
  color: rgb(20, 115, 201);
}

body[data-permission-view="overview"] .home-today-metric.refund > strong {
  color: var(--home-danger);
}

body[data-permission-view="overview"] .home-today-metric.effective > strong {
  color: var(--home-success);
}

body[data-permission-view="overview"] .home-today-metric.ad-cost > strong {
  color: var(--home-warning);
}

body[data-permission-view="overview"] .home-today-metric-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--home-text-secondary);
  line-height: 18px;
  transform: none;
}

body[data-permission-view="overview"] .home-today-metric-foot > span {
  flex: 0 0 auto;
}

body[data-permission-view="overview"] .home-today-metric-foot > em {
  overflow: hidden;
  min-width: 0px;
  font-size: 12px;
  font-style: normal;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-today-metric-foot.single {
  justify-content: flex-start;
}

body[data-permission-view="overview"] .home-today-metric.placeholder {
  background: rgb(251, 252, 254);
}

body[data-permission-view="overview"] .home-today-skeleton {
  min-height: 108px;
  border-right: 1px solid rgb(231, 236, 242);
  background: rgb(245, 247, 250);
}

body[data-permission-view="overview"] .home-today-skeleton:last-child {
  border-right: 0px;
}

body[data-permission-view="overview"] .home-shop-cards-section {
  margin-bottom: 16px;
}

body[data-permission-view="overview"] .home-shop-cards-heading {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0px 2px 8px;
}

body[data-permission-view="overview"] .home-shop-cards-heading h3 {
  margin: 0px;
  color: var(--home-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-shop-cards-heading p {
  margin: 2px 0px 0px;
  line-height: normal;
  color: var(--home-text-tertiary);
  font-size: 12px;
}

body[data-permission-view="overview"] .home-shop-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 12px;
}

body[data-permission-view="overview"] .home-shop-card {
  min-width: 0px;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  background: var(--home-surface);
  box-shadow: var(--home-shadow);
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}

body[data-permission-view="overview"] .home-shop-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgb(237, 240, 244);
  min-height: 48px;
  padding: 9px 12px;
  background: rgb(251, 252, 254);
}

body[data-permission-view="overview"] .home-shop-card-name {
  display: flex;
  align-items: center;
  min-width: 0px;
  gap: 7px;
}

body[data-permission-view="overview"] .home-shop-card-name .platform-logo {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

body[data-permission-view="overview"] .home-shop-card-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text);
  font-size: 14px;
  font-weight: 700;
}

body[data-permission-view="overview"] .home-shop-card-header > em {
  flex: 0 0 auto;
  font-size: 12px;
  font-style: normal;
  color: var(--home-text-tertiary);
}

body[data-permission-view="overview"] .home-shop-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}

body[data-permission-view="overview"] .home-shop-card-metric {
  min-width: 0px;
  border-right: 1px solid rgb(237, 240, 244);
  border-bottom: 1px solid rgb(237, 240, 244);
  min-height: 82px;
  padding: 11px 12px 9px;
  border-top-color: rgb(237, 240, 244);
  border-left-color: rgb(237, 240, 244);
}

body[data-permission-view="overview"] .home-shop-card-metric:nth-child(2n) {
  border-right: 0px;
}

body[data-permission-view="overview"] .home-shop-card-metric.ad-cost {
  grid-column: 1 / -1;
  border-right: 0px;
  border-bottom: 0px;
  min-height: 70px;
}

body[data-permission-view="overview"] .home-shop-card-metric-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0px;
  gap: 8px;
}

body[data-permission-view="overview"] .home-shop-card-metric-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0px;
  gap: 8px;
  margin-top: 5px;
  font-size: 12px;
  line-height: 18px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-shop-card-metric-main > span {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-shop-card-metric-main > strong {
  overflow: hidden;
  min-width: 0px;
  line-height: 24px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-shop-card-metric.turnover .home-shop-card-metric-main > strong {
  color: rgb(20, 115, 201);
}

body[data-permission-view="overview"] .home-shop-card-metric.refund .home-shop-card-metric-main > strong {
  color: var(--home-danger);
}

body[data-permission-view="overview"] .home-shop-card-metric.effective .home-shop-card-metric-main > strong {
  color: var(--home-success);
}

body[data-permission-view="overview"] .home-shop-card-metric.ad-cost .home-shop-card-metric-main > strong {
  color: var(--home-warning);
}

body[data-permission-view="overview"] .home-shop-card-metric-foot > span {
  flex: 0 0 auto;
}

body[data-permission-view="overview"] .home-shop-card-metric-foot > em {
  overflow: hidden;
  min-width: 0px;
  font-size: 12px;
  font-style: normal;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-shop-card-skeleton {
  min-height: 262px;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  background: var(--home-surface);
}

body[data-permission-view="overview"] .home-shop-cards-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 116px;
  place-items: center;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  color: rgb(152, 162, 179);
  font-size: 13px;
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  background: var(--home-surface);
}

body[data-permission-view="overview"] .home-month-chart-section {
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: rgb(255, 255, 255);
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  margin-bottom: 16px;
}

body[data-permission-view="overview"] .home-month-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgb(237, 240, 244);
  padding: 10px 16px;
  min-height: 62px;
}

body[data-permission-view="overview"] .home-month-chart-heading h3 {
  margin: 0px;
  color: var(--home-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-month-chart-title {
  display: grid;
  min-width: 0px;
  gap: 0px;
}

body[data-permission-view="overview"] .home-month-chart-title p {
  overflow: hidden;
  margin: 2px 0px 0px;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text-tertiary);
  font-size: 12px;
}

body[data-permission-view="overview"] .home-month-chart-legend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 16px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-month-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body[data-permission-view="overview"] .home-month-chart-legend span::before {
  background: rgb(24, 144, 255);
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

body[data-permission-view="overview"] .home-month-chart-legend .refund::before {
  background: rgb(229, 72, 77);
}

body[data-permission-view="overview"] .home-month-chart-legend .effective::before {
  background: rgb(18, 161, 108);
}

body[data-permission-view="overview"] .home-month-chart-legend .ad-cost::before {
  background: rgb(245, 166, 35);
}

body[data-permission-view="overview"] .home-month-chart-scroll {
  overflow-x: auto;
}




body[data-permission-view="overview"] .home-month-chart {
  position: relative;
  min-width: 980px;
  padding: 10px 0px 0px;
  height: 324px;
}

body[data-permission-view="overview"] .home-month-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body[data-permission-view="overview"] .home-month-chart-grid {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke: rgb(237, 240, 244);
}

body[data-permission-view="overview"] .home-month-chart-zero {
  stroke: rgb(207, 216, 227);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body[data-permission-view="overview"] .home-month-chart-axis {
  font-family: var(--app-font-family);
  font-size: 11px;
  fill: rgb(122, 134, 153);
}

body[data-permission-view="overview"] .home-month-chart-axis-bg {
  fill: rgba(255, 255, 255, 0.86);
}

body[data-permission-view="overview"] .home-month-chart-bar {
  transform-box: fill-box;
  transform-origin: center center;
  transition: opacity 0.15s, transform 0.16s;
  opacity: 0.82;
}

body[data-permission-view="overview"] .home-month-chart-bar:hover {
  opacity: 1;
  transform: scaleX(1.35);
}

body[data-permission-view="overview"] .home-month-chart-bar.turnover {
  fill: rgb(24, 144, 255);
}

body[data-permission-view="overview"] .home-month-chart-bar.refund {
  fill: rgb(229, 72, 77);
}

body[data-permission-view="overview"] .home-month-chart-bar.effective {
  fill: rgb(18, 161, 108);
}

body[data-permission-view="overview"] .home-month-chart-bar.ad-cost {
  fill: rgb(245, 166, 35);
}

body[data-permission-view="overview"] .home-month-chart-tooltip {
  position: absolute;
  z-index: 3;
  max-width: 260px;
  height: auto;
  color: rgb(255, 255, 255);
  font-size: 12px;
  line-height: 20px;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.96);
  box-shadow: rgba(16, 24, 40, 0.2) 0px 8px 22px;
}

body[data-permission-view="overview"] .home-month-chart-empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  color: rgb(152, 162, 179);
  font-size: 13px;
}

body[data-permission-view="overview"] .home-month-chart-skeleton {
  display: grid;
  min-height: 300px;
  place-items: center;
  color: rgb(152, 162, 179);
  font-size: 13px;
  background: rgb(248, 250, 252);
}

body[data-permission-view="overview"] .home-overview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 12px;
}

body[data-permission-view="overview"] .home-period-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
}

body[data-permission-view="overview"] .home-period-switch button {
  min-width: 68px;
  height: var(--ui-control-height);
  border: 0px;
  border-radius: 6px;
  color: var(--home-text-secondary);
  background: transparent;
  font-weight: 600;
  line-height: var(--ui-control-height);
}

body[data-permission-view="overview"] .home-period-switch button:first-child {
  min-width: 68px;
  height: var(--ui-control-height);
  border: 0px;
  border-radius: 6px;
  color: var(--home-text-secondary);
  background: transparent;
  font-weight: 600;
  line-height: var(--ui-control-height);
}

body[data-permission-view="overview"] .home-period-switch button:last-child {
  min-width: 68px;
  height: var(--ui-control-height);
  border: 0px;
  border-radius: 6px;
  color: var(--home-text-secondary);
  background: transparent;
  font-weight: 600;
  line-height: var(--ui-control-height);
}

body[data-permission-view="overview"] .home-period-switch button.active {
  position: relative;
  z-index: 1;
  border-color: currentColor;
  border-right-width: 1px;
  color: #fff;
  background: var(--ui-primary);
  box-shadow: none;
}

body[data-permission-view="overview"] .home-period-switch button.active + button {
  border-left-width: 0px;
}

body[data-permission-view="overview"] .home-overview-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-permission-view="overview"] .home-overview-range {
  font-size: 13px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-cost-basis-toggle {
  min-width: 78px;
  height: var(--ui-control-height);
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
  font-weight: 600;
  line-height: var(--ui-control-height);
}

body[data-permission-view="overview"] .home-overview-status {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 10px;
  padding: 0px 12px;
  border: 1px solid rgb(178, 204, 255);
  border-radius: 6px;
  font-size: 13px;
  color: rgb(23, 92, 211);
  background: var(--home-primary-soft);
}

body[data-permission-view="overview"] .home-overview-status.error {
  color: rgb(180, 35, 24);
  border-color: rgb(243, 193, 188);
  background: rgb(255, 245, 244);
}

body[data-permission-view="overview"] .home-overview-status.hidden {
  display: none;
}

body[data-permission-view="overview"] .home-primary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 12px;
}

body[data-permission-view="overview"] .home-primary-metric {
  min-width: 0px;
  border-width: 3px 1px 1px;
  border-style: solid;
  border-image: none;
  min-height: 124px;
  padding: 15px 16px 13px;
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  background: var(--home-surface);
  box-shadow: var(--home-shadow);
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}

body[data-permission-view="overview"] .home-primary-metric.sales {
  border-top-color: var(--home-primary);
}

body[data-permission-view="overview"] .home-primary-metric.profit {
  border-top-color: var(--home-success);
}

body[data-permission-view="overview"] .home-primary-metric.negative {
  border-top-color: var(--home-danger);
}

body[data-permission-view="overview"] .home-primary-metric-label {
  font-size: 13px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-primary-metric > strong {
  display: block;
  margin-top: 7px;
  line-height: 1.35;
  color: var(--home-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-primary-metric.negative > strong {
  color: var(--home-danger);
}

body[data-permission-view="overview"] .home-primary-metric-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-primary-metric-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0px;
}

body[data-permission-view="overview"] .home-primary-metric-foot em {
  overflow: hidden;
  max-width: 62%;
  font-style: normal;
  text-overflow: ellipsis;
}

body[data-permission-view="overview"] .home-metric-change {
  font-style: normal;
}

body[data-permission-view="overview"] .home-metric-change.up {
  color: rgb(18, 128, 92);
}

body[data-permission-view="overview"] .home-metric-change.down {
  color: rgb(217, 45, 32);
}

body[data-permission-view="overview"] .home-metric-change.neutral {
  color: rgb(152, 162, 179);
}

body[data-permission-view="overview"] .home-metric-period {
  color: rgb(152, 162, 179);
}

body[data-permission-view="overview"] .home-secondary-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: rgb(255, 255, 255);
  overflow: hidden;
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  margin-top: 12px;
}

body[data-permission-view="overview"] .home-secondary-metric {
  min-width: 0px;
  border-right: 1px solid rgb(237, 240, 244);
  min-height: 82px;
  padding: 12px 14px;
  border-top-color: rgb(237, 240, 244);
  border-bottom-color: rgb(237, 240, 244);
  border-left-color: rgb(237, 240, 244);
}

body[data-permission-view="overview"] .home-secondary-metric:last-child {
  border-right: 0px;
}

body[data-permission-view="overview"] .home-secondary-metric span {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-secondary-metric em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-secondary-metric strong {
  display: block;
  overflow: hidden;
  margin: 4px 0px 2px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--home-text);
  font-size: 18px;
  font-weight: 700;
}

body[data-permission-view="overview"] .home-main-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  grid-template-columns: minmax(0px, 1.8fr) minmax(310px, 0.72fr);
}

body[data-permission-view="overview"] .home-bottom-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  grid-template-columns: minmax(0px, 1.55fr) minmax(330px, 0.65fr);
}

body[data-permission-view="overview"] .home-surface {
  min-width: 0px;
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: rgb(255, 255, 255);
  border-color: var(--home-border);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
}

body[data-permission-view="overview"] .home-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgb(237, 240, 244);
  min-height: 60px;
  padding: 12px 16px 10px;
}

body[data-permission-view="overview"] .home-section-title h2 {
  margin: 0px;
  color: var(--home-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
}

body[data-permission-view="overview"] .home-section-title p {
  margin-top: 3px;
  color: var(--home-text-tertiary);
  font-size: 12px;
}

body[data-permission-view="overview"] .home-chart-legend {
  display: flex;
  align-items: center;
  padding-top: 3px;
  font-size: 12px;
  gap: 16px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body[data-permission-view="overview"] .home-chart-legend span::before {
  content: "";
  background: rgb(24, 144, 255);
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

body[data-permission-view="overview"] .home-chart-legend span.profit::before {
  border-radius: 50%;
  background: rgb(18, 161, 108);
}

body[data-permission-view="overview"] .home-chart-legend span.hidden {
  display: none;
}

body[data-permission-view="overview"] .home-trend-chart {
  height: 300px;
  padding: 16px 16px 10px;
}

body[data-permission-view="overview"] .home-trend-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body[data-permission-view="overview"] .home-chart-grid-line {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke: rgb(237, 240, 244);
}

body[data-permission-view="overview"] .home-chart-zero-line {
  stroke: rgb(205, 213, 223);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body[data-permission-view="overview"] .home-chart-axis-text {
  font-family: var(--app-font-family);
  font-size: 11px;
  fill: rgb(122, 134, 153);
}

body[data-permission-view="overview"] .home-chart-sales-bar {
  fill: rgb(24, 144, 255);
  opacity: 0.72;
}

body[data-permission-view="overview"] .home-chart-sales-bar:hover {
  opacity: 1;
}

body[data-permission-view="overview"] .home-chart-profit-line {
  fill: none;
  stroke: rgb(18, 161, 108);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

body[data-permission-view="overview"] .home-chart-profit-dot {
  fill: rgb(255, 255, 255);
  stroke: rgb(18, 161, 108);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

body[data-permission-view="overview"] .home-structure-surface {
  min-width: 300px;
}

body[data-permission-view="overview"] .home-cost-structure {
  padding: 16px;
}

body[data-permission-view="overview"] .home-structure-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

body[data-permission-view="overview"] .home-structure-total span {
  font-size: 12px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-structure-total strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--home-text);
}

body[data-permission-view="overview"] .home-cost-permission-note {
  margin: -4px 0px 10px;
  color: rgb(152, 162, 179);
  font-size: 12px;
}

body[data-permission-view="overview"] .home-structure-list {
  display: grid;
  gap: 10px;
}

body[data-permission-view="overview"] .home-structure-item {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) 42px;
  gap: 4px 8px;
  align-items: center;
}

body[data-permission-view="overview"] .home-structure-item > div:first-child {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-structure-item > div:first-child strong {
  font-weight: 500;
  color: var(--home-text);
}

body[data-permission-view="overview"] .home-structure-track {
  overflow: hidden;
  border-radius: 3px;
  height: 7px;
  background: rgb(233, 238, 245);
}

body[data-permission-view="overview"] .home-structure-track span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: rgb(127, 186, 243);
}

body[data-permission-view="overview"] .home-structure-track span.ad {
  background: rgb(240, 166, 74);
}

body[data-permission-view="overview"] .home-structure-track span.platform {
  background: rgb(123, 143, 232);
}

body[data-permission-view="overview"] .home-structure-track span.logistics {
  background: rgb(70, 168, 168);
}

body[data-permission-view="overview"] .home-structure-track span.other {
  background: rgb(152, 162, 179);
}

body[data-permission-view="overview"] .home-structure-track span.refund {
  background: rgb(226, 118, 118);
}

body[data-permission-view="overview"] .home-structure-item > em {
  font-size: 11px;
  font-style: normal;
  text-align: right;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-shop-performance {
  overflow: hidden;
  height: 320px;
}

body[data-permission-view="overview"] .home-shop-table-shell {
  height: 100%;
  border: 1px solid var(--table-outer-border-color);
  border-radius: var(--table-radius);
}

body[data-permission-view="overview"] .home-shop-table-wrap {
  height: 100%;
  min-width: 720px;
}

body[data-permission-view="overview"] .home-shop-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--table-body-font-size);
  color: var(--table-text-color);
}

body[data-permission-view="overview"] .home-shop-table th {
  height: var(--table-header-height);
  padding: 0 var(--table-cell-padding);
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0px;
  z-index: 1;
  font-size: var(--table-header-font-size);
  font-weight: var(--table-header-font-weight);
  color: var(--table-header-text-color);
  background: var(--table-header-bg);
  border-top-color: var(--table-border-color);
  border-left-color: var(--table-border-color);
}

body[data-permission-view="overview"] .home-shop-table td {
  height: var(--table-row-height);
  padding: var(--table-cell-padding);
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  text-align: center;
  white-space: nowrap;
  border-top-color: var(--table-border-color);
  border-left-color: var(--table-border-color);
}

body[data-permission-view="overview"] .home-shop-table th:first-child {
  width: 180px;
  text-align: left;
}

body[data-permission-view="overview"] .home-shop-table td:first-child {
  width: 180px;
  text-align: left;
}

body[data-permission-view="overview"] .home-shop-table th:last-child {
  border-right: 0px;
}

body[data-permission-view="overview"] .home-shop-table td:last-child {
  border-right: 0px;
}

body[data-permission-view="overview"] .home-shop-table td.negative {
  color: rgb(217, 45, 32);
}

body[data-permission-view="overview"] .home-completion-value {
  color: rgb(71, 84, 103);
}

body[data-permission-view="overview"] .home-insight-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0px 6px;
  font-size: 12px;
  min-width: 26px;
  height: 24px;
  border-radius: 6px;
  color: rgb(23, 92, 211);
  background: var(--home-primary-soft);
  font-weight: 700;
}

body[data-permission-view="overview"] .home-insights {
  overflow: auto;
  padding: 4px 14px;
  height: 320px;
  padding-inline: 16px;
}

body[data-permission-view="overview"] .home-insight-item {
  display: grid;
  grid-template-columns: 8px minmax(0px, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 0px;
  border-bottom: 1px solid rgb(237, 240, 244);
  padding-block: 13px;
}

body[data-permission-view="overview"] .home-insight-item > span {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: rgb(127, 186, 243);
}

body[data-permission-view="overview"] .home-insight-item.warning > span {
  background: rgb(240, 166, 74);
}

body[data-permission-view="overview"] .home-insight-item.danger > span {
  background: rgb(217, 45, 32);
}

body[data-permission-view="overview"] .home-insight-item strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--home-text);
}

body[data-permission-view="overview"] .home-insight-item p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--home-text-secondary);
}

body[data-permission-view="overview"] .home-empty-state {
  display: grid;
  min-height: 100%;
  place-items: center;
  color: rgb(152, 162, 179);
  font-size: 13px;
}

body[data-permission-view="overview"] .home-insight-empty {
  min-height: 260px;
}

body[data-permission-view="overview"] .home-metric-skeleton {
  min-height: 116px;
  border: 1px solid rgb(231, 236, 242);
  border-radius: 6px;
  background: rgb(245, 247, 250);
}

body[data-permission-view="overview"] .home-secondary-skeleton {
  border-radius: 6px;
  background: rgb(245, 247, 250);
  min-height: 74px;
  border-width: 0px 1px 0px 0px;
  border-style: none solid none none;
  border-color: currentcolor rgb(231, 236, 242) currentcolor currentcolor;
  border-image: none;
}

body[data-permission-view="overview"] .home-today-date-field > .home-today-date-filter:hover {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary-soft);
}

body[data-permission-view="overview"] .home-today-filters .multi-filter-btn:hover {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary-soft);
}

body[data-permission-view="overview"] .home-today-date-field > .home-today-date-filter:focus-visible {
  outline: 0px;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-inset-focus);
}

body[data-permission-view="overview"] .home-today-filters .multi-filter-btn:focus-visible {
  outline: 0px;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-inset-focus);
}

body[data-permission-view="overview"] .home-period-switch button:focus-visible {
  outline: 0px;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}

body[data-permission-view="overview"] .home-cost-basis-toggle:focus-visible {
  outline: 0px;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}

body[data-permission-view="overview"] .home-today-metric:hover {
  background: rgb(251, 252, 254);
}

body[data-permission-view="overview"] .home-shop-card:hover {
  border-color: rgb(200, 211, 225);
  box-shadow: var(--home-shadow-raised);
  transform: translateY(-1px);
}

body[data-permission-view="overview"] .home-period-switch button:hover:not(.active) {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

body[data-permission-view="overview"] .home-cost-basis-toggle:hover {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}

body[data-permission-view="overview"] .home-cost-basis-toggle:active {
  border-color: var(--ui-primary-active);
  color: #fff;
  background: var(--ui-primary-active);
}

body[data-permission-view="overview"] .home-primary-metric:hover {
  border-color: rgb(200, 211, 225);
  box-shadow: var(--home-shadow-raised);
  transform: translateY(-1px);
}

body[data-permission-view="overview"] .home-shop-table tbody tr:hover td {
  background: var(--table-row-hover-bg);
}

@media (max-width: 1380px) {
  body[data-permission-view="overview"] .home-today-metrics {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  body[data-permission-view="overview"] .home-today-metric:nth-child(3n) {
    border-right: 0px;
  }
  body[data-permission-view="overview"] .home-today-metric:nth-child(-n+3) {
    border-bottom: 1px solid rgb(231, 236, 242);
  }
  body[data-permission-view="overview"] .home-primary-metrics {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  body[data-permission-view="overview"] .home-secondary-metrics {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  body[data-permission-view="overview"] .home-secondary-metric:nth-child(3) {
    border-right: 0px;
  }
  body[data-permission-view="overview"] .home-secondary-metric:nth-child(-n+3) {
    border-bottom: 1px solid rgb(231, 236, 242);
  }
}

@media (max-width: 1180px) {
  body[data-permission-view="overview"] .home-shop-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-permission-view="overview"] .home-today-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-permission-view="overview"] .home-primary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-permission-view="overview"] .home-secondary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-permission-view="overview"] .home-today-metric:nth-child(3n) {
    border-right: 0;
  }
  body[data-permission-view="overview"] .home-secondary-metric:nth-child(3n) {
    border-right: 0;
  }
  body[data-permission-view="overview"] .home-today-metric:nth-child(-n+3) {
    border-bottom: 1px solid #edf0f4;
  }
  body[data-permission-view="overview"] .home-secondary-metric:nth-child(-n+3) {
    border-bottom: 1px solid #edf0f4;
  }
}

@media (max-width: 1050px) {
  body[data-permission-view="overview"] .home-overview-toolbar {
    align-items: flex-start;
  }
  body[data-permission-view="overview"] .home-overview-toolbar-right {
    align-items: flex-end;
    flex-direction: column-reverse;
  }
}

@media (max-width: 980px) {
  body[data-permission-view="overview"] .home-main-grid {
    grid-template-columns: 1fr;
  }
  body[data-permission-view="overview"] .home-bottom-grid {
    grid-template-columns: 1fr;
  }
  body[data-permission-view="overview"] .home-today-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  body[data-permission-view="overview"] .home-today-filters {
    width: 100%;
  }
}

@media (max-width: 720px) {
  body[data-permission-view="overview"] .home-shop-cards {
    grid-template-columns: 1fr;
  }
  body[data-permission-view="overview"] .home-today-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  body[data-permission-view="overview"] .home-today-filters {
    width: 100%;
    flex-wrap: wrap;
  }
  body[data-permission-view="overview"] .home-today-filters > .unified-filter-select {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 140px;
  }
  body[data-permission-view="overview"] .home-today-filters > .unified-select-field {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 140px;
  }
  body[data-permission-view="overview"] .home-today-filters > .home-today-date-field {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    min-width: 140px;
  }
  body[data-permission-view="overview"] .home-overview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  body[data-permission-view="overview"] .home-overview-toolbar-right {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
  }
  body[data-permission-view="overview"] .home-primary-metrics {
    grid-template-columns: 1fr;
  }
  body[data-permission-view="overview"] .home-today-metrics {
    grid-template-columns: 1fr;
  }
  body[data-permission-view="overview"] .home-secondary-metrics {
    grid-template-columns: 1fr;
  }
  body[data-permission-view="overview"] .home-today-metric {
    border-right: 0;
    border-bottom: 1px solid #edf0f4;
  }
  body[data-permission-view="overview"] .home-secondary-metric {
    border-right: 0;
    border-bottom: 1px solid #edf0f4;
  }
  body[data-permission-view="overview"] .home-primary-metric-foot {
    align-items: flex-start;
    flex-direction: column;
  }
  body[data-permission-view="overview"] .home-primary-metric-foot em {
    max-width: 100%;
  }
  body[data-permission-view="overview"] .home-month-chart-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  body[data-permission-view="overview"] .home-month-chart-legend {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-permission-view="overview"] .home-shop-card {
    transition: none;
  }
  body[data-permission-view="overview"] .home-primary-metric {
    transition: none;
  }
  body[data-permission-view="overview"] .home-month-chart-bar {
    transition: none;
  }
}

.date-picker.home-today-date-picker {
  right: 0;
  left: auto;
  z-index: 40;
}

.shop-management-panel {
  min-width: 0;
}
.shop-management-main {
  gap: 8px;
}
.shop-management-toolbar {
  min-height: var(--ui-control-height);
  margin: 0;
  padding: 0;
}
.shop-management-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.shop-management-toolbar .shop-management-status {
  min-height: 0;
  height: var(--ui-control-height);
}
.shop-management-toolbar .shop-management-status:empty {
  display: none;
}
.shop-management-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: #fff;
}
#shopManagementTable {
  flex: 1;
  min-height: 0;
}
#shopManagementTable .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.shop-management-table th,
.shop-management-table td {
  text-align: center;
}

.shop-management-table th[data-column="daysLeft"] .th-content,
.shop-management-table .days {
  white-space: nowrap;
  text-align: center;
}

.shop-management-table td[data-column="daysLeft"] .table-cell-content {
  text-align: center;
}

.shop-auth-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.shop-action-trigger {
  padding: 0;
}

.shop-action-floating {
  position: fixed;
  z-index: 3000;
  display: flex;
  min-width: 96px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  background: var(--ui-popover-background);
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  box-shadow: var(--unified-filter-panel-shadow);
}

.shop-action-floating button {
  width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--ui-control-radius);
  background: transparent;
  color: #334155;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.shop-action-floating button:hover {
  color: #fff;
  background: var(--ui-primary-hover);
}

.shop-management-table td[data-column="status"] .table-cell-content,
.shop-management-table td[data-column="adsStatus"] .table-cell-content,
.shop-management-table td[data-column="shopKey"] .table-cell-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-height: none;
  overflow: visible;
  white-space: nowrap;
}

.shop-sort-drawer {
  width: 360px;
}

.shop-sort-list {
  display: grid;
  gap: 8px;
}

.shop-sort-item {
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #fff;
  cursor: grab;
}

.shop-sort-item.dragging {
  opacity: .55;
}

.shop-sort-item.drag-over {
  border-color: #1677ff;
  background: #f2f7ff;
}

.shop-sort-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-sort-id {
  color: #98a2b3;
  font-size: 12px;
  white-space: nowrap;
}
.shop-management-table .platform-logo,
.shop-sort-item .platform-logo {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
}
.link-btn {
  height: 26px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ui-link);
}
.state {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.state.ok { background: #e3f7eb; color: #0b7b43; }
.state.warn { background: #fff4df; color: #9b5a00; }
.state.bad { background: #ffe9e9; color: #b3261e; }
.days.bad { color: #d22; font-weight: 700; }
.days.warn { color: #c77b00; font-weight: 700; }
.duplicate-tip {
  margin-top: 6px;
  color: #c77700;
  font-size: 12px;
}
.shop-management-dialog {
  width: min(760px, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}
.shop-management-dialog::backdrop {
  background: rgba(15, 23, 42, .38);
}
.shop-management-dialog form {
  padding: 22px;
}
.shop-management-dialog h2 {
  margin: 0 0 8px;
  color: #173f30;
  font-size: 20px;
}
.shop-management-dialog .hint {
  background: #f3f7ff;
  padding: 10px;
  border-radius: 8px;
  color: #456173;
}
.shop-management-dialog label {
  display: block;
  margin: 13px 0;
  color: #36564b;
}
.shop-management-dialog label input {
  width: 100%;
  margin-top: 6px;
}
.shop-login-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}
.shop-login-fields {
  border: 1px solid #e1e8ef;
  border-radius: 12px;
  padding: 14px;
  background: #fbfdff;
}
.shop-edit-fields {
  border: 1px solid #e1e8ef;
  border-radius: 12px;
  padding: 16px;
  background: #fbfdff;
  margin-top: 14px;
}
.shop-login-fields label {
  margin: 0 0 12px;
}
.shop-edit-fields label {
  display: block;
  margin: 0 0 12px;
  color: #36564b;
}
.shop-edit-fields input {
  width: 100%;
  margin-top: 6px;
}
.shop-login-note {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}
.shop-dialog-tip {
  min-height: 18px;
  margin-top: 8px;
  color: #d92d20;
  font-size: 13px;
}
.shop-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}
.shop-platform-card {
  position: relative;
  height: 96px;
  border: 1px solid #d8e1ea;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  text-align: left;
  transition: .15s;
}
.shop-platform-card::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 9px;
  width: 14px;
  height: 14px;
  border: 3px solid #ff5b62;
  border-radius: 3px;
  background: #fff;
  box-sizing: border-box;
}
.shop-platform-card.selected {
  border-color: var(--ui-primary);
  box-shadow: 0 8px 22px rgb(127 86 217 / 18%);
}
.shop-platform-card.selected::after {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  background: var(--ui-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.shop-platform-card span {
  font-size: 24px;
  font-weight: 800;
}
.shop-platform-card small {
  margin-top: 7px;
  color: #64748b;
}
.shop-platform-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
  border-color: #9cc8ff;
}
.tmall-card span { color: #d71920; }
.jd-card span { color: #e1251b; }
.douyin-card span { color: #161823; }
.pdd-card span { color: #e02e24; }
.shop-management-dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}
@media (max-width: 720px) {
  .shop-login-layout {
    grid-template-columns: 1fr;
  }
}

.jd-ads-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.32);
}

.jd-ads-confirm-overlay.hidden {
  display: none;
}

.jd-ads-confirm-dialog {
  width: min(560px, calc(100vw - 48px));
  max-height: min(620px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.jd-ads-confirm-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #edf2f7;
}

.jd-ads-confirm-dialog footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.jd-ads-confirm-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid #edf2f7;
  border-bottom: 0;
}

.jd-ads-confirm-dialog h2 {
  margin: 0;
  font-size: 16px;
}

.jd-ads-confirm-body {
  padding: 16px 18px;
  overflow: auto;
  color: #334155;
}

.jd-ads-confirm-body p {
  margin: 0 0 12px;
  line-height: 1.7;
}

.jd-ads-confirm-body ul {
  margin: 0;
  padding: 10px 12px 10px 28px;
  max-height: 320px;
  overflow: auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.jd-ads-confirm-body li {
  line-height: 1.9;
}

.danger-link {
  color: #dc2626 !important;
}

.bars { display: grid; gap: 9px; }
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e8f0ff;
  color: var(--blue);
  font-size: 12px;
}
.tag { border-radius: 999px; padding: 3px 8px; font-size: 12px; background: #eef2f7; color: var(--muted); }
.tag.red { color: var(--red); background: #fff1f0; }
.tag.amber { color: var(--amber); background: #fff7e6; }
.tag.green { color: var(--green); background: #ecfdf3; }
.order-info-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.order-info-cell span:not(.tag) {
  color: #344054;
  font-weight: 700;
}

.table-wrap { overflow: hidden; border: 1px solid var(--table-outer-border-color); border-radius: var(--table-radius); }
.orders-panel {
  height: calc(100vh - var(--workspace-top-offset));
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 0 var(--ui-page-gap) var(--ui-page-gap);
  border-radius: 0;
  background: var(--app-shell-surface);
}
.report-toolbar {
  display: flex;
  flex: 0 0 auto;
  gap: var(--ui-page-gap);
  align-items: center;
  flex-wrap: wrap;
  min-height: var(--ui-control-height);
  margin: 0;
  padding: 0;
  background: var(--app-shell-surface);
}
:where(.report-toolbar, .online-product-toolbar, .shop-management-toolbar, .combo-picker-toolbar) :is(input:not([type="checkbox"]), select):focus,
:where(.report-toolbar, .online-product-toolbar, .shop-management-toolbar, .combo-picker-toolbar) :is(input:not([type="checkbox"]), select):focus-visible {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}
:where(.report-toolbar, .online-product-toolbar, .shop-management-toolbar, .combo-picker-toolbar) button:focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus-ring);
}
.report-toolbar > button:not(.primary):not(.toolbar-icon-btn),
.online-product-toolbar > button:not(.primary):not(.danger):not(.toolbar-icon-btn):not(.link-refresh),
.shop-management-toolbar > button:not(.primary):not(.toolbar-icon-btn) {
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: var(--ui-primary);
  background: var(--ui-control-background);
  box-shadow: none;
}
.report-toolbar > button:not(.primary):not(.toolbar-icon-btn):hover:not(:disabled),
.online-product-toolbar > button:not(.primary):not(.danger):not(.toolbar-icon-btn):not(.link-refresh):hover:not(:disabled),
.shop-management-toolbar > button:not(.primary):not(.toolbar-icon-btn):hover:not(:disabled) {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}
.report-toolbar > button:not(.primary):not(.toolbar-icon-btn):active:not(:disabled),
.online-product-toolbar > button:not(.primary):not(.danger):not(.toolbar-icon-btn):not(.link-refresh):active:not(:disabled),
.shop-management-toolbar > button:not(.primary):not(.toolbar-icon-btn):active:not(:disabled) {
  border-color: var(--ui-primary-active);
  color: #fff;
  background: var(--ui-primary-active);
}
.orders-panel > .report-toolbar {
  min-height: calc(var(--ui-control-height) + var(--ui-page-gap) * 2);
  padding: var(--ui-page-gap) 0;
}
.standard-list-toolbar {
  gap: var(--filter-gap);
  align-items: center;
}
.report-toolbar > div {
  display: grid;
  gap: 4px;
}
.date-range-field {
  position: relative;
}
.date-range-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 230px;
  min-width: 230px;
  height: var(--ui-control-height);
  padding: 0 38px 0 12px;
  overflow: hidden;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #6d6d72;
  background: var(--ui-control-background);
  box-shadow: none;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: box-shadow 140ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.date-range-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-range-btn:has(.date-range-trigger-icon) {
  padding-right: 12px;
}
.date-range-btn:not(:has(.date-range-trigger-icon))::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 13px;
  height: 12px;
  border: 1.5px solid #6d6d72;
  border-radius: 3px;
  background:
    linear-gradient(#6d6d72, #6d6d72) 0 3px / 100% 1.5px no-repeat,
    linear-gradient(#6d6d72, #6d6d72) 3px -2px / 1.5px 4px no-repeat,
    linear-gradient(#6d6d72, #6d6d72) 8px -2px / 1.5px 4px no-repeat;
  content: "";
  transform: translateY(-50%);
}
.date-range-trigger-icon {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 12px;
  border: 1.5px solid #6d6d72;
  border-radius: 3px;
}
.date-range-trigger-icon::before {
  position: absolute;
  top: 2px;
  right: -1.5px;
  left: -1.5px;
  border-top: 1.5px solid #6d6d72;
  content: "";
}
.date-range-trigger-icon::after {
  position: absolute;
  top: -3px;
  left: 2px;
  width: 5px;
  height: 3px;
  border-right: 1.5px solid #6d6d72;
  border-left: 1.5px solid #6d6d72;
  content: "";
}
.date-range-btn:active {
  transform: none;
}
.date-picker {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + var(--filter-popover-gap));
  left: 0;
  z-index: 15;
  width: 576px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--date-filter-radius);
  background: var(--ui-popover-background);
  box-shadow: var(--unified-filter-panel-shadow);
}
.date-picker.hidden { display: none; }

.single-date-picker {
  width: 320px;
  max-width: min(320px, calc(100vw - 24px));
}

/* Shared date-filter appearance. Pages opt in with .unified-date-filter. */
.unified-date-filter > .date-range-btn {
  box-sizing: border-box;
  height: var(--date-filter-trigger-height);
  min-height: var(--date-filter-trigger-height);
  max-height: var(--date-filter-trigger-height);
  padding-right: var(--date-filter-inline-padding);
  padding-left: var(--date-filter-inline-padding);
  border: 0;
  border-radius: var(--date-filter-trigger-radius);
  background: var(--date-filter-background);
  box-shadow: inset 0 0 0 1px var(--date-filter-trigger-border);
  transition: box-shadow 100ms linear;
}

.unified-date-filter > .date-range-btn:focus,
.unified-date-filter > .date-range-btn:focus-visible,
.unified-date-filter > .date-range-btn[aria-expanded="true"] {
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}

.unified-date-filter > .date-range-btn:active {
  transform: none;
}

.unified-date-filter > .date-picker {
  border-radius: var(--date-filter-radius);
  box-shadow: var(--unified-filter-panel-shadow);
}

.unified-date-filter > .date-range-btn > .date-range-trigger-icon {
  position: absolute;
  top: 50%;
  right: var(--date-filter-inline-padding);
  transform: translateY(-50%);
}

.date-picker-inputs {
  display: grid;
  grid-template-columns: minmax(132px, 1.2fr) minmax(112px, 1fr) auto minmax(132px, 1.2fr) minmax(112px, 1fr);
  gap: 8px;
  align-items: center;
}
.date-picker-inputs span {
  color: #9a9aa0;
}
.date-picker-inputs input {
  min-width: 0;
  width: 100%;
  height: var(--ui-control-height);
  padding: 0 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #6d6d72;
  background: var(--ui-control-background);
  box-shadow: none;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
}
.calendar-nav {
  display: grid;
  grid-template-columns: 28px 28px 1fr 1fr 28px 28px;
  gap: 4px;
  align-items: center;
  margin: 14px 0 8px;
}
.calendar-nav button {
  display: grid;
  place-items: center;
  width: 28px;
  border: 0;
  border-radius: 14px;
  color: #6d6d72;
  background: transparent;
  height: 28px;
  font-size: 13px;
}
.calendar-nav button:hover {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.calendar-nav strong {
  color: #6d6d72;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.calendar-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.calendar-month {
  box-sizing: border-box;
  min-width: 0;
}
.calendar-month:first-child {
  padding-right: 12px;
  border-right: 1px solid #e8ebf0;
}
.calendar-month:last-child {
  padding-left: 12px;
}
.single-date-picker .calendar-months {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.single-date-picker .calendar-month,
.single-date-picker .calendar-month:first-child,
.single-date-picker .calendar-month:last-child {
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
}
.single-date-picker .quick-ranges {
  grid-template-columns: repeat(2, minmax(60px, 1fr));
  gap: 4px;
}
.single-date-picker .quick-ranges button {
  justify-self: center;
  width: 60px;
}
.calendar-month-header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 28px;
  margin-bottom: 8px;
}
.calendar-month-header strong {
  color: #6d6d72;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.calendar-month-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: #6d6d72;
  background: transparent;
}
.calendar-month-nav i {
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}
.calendar-month-prev i {
  transform: translateX(1px) rotate(45deg);
}
.calendar-month-next i {
  transform: translateX(-1px) rotate(225deg);
}
.calendar-month-nav-placeholder {
  display: block;
  width: 28px;
  height: 28px;
}
.weekdays,
.days {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  justify-content: space-between;
  gap: 0;
}
.days {
  row-gap: 2px;
}
.weekdays {
  margin-bottom: 4px;
  color: #9a9aa0;
  font-size: 11px;
  font-weight: 500;
}
.weekdays span {
  line-height: 24px;
  text-align: center;
}
.days button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #6d6d72;
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;
}
.days button:hover {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.days button:disabled {
  cursor: not-allowed;
  color: #b9b9be;
  background: transparent;
}
.days button:disabled:hover {
  background: transparent;
}
.days button.muted {
  visibility: hidden;
  pointer-events: none;
}
.days button.in-range {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}
.days button.selected {
  color: #fff;
  background: var(--ui-primary);
  box-shadow: 0 3px 8px rgb(127 86 217 / 24%);
  font-weight: 500;
}
.quick-ranges {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 100%;
  height: 36px;
  margin-top: 12px;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  background: var(--ui-popover-background);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 72%),
    0 5px 12px rgb(29 36 48 / 8%),
    0 0 16px 3px rgb(255 255 255 / 58%);
}
.order-date-quick-ranges {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border-color: #fbfbfa;
  background: #fbfbfa;
  box-shadow: 0 5px 12px rgb(29 36 48 / 8%);
}
.quick-ranges button {
  min-width: 0;
  height: var(--ui-control-height);
  padding: 0 4px;
  border: 0;
  border-radius: var(--ui-control-radius);
  color: var(--ui-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--ui-control-height);
  white-space: nowrap;
}
.order-date-quick-ranges button {
  background: #fbfbfa;
}
.quick-ranges button:hover:not(:disabled),
.quick-ranges button.primary:hover:not(:disabled) {
  color: #fff;
  background: var(--ui-primary-hover);
}
.quick-ranges button.primary,
.quick-ranges button.is-active {
  color: #fff;
  background: var(--ui-primary);
}

.unified-date-filter .days button {
  position: relative;
}

.unified-date-filter .days button.is-today:not(.selected)::after {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--date-filter-border);
  content: "";
  transform: translateX(-50%);
}

.unified-date-filter .days button.in-range {
  color: var(--date-filter-border);
  background: var(--ui-primary-soft);
}

.unified-date-filter .days button.selected {
  color: #fff;
  background: var(--date-filter-border);
  box-shadow: 0 3px 8px rgb(127 86 217 / 24%);
}

.unified-date-filter .calendar-month-nav:disabled {
  color: #b9b9be;
  background: transparent;
  cursor: not-allowed;
  opacity: .55;
}

.unified-date-filter .quick-ranges {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  justify-content: space-between;
}

.unified-date-filter .quick-ranges button {
  justify-self: center;
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0;
  border-radius: var(--ui-control-radius);
  color: var(--date-filter-quick-accent);
  background: transparent;
  line-height: 28px;
}

.unified-date-filter .quick-ranges button:hover:not(:disabled):not(.primary):not(.is-active) {
  color: #fff;
  background: var(--ui-primary-hover);
}
.unified-date-filter .quick-ranges button:active:not(:disabled) {
  color: #fff;
  background: var(--ui-primary-active);
}
.unified-date-filter .quick-ranges button.primary,
.unified-date-filter .quick-ranges button.is-active {
  color: #fff;
  background: var(--date-filter-quick-accent);
}

.report-toolbar .search-field {
  width: 260px;
  flex: 0 0 260px;
}
.report-toolbar .order-search-group {
  display: grid;
  grid-template-columns: 160px 55px 55px;
  gap: 0;
  align-items: center;
  flex: 0 0 auto;
  width: 270px;
  height: var(--ui-control-height);
  overflow: hidden;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  box-shadow: none;
}
.report-toolbar .order-search-group .search-field {
  position: relative;
  width: auto;
  flex: 0 0 auto;
  display: block;
  height: var(--ui-control-height);
  gap: 0;
}
.report-toolbar .order-search-group .search-field::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid #c4d7ef;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.report-toolbar .order-search-group .search-field::after {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(50% + 5px);
  width: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: #c4d7ef;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
.report-toolbar .order-search-group input[type="search"] {
  width: 100%;
  height: var(--ui-control-height);
  min-width: 0;
  padding-left: 30px;
  border: 0;
  border-radius: 0;
  color: #6d6d72;
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--ui-control-height);
}
.report-toolbar .order-search-group input[type="search"]::placeholder {
  color: #6d6d72;
  opacity: 1;
}
.report-toolbar .order-search-group input[type="search"]:focus,
.report-toolbar .order-search-group input[type="search"]:focus-visible {
  outline: 0;
  box-shadow: none;
}
.report-toolbar .order-search-group > button {
  align-self: center;
  width: 55px;
  min-width: 55px;
  max-width: 55px;
  height: var(--ui-control-height);
  flex: 0 0 55px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--ui-control-radius);
  padding: 0;
  color: var(--ui-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  line-height: 1;
}
.report-toolbar .order-search-group > button:hover:not(:disabled) {
  color: #fff;
  background: var(--ui-primary-hover);
}
.report-toolbar .order-search-group > button.primary {
  color: #fff;
  background: var(--ui-primary);
}
.report-toolbar .order-search-group > button:active:not(:disabled) {
  background: var(--ui-primary-active);
  transform: none;
}

.report-toolbar .order-search-group.unified-order-search {
  grid-template-columns: 160px 55px 55px;
  gap: 4px;
  width: 278px;
  height: var(--unified-filter-height);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.report-toolbar .order-search-group.unified-order-search .search-field {
  height: var(--unified-filter-height);
  border-radius: var(--unified-filter-radius);
  background: var(--unified-filter-background);
  box-shadow: inset 0 0 0 1px var(--unified-filter-border);
  transition: box-shadow 100ms linear;
}

.report-toolbar .order-search-group.unified-order-search .search-field:focus-within {
  box-shadow: inset 0 0 0 var(--unified-filter-focus-width) var(--unified-filter-focus);
}

.report-toolbar .order-search-group.unified-order-search .search-field::before {
  border-color: var(--app-shell-accent);
}

.report-toolbar .order-search-group.unified-order-search .search-field::after {
  background: var(--app-shell-accent);
}

.report-toolbar .order-search-group.unified-order-search input[type="search"] {
  height: var(--unified-filter-height);
  border-radius: var(--unified-filter-radius);
  line-height: var(--unified-filter-height);
}

.report-toolbar .order-search-group.unified-order-search > button {
  height: var(--unified-filter-height);
  min-height: var(--unified-filter-height);
  max-height: var(--unified-filter-height);
  border-radius: var(--unified-filter-radius);
  box-shadow: none;
}

.report-toolbar .order-search-group.unified-order-search > button.primary {
  color: #fff;
  background: var(--ui-primary);
}

.report-toolbar .order-search-group.unified-order-search > button.primary:hover:not(:disabled) {
  background: var(--ui-primary-active);
}
.report-toolbar .platform-field {
  width: 110px;
  flex: 0 0 110px;
}
.report-toolbar .store-field {
  width: 110px;
  flex: 0 0 110px;
}
.report-toolbar .type-field {
  width: 110px;
  flex: 0 0 110px;
}
.multi-filter-field {
  position: relative;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  flex: 0 0 110px;
}
.multi-filter-btn {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  max-height: var(--ui-control-height);
  padding: 0 32px 0 12px;
  border: 0;
  border-radius: var(--ui-control-radius);
  color: #6d6d72;
  background: var(--ui-control-background);
  box-shadow: inset 0 0 0 1px var(--ui-control-border);
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  overflow: hidden;
  transition: color 120ms ease, box-shadow 120ms ease;
}
.multi-filter-btn:not(:has(.multi-filter-chevron)) {
  padding-right: 32px;
}
.multi-filter-value {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.multi-filter-chevron {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #667085;
  border-bottom: 1.5px solid #667085;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 160ms cubic-bezier(.77, 0, .175, 1);
}
.multi-filter-btn:not(:has(.multi-filter-chevron))::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #6d6d72;
  border-bottom: 1.5px solid #6d6d72;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  pointer-events: none;
}
.multi-filter-btn[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(225deg);
}
.multi-filter-btn[aria-expanded="true"] .multi-filter-chevron {
  transform: translateY(-50%) rotate(225deg);
}
.multi-filter-btn:focus,
.multi-filter-btn:focus-visible,
.multi-filter-btn[aria-expanded="true"] {
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}
.multi-filter-btn:active {
  transform: none;
}
.multi-filter-panel {
  position: absolute;
  top: calc(100% + var(--filter-popover-gap));
  left: 0;
  z-index: 18;
  box-sizing: border-box;
  display: block;
  min-width: var(--unified-filter-panel-min-width);
  width: 100%;
  max-width: var(--unified-filter-panel-max-width);
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  background: var(--ui-popover-background);
  box-shadow: var(--unified-filter-panel-shadow);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transform-origin: top left;
  visibility: visible;
  transition: opacity 120ms ease-out, transform 160ms cubic-bezier(.23, 1, .32, 1), visibility 0ms;
}
.multi-filter-panel.hidden {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.985);
  visibility: hidden;
  transition: opacity 120ms ease-out, transform 160ms cubic-bezier(.23, 1, .32, 1), visibility 0ms linear 160ms;
}

.logistics-import-freight-editable {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  cursor: text;
  color: var(--table-text-color);
}
.logistics-import-freight-editable.is-empty {
  color: #98a2b3;
}
.logistics-import-freight-editor {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--table-text-color);
  font: inherit;
  letter-spacing: 0;
  text-align: center;
}
#ordersTable .aftersale-audit-indicator {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ui-primary);
  opacity: 1;
}
#ordersTable .col-auditStatus .table-cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-page-view .report-toolbar .aftersale-filter-field {
  width: 110px;
  flex: 0 0 110px;
}
.order-mode-afterSale .col-__key {
  min-width: 42px !important;
  width: 42px !important;
  max-width: 42px !important;
  padding-left: 0;
  padding-right: 0;
}
.order-mode-afterSale .col-__key :is(.th-content, .table-cell-content) {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.order-mode-afterSale .col-__key input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
}
.combo-dialog.aftersale-fee-dialog {
  width: min(430px, calc(100vw - 48px));
  height: auto;
  min-height: 0;
  grid-template-rows: 50px auto 54px;
}
.combo-dialog-body.aftersale-fee-body {
  overflow: visible;
  display: grid;
  grid-template-rows: none;
  grid-template-columns: 1fr;
  gap: 10px;
}
.aftersale-fee-body label {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 13px;
}
.aftersale-fee-body input:not(.aftersale-cost-switch) {
  height: var(--filter-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--filter-radius);
  padding: 0 8px;
  color: #344054;
  font-size: 13px;
}
.aftersale-fee-body input:not(.aftersale-cost-switch):focus {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}
.aftersale-fee-body input:not(.aftersale-cost-switch):disabled {
  background: #f5f7fa;
  color: #667085;
}
.aftersale-original-cost-row {
  min-height: 30px;
}
.aftersale-fee-body .aftersale-cost-switch {
  appearance: none;
  position: relative;
  width: 38px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.aftersale-fee-body .aftersale-cost-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .24);
  transition: transform .15s ease;
}
.aftersale-fee-body .aftersale-cost-switch:checked {
  background: var(--ui-primary);
}
.aftersale-fee-body .aftersale-cost-switch:checked::after {
  transform: translateX(18px);
}
.aftersale-fee-body .aftersale-cost-switch:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.aftersale-fee-dialog footer button {
  min-width: 58px;
}
.aftersale-fee-dialog footer .aftersale-submit-audit {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}
.aftersale-fee-dialog footer .aftersale-submit-audit:hover {
  background: var(--ui-primary-hover);
}
.aftersale-fee-dialog footer .aftersale-submit-audit:active {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}
.aftersale-fee-dialog footer .aftersale-fee-cancel {
  border-color: #f3b7bd;
  color: #dc5a66;
}
.single-filter-option {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  min-height: 35px;
  max-height: 50px;
  height: auto;
  margin: 0;
  padding: 10px 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-family: var(--app-font-family);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 15px;
  color: #6d6d72;
}
.single-filter-option::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 28px;
  border-radius: var(--ui-control-radius);
  background: transparent;
  transform: translateY(-50%);
  transition: background-color 120ms ease;
}
.single-filter-option > * {
  position: relative;
  z-index: 1;
}
.single-filter-option:hover {
  color: #fff;
}
.single-filter-option:hover::before {
  background: var(--ui-primary-hover);
}
.single-filter-option:has(.single-filter-check:not(:empty)),
.single-filter-option[aria-selected="true"] {
  color: #fff;
}
.single-filter-option:has(.single-filter-check:not(:empty))::before,
.single-filter-option[aria-selected="true"]::before {
  background: var(--ui-primary);
}
.single-filter-option span:not(.single-filter-check) {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 30px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 15px;
  color: inherit;
  letter-spacing: 0;
}
.single-filter-check {
  order: 2;
  flex: 0 0 auto;
  width: 6px;
  height: 10px;
  margin-left: 10px;
  margin-right: 3px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  color: transparent;
  background: transparent;
  font-size: 0;
  transform: translateY(-1px) rotate(45deg);
}
.single-filter-check:empty {
  visibility: hidden;
}
.multi-filter-option {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 35px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: var(--app-font-family);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 15px;
  color: #6d6d72;
  direction: ltr;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.multi-filter-option span::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 28px;
  border-radius: var(--ui-control-radius);
  background: transparent;
  transform: translateY(-50%);
  transition: background-color 120ms ease;
}
.multi-filter-option span {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  min-height: 35px;
  max-height: 50px;
  margin: 0;
  padding: 10px 20px;
  border-radius: 0;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 15px;
  text-align: left;
  color: inherit;
  letter-spacing: 0;
  transition: background-color 120ms ease;
}
.multi-filter-option:hover {
  color: #fff;
}
.multi-filter-option:hover span::before {
  background: var(--ui-primary-hover);
}
.multi-filter-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.multi-filter-option:has(input:checked),
.multi-filter-option:has(input:indeterminate) {
  color: #fff;
}
.multi-filter-option input:checked + span::before,
.multi-filter-option input:indeterminate + span::before {
  background: var(--ui-primary);
}
.multi-filter-option input:checked + span::after {
  flex: 0 0 auto;
  width: 6px;
  height: 10px;
  margin-left: 10px;
  margin-right: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-1px) rotate(45deg);
}
.multi-filter-option input:indeterminate + span::after {
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  margin-left: 10px;
  margin-right: 1px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.multi-filter-options {
  min-width: 0;
}
.multi-filter-panel-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 6px 4px 0;
  padding: 7px 0 0;
  border-top: 1px solid #e8ebf0;
}
.multi-filter-panel-footer button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--ui-control-radius);
  color: var(--ui-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
}
.multi-filter-panel-footer button:last-child {
  color: #6d6d72;
}
.multi-filter-panel-footer button:focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus-ring);
}
@media (hover: hover) and (pointer: fine) {
  .multi-filter-panel-footer button:first-child:hover {
    color: #fff;
    background: var(--ui-primary-hover);
  }
  .multi-filter-panel-footer button:last-child:hover {
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
  }
}
.report-toolbar input {
  min-width: 160px;
}
.report-toolbar .multi-filter-option input[type="checkbox"] {
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  height: 1px;
  min-height: 1px;
}
.report-toolbar .date-picker-inputs input {
  min-width: 0;
}
.report-toolbar .date-picker-inputs input[type="time"] {
  width: 100%;
}
.report-toolbar .date-picker-inputs input[type="date"] {
  width: 100%;
}
.order-mark-actions,
.toolbar-button-group {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  min-height: var(--ui-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--ui-control-radius);
  background: transparent;
  box-shadow: none;
}
.order-mark-actions:empty,
.order-mark-actions.order-mark-actions-empty {
  display: none !important;
  min-height: 0;
}
.order-mark-actions span {
  height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  color: #6d6d72;
  font-size: 13px;
  white-space: nowrap;
}
.order-mark-actions .order-action-label {
  margin-right: var(--filter-gap);
}
.order-mark-actions button,
.toolbar-button-group button {
  box-sizing: border-box;
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  height: 28px;
  flex: 0 0 80px;
  padding: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: 0;
  color: var(--ui-primary);
  background: var(--ui-control-background);
  margin-left: -1px;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
  white-space: nowrap;
}
.order-mark-actions button:first-of-type,
.toolbar-button-group button:first-of-type {
  margin-left: 0;
  border-radius: 6px 0 0 6px;
}
.order-mark-actions button:last-of-type,
.toolbar-button-group button:last-of-type {
  border-radius: 0 6px 6px 0;
}
.order-mark-actions button:hover:not(:disabled),
.toolbar-button-group button:hover:not(:disabled) {
  color: #fff;
  border-color: var(--ui-primary);
  background: var(--ui-primary-hover);
}
.order-mark-actions button:active:not(:disabled),
.toolbar-button-group button:active:not(:disabled) {
  color: #fff;
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}
.order-mark-actions button:is(.primary, .active, .is-active, [aria-pressed="true"]):not(:disabled),
.toolbar-button-group button:is(.primary, .active, .is-active, [aria-pressed="true"]):not(:disabled) {
  color: #fff;
  border-color: var(--ui-primary);
  background: var(--ui-primary);
}
.order-mark-actions button:disabled,
.toolbar-button-group button:disabled {
  color: #b9b9be;
  background: transparent;
  cursor: not-allowed;
}
.order-more-toggle {
  height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-left: 0;
  border: 0;
  border-radius: 0;
  color: #6d6d72;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  white-space: nowrap;
}
.order-more-toggle.hidden {
  display: none;
}
.order-more-toggle input,
.order-more-actions-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-primary);
}
.order-page-view .report-toolbar .order-more-actions-row {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: var(--filter-gap);
  height: var(--filter-height);
  color: #475569;
  font-size: 13px;
}
.order-page-view .report-toolbar .order-more-actions-row.hidden {
  display: none;
}
.order-page-view .report-toolbar .order-range-tools {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--filter-height);
}
.order-page-view .report-toolbar .order-range-tools > span:first-child {
  margin-right: 6px;
}
.order-page-view .report-toolbar .order-more-actions-row input[type="number"] {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  flex: 0 0 40px;
  border-radius: 0;
  text-align: center;
  padding: 0 4px;
  appearance: textfield;
  -moz-appearance: textfield;
  outline: 0;
  box-shadow: none;
}
.order-page-view .report-toolbar .order-more-actions-row input[type="number"]::-webkit-outer-spin-button,
.order-page-view .report-toolbar .order-more-actions-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.order-page-view .report-toolbar .order-more-actions-row input[type="number"]:focus,
.order-page-view .report-toolbar .order-more-actions-row input[type="number"]:focus-visible {
  border-color: var(--line);
  outline: 0;
  box-shadow: none;
}
.order-page-view .report-toolbar .order-more-actions-row input[type="number"]:first-of-type {
  border-radius: var(--filter-radius) 0 0 var(--filter-radius);
  border-right: 0;
}
.order-page-view .report-toolbar .order-more-actions-row input[type="number"]:last-of-type {
  border-left: 0;
}
.order-page-view .report-toolbar .order-range-tools > span:nth-of-type(2) {
  width: 22px;
  height: var(--filter-height);
  display: inline-grid;
  place-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  background: #fff;
  color: #98a2b3;
}
.order-page-view .report-toolbar .order-more-actions-row button {
  width: 54px;
  min-width: 54px;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.order-page-view .report-toolbar #orderRangeStartInput,
.order-page-view .report-toolbar #orderRangeEndInput {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
}
.order-page-view .report-toolbar .order-more-actions-row button:nth-of-type(1) {
  border-left: 0;
}
.order-page-view .report-toolbar .order-more-actions-row button:nth-of-type(3) {
  border-radius: 0 var(--filter-radius) var(--filter-radius) 0;
}
.order-page-view .report-toolbar .order-more-actions-row .order-mark-actions button {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  flex: 0 0 80px;
  padding: 0;
  border: 1px solid var(--date-filter-trigger-border);
  border-radius: 0;
  margin-left: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-page-view .report-toolbar .order-more-actions-row .order-mark-actions button:first-of-type {
  margin-left: 0;
  border-radius: 6px 0 0 6px;
}
.order-page-view .report-toolbar .order-more-actions-row .order-mark-actions button:last-of-type {
  border-radius: 0 6px 6px 0;
}
.order-page-view .report-toolbar .order-more-actions-row label {
  height: var(--filter-height);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0;
  color: #475569;
  white-space: nowrap;
}
.toolbar-icon-btn {
  width: var(--ui-control-height);
  min-width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  margin-left: auto;
  border: 0;
  border-radius: 0;
  color: #6d6d72;
  background: transparent;
  box-shadow: none;
  transition: opacity 140ms ease;
}
.toolbar-icon-btn:hover {
  color: #6d6d72;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.toolbar-icon-btn:active {
  background: transparent;
  transform: none;
}

.column-settings-icon-btn::before {
  content: "";
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: url("./assets/icons/setting-two.svg") center / contain no-repeat;
}

.column-settings-icon-btn,
.column-settings-icon-btn:hover,
.column-settings-icon-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 0;
  vertical-align: middle;
}

.column-settings-icon-btn:hover::before {
  opacity: .72;
}
.cost-basis-toggle {
  width: 86px;
  flex: 0 0 86px;
  height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: var(--ui-primary);
  background: var(--ui-control-background);
  box-shadow: none;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.cost-basis-toggle:hover {
  color: #fff;
  border-color: var(--ui-primary);
  background: var(--ui-primary-hover);
}
.cost-basis-toggle:active {
  background: var(--ui-primary-active);
  transform: none;
}
.cost-basis-toggle.hidden,
.cost-basis-toggle[hidden] {
  display: none;
}
body:not([data-cost-basis-switchable="true"]) .cost-basis-toggle {
  display: none !important;
}
body:not([data-permission-view="physicalOrders"]):not([data-permission-view="afterSaleOrders"]) #orderCostBasisBtn {
  display: none !important;
}
.order-profit-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #344054;
  font-size: 13px;
}
.order-profit-summary.hidden {
  display: none;
}
.order-profit-summary span {
  color: var(--blue);
  font-weight: 700;
}
.orders-table-wrap th:nth-child(1),
.orders-table-wrap td:nth-child(1),
.order-mode-all th:nth-child(2),
.order-mode-all td:nth-child(2) {
  text-align: center;
  vertical-align: middle;
}
.orders-table-wrap th:nth-child(1),
.orders-table-wrap td:nth-child(1) {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  padding-left: 4px;
  padding-right: 4px;
}
.order-mode-all th:nth-child(2),
.order-mode-all td:nth-child(2) {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding-left: 4px;
  padding-right: 4px;
}
.order-mode-all .col-__orderUpdate,
.order-mode-afterSale .col-__orderUpdate {
  position: sticky;
  right: 0;
  width: 66px;
  min-width: 66px;
  max-width: 66px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  background: var(--table-row-bg);
  box-shadow: -1px 0 0 var(--table-border-color);
  z-index: 3;
}
.order-mode-all thead .col-__orderUpdate,
.order-mode-afterSale thead .col-__orderUpdate {
  background: var(--table-header-bg);
  z-index: 6;
}
.order-mode-all tbody tr:hover .col-__orderUpdate,
.order-mode-afterSale tbody tr:hover .col-__orderUpdate {
  background: var(--table-row-hover-bg);
}
.order-mode-all tfoot .col-__orderUpdate,
.order-mode-afterSale tfoot .col-__orderUpdate {
  background: var(--table-row-bg);
  z-index: 6;
}
.order-update-btn {
  min-width: 0;
  padding: 0 6px;
  font-size: 13px;
  cursor: pointer;
}
.order-update-btn:disabled {
  color: #94a3b8;
  cursor: wait;
}
.resizable-table {
  overflow-x: hidden;
  overflow-y: hidden;
}
.resizable-table table {
  min-width: 100%;
  table-layout: fixed;
}
.resizable-table table.column-tracks-active th[data-column],
.resizable-table table.column-tracks-active td[data-column] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
.table-split-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0;
  border-radius: 0;
  background: var(--table-row-bg);
}
.table-split-frame.no-vertical-scroll {
  grid-template-columns: minmax(0, 1fr);
}
.table-fixed-header {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border-color);
  border-radius: 7px 7px 0 0;
}
.table-fixed-header table,
.table-body-scroll table,
.table-fixed-footer table {
  border-collapse: separate;
  border-spacing: 0;
}
.table-fixed-header th {
  position: relative;
  top: auto !important;
  z-index: 1 !important;
  background-clip: padding-box;
}
.table-fixed-header .table-grouped-head tr:first-child th {
  border-bottom: 1px solid var(--table-border-color);
}
.table-body-scroll {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-y: none;
  overflow-anchor: none;
  scroll-behavior: auto;
  border: 0;
  border-radius: 0;
}
.table-fixed-footer {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--table-border-color);
  background: var(--table-summary-bg);
}
.table-fixed-footer tfoot tr {
  position: static;
}
.table-fixed-footer tfoot td {
  border-top: 0;
}
.resizable-table tr {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
}
.resizable-table th {
  border-right: 1px solid var(--table-border-color);
  text-align: center;
  vertical-align: middle;
  max-width: none;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 18px;
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  box-sizing: border-box;
}
.resizable-table td {
  border-right: 1px solid var(--table-border-color);
  text-align: center;
  vertical-align: middle;
  max-width: none;
  overflow: hidden;
  line-height: 18px;
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  box-sizing: border-box;
}

.resizable-table td {
  padding: 5px;
}
.resizable-table tfoot tr {
  position: sticky;
  bottom: 0;
  z-index: 4;
}
.resizable-table tfoot td {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  border-top: 1px solid var(--table-border-color);
  background: var(--table-summary-bg);
  color: var(--table-summary-text-color);
  font-weight: 700;
}
.resizable-table tfoot .table-cell-content {
  max-height: 36px;
}
#ordersTable .orders-table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-cell-content {
  max-height: 36px;
  line-height: 18px;
  width: 100%;
  min-width: 0;
  text-align: inherit;
}
.resizable-table th {
  position: sticky;
}
.sync-log-table table {
  table-layout: fixed;
}
.sync-log-table th,
.sync-log-table td {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  padding-left: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--table-border-color);
}
.sync-log-table th:last-child,
.sync-log-table td:last-child {
  border-right: 1px solid var(--table-border-color);
}
.sync-log-table .col-error .table-cell-content,
.sync-log-table .col-summaryText .table-cell-content {
  text-align: left;
}
.sync-log-summary-error {
  color: #dc2626;
}
.sync-log-table .table-cell-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#orderSyncLogs #syncLogTable {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#orderSyncLogs #syncLogTable .table-scroll-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#orderSyncLogs #syncLogTable .table-scroll-shell > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
.resizable-table th {
  padding: 0;
}
.resizable-table .th-content {
  height: var(--table-header-height);
  display: grid;
  place-items: center;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 18px;
}
.resizable-table th.col-__index .th-content {
  padding: 0;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.orders-table-wrap th:nth-child(1) .th-content,
.order-mode-all th:nth-child(2) .th-content {
  padding: 0;
  justify-items: center;
}
.resizable-table td.col-product,
.resizable-table td.col-productAttribute,
.resizable-table td.col-merchantCode {
  text-align: left;
  padding-left: 5px;
}
.resizable-table td.col-storeInfo {
  text-align: left;
  padding-left: 5px;
}
.store-info-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 26px;
  min-width: 0;
}
.product-info-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.resizable-table td,
.shop-management-table td {
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.table-cell-content,
.store-info-name,
.product-info-code,
.online-product-table .muted {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}

.online-product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.online-product-table a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resizable-table .table-cell-content:has(.product-info-cell),
.shop-management-table .table-cell-content:has(.platform-logo),
.shop-management-table .table-cell-content:has(.state),
.shop-management-table .table-cell-content:has(button),
.resizable-table .table-cell-content:has(button),
.resizable-table .table-cell-content:has(input),
.online-product-table .table-cell-content:has(button),
.online-product-table .table-cell-content:has(.online-score-cell),
.online-product-table .table-cell-content:has(.online-sales-cell) {
  display: block;
}

.resizable-table .table-cell-content:has(> .store-info-cell) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 36px;
  max-height: 36px;
}

.resizable-table td:has(.store-info-cell) .store-info-name,
.resizable-table td:has(.product-info-cell) .product-info-code {
  min-width: 0;
}
.product-thumb {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background:
    linear-gradient(135deg, hsl(var(--thumb-hue, 205) 78% 54%), hsl(calc(var(--thumb-hue, 205) + 42) 70% 42%));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  cursor: zoom-in;
}
.image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .46);
}
.image-preview-overlay.hidden {
  display: none;
}
.image-preview-dialog {
  position: relative;
  width: 400px;
  height: 400px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.image-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  line-height: 1;
}
.image-preview-box {
  display: grid;
  place-items: center;
  width: 400px;
  height: 400px;
  background:
    linear-gradient(135deg, hsl(var(--thumb-hue, 205) 78% 54%), hsl(calc(var(--thumb-hue, 205) + 42) 70% 42%));
  color: #fff;
  font-size: 112px;
  font-weight: 800;
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}
.image-preview-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  background: transparent;
}
.platform-logo {
  display: inline-block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  align-self: center;
  vertical-align: middle;
}
.platform-logo-fallback {
  display: inline-grid;
  place-items: center;
  background: #64748b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}
.col-resizer:hover,
body.resizing-columns .col-resizer {
  background: transparent;
}
body.resizing-columns {
  cursor: col-resize;
  user-select: none;
}
.resizable-table.is-resizing-columns,
.resizable-table.is-resizing-columns * {
  cursor: col-resize !important;
}
.resizable-table.is-resizing-columns .th-content,
.resizable-table.is-resizing-columns .table-cell-content {
  pointer-events: none;
}
#ordersTable {
  flex: 1;
  min-height: 0;
}
#ordersPager,
#financeTxPager,
#jdFinancePager,
#shopDailyBusinessPager {
  flex: 0 0 auto;
  min-height: 30px;
  margin-top: var(--ui-page-gap);
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: sticky;
  bottom: 0;
  z-index: 8;
}
#ordersPager.after-sale-pager {
  color: #344054;
  font-weight: 600;
}
#ordersPager .pager-actions button:not(:disabled) {
  color: var(--ui-primary);
  border-color: var(--ui-control-border);
  background: var(--ui-control-background);
}
#ordersTable .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#financeTxTable,
#jdFinanceReconciliationTable,
#logisticsFeesTable,
#shopDailyBusinessTable,
#monthlyBusinessTable {
  flex: 1;
  min-height: 0;
}
#financeTxTable .table-scroll-shell,
#jdFinanceReconciliationTable .table-scroll-shell,
#logisticsFeesTable .table-scroll-shell,
#shopDailyBusinessTable .table-scroll-shell,
#monthlyBusinessTable .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#financeTxTable .table-wrap,
#jdFinanceReconciliationTable .table-wrap,
#logisticsFeesTable .table-wrap,
#shopDailyBusinessTable .table-wrap,
#monthlyBusinessTable .table-wrap,
#annualBusinessTable .table-wrap {
  height: auto;
  min-height: 0;
}
#jdFinanceReconciliationTable .table-grouped-head tr:first-child th {
  top: auto;
  z-index: 1;
}
#jdFinanceReconciliationTable .table-grouped-head tr:nth-child(2) th {
  top: auto;
  z-index: 1;
}
#jdFinanceReconciliationTable .table-group-header .th-content {
  justify-content: center;
  text-align: center;
  font-weight: var(--table-header-font-weight);
}
#jdFinanceReconciliationTable .table-group-header.deduction-group,
#jdFinanceReconciliationTable .table-group-header.refund-group {
  background: var(--table-header-bg);
}
.order-page-view .orders-panel,
#orderSyncLogs .orders-panel,
#localProductSalesReport .orders-panel,
#shopDailyBusinessReport .orders-panel,
#monthlyBusinessReport .orders-panel,
#annualBusinessReport .orders-panel {
  overflow: hidden;
}
body:has(.order-page-view.active) .workspace,
body:has(#orderSyncLogs.active) .workspace,
body:has(#logisticsFees.active) .workspace,
body:has(#jdFinanceReconciliation.active) .workspace,
body:has(#financeAccountTransactions.active) .workspace,
body:has(#jdAdsReport.active) .workspace,
body:has(#jdSearchPushReport.active) .workspace,
body:has(#jdSwaReport.active) .workspace,
body:has(#jdSwaDetailReport.active) .workspace,
body:has(#jdFullStationReport.active) .workspace,
body:has(#jdFullStationDetailReport.active) .workspace,
body:has(#tmallProductReport.active) .workspace,
body:has(#tmallProductDetailReport.active) .workspace,
body:has(#tmallOtherPromotionReport.active) .workspace,
body:has(#tmallOtherPromotionDetailReport.active) .workspace,
body:has(#localProductSalesReport.active) .workspace,
body:has(#shopDailyBusinessReport.active) .workspace,
body:has(#monthlyBusinessReport.active) .workspace,
body:has(#annualBusinessReport.active) .workspace {
  padding: 0;
  background: var(--app-shell-surface);
}
.order-page-view.active,
#orderSyncLogs.active,
#logisticsFees.active,
#jdFinanceReconciliation.active,
#financeAccountTransactions.active,
#jdAdsReport.active,
#jdSearchPushReport.active,
#jdSwaReport.active,
#jdSwaDetailReport.active,
#jdFullStationReport.active,
#jdFullStationDetailReport.active,
#tmallProductReport.active,
#tmallProductDetailReport.active,
#tmallOtherPromotionReport.active,
#tmallOtherPromotionDetailReport.active,
#localProductSalesReport.active,
#shopDailyBusinessReport.active,
#monthlyBusinessReport.active,
#annualBusinessReport.active {
  height: calc(100vh - var(--workspace-top-offset));
  min-height: 0;
  background: var(--app-shell-surface);
}
.order-page-view .orders-panel,
#orderSyncLogs .orders-panel,
#logisticsFees .orders-panel,
#jdFinanceReconciliation .orders-panel,
#financeAccountTransactions .orders-panel,
#jdAdsReport .orders-panel,
#jdSearchPushReport .orders-panel,
#jdSwaReport .orders-panel,
#jdSwaDetailReport .orders-panel,
#jdFullStationReport .orders-panel,
#jdFullStationDetailReport .orders-panel,
#tmallProductReport .orders-panel,
#tmallProductDetailReport .orders-panel,
#tmallOtherPromotionReport .orders-panel,
#tmallOtherPromotionDetailReport .orders-panel,
#localProductSalesReport .orders-panel,
#shopDailyBusinessReport .orders-panel,
#monthlyBusinessReport .orders-panel,
#annualBusinessReport .orders-panel {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#shopDailyBusinessTable .table-grouped-head tr,
#monthlyBusinessTable .table-grouped-head tr,
#annualBusinessTable .table-grouped-head tr {
  height: var(--table-group-header-row-height);
  min-height: var(--table-group-header-row-height);
  max-height: var(--table-group-header-row-height);
}
#shopDailyBusinessTable .table-grouped-head tr:first-child th:not([rowspan="2"]),
#shopDailyBusinessTable .table-grouped-head tr:nth-child(2) th,
#monthlyBusinessTable .table-grouped-head tr:first-child th:not([rowspan="2"]),
#monthlyBusinessTable .table-grouped-head tr:nth-child(2) th,
#annualBusinessTable .table-grouped-head tr:first-child th:not([rowspan="2"]),
#annualBusinessTable .table-grouped-head tr:nth-child(2) th {
  height: var(--table-group-header-row-height);
  min-height: var(--table-group-header-row-height);
  max-height: var(--table-group-header-row-height);
}
#shopDailyBusinessTable .table-grouped-head tr:first-child th[rowspan="2"],
#monthlyBusinessTable .table-grouped-head tr:first-child th[rowspan="2"],
#annualBusinessTable .table-grouped-head tr:first-child th[rowspan="2"] {
  height: var(--table-group-header-height);
  min-height: var(--table-group-header-height);
  max-height: var(--table-group-header-height);
}
#shopDailyBusinessTable .table-grouped-head tr:first-child th:not([rowspan="2"]) .th-content,
#shopDailyBusinessTable .table-grouped-head tr:nth-child(2) th .th-content,
#monthlyBusinessTable .table-grouped-head tr:first-child th:not([rowspan="2"]) .th-content,
#monthlyBusinessTable .table-grouped-head tr:nth-child(2) th .th-content,
#annualBusinessTable .table-grouped-head tr:first-child th:not([rowspan="2"]) .th-content,
#annualBusinessTable .table-grouped-head tr:nth-child(2) th .th-content {
  height: calc(var(--table-group-header-row-height) - 1px);
  min-height: calc(var(--table-group-header-row-height) - 1px);
}
#shopDailyBusinessTable .table-grouped-head tr:first-child th[rowspan="2"] .th-content,
#monthlyBusinessTable .table-grouped-head tr:first-child th[rowspan="2"] .th-content,
#annualBusinessTable .table-grouped-head tr:first-child th[rowspan="2"] .th-content {
  height: calc(var(--table-group-header-height) - 1px);
  min-height: calc(var(--table-group-header-height) - 1px);
}
#shopDailyBusinessTable .table-grouped-head th,
#shopDailyBusinessTable .table-grouped-head .th-content,
#monthlyBusinessTable .table-grouped-head th,
#monthlyBusinessTable .table-grouped-head .th-content,
#annualBusinessTable .table-grouped-head th,
#annualBusinessTable .table-grouped-head .th-content {
  font-family: var(--table-font-family);
  font-size: var(--table-header-font-size);
  font-weight: var(--table-header-font-weight);
  color: var(--table-header-text-color);
  line-height: var(--table-cell-line-height);
}
#shopDailyBusinessTable .table-group-header .th-content,
#monthlyBusinessTable .table-group-header .th-content,
#annualBusinessTable .table-group-header .th-content {
  justify-content: center;
  text-align: center;
}
#shopDailyBusinessTable th,
#shopDailyBusinessTable td,
#monthlyBusinessTable th,
#monthlyBusinessTable td,
#annualBusinessTable th,
#annualBusinessTable td {
  text-align: center;
}
#shopDailyBusinessTable .resizable-table tbody tr,
#shopDailyBusinessTable .resizable-table tbody td,
#monthlyBusinessTable .resizable-table tbody tr,
#monthlyBusinessTable .resizable-table tbody td,
#annualBusinessTable .resizable-table tbody tr,
#annualBusinessTable .resizable-table tbody td {
  height: var(--table-row-height);
  min-height: var(--table-row-height);
  max-height: var(--table-row-height);
}
#shopDailyBusinessTable .col-shopInfo .table-cell-content {
  justify-content: flex-start;
  text-align: left;
}
#shopDailyBusinessTable td.col-shopInfo {
  padding: 5px;
}
.shop-daily-column-settings-btn {
  margin-left: auto;
}
.monthly-business-month-btn {
  width: 150px;
  justify-content: flex-start;
}
.month-picker {
  position: absolute;
  top: calc(100% + var(--filter-popover-gap));
  left: 0;
  z-index: 80;
  width: 320px;
  padding: 0 16px 16px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  background: var(--ui-popover-background);
  box-shadow: var(--unified-filter-panel-shadow);
}
.month-picker.hidden {
  display: none;
}
.month-picker-nav {
  display: grid;
  height: 56px;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
}
.month-picker-nav strong {
  color: #344054;
  font-family: var(--control-font-family);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}
.month-picker-nav button {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--ui-control-radius);
  background: transparent;
  color: #667085;
  font-family: var(--control-font-family);
  font-size: 13px;
  cursor: pointer;
}
.month-picker-nav button:hover {
  color: #fff;
  background: var(--ui-primary-hover);
}
.month-picker-nav button:active:not(:disabled) {
  background: var(--ui-primary-active);
}
.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 22px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.month-picker-grid button {
  height: 26px;
  border: 0;
  background: transparent;
  color: #344054;
  font-family: var(--control-font-family);
  font-size: 13px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.month-picker-grid button:hover,
.month-picker-grid button.active {
  color: var(--ui-primary);
  font-weight: 600;
}
.month-picker-grid button:disabled,
.month-picker-actions button:disabled,
.month-picker-nav button:disabled {
  color: #c8d1dc;
  cursor: not-allowed;
}
.month-picker-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #edf1f6;
}
.month-picker-actions button {
  height: 28px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: var(--ui-primary);
  font-family: var(--control-font-family);
  font-size: 13px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.month-picker-actions button:hover {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}
.month-picker-actions button.primary {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}
.year-picker-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 22px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.year-picker-body button {
  height: 26px;
  border: 0;
  background: transparent;
  color: #344054;
  font-family: var(--control-font-family);
  font-size: 13px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
.year-picker-body button:hover,
.year-picker-body button.active {
  color: var(--ui-primary);
  font-weight: 600;
}
.year-picker-body button:disabled {
  color: #c8d1dc;
  cursor: not-allowed;
}
.shop-daily-progress {
  position: relative;
  width: 100%;
  height: 20px;
  overflow: hidden;
  border-radius: 4px;
  background: #eef2f7;
}
.shop-daily-completion-cell {
  display: flex;
  min-height: 40px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}
.shop-daily-completion-count {
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}
.monthly-business-footer-toggle {
  display: flex;
  height: 36px;
  min-width: 42px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--table-font-family);
  font-size: var(--table-font-size);
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
  vertical-align: middle;
}
#monthlyBusinessTable .table-fixed-footer td.col-businessDate .table-cell-content,
#monthlyBusinessTable tfoot td.col-businessDate .table-cell-content,
#annualBusinessTable .table-fixed-footer td.col-businessDate .table-cell-content,
#annualBusinessTable tfoot td.col-businessDate .table-cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.monthly-business-footer-toggle em {
  display: block;
  width: 100%;
  height: 12px;
  color: #667085;
  font-style: normal;
  font-size: 13px;
  line-height: 12px;
  text-align: center;
}
.monthly-business-footer-toggle:hover span,
.monthly-business-footer-toggle:hover em {
  color: var(--ui-primary);
}
.table-summary-row td.col-__index .table-cell-content {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.table-summary-row td.col-__index {
  padding-right: 2px;
  padding-left: 2px;
}
.table-summary-row td.col-__index .monthly-business-footer-toggle {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  flex: 0 0 32px;
  margin: 0;
}
.table-summary-row td.col-__index .monthly-business-footer-toggle span {
  display: block;
  width: 32px;
  text-align: center;
  white-space: nowrap;
}
.shop-daily-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: #dbeafe;
}
.shop-daily-progress > em {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--table-body-text-color);
  font-style: normal;
}

#financeAccountTransactions .orders-panel,
#jdFinanceReconciliation .orders-panel,
#logisticsFees .orders-panel {
  overflow: hidden;
}
#logisticsFeesTable .col-__index,
#logisticsFeesTable .col-__key {
  text-align: center;
}
#logisticsFeesTable th.col-__key,
#logisticsFeesTable td.col-__key {
  padding-left: 0;
  padding-right: 0;
}
#logisticsFeesTable th.col-__key .th-content,
#logisticsFeesTable td.col-__key .table-cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#logisticsFeesTable .col-__key input {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
}
#logisticsFeesTable .logistics-settlement-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 1;
  pointer-events: none;
  accent-color: var(--ui-primary);
}
#logisticsFeesTable .col-settlementStatus .table-cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
#logisticsFees .toolbar-text-link {
  display: inline-flex;
  align-items: center;
  height: var(--filter-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-link);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-size: 13px;
}
#logisticsFees .toolbar-text-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
#logisticsFees .toolbar-text-link.disabled,
#logisticsFees .toolbar-text-link[aria-disabled="true"] {
  color: #93b4f8;
  text-decoration: none;
  cursor: default;
}
#logisticsFees .toolbar-text-link.permission-disabled,
#logisticsFees .toolbar-text-link.permission-disabled:hover {
  color: #98a2b3;
  text-decoration: none;
  cursor: not-allowed;
}
#logisticsFeesBatchFreightInput.permission-disabled {
  color: #98a2b3;
  background: #f2f4f7;
  cursor: not-allowed;
}
#logisticsFees .platform-field .unified-select-field {
  width: 100%;
}
#logisticsFees .report-toolbar .logistics-search-group {
  display: grid;
  grid-template-columns: 220px 54px 54px;
  gap: 0;
  align-items: end;
  flex: 0 0 auto;
  height: var(--filter-height);
}
#logisticsFees .report-toolbar .logistics-search-group .search-field {
  position: relative;
  width: auto;
  flex: 0 0 auto;
  display: block;
  height: var(--filter-height);
  gap: 0;
}
#logisticsFees .report-toolbar .logistics-search-group .search-field::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid #c4d7ef;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
#logisticsFees .report-toolbar .logistics-search-group .search-field::after {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(50% + 5px);
  width: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: #c4d7ef;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
#logisticsFeesSearchInput {
  width: 100%;
  padding-left: 30px;
  border-radius: var(--filter-radius) 0 0 var(--filter-radius);
}
#logisticsFeesSearchInput:focus,
#logisticsFeesSearchInput:focus-visible {
  border-color: var(--line);
  outline: 0;
  box-shadow: none;
}
#logisticsFeesQueryBtn {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  display: inline-grid;
  place-items: center;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}
#logisticsFeesResetBtn {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  display: inline-grid;
  place-items: center;
  border-left: 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}
#logisticsFeesResetBtn {
  border-radius: 0 var(--filter-radius) var(--filter-radius) 0;
}
#logisticsFees .report-toolbar .order-more-actions-row {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: var(--filter-gap);
  height: var(--filter-height);
  color: #475569;
  font-size: 13px;
}
#logisticsFees .report-toolbar .order-more-actions-row.hidden {
  display: none;
}
#logisticsFees .report-toolbar .order-range-tools {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--filter-height);
}
#logisticsFees .report-toolbar .order-range-tools > span:first-child {
  margin-right: 6px;
}
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"] {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  flex: 0 0 40px;
  border-radius: 0;
  text-align: center;
  padding: 0 4px;
  appearance: textfield;
  -moz-appearance: textfield;
  outline: 0;
  box-shadow: none;
}
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"]::-webkit-outer-spin-button,
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"]:focus,
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"]:focus-visible {
  border-color: var(--line);
  outline: 0;
  box-shadow: none;
}
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"]:first-of-type {
  border-radius: var(--filter-radius) 0 0 var(--filter-radius);
  border-right: 0;
}
#logisticsFees .report-toolbar .order-more-actions-row input[type="number"]:last-of-type {
  border-left: 0;
}
#logisticsFees .report-toolbar .order-range-tools > span:nth-of-type(2) {
  width: 22px;
  height: var(--filter-height);
  display: inline-grid;
  place-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: #98a2b3;
}
#logisticsFees .report-toolbar .order-more-actions-row button {
  width: 54px;
  min-width: 54px;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
#logisticsFees .report-toolbar .order-more-actions-row button:last-of-type {
  border-radius: 0 var(--filter-radius) var(--filter-radius) 0;
}
#logisticsFees .report-toolbar .logistics-batch-freight-tools {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--filter-height);
}
#logisticsFees .report-toolbar .logistics-batch-freight-tools > span {
  margin-right: 6px;
  white-space: nowrap;
}
#logisticsFeesBatchFreightInput {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  padding: 0 4px;
  border-radius: var(--filter-radius) 0 0 var(--filter-radius);
  outline: 0;
  box-shadow: none;
  text-align: center;
}
#logisticsFeesBatchFreightInput:focus,
#logisticsFeesBatchFreightInput:focus-visible {
  border-color: var(--line);
  outline: 0;
  box-shadow: none;
}
#logisticsFeesBatchFreightBtn {
  border-left: 0;
  border-radius: 0 var(--filter-radius) var(--filter-radius) 0;
}
#jdSearchPushReport .orders-panel {
  overflow: hidden;
}
#jdAdsReport .orders-panel {
  overflow: hidden;
}
#jdSwaReport .orders-panel,
#jdSwaDetailReport .orders-panel,
#jdFullStationReport .orders-panel,
#jdFullStationDetailReport .orders-panel,
#tmallProductReport .orders-panel,
#tmallProductDetailReport .orders-panel,
#tmallOtherPromotionReport .orders-panel,
#tmallOtherPromotionDetailReport .orders-panel {
  overflow: hidden;
}
#jdAdsReport #jdAdsShopFilterBtn:disabled {
  color: #64748b;
  background: #f8fafc;
  cursor: not-allowed;
}
#jdSearchPushReportTable {
  flex: 1;
  min-height: 0;
}
#jdAdsReportTable {
  flex: 1;
  min-height: 0;
}
#jdSwaReportTable,
#jdSwaDetailTable,
#jdFullStationReportTable,
#jdFullStationDetailTable,
#tmallProductReportTable,
#tmallProductDetailTable,
#tmallOtherPromotionReportTable,
#tmallOtherPromotionDetailTable {
  flex: 1;
  min-height: 0;
}
#jdSearchPushReportTable .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#jdAdsReportTable .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#jdSwaReportTable .table-scroll-shell,
#jdSwaDetailTable .table-scroll-shell,
#jdFullStationReportTable .table-scroll-shell,
#jdFullStationDetailTable .table-scroll-shell,
#tmallProductReportTable .table-scroll-shell,
#tmallProductDetailTable .table-scroll-shell,
#tmallOtherPromotionReportTable .table-scroll-shell,
#tmallOtherPromotionDetailTable .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#jdSearchPushReportTable .table-wrap,
#jdAdsReportTable .table-wrap,
#jdSwaReportTable .table-wrap,
#jdSwaDetailTable .table-wrap,
#jdFullStationReportTable .table-wrap,
#jdFullStationDetailTable .table-wrap,
#tmallProductReportTable .table-wrap,
#tmallProductDetailTable .table-wrap,
#tmallOtherPromotionReportTable .table-wrap,
#tmallOtherPromotionDetailTable .table-wrap {
  height: auto;
  min-height: 0;
}
#jdSearchPushReportTable .resizable-table table,
#jdAdsReportTable .resizable-table table,
#jdSwaReportTable .resizable-table table,
#jdSwaDetailTable .resizable-table table,
#jdFullStationReportTable .resizable-table table,
#jdFullStationDetailTable .resizable-table table,
#tmallProductReportTable .resizable-table table,
#tmallProductDetailTable .resizable-table table,
#tmallOtherPromotionReportTable .resizable-table table,
#tmallOtherPromotionDetailTable .resizable-table table {
  border-collapse: separate;
  border-spacing: 0;
}
#jdSearchPushReportTable .resizable-table tfoot tr,
#jdAdsReportTable .resizable-table tfoot tr,
#jdSwaReportTable .resizable-table tfoot tr,
#jdSwaDetailTable .resizable-table tfoot tr,
#jdFullStationReportTable .resizable-table tfoot tr,
#jdFullStationDetailTable .resizable-table tfoot tr,
#tmallProductReportTable .resizable-table tfoot tr,
#tmallProductDetailTable .resizable-table tfoot tr,
#tmallOtherPromotionReportTable .resizable-table tfoot tr,
#tmallOtherPromotionDetailTable .resizable-table tfoot tr {
  position: sticky;
  bottom: 0;
  z-index: 5;
}
#jdSearchPushReportTable .resizable-table tfoot td,
#jdAdsReportTable .resizable-table tfoot td,
#jdSwaReportTable .resizable-table tfoot td,
#jdSwaDetailTable .resizable-table tfoot td,
#jdFullStationReportTable .resizable-table tfoot td,
#jdFullStationDetailTable .resizable-table tfoot td,
#tmallProductReportTable .resizable-table tfoot td,
#tmallProductDetailTable .resizable-table tfoot td,
#tmallOtherPromotionReportTable .resizable-table tfoot td,
#tmallOtherPromotionDetailTable .resizable-table tfoot td {
  box-shadow: none;
  border-top: 1px solid #edf1f5;
}

:is(
  #jdSearchPushReportTable,
  #jdAdsReportTable,
  #jdSwaReportTable,
  #jdSwaDetailTable,
  #jdFullStationReportTable,
  #jdFullStationDetailTable,
  #tmallProductReportTable,
  #tmallProductDetailTable,
  #tmallOtherPromotionReportTable,
  #tmallOtherPromotionDetailTable
) .resizable-table tbody tr,
:is(
  #jdSearchPushReportTable,
  #jdAdsReportTable,
  #jdSwaReportTable,
  #jdSwaDetailTable,
  #jdFullStationReportTable,
  #jdFullStationDetailTable,
  #tmallProductReportTable,
  #tmallProductDetailTable,
  #tmallOtherPromotionReportTable,
  #tmallOtherPromotionDetailTable
) .resizable-table tbody td {
  height: var(--table-row-height);
  min-height: var(--table-row-height);
  max-height: var(--table-row-height);
  overflow: hidden;
}

:is(
  #jdSearchPushReportTable,
  #jdAdsReportTable,
  #jdSwaReportTable,
  #jdSwaDetailTable,
  #jdFullStationReportTable,
  #jdFullStationDetailTable,
  #tmallProductReportTable,
  #tmallProductDetailTable,
  #tmallOtherPromotionReportTable,
  #tmallOtherPromotionDetailTable
) .resizable-table tbody .table-cell-content {
  max-height: 36px;
  overflow: hidden;
}
.jd-search-push-report-table {
  height: auto;
  min-height: 0;
}
.jd-search-push-report-table .col-shopName {
  text-align: center;
  padding-left: 11px;
  padding-right: 11px;
}
.jd-search-push-report-table td.col-shopName .table-cell-content,
.jd-ads-report-table td.col-shopName .table-cell-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}
.jd-ads-report-table .col-shopName {
  text-align: center;
  padding-left: 11px;
  padding-right: 11px;
}
.jd-ads-report-table {
  height: auto;
  min-height: 0;
}

#jdAdsReport .multi-filter-field {
  width: 150px;
  flex: 0 0 150px;
}

#jdSwaReport .multi-filter-field,
#jdSwaDetailReport .multi-filter-field {
  width: 150px;
  flex: 0 0 150px;
}

.standard-list-table {
  height: auto;
  min-height: 0;
}
.order-mode-afterSale {
  overflow-x: hidden;
  overflow-y: hidden;
}
.order-mode-afterSale table {
  min-width: 100%;
  table-layout: fixed;
}
.order-mode-afterSale th,
.order-mode-afterSale td {
  min-width: 120px;
  max-width: none;
}
.order-mode-afterSale :is(.col-storeInfo, .col-skuId, .col-spuId, .col-merchantCode) {
  min-width: 180px;
}
.order-mode-afterSale :is(.col-orderId, .col-refundId) {
  min-width: 190px;
}
.order-mode-afterSale :is(.col-paidAt, .col-refundCompletedAt, .col-refundAppliedAt) {
  min-width: 170px;
}
.order-mode-afterSale :is(.col-product, .col-refundReason, .col-refundTag) {
  min-width: 240px;
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(15, 23, 42, .18);
  display: flex;
  justify-content: flex-end;
}
.drawer-overlay.hidden { display: none; }
.column-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(15, 23, 42, .18);
  display: flex;
  justify-content: flex-end;
}
.column-drawer-overlay.hidden {
  display: none;
}
#localProductDrawerOverlay {
  top: var(--workspace-top-offset);
  bottom: auto;
  height: calc(100vh - var(--workspace-top-offset));
  background: rgba(15, 23, 42, .18);
}
.column-drawer {
  width: 320px;
  max-width: 92vw;
  height: 100vh;
  background: #fff;
  box-shadow: -10px 0 28px rgba(15, 23, 42, .18);
  display: grid;
  grid-template-rows: 54px 1fr 56px;
}
.column-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f5;
}
.column-drawer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 18px;
}
.column-drawer footer {
  border-top: 1px solid #edf1f5;
  border-bottom: 0;
}
.column-drawer h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.icon-btn {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  border: 0;
  border-radius: var(--ui-control-radius);
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
}
.column-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 18px 12px;
}
.column-drawer-body p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.column-settings-list {
  display: grid;
  gap: 2px;
}
.column-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  padding: 5px 6px;
  min-height: 30px;
  cursor: grab;
}
.column-item:hover,
.column-item.drag-over { background: #f3f4f6; }
.column-item.dragging {
  opacity: .55;
  cursor: grabbing;
}
.column-drag-ghost {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
  opacity: .78;
  background: #fff;
  border: 1px solid #bfdbfe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .16);
  cursor: grabbing;
  will-change: transform;
}
.column-item-main {
  color: var(--text);
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.column-item input[type="checkbox"],
.column-drawer footer input[type="checkbox"],
.order-detail-column-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ui-primary);
  padding: 0;
}
.column-group-setting {
  background: #fff;
}
.column-group-setting > .column-item {
  background: #fff;
  color: var(--text);
  font-weight: 400;
}
.column-group-toggle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ui-primary);
  font-size: 18px;
  line-height: 18px;
  cursor: pointer;
}
.column-group-toggle:hover {
  background: var(--ui-primary-soft);
}
.column-group-children {
  display: grid;
  gap: 1px;
  padding: 2px 0 3px 18px;
}
.column-group-children .column-item {
  padding-left: 10px;
}
.column-group-toggle::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.column-group-setting.is-expanded .column-group-toggle::before,
.column-group-setting.is-expanded:hover .column-group-toggle::before {
  content: "";
  transform: rotate(225deg);
}
.column-group-setting:not(.is-expanded) > .column-group-children,
.column-group-children[hidden] {
  display: none !important;
}
.drag-handle {
  color: var(--ui-primary);
  font-size: 18px;
  line-height: 1;
  opacity: .85;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.drag-handle:active {
  cursor: grabbing;
}
.column-item-main {
  overflow: hidden;
}
.column-order-number,
.column-width-value {
  position: relative;
  flex: 0 0 auto;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  color: #4b5563;
  font-size: 13px;
  text-align: center;
  cursor: text;
  user-select: none;
}
.column-order-number {
  width: 24px;
}
.column-width-value {
  min-width: 42px;
  padding: 0 3px;
}
.column-order-number:hover,
.column-width-value:hover {
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
}
.column-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4b5563;
  font-size: 13px;
  font-weight: 400;
}
.column-inline-number-input {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 20px;
  padding: 0 2px;
  border: 1px solid var(--ui-primary);
  border-radius: 3px;
  outline: none;
  background: var(--ui-primary-soft);
  color: var(--text);
  font: inherit;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgb(127 86 217 / 8%);
}
.column-order-actions,
.column-step-buttons {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.column-order-actions {
  gap: 5px;
}
.column-step-buttons {
  width: 18px;
  flex-direction: column;
  gap: 0;
}
.column-step-buttons button {
  display: grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ui-primary);
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
}
.column-step-buttons button:hover:not(:disabled) {
  background: var(--ui-primary-soft);
}
.column-step-buttons button:disabled {
  color: #cbd5e1;
  cursor: default;
}
.pager button {
  height: var(--filter-height);
  padding: 0 8px;
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-top: 0;
  margin-top: var(--ui-page-gap);
  color: var(--muted);
  flex-wrap: wrap;
}
.standard-list-pager {
  width: 100%;
}
.pager-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pager button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.pager button:not(:disabled) {
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: var(--ui-primary);
  background: var(--ui-control-background);
}
.pager button:not(:disabled):hover {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}
.pager button:not(:disabled):active {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}
label { color: var(--muted); font-size: 13px; }
.preview {
  margin-top: 14px;
  min-height: 120px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  color: var(--muted);
  background: #fbfdff;
}
.preview strong { color: var(--text); }
.check,
.setting {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}
.check strong,
.setting strong { display: block; margin-bottom: 4px; }

@media (max-width: 1080px) {
  .top-actions { display: flex; }
  .sidebar > nav { overflow-x: auto; flex-shrink: 1; }
  #currentUserName { max-width: 70px; }
  .layout.two { grid-template-columns: 1fr; display: grid; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .workspace { padding: var(--ui-page-gap); }
  .metric-grid { grid-template-columns: 1fr; }
}

body:has(#onlineProductSalesReport.active) .workspace {
  padding: 0;
  background: var(--app-shell-surface);
}

#onlineProductSalesReport.active {
  height: calc(100vh - var(--workspace-top-offset));
  min-height: 0;
  background: var(--app-shell-surface);
}

.online-product-sales-toolbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  row-gap: 8px;
  min-height: var(--filter-height);
  margin-bottom: 8px;
  padding: 0;
}

.online-product-sales-toolbar .date-range-field {
  width: 280px;
  min-width: 240px;
  flex: 0 1 280px;
}

.online-product-sales-toolbar .date-range-btn {
  width: 100%;
}

.online-product-sales-toolbar .unified-select-field,
#onlineProductSalesStatusSelect {
  width: 150px;
  flex: 0 0 150px;
}

.online-product-sales-toolbar .search-field {
  width: 240px;
  min-width: 160px;
  flex: 0 1 240px;
}

.online-product-sales-activity-tip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  height: var(--filter-height);
  margin-left: auto;
  color: var(--table-text-color);
  font-family: var(--table-font-family);
  font-size: 12px;
  white-space: nowrap;
}

.online-product-sales-tables {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.online-product-sales-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.online-product-sales-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.online-product-sales-table > .table-scroll-shell,
.online-product-sales-table .resizable-table,
.online-product-sales-table .table-wrap {
  height: 100%;
  min-height: 0;
}

.online-product-sales-table table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed;
}

#onlineProductSalesProductTable col[data-column="__index"],
#onlineProductSalesProductTable th[data-column="__index"],
#onlineProductSalesProductTable td[data-column="__index"],
#onlineProductSalesSkuTable col[data-column="__index"],
#onlineProductSalesSkuTable th[data-column="__index"],
#onlineProductSalesSkuTable td[data-column="__index"] {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

#onlineProductSalesProductTable col[data-column="image"],
#onlineProductSalesProductTable th[data-column="image"],
#onlineProductSalesProductTable td[data-column="image"] {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
}

#onlineProductSalesProductTable col[data-column="title"],
#onlineProductSalesProductTable th[data-column="title"],
#onlineProductSalesProductTable td[data-column="title"] {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

#onlineProductSalesProductTable col[data-column="orderCount"],
#onlineProductSalesProductTable col[data-column="orderAmount"],
#onlineProductSalesProductTable col[data-column="orderCost"],
#onlineProductSalesProductTable col[data-column="grossProfit"],
#onlineProductSalesProductTable col[data-column="grossMargin"],
#onlineProductSalesProductTable th[data-column="orderCount"],
#onlineProductSalesProductTable th[data-column="orderAmount"],
#onlineProductSalesProductTable th[data-column="orderCost"],
#onlineProductSalesProductTable th[data-column="grossProfit"],
#onlineProductSalesProductTable th[data-column="grossMargin"],
#onlineProductSalesProductTable td[data-column="orderCount"],
#onlineProductSalesProductTable td[data-column="orderAmount"],
#onlineProductSalesProductTable td[data-column="orderCost"],
#onlineProductSalesProductTable td[data-column="grossProfit"],
#onlineProductSalesProductTable td[data-column="grossMargin"] {
  width: calc((100% - 332px) / 5) !important;
  min-width: 0 !important;
  max-width: none !important;
}

#onlineProductSalesSkuTable col[data-column="productCode"],
#onlineProductSalesSkuTable th[data-column="productCode"],
#onlineProductSalesSkuTable td[data-column="productCode"] {
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
}

#onlineProductSalesSkuTable col[data-column="orderCount"],
#onlineProductSalesSkuTable col[data-column="orderAmount"],
#onlineProductSalesSkuTable col[data-column="orderCost"],
#onlineProductSalesSkuTable col[data-column="grossProfit"],
#onlineProductSalesSkuTable col[data-column="grossMargin"],
#onlineProductSalesSkuTable th[data-column="orderCount"],
#onlineProductSalesSkuTable th[data-column="orderAmount"],
#onlineProductSalesSkuTable th[data-column="orderCost"],
#onlineProductSalesSkuTable th[data-column="grossProfit"],
#onlineProductSalesSkuTable th[data-column="grossMargin"],
#onlineProductSalesSkuTable td[data-column="orderCount"],
#onlineProductSalesSkuTable td[data-column="orderAmount"],
#onlineProductSalesSkuTable td[data-column="orderCost"],
#onlineProductSalesSkuTable td[data-column="grossProfit"],
#onlineProductSalesSkuTable td[data-column="grossMargin"] {
  width: calc((100% - 272px) / 5) !important;
  min-width: 0 !important;
  max-width: none !important;
}

.online-product-sales-table th .th-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.online-product-sales-sort-btn {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 24px;
  margin: 0 0 0 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7f8998;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

.online-product-sales-sort-btn .sort-caret {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.online-product-sales-sort-btn .sort-asc {
  margin-bottom: 2px;
  border-bottom: 5px solid currentColor;
}

.online-product-sales-sort-btn .sort-desc {
  border-top: 5px solid currentColor;
}

.online-product-sales-sort-btn:hover,
.online-product-sales-sort-btn .sort-caret.selected {
  color: var(--ui-primary);
}

.online-product-sales-product-table td[data-column="title"] .table-cell-content,
.online-product-sales-sku-table td[data-column="productCode"] .table-cell-content {
  justify-content: flex-start;
  text-align: left;
}

.online-product-sales-product-table td[data-column="image"] .table-cell-content {
  justify-content: center;
}

body.online-products-active,
body.local-products-active {
  height: 100vh;
}
body.online-products-active .workspace {
  padding: 0;
  background: var(--app-shell-surface);
}
body.local-products-active .workspace {
  padding: 0;
  background: var(--app-shell-surface);
}
body.online-products-active #onlineProducts {
  height: 100%;
  min-height: 0;
}
body.local-products-active #localProducts {
  height: 100%;
  min-height: 0;
}
body.local-products-active #comboProducts {
  height: 100%;
  min-height: 0;
}

#localProductSalesReport .local-product-sales-toolbar {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  min-height: var(--filter-height);
}

#localProductSalesReport .local-product-sales-toolbar .search-field {
  width: 260px;
  flex: 0 0 260px;
}

#localProductSalesReport .local-product-sales-toolbar .platform-field,
#localProductSalesReport .local-product-sales-toolbar .store-field {
  width: 150px;
  flex: 0 0 150px;
}

#localProductSalesReport .local-product-sales-toolbar > .toolbar-icon-btn {
  flex: 0 0 var(--ui-control-height);
  width: var(--ui-control-height);
}

#localProductSalesConfirmDateRangeBtn {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
}

#localProductSalesTable .local-product-sales-header-label {
  min-width: 0;
}

#localProductSalesTable .local-product-sales-frozen {
  position: sticky;
  left: var(--local-product-sales-frozen-left);
  z-index: 4;
  background: #fff;
}

#localProductSalesTable .table-fixed-header .local-product-sales-frozen {
  position: sticky !important;
  z-index: 8 !important;
  background: var(--table-header-bg);
}

#localProductSalesTable .local-product-sales-frozen-edge {
  box-shadow: none;
}

#localProductSalesTable .table-grouped-head tr:nth-child(2) th .th-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#localProductSalesTable .local-product-sales-sort-btn {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 24px;
  margin: 0 0 0 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7f8998;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
}

#localProductSalesTable .local-product-sales-sort-btn .sort-caret {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

#localProductSalesTable .local-product-sales-sort-btn .sort-asc {
  margin-bottom: 2px;
  border-bottom: 5px solid currentColor;
}

#localProductSalesTable .local-product-sales-sort-btn .sort-desc {
  border-top: 5px solid currentColor;
}

#localProductSalesTable .local-product-sales-sort-btn:hover,
#localProductSalesTable .local-product-sales-sort-btn .sort-caret.selected {
  color: var(--ui-primary);
}

#localProductSalesTable .local-product-sales-sort-btn:focus-visible {
  outline: 1px solid var(--ui-primary);
  outline-offset: 1px;
}

#localProductSalesTable {
  flex: 1 1 auto;
  min-height: 0;
}

#localProductSalesTable > .table-scroll-shell,
#localProductSalesTable .table-body-scroll {
  height: 100%;
  min-height: 0;
}

#localProductSalesTable .table-split-frame {
  min-height: 0;
}

#localProductSalesTable > .table-scroll-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

#localProductSalesTable .table-split-frame {
  height: auto;
}

#localProductSalesTable .table-grouped-head tr {
  height: var(--table-group-header-row-height);
  min-height: var(--table-group-header-row-height);
  max-height: var(--table-group-header-row-height);
  background: var(--table-header-bg);
}

#localProductSalesTable .table-grouped-head tr:first-child th[rowspan="2"] {
  height: var(--table-group-header-height);
  min-height: var(--table-group-header-height);
  max-height: var(--table-group-header-height);
}

#localProductSalesTable .table-grouped-head tr:first-child th:not([rowspan="2"]) .th-content,
#localProductSalesTable .table-grouped-head tr:nth-child(2) th .th-content {
  height: calc(var(--table-group-header-row-height) - 1px);
  min-height: calc(var(--table-group-header-row-height) - 1px);
}

#localProductSalesTable .table-grouped-head tr:first-child th[rowspan="2"] .th-content {
  height: calc(var(--table-group-header-height) - 1px);
  min-height: calc(var(--table-group-header-height) - 1px);
}

#localProductSalesTable .table-group-header .th-content,
#localProductSalesTable th,
#localProductSalesTable td {
  justify-content: center;
  text-align: center;
}

#localProductSalesTable .col-product_name .table-cell-content {
  justify-content: flex-start;
  text-align: left;
}

#localProductSalesTable .resizable-table tbody tr,
#localProductSalesTable .resizable-table tbody td {
  height: var(--table-row-height);
  min-height: var(--table-row-height);
  max-height: var(--table-row-height);
}

#localProductSalesPager {
  flex: 0 0 auto;
}

body.stores-active {
  height: 100vh;
  overflow: hidden;
}
body.stores-active .workspace {
  padding: 0;
  background: var(--app-shell-surface);
  overflow: hidden;
}
body.stores-active #stores {
  height: 100%;
  min-height: 0;
}
body.stores-active .shop-management-page {
  height: 100%;
  min-height: 0;
}
body.stores-active .shop-management-sidebar,
body.stores-active .shop-management-main {
  height: 100%;
  min-height: 0;
}
body.stores-active .shop-management-panel {
  min-height: 0;
}
body.stores-active .shop-management-main {
  overflow: hidden;
}

.online-product-page {
  --blue: #f8fafc;
  --blue-line: #edf1f5;
  --soft-blue: #eaf5ff;
}

.online-product-toolbar {
  display: flex;
  gap: var(--filter-gap);
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 0 8px;
  min-height: calc(var(--filter-height) + 8px);
  flex: 0 0 calc(var(--filter-height) + 8px);
  border-bottom: 0;
}

.online-product-toolbar input,
.online-product-toolbar select,
.online-product-toolbar button {
  height: var(--filter-height);
  border-radius: var(--filter-radius);
}

#onlineProductMainSearchInput {
  width: 260px;
  flex: 0 0 260px;
}

#onlineProductStatusSelect,
#onlineProductRangeSelect {
  width: 150px;
  flex: 0 0 150px;
}

.online-product-toolbar .unified-select-field {
  width: 150px;
  flex: 0 0 150px;
}

.online-product-toolbar .toolbar-icon-btn {
  margin-left: 4px;
  flex: 0 0 auto;
}

.local-product-page .online-product-toolbar .primary,
.local-product-drawer .primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: #fff;
}

#localProducts .local-product-action-group,
#comboProducts .local-product-action-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: var(--filter-height);
  flex: 0 0 auto;
}

#localProducts .local-product-action-group button,
#comboProducts .local-product-action-group button {
  height: var(--filter-height);
  margin-left: -1px;
  border-color: var(--ui-control-border);
  border-radius: 0;
  background: #fff;
  color: var(--ui-primary);
}

#localProducts .local-product-action-group button:hover:not(:disabled),
#comboProducts .local-product-action-group button:hover:not(:disabled) {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}

#localProducts .local-product-action-group button:active:not(:disabled),
#comboProducts .local-product-action-group button:active:not(:disabled) {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}

#localProducts .local-product-action-group button:first-child,
#comboProducts .local-product-action-group button:first-child {
  margin-left: 0;
  border-radius: var(--filter-radius) 0 0 var(--filter-radius);
}

#localProducts .local-product-action-group button:last-child,
#comboProducts .local-product-action-group button:last-child {
  border-radius: 0 var(--filter-radius) var(--filter-radius) 0;
}

#localProducts .local-product-action-group button:disabled,
#comboProducts .local-product-action-group button:disabled {
  color: #98a2b3;
  background: #f8fafc;
}

.local-product-page .online-product-toolbar .danger {
  border-color: #ffccc7;
  color: #d93026;
  background: #fff;
}

.local-product-page .online-product-toolbar button:disabled,
.local-product-drawer button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.link-refresh {
  border: 0;
  background: transparent;
  color: var(--ui-link);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

#onlineProductMainSummary {
  margin-left: auto;
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.combo-dialog.product-fetch-dialog {
  width: min(520px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
}

.product-fetch-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.product-fetch-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--table-text-color);
  font-size: 13px;
}

.product-fetch-field select,
.product-fetch-field input {
  width: 100%;
  height: var(--filter-height);
  border: 1px solid var(--line);
  border-radius: var(--filter-radius);
  padding: 0 10px;
  color: var(--table-text-color);
  background: #fff;
  font: inherit;
}

.product-fetch-field .unified-select-field {
  width: 100%;
}

.product-fetch-id-field {
  grid-column: 1 / -1;
}

.online-product-table-wrap {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}

#localProductTable {
  border: 0;
  border-radius: 0;
}

.online-product-table-wrap .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.online-product-table-wrap-inner {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}

.online-product-table {
  width: 100%;
  min-width: 1580px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.online-product-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-header-bg);
  color: var(--table-header-text-color);
  font-weight: 700;
  height: var(--table-header-height);
  border: 0;
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  text-align: center;
  white-space: nowrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  writing-mode: horizontal-tb;
  padding: 0 10px;
}

.online-product-table td {
  border: 0;
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  padding: 2px 8px;
  color: var(--table-text-color);
  vertical-align: middle;
  text-align: center;
  background: var(--table-row-bg);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  overflow: hidden;
}

.online-product-table th:last-child,
.online-product-table td:last-child {
  border-right: 1px solid var(--table-border-color);
}

.online-product-table th[data-column="action"] {
  position: sticky;
  right: 0;
  box-shadow: -1px 0 0 var(--table-border-color);
}

.online-product-table td[data-column="action"] {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--table-row-bg);
  box-shadow: -1px 0 0 var(--table-border-color);
}

.online-product-table th[data-column="action"] {
  z-index: 5;
  background: var(--table-header-bg);
}

.online-product-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.online-product-refresh-action {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ui-link);
  cursor: pointer;
  font: inherit;
}

.online-product-refresh-action:disabled {
  color: #9ca3af;
  cursor: wait;
}

.resizable-table th:last-child,
.resizable-table td:last-child,
.shop-management-table th:last-child,
.shop-management-table td:last-child {
  border-right: 1px solid var(--table-border-color);
}

.shop-management-table td[data-column="daysLeft"] .table-cell-content {
  display: grid;
  place-items: center;
  white-space: nowrap;
}

.online-product-table tr {
  height: var(--table-row-height);
}

.online-product-table tbody tr:hover td {
  background: var(--table-row-hover-bg);
}

.local-product-table table {
  border-collapse: separate;
  border-spacing: 0;
}

.local-product-table tbody tr:first-child td {
  border-top: 0;
}

.local-product-table td[data-column="product_name"] {
  text-align: left;
}

.local-product-table .table-fixed-header,
.local-product-table .table-grouped-head th {
  background: #f8fafc;
}

.local-product-table .table-grouped-head tr {
  height: var(--table-group-header-row-height);
}

.local-product-table .table-grouped-head tr:first-child th:not([rowspan="2"]),
.local-product-table .table-grouped-head tr:nth-child(2) th {
  height: var(--table-group-header-row-height);
  min-height: var(--table-group-header-row-height);
  max-height: var(--table-group-header-row-height);
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--table-group-header-row-height);
}

.local-product-table .table-grouped-head tr:first-child th[rowspan="2"] {
  height: var(--table-group-header-height);
  min-height: var(--table-group-header-height);
  max-height: var(--table-group-header-height);
  line-height: 1.25;
}

.local-product-table .table-grouped-head tr:first-child th[rowspan="2"] .th-content {
  display: grid;
  place-items: center;
  height: var(--table-group-header-height);
}

.local-product-table .table-grouped-head th:not([rowspan="2"]) .th-content {
  display: grid;
  place-items: center;
  height: var(--table-group-header-row-height);
}

.local-product-pager {
  flex: 0 0 auto;
  min-height: 30px;
  margin-top: var(--ui-page-gap);
  padding: 0 2px;
  border-top: 0;
  background: transparent;
}

#localProductTable {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}

#comboProductTable {
  min-height: 0;
  margin-bottom: 0;
}

#localProductTable > .table-scroll-shell,
.local-product-table-body {
  min-height: 0;
  height: 100%;
}

#localProductTable .table-split-frame,
.local-product-table-body > .table-wrap {
  height: 100%;
  min-height: 0;
}

#localProductTable .table-split-frame,
#localProductTable .table-wrap,
#shopManagementTable .table-split-frame,
#shopManagementTable .table-wrap {
  border: 0;
  border-radius: 0;
}

.combo-product-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto 240px;
  gap: 8px;
}

.combo-product-table-wrap,
.combo-component-table-wrap {
  min-height: 0;
}

.combo-component-table-wrap {
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
}

.combo-component-table-wrap .table-scroll-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.combo-subtitle {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #edf1f5;
  background: #f8fafc;
  color: #344054;
  font-weight: 700;
}

.combo-product-table tbody tr.placeholder-row td {
  color: transparent;
}

.combo-product-table tbody tr.placeholder-row td[data-column="row_index"] {
  color: #98a2b3;
}

.combo-product-table td[data-column="product_name"],
.combo-component-table td[data-column="component_name"] {
  text-align: left;
}

.online-product-table th[data-column="row_index"],
.online-product-table td[data-column="row_index"] {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

.combo-dialog-overlay {
  position: fixed;
  inset: var(--workspace-top-offset) 0 0 0;
  z-index: 42;
  background: rgba(15, 23, 42, .18);
  display: grid;
  place-items: center;
  padding: 18px;
}

.combo-dialog-overlay.hidden {
  display: none;
}

.combo-dialog {
  width: min(860px, calc(100vw - 64px));
  height: min(620px, calc(100vh - var(--workspace-top-offset) - 52px));
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 58px;
  overflow: hidden;
}

.combo-picker-dialog {
  width: min(980px, calc(100vw - 64px));
}

.combo-picker-dialog .combo-dialog-body {
  grid-template-rows: auto minmax(0, 1fr);
}

.combo-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid #edf1f5;
}

.combo-dialog footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.combo-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid #edf1f5;
  border-bottom: 0;
}

.combo-dialog h2 {
  margin: 0;
  color: #344054;
  font-size: 18px;
}

.settlement-strategy-overlay {
  background: rgba(15, 23, 42, .3);
}

.settlement-strategy-dialog {
  width: min(550px, calc(100vw - 48px));
  height: min(410px, calc(100vh - var(--workspace-top-offset) - 36px));
  grid-template-rows: 54px minmax(0, 1fr) 58px;
  font-family: var(--table-font-family);
}

.settlement-strategy-dialog > header h2 {
  font-size: 16px;
  font-weight: 600;
}

.settlement-strategy-body {
  min-height: 0;
  padding: 18px 28px 14px;
  display: grid;
  grid-template-rows: 44px 44px 44px 48px 48px minmax(18px, 1fr);
  align-content: center;
  color: #344054;
  font-size: 13px;
}

.settlement-strategy-switch-row,
.settlement-strategy-condition-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.settlement-strategy-switch-row,
.settlement-strategy-condition-row,
.settlement-strategy-dialog > footer button {
  color: #344054;
  font-family: var(--table-font-family);
  font-size: 13px;
  font-weight: 400;
}

.settlement-strategy-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #667085;
  font-family: var(--table-font-family);
  font-size: 13px;
  white-space: nowrap;
}

.settlement-strategy-section-title::before,
.settlement-strategy-section-title::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed #cfd8e6;
}

.settlement-strategy-switch {
  appearance: none;
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background-color .15s ease;
}

.settlement-strategy-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .24);
  transition: transform .15s ease;
}

.settlement-strategy-switch:checked {
  background: var(--ui-primary);
}

.settlement-strategy-switch:checked::after {
  transform: translateX(18px);
}

.settlement-strategy-condition-row > input[type="checkbox"] {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0 2px 0 0;
  accent-color: var(--ui-primary);
}

.settlement-strategy-condition-row > input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.settlement-strategy-minutes {
  width: 66px;
  height: var(--ui-control-height);
  box-sizing: border-box;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  padding: 0 8px;
  background: #fff;
  color: #344054;
  font: inherit;
  text-align: center;
  outline: none;
}

.settlement-strategy-minutes:focus {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-inset-focus);
}

.settlement-strategy-minutes:disabled {
  background: #f5f7fa;
  color: #98a2b3;
  cursor: not-allowed;
}

.settlement-strategy-status {
  display: flex;
  align-items: center;
  min-height: 18px;
  color: #dc2626;
  font-size: 12px;
}

.settlement-strategy-dialog > footer button {
  min-width: 60px;
  height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
}

.combo-dialog-body {
  min-height: 0;
  overflow: hidden;
  padding: 16px 20px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.internal-order-fee-dialog {
  width: min(420px, calc(100vw - 48px));
  height: auto;
  min-height: 0;
  grid-template-rows: 50px auto 54px;
}

.internal-order-fee-body {
  overflow: visible;
  display: grid;
  grid-template-rows: none;
  grid-template-columns: 1fr;
  gap: 10px;
}

.internal-order-fee-body label {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 13px;
}

.internal-order-fee-body input {
  height: var(--filter-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  padding: 0 8px;
  color: #344054;
  font-size: 13px;
}
.internal-order-fee-body input:focus {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}

.centered-message-dialog {
  width: min(460px, calc(100vw - 48px));
  height: auto;
  min-height: 0;
  grid-template-rows: 50px auto 54px;
}

.centered-message-body {
  min-height: 88px;
  padding: 18px 22px;
  color: #344054;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  display: flex;
  align-items: center;
}

.order-fetch-dialog {
  width: min(350px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  grid-template-rows: 50px auto 54px;
  overflow: visible;
}

.combo-dialog.manual-fetch-dialog {
  width: min(550px, calc(100vw - 32px));
  height: min(320px, calc(100vh - var(--workspace-top-offset) - 32px));
  min-height: min(320px, calc(100vh - var(--workspace-top-offset) - 32px));
  grid-template-rows: 50px minmax(0, 1fr) 54px;
}

.manual-fetch-dialog .order-fetch-body,
.manual-fetch-dialog .product-fetch-body {
  padding: 5px 20px;
  column-gap: 16px;
  row-gap: 0;
  align-items: center;
}

#orderFetchForm .order-fetch-body {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

#adsManualFetchForm .order-fetch-body,
#productFetchForm .product-fetch-body {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.manual-fetch-dialog .filter-control,
.manual-fetch-dialog .order-fetch-input-field,
.manual-fetch-dialog .product-fetch-field {
  gap: 5px;
}

.order-fetch-body {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  overflow: visible;
}

.order-fetch-input-field {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 13px;
}

.order-fetch-wide-field {
  grid-column: 1 / -1;
}

.order-fetch-input-field input {
  width: 100%;
  height: var(--filter-height);
  min-width: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--filter-radius);
  padding: 0 9px;
  background: var(--ui-control-background);
  color: #475569;
  font-size: 13px;
  letter-spacing: 0;
}

.order-fetch-input-field input:focus {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}

.order-fetch-body .date-range-btn,
.order-fetch-body .multi-filter-btn {
  width: 100%;
}

.order-fetch-body .date-picker {
  width: 640px;
  max-width: calc(100vw - 88px);
}

.order-fetch-body .required-mark {
  color: #ef4444;
}

.order-fetch-date-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.order-fetch-date-actions button {
  height: var(--filter-height);
  padding: 0 12px;
}

.order-fetch-body .days button:disabled {
  color: #cbd5e1;
  background: #f8fafc;
  cursor: not-allowed;
}

.order-fetch-dialog footer button {
  width: 50px;
  height: var(--filter-height);
  padding: 0;
  border-radius: var(--filter-radius);
  font-size: 13px;
}

.manual-order-dialog {
  width: min(960px, calc(100vw - 40px));
  height: min(690px, calc(100vh - var(--workspace-top-offset) - 32px));
  grid-template-rows: 44px minmax(0, 1fr) 52px;
}

.manual-order-dialog header {
  padding: 0 12px;
}

.manual-order-dialog h2 {
  font-size: 16px;
}

.manual-order-body {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  display: grid;
  grid-template-rows: auto auto minmax(210px, 1fr) auto auto;
  gap: 8px;
}




.manual-order-top {
  display: grid;
  grid-template-columns: 210px minmax(220px, 1fr) minmax(250px, 1.05fr);
  gap: 18px;
  align-items: end;
}

.manual-order-top label {
  display: grid;
  gap: 4px;
  color: #344054;
  font-size: 13px;
}

.manual-order-top label:nth-child(2),
.manual-order-top label:nth-child(3) {
  grid-template-columns: 1fr 1fr;
}

.manual-order-top label:nth-child(2) span,
.manual-order-top label:nth-child(3) span {
  grid-column: 1 / -1;
}

.manual-order-dialog input {
  min-width: 0;
  height: var(--ui-control-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #344054;
  font-size: 13px;
  padding: 0 8px;
  background: #fff;
}

.manual-order-dialog select {
  min-width: 0;
  height: var(--ui-control-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #344054;
  font-size: 13px;
  padding: 0 8px;
}

.manual-order-dialog textarea {
  min-width: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #344054;
  font-size: 13px;
  background: #fff;
}

.manual-order-dialog select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #64748b 50%) calc(100% - 14px) 12px / 5px 5px no-repeat,
    linear-gradient(135deg, #64748b 50%, transparent 50%) calc(100% - 9px) 12px / 5px 5px no-repeat,
    #fff;
  padding-right: 26px;
}

.manual-select-source {
  display: none;
}

.manual-select-field {
  position: relative;
  min-width: 0;
}

.manual-select-btn {
  width: 100%;
  height: var(--ui-control-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: #344054;
  font-size: 13px;
  text-align: left;
  padding: 0 26px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.manual-select-btn:disabled,
.manual-order-date-btn:disabled {
  color: #98a2b3;
  background: #f7f8fa;
  cursor: not-allowed;
}

.manual-order-item-table input:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.manual-order-item-table input:disabled {
  background: transparent;
  opacity: 1;
}

.manual-select-btn::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  transform: translateY(-62%) rotate(45deg);
  pointer-events: none;
}

.manual-select-panel {
  position: absolute;
  left: 0;
  top: calc(100% + var(--filter-popover-gap));
  z-index: 80;
  min-width: 100%;
  width: max-content;
  max-width: 200px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0;
  background: var(--ui-popover-background);
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  box-shadow: var(--unified-filter-panel-shadow);
}




.manual-select-panel.hidden {
  display: none;
}

.manual-select-option {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 200px;
  min-height: 35px;
  max-height: 50px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6d6d72;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  text-align: left;
  padding: 10px 20px;
}

.manual-select-option::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 28px;
  border-radius: var(--ui-control-radius);
  background: transparent;
  transform: translateY(-50%);
  transition: background-color 120ms ease;
}

.manual-select-option span {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-height: 30px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 15px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.manual-select-option:hover {
  color: #fff;
  background: transparent;
}

.manual-select-option:hover::before {
  background: var(--ui-primary-hover);
}

.manual-order-date-field {
  position: relative;
}

.manual-order-date-btn {
  width: 100%;
  height: var(--ui-control-height);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: #344054;
  font-size: 13px;
  text-align: left;
  padding: 0 8px;
  position: relative;
}

.manual-order-dialog :is(input, select, textarea, .manual-select-btn, .manual-order-date-btn):focus,
.manual-order-dialog :is(input, select, textarea, .manual-select-btn, .manual-order-date-btn):focus-visible {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}

.manual-order-calendar-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 6px;
  min-width: 0;
  margin-bottom: 8px;
}

#manualOrderDateOnlyInput {
  cursor: pointer;
}

.manual-order-calendar-panel {
  z-index: 85;
}

.single-time-picker {
  position: relative;
  min-width: 0;
}

.single-time-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #6d6d72;
  background: var(--ui-control-background);
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
}

.single-time-trigger:focus,
.single-time-trigger:focus-visible,
.single-time-trigger[aria-expanded="true"] {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}

.single-time-trigger > i {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}

.single-time-trigger[aria-expanded="true"] > i {
  transform: translateY(2px) rotate(225deg);
}

.single-time-panel {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + var(--filter-popover-gap));
  right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 216px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--date-filter-radius);
  background: var(--ui-popover-background);
  box-shadow: var(--unified-filter-panel-shadow);
}

.single-time-panel.hidden {
  display: none;
}

.single-time-column {
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr);
  min-width: 0;
}

.single-time-column > strong {
  color: #6d6d72;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.single-time-options {
  max-height: 192px;
  min-height: 0;
  padding: 0 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.single-time-options button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #6d6d72;
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;
}

.single-time-options button:hover {
  color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.single-time-options button.selected {
  color: #fff;
  background: var(--ui-primary);
  box-shadow: 0 3px 8px rgb(127 86 217 / 24%);
  font-weight: 500;
}

.manual-order-dialog textarea {
  height: 66px;
  resize: none;
  padding: 6px 8px;
}

.manual-order-add {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--ui-link);
  padding: 0;
}

.manual-order-item-table {
  height: 286px;
  min-height: 286px;
  border: 1px solid #edf1f5;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: #fff;
}

.manual-order-table-scroll {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.manual-order-item-table table {
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.manual-order-item-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  background: #f8fafc;
  color: #344054;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
}

.manual-order-item-table .required-star {
  margin-left: 2px;
  color: #e1251b;
  font-weight: 700;
}

.manual-order-item-table td {
  height: 50px;
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  text-align: center;
  padding: 4px;
  color: #344054;
  font-size: 13px;
}

.manual-order-item-table tr:hover td {
  background: #fafcff;
}

.manual-order-item-table td[data-column="productName"] {
  text-align: left;
}

.manual-order-item-table td[data-column="productName"] input {
  display: block;
  width: 100%;
  margin: 2px 0;
}

.manual-order-item-table input,
.manual-order-item-table select {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  padding: 0 4px;
}

.manual-order-log-table input {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  padding: 0 4px;
}

.manual-order-item-table input:focus,
.manual-order-item-table select:focus,
.manual-order-log-table input:focus,
.manual-order-fees input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.manual-order-item-table input[type="number"],
.manual-order-log-table input[type="number"],
.manual-order-fees input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.manual-order-item-table input[type="number"]::-webkit-outer-spin-button,
.manual-order-item-table input[type="number"]::-webkit-inner-spin-button,
.manual-order-log-table input[type="number"]::-webkit-outer-spin-button,
.manual-order-log-table input[type="number"]::-webkit-inner-spin-button,
.manual-order-fees input[type="number"]::-webkit-outer-spin-button,
.manual-order-fees input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.manual-order-item-table .manual-order-no-cost-checkbox {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--ui-primary);
  cursor: pointer;
  vertical-align: middle;
}

.manual-order-item-table select {
  appearance: none;
  text-align: center;
  text-align-last: center;
}

.manual-order-item-table td:not([data-column="productName"]) input,
.manual-order-item-table td:not([data-column="productName"]) select,
.manual-order-log-table input {
  text-align: center;
}

.manual-order-item-table .manual-img {
  text-align: center;
}

.manual-order-item-table td[data-column="actions"] .link-btn + .link-btn {
  margin-left: 8px;
}

.manual-order-item-table .link-btn:disabled {
  color: #c5cbd3;
  cursor: not-allowed;
  opacity: 1;
}

.manual-order-product-text {
  display: block;
  min-height: 18px;
  overflow: hidden;
  color: #344054;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-order-product-meta {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-placeholder-row:hover td {
  background: #fff;
}

.manual-order-fees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #edf1f5;
  border-top: 0;
}

.manual-order-fees label,
.manual-order-fees div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
  border-right: 1px solid #edf1f5;
  color: #344054;
  font-size: 13px;
}

.manual-order-fees label:last-child,
.manual-order-fees div:last-child {
  border-right: 0;
}

.manual-order-fees span {
  text-align: right;
  padding-right: 10px;
}

.manual-order-fees input {
  border: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.manual-order-fees input:disabled {
  color: #98a2b3;
  opacity: 1;
  -webkit-text-fill-color: #98a2b3;
}

.manual-order-fees strong {
  color: #2b8ed8;
  font-size: 18px;
  text-align: center;
}

.manual-order-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.manual-order-bottom section {
  min-width: 0;
}

.manual-order-log-table {
  height: 143px;
  border: 1px solid #edf1f5;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.manual-order-log-table table {
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.manual-order-log-table th,
.manual-order-log-table td {
  height: 36px;
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  color: #344054;
  font-size: 13px;
  text-align: center;
  padding: 4px;
}

.manual-order-log-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  font-weight: 600;
}

.manual-order-log-table tbody tr:last-child td {
  border-bottom: 0;
}

.manual-order-log-table input {
  width: 100%;
}

.manual-order-log-table th button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ui-link);
  font: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: center;
}

.manual-order-dialog footer button {
  width: 50px;
  height: var(--ui-control-height);
  padding: 0;
  border-radius: var(--ui-control-radius);
  font-size: 13px;
}

.manual-product-picker-overlay {
  z-index: 95;
}

.manual-product-picker-dialog {
  width: min(1100px, calc(100vw - 56px));
  height: min(750px, calc(100vh - var(--workspace-top-offset) - 48px));
  grid-template-rows: 44px minmax(0, 1fr) 46px;
}

.manual-product-picker-dialog header {
  padding: 0 12px;
}

.manual-product-picker-dialog h2 {
  font-size: 16px;
}

.manual-product-picker-body {
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 10px;
  background: #f6f7f9;
}

.manual-product-picker-tip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 14px;
  border-radius: 4px;
  background: #fff;
  color: #667085;
  font-size: 13px;
  gap: 8px;
  overflow: hidden;
}

.manual-picker-tip-label {
  flex: 0 0 auto;
  color: #344054;
  font-weight: 600;
}

.manual-picker-tip-placeholder {
  color: #667085;
}

.manual-picker-selected-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 52px;
  overflow: auto;
}

.manual-picker-selected-chip {
  max-width: 180px;
  height: 22px;
  line-height: 20px;
  padding: 0 8px;
  border: 1px solid #d8e2ef;
  border-radius: 4px;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-product-picker-categories {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 4px;
  background: #fff;
  color: #344054;
  font-size: 13px;
}




.manual-picker-category-title {
  margin-bottom: 8px;
  font-weight: 600;
}

.manual-picker-category {
  display: block;
  width: 100%;
  height: 26px;
  border: 0;
  background: transparent;
  color: #667085;
  text-align: left;
}

.manual-picker-category.active,
.manual-picker-category:hover {
  color: #2b8ed8;
}

.manual-product-picker-main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  gap: 8px;
}

.manual-product-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.manual-product-picker-search {
  width: 280px;
}

.manual-product-picker-toolbar button,
.manual-product-picker-dialog footer button {
  height: var(--ui-control-height);
  min-width: 50px;
  padding: 0 12px;
  border-radius: var(--ui-control-radius);
}

.manual-product-picker-table {
  min-height: 0;
  overflow: hidden;
}

.manual-product-picker-table .table-scroll-shell {
  height: 100%;
}

.manual-product-picker-table-wrap {
  height: calc(100% - 12px);
  min-height: 0;
  overflow: hidden;
}

.manual-product-picker-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.manual-product-picker-table-wrap th .th-content {
  white-space: nowrap;
}

.manual-product-picker-table-wrap td,
.manual-product-picker-table-wrap th {
  height: 34px;
  text-align: center;
}

.manual-product-picker-table-wrap .manual-picker-text-left {
  text-align: left;
}

.manual-product-picker-table-wrap .table-cell-content {
  justify-content: center;
}

.manual-product-picker-table-wrap .manual-picker-text-left .table-cell-content {
  justify-content: flex-start;
}

.manual-product-picker-table-wrap .manual-picker-merged-cell {
  vertical-align: middle;
}

.manual-product-picker-dialog footer {
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.manual-product-picker-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 13px;
}

.manual-product-picker-pager button {
  height: 28px;
  min-width: 52px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: var(--ui-primary);
}

.manual-product-picker-pager button:hover:not(:disabled) {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}

.manual-product-picker-pager button:active:not(:disabled) {
  color: #fff;
  background: var(--ui-primary-active);
}

.combo-form-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.combo-name-field,
.combo-category-field {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #667085;
}

.combo-name-field {
  width: 420px;
  flex: 0 0 420px;
}

.combo-category-field {
  width: 300px;
  flex: 0 0 300px;
}

.combo-name-field input,
.combo-category-field input,
.combo-picker-toolbar input {
  height: var(--filter-height);
  border-radius: var(--filter-radius);
}

.combo-link-btn {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--ui-link);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.combo-dialog-table {
  min-height: 0;
  overflow: hidden;
  border: 1px solid #edf1f5;
  border-radius: 8px;
}

.combo-dialog-table .online-product-table-wrap-inner {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.combo-dialog-table-shell {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.combo-dialog-table .online-product-table {
  min-width: 760px;
}

.combo-dialog-inner-table th {
  height: 38px;
}

.combo-dialog-inner-table td {
  height: 42px;
  max-height: 42px;
}

.combo-dialog-inner-table td.online-text-left {
  text-align: left;
}

.combo-qty-input {
  width: 84px;
  height: var(--ui-control-height);
  text-align: center;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
}

.combo-qty-input:focus {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: var(--ui-inset-focus);
}

.combo-remove-component {
  border: 0;
  background: transparent;
  color: #d93026;
  cursor: pointer;
}

.combo-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.combo-picker-toolbar input {
  width: 300px;
  flex: 0 0 300px;
}

.combo-picker-selected-tip {
  color: #667085;
  white-space: nowrap;
  font-size: 13px;
}

.local-product-drawer {
  width: 620px;
  max-width: 92vw;
  height: 100%;
  background: #fff;
  box-shadow: -10px 0 28px rgba(15, 23, 42, .18);
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 56px;
}

.local-product-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 24px;
  border-bottom: 1px solid #edf1f5;
}

.local-product-drawer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 24px;
}

.local-product-drawer footer {
  border-top: 1px solid #edf1f5;
  border-bottom: 0;
}

#localProductSubmitBtn,
#localProductCancelBtn,
#localProductConfirmImport,
#localProductCancelImport,
#comboProductSaveBtn,
#comboProductCancelBtn,
#comboProductPickerConfirmBtn,
#comboProductPickerCancelBtn,
#copyPermissionsConfirm,
#copyPermissionsCancel,
#internalOrderFeeForm footer > button {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  padding-inline: 0;
}

#localProductSubmitBtn,
#localProductConfirmImport,
#comboProductSaveBtn,
#comboProductPickerConfirmBtn,
#copyPermissionsConfirm,
#internalOrderFeeForm footer > button.primary {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

#localProductSubmitBtn:hover,
#localProductConfirmImport:hover,
#comboProductSaveBtn:hover,
#comboProductPickerConfirmBtn:hover,
#copyPermissionsConfirm:hover,
#internalOrderFeeForm footer > button.primary:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-hover);
}

#localProductSubmitBtn:active,
#localProductConfirmImport:active,
#comboProductSaveBtn:active,
#comboProductPickerConfirmBtn:active,
#copyPermissionsConfirm:active,
#internalOrderFeeForm footer > button.primary:active {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}

.local-product-drawer h2 {
  margin: 0;
  font-size: 18px;
  color: #4b5563;
}

.local-product-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 22px 24px;
}

.local-image-preview {
  width: 176px;
  height: 176px;
  border: 1px solid #edf1f5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
  display: grid;
  place-items: center;
  color: #98a2b3;
  overflow: hidden;
}

.local-image-placeholder-icon {
  display: block;
  width: 24px;
  height: 24px;
  background: url("./assets/icons/add-picture.svg?v=1") center / contain no-repeat;
}

.local-image-card {
  min-width: 0;
  grid-row: span 3;
}

.local-image-upload {
  cursor: pointer;
}

.local-image-upload input[type="file"] {
  display: none;
}

.local-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.local-form-grid {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 16px 16px;
  align-items: end;
}

.local-product-drawer label {
  position: relative;
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 13px;
}

.local-product-drawer label.required > .label-text {
  position: relative;
}

.local-product-drawer label.required > .label-text::before {
  content: "*";
  color: #ea4335;
  position: absolute;
  top: calc(50% + 5px);
  right: calc(100% + 2px);
  height: 20px;
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 20px;
  transform: translateY(-50%);
}

.local-product-drawer input {
  width: 100%;
  min-width: 0;
}

.local-product-drawer input[readonly] {
  background: #f8fafc;
  color: #667085;
}

.local-product-drawer .hidden,
.local-product-drawer .local-inline-field.hidden {
  display: none !important;
}

.local-product-drawer.readonly-mode .local-image-upload {
  cursor: default;
}

.local-import-overlay {
  position: fixed;
  inset: var(--workspace-top-offset) 0 0 0;
  z-index: 35;
  background: rgba(15, 23, 42, .18);
  display: grid;
  place-items: center;
  padding: 18px;
}

.local-import-overlay.hidden {
  display: none;
}

.local-import-dialog {
  width: min(1180px, calc(100vw - 48px));
  height: min(720px, calc(100vh - var(--workspace-top-offset) - 42px));
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 58px;
  overflow: hidden;
}

.local-import-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f5;
}

.local-import-dialog footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
}

.local-import-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid #edf1f5;
  border-bottom: 0;
}

.local-import-dialog h2 {
  margin: 0;
  font-size: 17px;
  color: #344054;
}

.local-import-body {
  min-height: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.local-import-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#localProductChooseImportFile {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}
#localProductChooseImportFile:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-hover);
}

#localProductChooseImportFile:active {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}

#localProductTemplateLink {
  color: var(--ui-link);
  font-family: var(--app-font-family);
  font-size: 13px;
  text-decoration: none;
}

#localProductTemplateLink:hover {
  color: var(--ui-link);
  text-decoration: underline;
}

#localProductImportTip {
  color: var(--muted);
  font-size: 13px;
}

.local-import-preview {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.local-import-table-shell {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.local-import-table-shell > .table-wrap {
  height: 100%;
  min-height: 0;
}

.local-import-preview .table-wrap {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.local-import-preview table {
  min-width: 1180px;
}

.local-import-preview th,
.local-import-preview td {
  height: 42px;
  max-height: 42px;
  padding: 6px 8px;
  text-align: center;
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
}

.local-import-preview td.name-cell {
  text-align: left;
}

.ads-caliber-dialog {
  width: min(760px, calc(100vw - 48px));
  height: min(390px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ads-caliber-dialog .combo-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.combo-dialog.ads-caliber-dialog > header {
  flex: 0 0 60px;
  height: 60px;
  min-height: 60px;
  box-sizing: border-box;
  padding: 0 15px 0 20px;
}

.combo-dialog.ads-caliber-dialog > header h2 {
  height: 100%;
  display: flex;
  align-items: center;
  line-height: normal;
}

.combo-dialog.ads-caliber-dialog > header .icon-btn {
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  display: grid;
  place-items: center;
  align-self: center;
  padding: 0;
}

.ads-caliber-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
  padding: 18px;
}

.ads-caliber-card {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.ads-caliber-card:hover,
.ads-caliber-card:focus-visible {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  box-shadow: inset 0 0 0 1px var(--ui-primary);
  outline: none;
}

.ads-caliber-settings-overlay {
  background: rgba(15, 23, 42, .34);
}

.ads-caliber-settings-dialog {
  width: min(560px, calc(100vw - 48px));
  height: min(390px, calc(100vh - 48px));
  grid-template-rows: 46px minmax(0, 1fr) 50px;
}

.ads-caliber-settings-dialog > header {
  padding: 0 15px 0 18px;
}

.ads-caliber-settings-dialog > header h2 {
  font-size: 16px;
}

.ads-caliber-settings-body {
  min-height: 0;
  overflow: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ads-caliber-setting-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #475569;
  font-size: 13px;
}

.ads-caliber-setting-row > span {
  text-align: right;
}

.ads-caliber-setting-row select {
  width: 100%;
  height: var(--ui-control-height);
  padding: 0 28px 0 10px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: #344054;
  font: inherit;
  outline: none;
}

.ads-caliber-setting-row select:focus {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-inset-focus);
}

.ads-caliber-radio-group {
  min-height: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.ads-caliber-checkbox-group {
  min-height: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.ads-caliber-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  color: #344054;
  white-space: nowrap;
  cursor: pointer;
}

.ads-caliber-card[data-ads-caliber-card="jd_search_push"] {
  grid-column: 1;
}

.ads-caliber-radio-option input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ui-primary);
  cursor: pointer;
}

.ads-caliber-checkbox-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  color: #344054;
  white-space: nowrap;
  cursor: pointer;
}

.ads-caliber-checkbox-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ui-primary);
  cursor: pointer;
}

.ads-caliber-checkbox-option.required,
.ads-caliber-fixed-option {
  cursor: default;
}

.ads-caliber-checkbox-option.required input,
.ads-caliber-fixed-option input {
  opacity: 1;
  cursor: default;
}

.ads-caliber-settings-dialog.jd-search-radio-layout {
  height: min(370px, calc(100vh - 48px));
  grid-template-rows: 60px minmax(0, 1fr) 60px;
}

.ads-caliber-settings-dialog.jd-search-radio-layout > header,
.ads-caliber-settings-dialog.jd-search-radio-layout > footer {
  height: 60px;
  min-height: 60px;
  box-sizing: border-box;
}

.ads-caliber-settings-dialog.jd-search-radio-layout .ads-caliber-settings-body {
  padding: 25px 18px;
  gap: 0;
  overflow: hidden;
}

.ads-caliber-settings-dialog.jd-search-radio-layout .ads-caliber-setting-row {
  flex: 0 0 50px;
  height: 50px;
  min-height: 50px;
  box-sizing: border-box;
}

.ads-caliber-settings-dialog.jd-full-station-radio-layout .ads-caliber-settings-body {
  justify-content: space-between;
}

.ads-caliber-setting-row strong {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #edf1f5;
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  font-weight: 400;
}

.ads-caliber-settings-note {
  margin-top: auto;
  padding: 9px 10px;
  border: 1px solid #e5edf7;
  border-radius: 4px;
  background: #f8fbff;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.ads-caliber-loading {
  flex: 1;
  display: grid;
  place-items: center;
  color: #64748b;
}

.ads-caliber-settings-dialog > footer {
  padding: 0 18px;
}

.ads-caliber-settings-dialog > footer button {
  min-width: 60px;
  height: var(--ui-control-height);
}

.ads-caliber-settings-status {
  margin-right: auto;
  color: #16803c;
  font-size: 12px;
}

.ads-caliber-settings-status.error {
  color: #dc2626;
}

.ads-caliber-card.selected {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  box-shadow: inset 0 0 0 1px var(--ui-primary);
}

.ads-caliber-card .platform-logo {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.ads-caliber-card-label {
  color: #344054;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
}

@media (max-width: 700px) {
  .ads-caliber-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.local-product-drawer .span-2 {
  grid-column: 1 / -1;
}

.local-form-grid .product-name-field {
  align-self: end;
}

.local-inline-field {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px !important;
  align-items: center;
}

.local-inline-field .label-text {
  color: #667085;
  white-space: nowrap;
}

.local-inline-field .label-text {
  display: inline-block;
  width: 82px;
  text-align: justify;
  text-align-last: justify;
}

.local-inline-field.half-field {
  display: grid !important;
  grid-template-columns: 1fr;
  width: 300px;
  gap: 6px !important;
  justify-content: start;
  margin-top: 6px;
}

.local-inline-field.half-field .label-text {
  width: auto;
  text-align: left;
  text-align-last: auto;
}

.local-dimension-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 114px;
  gap: 20px;
  align-items: end;
  margin-top: 10px;
  margin-bottom: 10px;
}

.local-dimension-row input {
  padding: 0 8px;
}

.dimension-block {
  display: grid;
  gap: 8px;
}

.dimension-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.dimension-block .dimension-title,
.dimension-weight .label-text {
  color: #667085;
  font-size: 13px;
}

.dimension-title,
.dimension-mark {
  white-space: nowrap;
}

.dimension-mark {
  text-align: center;
  color: #667085;
}

.dimension-weight {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px !important;
}

.continue-create {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px !important;
}

.continue-create input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.drawer-actions {
  display: flex;
  gap: 8px;
}

.online-merged-product-table .online-main-cell {
  background: #fff;
  vertical-align: middle;
}

.online-product-table .online-text-left {
  text-align: left;
}

.online-product-table .online-text-left a {
  text-align: left;
}

.online-product-table td[data-column="productCode"],
.online-product-table td[data-column="spu"] {
  text-align: left;
}

.online-product-table td[data-column="skuId"] {
  color: #344054;
}

.online-copy-code {
  display: inline;
  border: 0;
  background: transparent;
  color: #344054;
  padding: 0;
  margin: 0;
  height: auto;
  min-height: 0;
  font: inherit;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
}

.online-copy-code:hover {
  color: #344054;
  text-decoration: underline;
}

.online-match-ok {
  color: #16a34a;
  font-weight: 700;
}

.online-match-bad {
  color: #d92d20;
  font-weight: 700;
}

.online-product-map-action {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-link);
  font: inherit;
  cursor: pointer;
}

.online-product-map-action:hover {
  text-decoration: underline;
}

.online-merged-product-table .online-image-cell {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.online-merged-product-table th:first-child,
.online-merged-product-table td:first-child {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
}

.online-merged-product-table th.col-image .th-content {
  padding: 0;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

.online-merged-product-table td[data-column="productCode"],
.online-merged-product-table td[data-column="spu"] {
  text-align: left;
}

.online-product-table a {
  color: var(--ui-link);
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.online-product-table .muted {
  color: #9ca3af;
}

.jd-finance-reconciliation-panel {
  overflow: hidden;
}

.jd-finance-tx-table-wrap {
  max-height: calc(100vh - 260px);
}

.finance-account-panel {
  overflow: hidden;
}

#financeAccountTransactions .report-toolbar .finance-tx-search-group {
  grid-template-columns: 235px 54px;
}

.finance-account-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 10px;
}

.finance-account-sidebar,
.finance-account-main {
  min-height: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

.finance-account-sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#financeTxAccountList {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.finance-account-main {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.finance-account-list-body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.finance-account-table-shell {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}




.finance-account-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--table-text-color);
  font-family: var(--table-font-family);
  font-size: var(--table-body-font-size);
}

.finance-account-index-col {
  width: 42px;
}

.finance-account-balance-col {
  width: 88px;
}

.finance-account-table th {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  padding: 0 5px;
  border-bottom: 1px solid var(--table-border-color);
  font-family: var(--table-font-family);
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.finance-account-table td {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
  padding: 0 5px;
  border-bottom: 1px solid var(--table-border-color);
  color: var(--table-text-color);
  font-family: var(--table-font-family);
  font-size: var(--table-body-font-size);
  font-weight: 400;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.finance-account-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-header-bg);
  color: var(--table-header-text-color);
  font-size: var(--table-header-font-size);
  font-weight: 700;
  text-align: center;
}

.finance-account-table tbody tr,
.finance-account-table tbody td {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
}

.finance-account-row {
  cursor: pointer;
}

.finance-account-table tbody .finance-account-row:hover td {
  background: var(--table-row-hover-bg);
}

.finance-account-table tbody .finance-account-row.active td {
  background: var(--table-row-selected-bg);
}

.finance-account-index {
  text-align: center;
}

.finance-account-shop {
  padding-left: 5px !important;
  text-align: left;
}

.finance-account-shop .store-info-cell {
  gap: 6px;
}

.finance-account-balance {
  text-align: right;
  padding-right: 5px !important;
  font-variant-numeric: tabular-nums;
}

.finance-account-table th.finance-account-balance {
  text-align: center;
  padding-right: 5px !important;
}

.finance-account-shop-heading {
  display: block;
  transform: translateX(-15px);
}

#financeTxTable .resizable-table tbody tr,
#financeTxTable .resizable-table tbody td {
  height: var(--table-row-height);
  max-height: var(--table-row-height);
}

#financeTxTable {
  position: relative;
}

.finance-tx-table-message {
  position: absolute;
  inset: 53px 8px 31px 0;
  display: grid;
  place-items: center;
  color: #667085;
  font-size: 13px;
  pointer-events: none;
  z-index: 4;
}

.finance-tx-amount.in {
  color: #0f8a4b;
}

.finance-tx-amount.out {
  color: #b45309;
}

.online-product-title {
  color: var(--ui-link);
  line-height: 1.35;
  max-height: 44px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.online-title-link {
  display: block;
  color: var(--ui-link);
  text-decoration: none;
}

.online-score-cell,
.online-sales-cell {
  display: grid;
  gap: 0;
  line-height: 1.18;
  justify-content: center;
  text-align: left;
}

.online-metric-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}

.online-metric-label {
  white-space: nowrap;
}

.online-metric-value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.online-empty {
  padding: 28px;
  color: #6b7280;
  text-align: center;
}

.copy-toast {
  position: fixed;
  z-index: 120;
  top: 118px;
  left: 50%;
  transform: translate(-50%, -8px);
  padding: 8px 18px;
  border-radius: 8px;
  background: rgba(17, 24, 39, .92);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.copy-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1280px) {
  .online-product-toolbar {
    flex-wrap: nowrap;
  }
  .online-product-toolbar .link-refresh {
    text-align: left;
  }
  #onlineProductMainSummary {
    margin-left: auto;
    flex: 1 1 0;
  }
}

.order-detail-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, .18);
}

.order-detail-drawer-overlay.hidden {
  display: none;
}

.order-detail-drawer {
  position: relative;
  width: calc(100% - 16px);
  max-height: 48vh;
  margin: 0 8px 8px;
  border: 1px solid #d8e5f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .18);
  overflow: hidden;
}

.order-detail-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e8eef5;
  background: #f8fbff;
}

.order-detail-drawer h2 {
  margin: 0;
  font-size: 16px;
}

.order-detail-drawer p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.order-detail-drawer-body {
  max-height: calc(48vh - 62px);
  overflow: visible;
  padding: 12px 16px 16px;
}

.order-detail-split {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) 8px minmax(300px, var(--order-detail-logistics-width, 440px));
  gap: 8px;
  align-items: start;
}

.order-detail-section {
  position: static;
  margin-bottom: 14px;
}

.order-detail-items {
  min-width: 0;
}

.order-detail-logistics {
  width: auto;
  max-width: none;
}

.order-detail-split-resizer {
  align-self: stretch;
  width: 8px;
  min-height: 88px;
  border-radius: 6px;
  cursor: col-resize;
  background: transparent;
}

.order-detail-split-resizer:hover,
body.resizing-columns .order-detail-split-resizer {
  background: #dbeafe;
}

.order-detail-section-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}

.order-detail-section h3 {
  margin: 0;
  font-size: 14px;
  color: #0f5132;
}

.order-detail-column-btn {
  height: var(--ui-control-height);
  padding: 0 8px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: var(--ui-primary);
  cursor: pointer;
  font-size: 12px;
}

.order-detail-column-btn:hover {
  color: #fff;
  background: var(--ui-primary-hover);
}

.order-detail-column-btn:active {
  color: #fff;
  background: var(--ui-primary-active);
}

.order-detail-column-panel {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 330px;
  height: auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d8e5f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  display: flex;
  flex-direction: column;
}

.order-detail-column-panel[data-order-detail-column-panel="items"] {
  right: calc(var(--order-detail-logistics-width, 440px) + 30px);
}

.order-detail-column-panel[data-order-detail-column-panel="logistics"] {
  right: 12px;
}

.order-detail-column-panel.hidden {
  display: none;
}

.order-detail-column-options {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 8px;
}





.order-detail-column-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
}

.order-detail-column-item.drag-over {
  background: #f3f4f6;
}

.order-detail-column-item.dragging {
  opacity: .55;
}

.order-detail-column-panel .column-item-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 0;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
}

.order-detail-column-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 7px 8px;
  border-top: 1px solid #e8eef5;
  background: #f8fbff;
}

.order-detail-column-footer button {
  height: var(--ui-control-height);
  padding: 0 12px;
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-control-radius);
  background: var(--ui-primary);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.order-detail-column-footer button:hover {
  background: var(--ui-primary-hover);
}
.order-detail-column-footer button:active {
  border-color: var(--ui-primary-active);
  background: var(--ui-primary-active);
}

.order-detail-table {
  max-height: 306px;
  overflow: hidden;
}

.order-detail-table-shell {
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  min-width: 0;
}

.order-detail-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.order-detail-table th {
  border: 1px solid #e5edf5;
  height: 50px;
  padding: 4px 8px;
  vertical-align: middle;
  line-height: 18px;
  word-break: break-all;
}

.order-detail-table td {
  border: 1px solid #e5edf5;
  height: 50px;
  padding: 4px 8px;
  vertical-align: middle;
  text-align: center;
  line-height: 18px;
  word-break: break-all;
}

.order-detail-table th {
  position: relative;
  background: #f4f8fb;
  text-align: center;
  white-space: nowrap;
}

.order-detail-table .table-cell-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}

.order-detail-logistics-table {
  min-width: 0;
}

.order-detail-items-table {
  width: 100%;
}

.order-detail-logistics-table {
  width: 100%;
}

td.order-detail-title-cell {
  text-align: left !important;
}

.order-detail-index-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center !important;
}

.order-detail-table th.order-detail-index-cell,
.order-detail-table td.order-detail-index-cell {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding-left: 4px;
  padding-right: 4px;
}

.order-detail-empty {
  padding: 18px;
  color: #64748b;
  text-align: center;
}

@media (max-width: 980px) {
  .order-detail-split {
    grid-template-columns: 1fr;
  }
  .order-detail-logistics {
    width: auto;
    max-width: none;
  }
  .order-detail-logistics-table {
    width: 100%;
  }
}

#ordersTable tbody tr:not(:has(td:empty:nth-child(2))) {
  cursor: default;
}

/* Shared table utility columns: keep sequence and row-selection controls identical everywhere. */
.operator-dialog input[type="checkbox"] {
  box-sizing: border-box;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 0;
  line-height: 16px;
  accent-color: var(--ui-primary);
}

#operatorPermissionsDialog input[type="checkbox"] {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px;
  line-height: 15px;
}

.operator-dialog-body .operator-select-all,
.operator-dialog-body .operator-cost-options label,
.operator-dialog-body .operator-shop-permissions label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.operator-dialog form > header > button {
  width: var(--ui-control-height);
  min-width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  line-height: 28px;
}

body.ai-assistant-active {
  height: 100vh;
  overflow: hidden;
}

body.ai-assistant-active .workspace {
  padding: 0;
  overflow: hidden;
  background: var(--app-shell-surface);
}

#aiAssistant.active,
.ai-assistant-shell {
  height: 100%;
  min-height: 0;
}

.ai-assistant-shell {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) auto auto;
  background: var(--app-shell-surface);
}

.ai-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 22px;
  border-bottom: 1px solid #dce3ec;
  background: #fff;
}

.ai-assistant-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.ai-assistant-avatar,
.ai-message-avatar,
.ai-assistant-empty-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: #1677ff;
  font-weight: 700;
  letter-spacing: 0;
}

.ai-assistant-avatar {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  font-size: 13px;
}

.ai-assistant-identity h2 {
  margin: 0 0 3px;
  color: #172033;
  font-size: 16px;
  line-height: 21px;
}

.ai-assistant-identity p {
  overflow: hidden;
  color: #7b8798;
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-assistant-readonly {
  padding: 3px 9px;
  border: 1px solid #b7dfcf;
  border-radius: 4px;
  color: #147a55;
  background: #f2fbf7;
  font-size: 12px;
  line-height: 18px;
}

.ai-assistant-messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}




.ai-assistant-conversation {
  width: min(960px, calc(100% - 40px));
  min-height: 100%;
  margin: 0 auto;
  padding: 24px 0 28px;
}

.ai-assistant-load-older {
  display: block;
  height: 28px;
  margin: 0 auto 20px;
  padding: 0 10px;
  border: 0;
  color: #617089;
  background: transparent;
  line-height: 28px;
}

.ai-assistant-load-older:hover {
  color: #1677ff;
}

.ai-assistant-initial-loading {
  padding-top: 18vh;
  color: #7b8798;
  font-size: 13px;
  text-align: center;
}

.ai-assistant-empty {
  width: min(620px, 100%);
  margin: 12vh auto 0;
  text-align: center;
}

.ai-assistant-empty-mark {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 5px 16px rgba(22, 119, 255, .18);
}

.ai-assistant-empty h3 {
  margin: 16px 0 7px;
  color: #172033;
  font-size: 19px;
  line-height: 26px;
}

.ai-assistant-empty > p {
  font-size: 13px;
  line-height: 20px;
}

.ai-assistant-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.ai-assistant-suggestions button {
  height: 38px;
  border-color: #d7e0eb;
  border-radius: 6px;
  color: #344054;
  background: #fff;
  line-height: 36px;
}

.ai-assistant-suggestions button:hover {
  border-color: var(--ui-primary);
  color: #fff;
  background: var(--ui-primary-hover);
}

.ai-assistant-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.ai-assistant-message.user {
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 12px;
}

.ai-assistant-message.user .ai-message-avatar {
  background: #16a085;
}

.ai-message-body {
  display: flex;
  align-items: flex-start;
  max-width: min(72%, 690px);
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.ai-assistant-message.user .ai-message-body {
  align-items: flex-end;
}

.ai-message-content {
  min-height: 36px;
  padding: 9px 12px;
  border: 1px solid #dce3ec;
  border-radius: 7px;
  color: #253148;
  background: #fff;
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 5px rgba(16, 24, 40, .035);
}

.ai-assistant-message.user .ai-message-content {
  border-color: #1677ff;
  color: #fff;
  background: #1677ff;
}

.ai-assistant-message.pending {
  opacity: .72;
}

.ai-message-body time {
  color: #98a2b3;
  font-size: 11px;
  line-height: 15px;
}

.ai-assistant-message.typing .ai-message-content {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 54px;
}

.ai-assistant-message.typing .ai-message-content span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8290a5;
  animation: ai-assistant-typing 1.1s infinite ease-in-out;
}

.ai-assistant-message.typing .ai-message-content span:nth-child(2) { animation-delay: .14s; }
.ai-assistant-message.typing .ai-message-content span:nth-child(3) { animation-delay: .28s; }

@keyframes ai-assistant-typing {
  0%,
70%,
100% { transform: translateY(0); opacity: .45; }
  35% { transform: translateY(-3px); opacity: 1; }
}

.ai-assistant-error {
  padding: 7px 20px;
  border-top: 1px solid #f5c7c3;
  color: #b42318;
  background: #fff4f3;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.ai-assistant-error.hidden {
  display: none;
}

.ai-assistant-composer {
  border-top: 1px solid #dce3ec;
  background: #fff;
}

.ai-assistant-composer-inner {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: min(960px, calc(100% - 40px));
  margin: 0 auto;
  padding: 14px 0 16px;
}

#aiAssistantInput {
  flex: 1 1 auto;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 11px;
  resize: none;
  border-color: #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-family: var(--app-font-family);
  font-size: 14px;
  line-height: 20px;
}

#aiAssistantInput:focus {
  outline: 0;
  border-color: var(--ui-primary);
  box-shadow: var(--ui-focus-ring);
}

#aiAssistantSendBtn {
  flex: 0 0 72px;
  width: 72px;
  height: 40px;
  padding: 0;
  border-radius: 6px;
  line-height: 38px;
}

#aiAssistantSendBtn:disabled {
  border-color: #adc6e8;
  background: #adc6e8;
  cursor: wait;
}

@media (max-width: 900px) {
  .ai-assistant-conversation,
.ai-assistant-composer-inner {
    width: calc(100% - 24px);
  }
  .ai-message-body { max-width: 80%; }
  .ai-assistant-suggestions { grid-template-columns: 1fr; }
}

body[data-permission-view="overview"] .workspace {
  padding: 16px 18px 24px;
  background: var(--home-bg);
}

@media (max-width: 1180px) {
  .sidebar {
    gap: 10px;
    padding-inline: 12px;
  }

  #nav {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
    justify-content: flex-start;
    flex: 1 1 auto;
    gap: 0;
    overflow-x: auto;
  }


  .nav-btn {
    gap: 4px;
    padding-inline: 7px;
  }

  .top-actions {
    gap: 8px;
  }

  #currentUserName {
    max-width: 72px;
  }
}

@media (max-width: 720px) {
  body[data-permission-view="overview"] .workspace {
    padding: 12px;
  }
}

/* System settings design lab */
body[data-permission-view="settings"] {
  background: var(--app-shell-accent);
}

body[data-permission-view="settings"] .workspace {
  margin-top: 0;
  padding: 0;
}

.design-system-page {
  --ds-primary: var(--ui-primary);
  --ds-primary-strong: var(--ui-primary-active);
  --ds-primary-soft: var(--ui-primary-soft);
  --ds-success: #16805d;
  --ds-success-soft: #ecfdf3;
  --ds-warning: #b65f06;
  --ds-warning-soft: #fffaeb;
  --ds-danger: #d92d20;
  --ds-danger-soft: #fff1f0;
  --ds-text: #111827;
  --ds-text-secondary: #667085;
  --ds-text-tertiary: #98a2b3;
  --ds-border: #e3e8ef;
  --ds-border-strong: #d0d7e2;
  --ds-surface: #ffffff;
  --ds-surface-muted: #f8fafc;
  --ds-control-fill: #f2f2f7;
  --ds-control-fill-active: #e8e8ed;
  --ds-control-ink: #111827;
  --ds-control-muted: #667085;
  --ds-popover-border: #dfe3e8;
  --ds-popover-divider: #e8ebf0;
  --ds-popover-hover: var(--ds-primary-soft);
  --ds-popover-shadow: 0 12px 30px rgb(15 23 42 / 16%);
  --ds-focus-ring: var(--ui-focus-ring);
  --ds-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ds-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  width: 100%;
  min-height: calc(100vh - var(--workspace-top-offset));
  padding: 32px clamp(20px, 3vw, 48px) 64px;
  color: var(--ds-text);
  background: var(--app-shell-surface);
  font-family: var(--app-font-family);
  font-variant-numeric: tabular-nums;
}

.design-system-page,
.design-system-page *,
.design-system-page *::before,
.design-system-page *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

.ds-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1560px;
  margin: 0 auto 24px;
}

.ds-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--ds-primary-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
}

.ds-page-header h1 {
  margin: 0;
  color: var(--ds-text);
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
}

.ds-page-header p {
  margin-top: 6px;
  color: var(--ds-text-secondary);
  font-size: 14px;
  line-height: 22px;
}

.ds-preview-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #b2ccff;
  border-radius: 6px;
  color: #175cd3;
  background: var(--ds-primary-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.ds-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 1560px;
  min-height: 46px;
  margin: 0 auto;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 4px 16px rgb(16 24 40 / 6%);
  backdrop-filter: blur(12px);
}


.ds-anchor-nav a {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 6px;
  color: #475467;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--ds-ease-out);
}

.ds-anchor-nav a:active {
  transform: scale(.97);
}

.ds-section {
  max-width: 1560px;
  margin: 0 auto;
  padding: 32px 0;
  border-bottom: 1px solid var(--ds-border);
  scroll-margin-top: 54px;
}

.ds-section:last-of-type {
  border-bottom: 0;
}

.ds-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.ds-section-heading > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-section-heading > div > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #b2ccff;
  border-radius: 7px;
  color: #175cd3;
  background: var(--ds-primary-soft);
  font-size: 11px;
  font-weight: 800;
}

.ds-section-heading h2 {
  margin: 0;
  color: var(--ds-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.ds-section-heading p {
  max-width: 620px;
  color: var(--ds-text-secondary);
  font-size: 13px;
  line-height: 20px;
  text-align: right;
}

.ds-foundation-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.45fr) repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.ds-demo-grid {
  display: grid;
  gap: 12px;
}

.ds-two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-demo-block {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgb(16 24 40 / 3%);
}

.ds-demo-block > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ds-demo-block > header h3 {
  margin: 0;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.ds-demo-block > header span {
  overflow: hidden;
  color: var(--ds-text-tertiary);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-type-demo {
  display: grid;
  gap: 0;
}

.ds-type-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f4;
}

.ds-type-row:last-child {
  border-bottom: 0;
}

.ds-type-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ds-text);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-type-row span {
  flex: 0 0 auto;
  color: var(--ds-text-tertiary);
  font-size: 12px;
}

.ds-type-24 strong { font-size: 24px; font-weight: 700; }
.ds-type-18 strong { font-size: 18px; font-weight: 700; }
.ds-type-16 strong { font-size: 16px; font-weight: 700; }
.ds-type-14 strong { font-size: 14px; font-weight: 500; }
.ds-type-12 strong { color: var(--ds-text-secondary); font-size: 12px; font-weight: 500; }

.ds-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ds-color-grid > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 16px 16px;
  column-gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid #edf0f4;
  border-radius: 7px;
  background: var(--ds-surface-muted);
}

.ds-color-grid i {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(16 24 40 / 8%);
  border-radius: 7px;
}

.ds-color-grid i.primary { background: var(--ds-primary); }
.ds-color-grid i.success { background: var(--ds-success); }
.ds-color-grid i.warning { background: var(--ds-warning); }
.ds-color-grid i.danger { background: var(--ds-danger); }
.ds-color-grid i.text { background: var(--ds-text); }
.ds-color-grid i.surface { background: #f4f6f9; }
.ds-color-grid strong { overflow: hidden; color: var(--ds-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ds-color-grid span { color: var(--ds-text-tertiary); font-size: 11px; }

.ds-spacing-list {
  display: grid;
  gap: 10px;
}

.ds-spacing-list > div {
  display: grid;
  grid-template-columns: 24px 100px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.ds-spacing-list span {
  color: var(--ds-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.ds-spacing-list i {
  height: 8px;
  border-radius: 2px;
  background: var(--ds-primary);
}

.ds-spacing-list em {
  color: var(--ds-text-tertiary);
  font-size: 12px;
  font-style: normal;
}

.ds-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ds-metric-card {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 6px 16px rgb(16 24 40 / 4%);
}

.ds-metric-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--ds-primary);
  content: "";
}

.ds-metric-card.success::before { background: var(--ds-success); }
.ds-metric-card.danger::before { background: var(--ds-danger); }
.ds-metric-card.warning::before { background: var(--ds-warning); }

.ds-metric-card > span {
  color: var(--ds-text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.ds-metric-card > strong {
  display: block;
  overflow: hidden;
  margin: 8px 0 10px;
  color: var(--ds-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-metric-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
}

.ds-metric-card em { font-style: normal; }
.ds-metric-card em.up { color: var(--ds-success); }
.ds-metric-card em.down { color: var(--ds-danger); }
.ds-metric-card em.neutral { color: var(--ds-text-secondary); }
.ds-metric-card small { overflow: hidden; color: var(--ds-text-tertiary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.ds-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.design-system-page .ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 72px;
  height: var(--ui-control-height);
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--ui-control-radius);
  color: #344054;
  background: var(--ds-surface);
  box-shadow: none;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 650;
  line-height: 26px;
  transition: transform 140ms var(--ds-ease-out), color 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.design-system-page .ds-button:active:not(:disabled) {
  transform: none;
}

.design-system-page .ds-button:focus-visible,
.ds-anchor-nav a:focus-visible,
.ds-pagination button:focus-visible {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: var(--ds-focus-ring);
}

.design-system-page input:focus-visible,
.design-system-page select:focus-visible {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: var(--ui-inset-focus);
}

.ds-filter-trigger:focus-visible {
  border-color: var(--ds-primary);
}

.design-system-page .ds-button.primary {
  border-color: var(--ds-primary);
  color: #fff;
  background: var(--ds-primary);
}

.design-system-page .ds-button.primary:active:not(:disabled) {
  border-color: var(--ds-primary-strong);
  background: var(--ds-primary-strong);
}

.design-system-page .ds-button.secondary {
  border-color: var(--ds-border-strong);
  color: #344054;
  background: var(--ds-surface);
}

.design-system-page .ds-button.quiet {
  border-color: transparent;
  color: #475467;
  background: transparent;
}

.design-system-page .ds-button.danger {
  border-color: #f2b8b5;
  color: var(--ds-danger);
  background: var(--ds-surface);
}

.design-system-page .ds-button.danger-solid {
  border-color: var(--ds-danger);
  color: #fff;
  background: var(--ds-danger);
}

.design-system-page .ds-button.icon-only {
  width: var(--ui-control-height);
  min-width: var(--ui-control-height);
  padding: 0;
  border-color: var(--ds-border-strong);
  font-size: 18px;
}

.design-system-page .ds-button:disabled {
  border-color: #e4e7ec;
  color: #98a2b3;
  background: #f2f4f7;
  cursor: not-allowed;
  transform: none;
}

.design-system-page .ds-button.loading i {
  width: 13px;
  height: 13px;
  border: 2px solid rgb(255 255 255 / 42%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spinner 620ms linear infinite;
}

.design-system-page .ds-button.loading:disabled {
  border-color: rgb(127 86 217 / 55%);
  color: #fff;
  background: rgb(127 86 217 / 55%);
}

@keyframes ds-spinner {
  to { transform: rotate(360deg); }
}

.ds-filter-demo {
  margin-bottom: 12px;
}

.ds-filter-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-field {
  display: grid;
  flex: 0 1 150px;
  gap: 5px;
  min-width: 130px;
}

.ds-field-wide { flex-basis: 180px; }
.ds-field-search { flex: 1 1 220px; }

.ds-field > span {
  color: var(--ds-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.design-system-page .ds-field input,
.design-system-page .ds-field select {
  width: 100%;
  height: var(--ui-control-height);
  min-width: 0;
  border-color: var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: var(--ds-text);
  background-color: var(--ds-surface);
  font-family: var(--app-font-family);
  font-size: 13px;
  line-height: 26px;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.design-system-page .ds-field input::placeholder {
  color: var(--ds-text-tertiary);
}

.ds-filter-submit {
  flex: 0 0 auto;
}

.ds-form-stack,
.ds-choice-stack,
.ds-alert-stack {
  display: grid;
  gap: 12px;
}

.ds-form-stack .ds-field {
  width: 100%;
  min-width: 0;
}

.ds-field small {
  color: var(--ds-text-tertiary);
  font-size: 12px;
  line-height: 18px;
}

.ds-field.error input {
  border-color: #f19a94;
  color: var(--ds-danger);
  background: #fffafa;
}

.ds-field.error small {
  color: var(--ds-danger);
}

.ds-check-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 28px;
}

.ds-check-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  cursor: pointer;
}

.design-system-page input[type="checkbox"],
.design-system-page input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ds-primary);
}

.ds-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: #344054;
  font-size: 13px;
  cursor: pointer;
}

.ds-switch input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

.ds-switch > span {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #b8c0cc;
  transition: background-color 160ms ease;
}

.ds-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(16 24 40 / 24%);
  content: "";
  transition: transform 180ms var(--ds-ease-out);
}

.ds-switch input:checked + span {
  background: var(--ds-primary);
}

.ds-switch input:checked + span::after {
  transform: translateX(14px);
}

.ds-switch input:focus-visible + span {
  box-shadow: var(--ds-focus-ring);
}

.ds-switch em {
  font-style: normal;
}

.ds-segmented {
  display: inline-flex;
  width: max-content;
  height: var(--ui-control-height);
  padding: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
}

.ds-segmented button {
  min-width: 58px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  color: var(--ds-primary);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  line-height: 26px;
  transition: transform 120ms var(--ds-ease-out), color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.ds-segmented button.active {
  color: #fff;
  background: var(--ds-primary);
  box-shadow: none;
}

.ds-segmented button:active {
  background: var(--ds-primary-strong);
  transform: none;
}

.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  line-height: 18px;
  white-space: nowrap;
}

.ds-tag::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ds-tag.success { border-color: #a9e6ca; color: #067647; background: var(--ds-success-soft); }
.ds-tag.processing { border-color: #b2ccff; color: #175cd3; background: var(--ds-primary-soft); }
.ds-tag.warning { border-color: #fedf89; color: #b54708; background: var(--ds-warning-soft); }
.ds-tag.danger { border-color: #f7b4ae; color: #b42318; background: var(--ds-danger-soft); }
.ds-tag.neutral { border-color: #d0d5dd; color: #475467; background: #f2f4f7; }

.ds-alert {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #b2ccff;
  border-radius: 7px;
  color: #175cd3;
  background: var(--ds-primary-soft);
  font-size: 12px;
  line-height: 18px;
}

.ds-alert strong { font-weight: 700; }
.ds-alert span { min-width: 0; color: #344054; }
.ds-alert.success { border-color: #a9e6ca; color: #067647; background: var(--ds-success-soft); }
.ds-alert.warning { border-color: #fedf89; color: #b54708; background: var(--ds-warning-soft); }
.ds-alert.danger { border-color: #f7b4ae; color: #b42318; background: var(--ds-danger-soft); }

.ds-table-demo {
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgb(16 24 40 / 3%);
}

.ds-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 9px 12px 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-table-toolbar > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ds-table-toolbar strong { color: var(--ds-text); font-size: 14px; }
.ds-table-toolbar span { color: var(--ds-text-tertiary); font-size: 12px; }
.ds-table-scroll { overflow: hidden; }
.ds-table-scroll-shell { border: 0; border-radius: 0; }

.ds-table-demo table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #475467;
  font-size: 13px;
}

.ds-table-demo th {
  padding: 7px 12px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: middle;
}

.ds-table-demo td {
  height: 48px;
  padding: 7px 12px;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  vertical-align: middle;
}

.ds-table-demo th {
  height: 40px;
  color: #344054;
  background: var(--ds-surface-muted);
  font-size: 12px;
  font-weight: 700;
}

.ds-table-demo tbody tr:last-child td { border-bottom: 0; }
.ds-table-demo th.select,
.ds-table-demo td.select { width: 46px; padding-inline: 14px 6px; text-align: center; }
.ds-table-demo th:nth-child(2) { width: 260px; }
.ds-table-demo th:nth-child(3) { width: 130px; }
.ds-table-demo th:nth-child(4),
.ds-table-demo th:nth-child(5) { width: 130px; }
.ds-table-demo th:nth-child(6) { width: 110px; }
.ds-table-demo th:nth-child(7) { width: 160px; }
.ds-table-demo .number { text-align: right; }
.ds-table-demo td.number { color: var(--ds-text); font-weight: 600; }
.ds-table-demo td.number.danger { color: var(--ds-danger); }
.ds-table-demo .status { text-align: center; }

.ds-table-demo td > strong,
.ds-table-demo td > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-table-demo td > strong {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 650;
}

.ds-table-demo td > span:not(.ds-tag) {
  margin-top: 2px;
  color: var(--ds-text-tertiary);
  font-size: 12px;
}

.ds-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 8px 12px 8px 16px;
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text-secondary);
  font-size: 12px;
}

.ds-pagination > div {
  display: flex;
  gap: 4px;
}

.ds-pagination button {
  min-width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0 8px;
  border-color: var(--ds-border-strong);
  border-radius: var(--ui-control-radius);
  color: var(--ds-primary);
  background: var(--ds-surface);
  font-size: 12px;
  line-height: 26px;
  transition: transform 120ms var(--ds-ease-out), color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.ds-pagination button:active:not(:disabled) { color: #fff; background: var(--ds-primary-strong); transform: none; }
.ds-pagination button.active { border-color: var(--ds-primary); color: #fff; background: var(--ds-primary); }
.ds-pagination button:disabled { color: #b8c0cc; background: #f5f6f8; cursor: not-allowed; }

.ds-empty-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  flex-direction: column;
  text-align: center;
}

.ds-empty-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  color: var(--ds-text-tertiary);
  background: var(--ds-surface-muted);
  font-size: 13px;
  font-weight: 700;
}

.ds-empty-demo > strong { color: var(--ds-text); font-size: 14px; }
.ds-empty-demo > span { margin: 5px 0 12px; color: var(--ds-text-tertiary); font-size: 12px; }

.ds-skeleton {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.ds-skeleton i {
  position: relative;
  display: block;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 4px;
  background: #edf0f4;
}

.ds-skeleton i::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 75%), transparent);
  content: "";
  transform: translateX(-100%);
  animation: ds-skeleton 1.2s linear infinite;
}

.ds-skeleton i:nth-child(1) { width: 42%; }
.ds-skeleton i:nth-child(2) { width: 86%; }
.ds-skeleton i:nth-child(3) { width: 68%; }
.ds-skeleton i:nth-child(4) { width: 54%; }

@keyframes ds-skeleton {
  to { transform: translateX(100%); }
}

.ds-navbar-preview {
  position: relative;
  width: 100%;
  height: 84px;
  min-height: 84px;
}

.ds-navbar-preview-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.ds-navbar-preview-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  height: 46px;
  gap: 8px;
  overflow: hidden;
}

.ds-navbar-preview-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  height: 44px;
  padding: 0 10px;
  color: #4b5563;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ds-navbar-preview-item img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.ds-navbar-preview-item.has-dropdown::after {
  content: "›";
  color: #4b5563;
  font-weight: 400;
}

.ds-navbar-preview-bottom {
  position: relative;
  z-index: 1;
  height: 38px;
  background: #edf2fa;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 94%),
    0 8px 18px rgb(29 36 48 / 7%),
    0 0 24px 6px rgb(255 255 255 / 46%);
}

.ds-apple-preview {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  grid-template-rows: 60px minmax(0, auto);
  min-height: 780px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgb(17 24 39 / 5%);
  border-radius: 18px;
  background: #fbfbfa;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%), 0 1px 3px rgb(16 24 40 / 4%);
}

.ds-apple-sidebar {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  min-height: 624px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: 24px;
  background: #fdfdfc;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 72%),
    0 12px 28px rgb(29 36 48 / 8%),
    0 0 44px 12px rgb(255 255 255 / 58%);
  color: #161617;
  font-family: var(--app-font-family);
}

.ds-apple-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  height: 78px;
  padding: 12px 18px 14px;
}

.ds-apple-tool {
  display: grid;
  place-items: center;
  width: 48px;
  height: 42px;
  border-radius: 21px;
  color: #171718;
}

.ds-apple-tool.active {
  color: #fff;
  background: #050505;
}

.ds-apple-tool > i {
  position: relative;
  display: block;
  box-sizing: border-box;
  color: inherit;
}

.ds-apple-icon-calendar {
  width: 19px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

.ds-apple-icon-calendar::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 1px;
  left: 1px;
  border-top: 2px solid currentColor;
}

.ds-apple-icon-calendar::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 5px 0 currentColor, 10px 0 currentColor, 0 5px currentColor, 5px 5px currentColor, 10px 5px currentColor;
}

.ds-apple-icon-inbox {
  width: 21px;
  height: 15px;
  margin-top: 3px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.ds-apple-icon-inbox::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 2px;
  width: 13px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  transform: skewX(-17deg);
}

.ds-apple-icon-inbox::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 7px;
  border-top: 2px solid currentColor;
}

.ds-apple-icon-list {
  width: 22px;
  height: 16px;
}

.ds-apple-icon-list::before,
.ds-apple-icon-list::after {
  content: "";
  position: absolute;
  top: 1px;
  border-radius: 999px;
  background: currentColor;
}

.ds-apple-icon-list::before {
  left: 0;
  width: 3px;
  height: 3px;
  box-shadow: 0 6px currentColor, 0 12px currentColor;
}

.ds-apple-icon-list::after {
  left: 7px;
  width: 15px;
  height: 2px;
  box-shadow: 0 6px currentColor, 0 12px currentColor;
}

.ds-apple-sidebar-content {
  padding: 0 30px 28px;
}

.ds-apple-calendar-group + .ds-apple-calendar-group {
  margin-top: 24px;
}

.ds-apple-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 4px;
  color: #6d6d72;
}

.ds-apple-group-title strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

.ds-apple-group-title > i {
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 2px solid #1f1f21;
  border-bottom: 2px solid #1f1f21;
  transform: translateY(-2px) rotate(45deg);
}

.ds-apple-calendar-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.ds-apple-calendar-row:not(:has(.ds-apple-info)) {
  grid-template-columns: 28px minmax(0, 1fr);
}

.ds-apple-calendar-check {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8ba0b8;
}

.ds-apple-calendar-check::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 6px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}

.ds-apple-calendar-check.sky { background: #38acd7; }
.ds-apple-calendar-check.blue { background: #1389f3; }
.ds-apple-calendar-check.teal { background: #20b7b5; }
.ds-apple-calendar-check.magenta { background: #d91bd7; }
.ds-apple-calendar-check.slate { background: #849ab3; }

.ds-apple-calendar-label {
  min-width: 0;
  color: #171718;
  font-size: 17px;
  font-weight: 450;
  line-height: 22px;
  letter-spacing: 0;
}

.ds-apple-calendar-label b {
  display: block;
  font: inherit;
}

.ds-apple-calendar-label small {
  display: block;
  margin-top: 1px;
  color: #88888e;
  font-size: 13px;
  line-height: 16px;
}

.ds-apple-row-with-note {
  min-height: 55px;
}

.ds-apple-info {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #ff3b3f;
  border-radius: 50%;
  color: #ff3b3f;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.ds-apple-gift-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ds-apple-gift-label > i {
  position: relative;
  width: 14px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.ds-apple-gift-label > i::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 4px;
  width: 5px;
  height: 15px;
  border-left: 1.5px solid currentColor;
}

.ds-apple-gift-label > i::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 8px;
  height: 4px;
  border: 1.5px solid currentColor;
  border-radius: 5px 5px 0 0;
}

.ds-apple-preferences {
  display: grid;
  gap: 13px;
  margin-top: 28px;
}

.ds-apple-preferences > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  color: #1a1a1b;
  font-size: 15px;
  line-height: 20px;
}

.ds-apple-switch {
  position: relative;
  flex: 0 0 auto;
  width: 49px;
  height: 28px;
  border-radius: 14px;
  background: #b1b1b2;
}

.ds-apple-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
}

.ds-apple-switch.is-on {
  background: #2dc75d;
}

.ds-apple-switch.is-on::after {
  left: 23px;
}

.ds-apple-add-calendar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 29px;
  min-height: 38px;
  color: #181819;
}

.ds-apple-add-calendar strong {
  font-size: 16px;
  font-weight: 500;
}

.ds-apple-add-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 18px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
}

.ds-apple-add-icon::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 2px;
  left: 2px;
  border-top: 1.5px solid currentColor;
}

.ds-apple-add-icon > i {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  border: 1px solid #fdfdfc;
  border-radius: 50%;
  background: #171718;
}

.ds-apple-add-icon > i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.ds-apple-add-icon > i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 1px;
  border-radius: 1px;
  background: #fff;
}

.ds-apple-add-icon > i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ds-apple-empty-stage {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding-left: 24px;
}

.ds-apple-table-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 624px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fdfdfc;
  box-shadow:
    0 12px 28px rgb(29 36 48 / 8%),
    0 0 44px 12px rgb(255 255 255 / 58%);
}

.ds-apple-table-panel::after {
  position: absolute;
  z-index: 2;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid rgb(255 255 255 / 96%);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  pointer-events: none;
  content: "";
}

.ds-apple-table-scroll-shell {
  border: 0;
  border-radius: 0;
}

.ds-apple-table-scroll {
  border: 0;
  border-radius: 0;
}

.ds-apple-empty-table {
  width: 100%;
  min-width: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #fdfdfc;
}

.ds-apple-empty-table col:nth-child(1) { width: 4%; }
.ds-apple-empty-table col:nth-child(2) { width: 6%; }
.ds-apple-empty-table col:nth-child(3) { width: 13%; }
.ds-apple-empty-table col:nth-child(4) { width: 23%; }
.ds-apple-empty-table col:nth-child(5) { width: 12%; }
.ds-apple-empty-table col:nth-child(6) { width: 10%; }
.ds-apple-empty-table col:nth-child(7) { width: 16%; }
.ds-apple-empty-table col:nth-child(8) { width: 16%; }

.ds-apple-empty-table th {
  box-sizing: border-box;
  padding: 0 14px !important;
  border: 0;
  border-right: 1px solid #e8e9e7;
  border-bottom: 1px solid #e8e9e7;
  overflow: hidden;
  color: #6d6d72;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 450;
  line-height: 22px;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.ds-apple-empty-table td {
  box-sizing: border-box;
  padding: 0 14px !important;
  border: 0;
  border-right: 1px solid #e8e9e7;
  border-bottom: 1px solid #e8e9e7;
  overflow: hidden;
  background: #fdfdfc;
  color: #6d6d72;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 450;
  line-height: 22px;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.design-system-page .ds-apple-empty-table th {
  color: #6d6d72;
  font-family: var(--app-font-family);
  font-size: 13px;
}

.design-system-page .ds-apple-empty-table td {
  background: #fdfdfc;
  color: #6d6d72;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 450;
}

.design-system-page .ds-apple-empty-table th {
  background: #f5f5f7;
  font-weight: 600;
}

.ds-apple-empty-table th {
  background: #fbfbfa;
}

.design-system-page .ds-apple-empty-table tbody tr,
.design-system-page .ds-apple-empty-table tbody td:not([rowspan]) {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

.design-system-page .ds-apple-empty-table tbody tr > td {
  transition: background-color 120ms ease;
}

.design-system-page .ds-apple-empty-table tbody tr:has(.ds-apple-table-check.is-checked) > td {
  background: #f5f5f7;
}

@media (hover: hover) and (pointer: fine) {
  .design-system-page .ds-apple-empty-table tbody tr:not(:has(.ds-apple-table-check.is-checked)):hover > td {
    background: #fbfbfa;
  }
}

.design-system-page .ds-apple-empty-table thead tr:only-child,
.design-system-page .ds-apple-empty-table thead tr:only-child > th {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

.ds-apple-empty-table .ds-col-check,
.ds-apple-empty-table .ds-col-index {
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: center;
}

.ds-apple-table-check {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #c7c9cc;
  border-radius: 3px;
  background: #fff;
  vertical-align: middle;
}

.ds-apple-table-check.is-checked {
  border-color: var(--ds-primary);
  background: var(--ds-primary);
}

.ds-apple-table-check.is-checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(42deg);
}

.ds-apple-empty-table tr > :last-child {
  border-right: 0;
}

.ds-apple-empty-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-apple-table-pagination {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 60px;
  padding: 0 12px;
  border-top: 1px solid #e8ebf0;
  background: #fdfdfc;
}

.ds-apple-pagination-summary {
  color: #6d6d72;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.ds-apple-pagination {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  width: fit-content;
  height: var(--ui-control-height);
  padding: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  box-shadow: none;
}

.ds-apple-pagination button,
.ds-apple-pagination > span {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--ds-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
}

.ds-apple-pagination button {
  cursor: pointer;
}

.ds-apple-pagination button.active {
  color: #fff;
  background: var(--ds-primary);
}

.ds-apple-pagination button:disabled {
  color: #b9b9be;
  background: transparent;
  cursor: not-allowed;
}

.ds-apple-pagination button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

.ds-apple-page-arrow i {
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.ds-apple-page-arrow.previous i {
  transform: translateX(1px) rotate(45deg);
}

.ds-apple-page-arrow.next i {
  transform: translateX(-1px) rotate(225deg);
}

@media (hover: hover) and (pointer: fine) {
  .ds-apple-pagination button:hover:not(:disabled):not(.active) {
    color: #fff;
    background: var(--ui-primary-hover);
  }
}

.ds-bottom-filter-field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid #edf0f4;
}

.ds-bottom-filter-field:first-child { padding-top: 0; }
.ds-bottom-filter-field:last-child { padding-bottom: 0; border-bottom: 0; }

.ds-filter-dropdown {
  position: relative;
  isolation: isolate;
  width: var(--ds-filter-width, 150px);
  min-width: 150px;
  max-width: 260px;
}

.ds-bottom-filter-field > span {
  color: var(--ds-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.ds-bottom-filter-field > input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--ui-control-height);
  min-width: 0;
  padding: 0 11px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: var(--ds-text);
  background: var(--ui-control-background);
  font-family: var(--app-font-family);
  font-size: 13px;
  line-height: 26px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ds-filter-trigger {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.ds-order-search-preview {
  position: relative;
  display: grid;
  grid-template-columns: 160px 55px 55px;
  align-items: center;
  width: 270px;
  max-width: 100%;
  height: var(--ui-control-height);
  overflow: hidden;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ds-order-search-preview:focus-within {
  border-color: var(--ds-primary);
  box-shadow: var(--ui-inset-focus);
}

.ds-order-search-preview::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  width: 12px;
  height: 12px;
  border: 1.5px solid #c4d7ef;
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-50%);
}

.ds-order-search-preview::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% + 5px);
  left: 20px;
  width: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: #c4d7ef;
  pointer-events: none;
  transform: rotate(45deg);
}

.ds-order-search-preview input[type="search"] {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding-left: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3c4043;
  line-height: 26px;
}

.ds-order-search-preview input[type="search"]:focus,
.ds-order-search-preview input[type="search"]:focus-visible {
  border-color: var(--line);
  outline: 0;
  box-shadow: none;
}

.ds-order-search-action {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 55px;
  height: 26px;
  background: transparent;
}

.ds-order-search-action > button {
  display: inline-grid;
  place-items: center;
  width: 55px;
  min-width: 55px;
  max-width: 55px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3c4043;
  line-height: 1;
  text-align: center;
}

.ds-order-search-action > button.primary {
  width: 55px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: var(--ds-primary);
  color: #fff;
  outline: 1px solid transparent;
  transform: none;
}

.ds-order-search-action > button.primary:active {
  background: var(--ds-primary-strong);
}

.ds-filter-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  max-height: var(--ui-control-height);
  padding: 0 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: var(--ds-control-ink);
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ds-ease-out), box-shadow 140ms ease;
}

.ds-filter-trigger > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-filter-trigger > i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ds-control-muted);
  border-bottom: 1.5px solid var(--ds-control-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--ds-ease-in-out);
}

.ds-filter-trigger:active {
  transform: none;
}

.ds-filter-trigger:focus-visible {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: var(--ui-inset-focus);
}

.ds-filter-dropdown.open {
  z-index: 30;
}

.ds-filter-dropdown.open .ds-filter-trigger {
  border-color: var(--ds-primary);
  background: var(--ui-control-background);
  color: var(--ds-control-ink);
  box-shadow: var(--ui-inset-focus);
}

.ds-filter-dropdown.open .ds-filter-trigger > i {
  transform: translateY(2px) rotate(225deg);
}

.ds-filter-menu {
  position: absolute;
  z-index: 1;
  top: var(--ds-filter-menu-top, calc(100% + 8px));
  left: 0;
  display: block;
  width: max-content;
  min-width: max(100%, var(--unified-filter-panel-min-width));
  max-width: var(--unified-filter-panel-max-width);
  padding: 6px 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  background: var(--ui-popover-background);
  box-shadow: var(--unified-filter-panel-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.985);
  transform-origin: top left;
  visibility: hidden;
  transition: opacity 120ms ease-out, transform 160ms var(--ds-ease-out), visibility 0ms linear 160ms;
}

.ds-filter-dropdown.open .ds-filter-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity 120ms ease-out, transform 160ms var(--ds-ease-out), visibility 0ms;
}

.ds-filter-dropdown-multi .ds-filter-menu {
  border-color: rgb(255 255 255 / 96%);
}

.ds-filter-menu label {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 35px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: #6d6d72;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.ds-filter-menu label > span::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 28px;
  border-radius: var(--ui-control-radius);
  background: transparent;
  transform: translateY(-50%);
  transition: background-color 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ds-filter-menu label:hover {
    color: #fff;
    background: transparent;
  }

  .ds-filter-menu label:hover > span::before {
    background: var(--ui-primary-hover);
  }
}

.ds-filter-menu label:not(:last-child) {
  border-bottom: 0;
}

.ds-filter-menu label:first-child {
  border-top: 0;
}

.ds-filter-menu label:last-child {
  padding-bottom: 0;
}

.ds-filter-menu-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 6px 6px 0;
  padding: 7px 6px 0;
  border-top: 1px solid var(--ds-popover-divider);
}

.ds-filter-menu-footer button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--ui-control-radius);
  color: var(--ds-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
}

.ds-filter-menu-footer button:last-child {
  color: #6d6d72;
}

.ds-filter-menu-footer button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .ds-filter-menu-footer button:first-child:hover {
    color: #fff;
    background: var(--ui-primary-hover);
  }

  .ds-filter-menu-footer button:last-child:hover {
    color: var(--ds-primary);
    background: var(--ds-primary-soft);
  }
}

.ds-filter-menu input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ds-filter-menu label > span {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: var(--unified-filter-option-check-gap);
  min-width: 0;
  min-height: 35px;
  max-height: 50px;
  margin: 0;
  padding: 10px var(--unified-filter-panel-edge-space);
  border-radius: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  transition: background-color 120ms ease;
}

.ds-filter-menu input:checked + span {
  color: #fff;
  background: transparent;
}

.ds-filter-menu input:checked + span::before {
  background: var(--ds-primary);
}

.ds-filter-menu input:focus-visible + span {
  outline: 1px solid var(--ds-primary);
  outline-offset: -7px;
  border-radius: var(--ui-control-radius);
}

.ds-filter-menu input:checked + span::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 10px;
  margin-top: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
}

.ds-filter-menu input:indeterminate + span::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  margin-top: 6px;
  border-radius: 999px;
  background: currentColor;
}

.ds-apple-operation-bar {
  position: relative;
  z-index: 20;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--ui-page-gap);
  min-width: 0;
  height: 44px;
  padding: var(--ui-page-gap);
}

.ds-apple-operation-item,
.ds-apple-operation-item:first-child,
.ds-apple-operation-item:last-child {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  border: 0;
}

.ds-apple-operation-date {
  width: 150px;
}

.ds-date-dropdown {
  position: relative;
  isolation: isolate;
  width: 150px;
}

.ds-date-dropdown.open {
  z-index: 30;
}

.ds-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 150px;
  height: var(--ui-control-height);
  padding: 0 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  color: #6d6d72;
  text-align: left;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ds-date-trigger:active {
  transform: none;
}

.ds-date-trigger:focus-visible {
  outline: 0;
  border-color: var(--ds-primary);
  box-shadow: var(--ui-inset-focus);
}

.ds-date-trigger-icon {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 12px;
  border: 1.5px solid #6d6d72;
  border-radius: 3px;
}

.ds-date-trigger-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  right: -1.5px;
  left: -1.5px;
  border-top: 1.5px solid #6d6d72;
}

.ds-date-trigger-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 2px;
  width: 5px;
  height: 3px;
  border-right: 1.5px solid #6d6d72;
  border-left: 1.5px solid #6d6d72;
}

.ds-date-menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: var(--ui-control-radius);
  background: var(--ui-popover-background);
  box-shadow: var(--unified-filter-panel-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.985);
  transform-origin: top left;
  visibility: hidden;
  transition: opacity 120ms ease-out, transform 160ms var(--ds-ease-out), visibility 0ms linear 160ms;
}

.ds-date-dropdown.open .ds-date-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity 120ms ease-out, transform 160ms var(--ds-ease-out), visibility 0ms;
}

.ds-date-calendar-header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 28px;
  margin-bottom: 8px;
}

.ds-date-calendar-header strong {
  color: #6d6d72;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.ds-date-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: #6d6d72;
  background: transparent;
}

.ds-date-nav i {
  width: 7px;
  height: 7px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.ds-date-nav-prev i {
  transform: translateX(1px) rotate(45deg);
}

.ds-date-nav-next i {
  transform: translateX(-1px) rotate(225deg);
}

.ds-date-weekdays,
.ds-date-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  justify-content: space-between;
}

.ds-date-weekdays {
  margin-bottom: 4px;
}

.ds-date-weekdays span {
  color: #9a9aa0;
  font-size: 11px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}

.ds-date-calendar-grid {
  row-gap: 2px;
}

.ds-date-day {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: #6d6d72;
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;
}

.ds-date-day.is-outside {
  color: #b9b9be;
}

.ds-date-day.is-today:not(.is-selected) {
  position: relative;
  color: #6d6d72;
  box-shadow: none;
}

.ds-date-day.is-today:not(.is-selected)::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-primary);
  transform: translateX(-50%);
}

.ds-date-day.is-in-range:not(.is-selected) {
  color: var(--ds-primary);
  background: var(--ds-primary-soft);
}

.ds-date-day.is-selected {
  color: #fff;
  background: var(--ds-primary);
  box-shadow: 0 3px 8px rgb(127 86 217 / 24%);
}

.ds-date-day:focus-visible,
.ds-date-nav:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .ds-date-day:hover:not(.is-selected),
.ds-date-nav:hover {
    background: var(--ds-popover-hover);
  }
}

.ds-apple-operation-search {
  width: 270px;
}

.ds-apple-operation-actions {
  width: 165px;
}

.ds-toolbar-button-group {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: 165px;
  height: var(--ui-control-height);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
}

.ds-toolbar-button-group > span {
  display: grid;
  place-items: center;
  min-width: 0;
  width: auto;
  height: 26px;
}

.ds-toolbar-button-group button {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--ds-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.ds-toolbar-button-group button:active:not(:disabled) {
  color: #fff;
  background: var(--ds-primary-strong);
}

.ds-toolbar-button-group button:disabled {
  color: #b9b9be;
  background: transparent;
  cursor: not-allowed;
}

.ds-toolbar-button-group button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .ds-toolbar-button-group button:hover:not(:disabled) {
    color: #fff;
    background: var(--ui-primary-hover);
  }
}

.ds-apple-confirm-button {
  flex: 0 0 auto;
  width: 64px;
  height: var(--ui-control-height);
  padding: 0;
  border: 1px solid var(--ds-primary);
  border-radius: var(--ui-control-radius);
  color: #fff;
  background: var(--ds-primary);
  box-shadow: none;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  transition: transform 140ms var(--ds-ease-out);
}

.ds-apple-confirm-button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

.ds-apple-confirm-button:active {
  background: var(--ds-primary-strong);
  transform: none;
}

.ds-apple-close-button {
  position: relative;
  flex: 0 0 auto;
  width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  color: #6d6d72;
  background: var(--ui-control-background);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms var(--ds-ease-out);
}

.ds-apple-close-button i,
.ds-apple-close-button i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.ds-apple-close-button i {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ds-apple-close-button i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ds-apple-close-button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

.ds-apple-close-button:active {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .ds-apple-close-button:hover {
    color: #3f3f46;
    background: #f7f7f6;
    border-color: #f7f7f6;
    box-shadow: none;
  }
}

.ds-apple-popup {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: 20px;
  color: #161617;
  background: #fdfdfc;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 72%),
    0 20px 54px rgb(29 36 48 / 18%),
    0 0 36px 8px rgb(255 255 255 / 48%);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 180ms var(--ds-ease-out), transform 180ms var(--ds-ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}

.ds-apple-popup[open] {
  display: block;
}

@starting-style {
  .ds-apple-popup[open] {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }

  .ds-apple-popup[open]::backdrop {
    opacity: 0;
  }
}

.ds-apple-popup.is-closing {
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition-duration: 140ms;
}

.ds-apple-popup::backdrop {
  background: rgb(15 23 42 / 22%);
  opacity: 1;
  transition: opacity 180ms ease-out, overlay 180ms allow-discrete, display 180ms allow-discrete;
}

.ds-apple-popup.is-closing::backdrop {
  opacity: 0;
  transition-duration: 140ms;
}

.ds-apple-popup > header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 80px;
  min-height: 80px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid #e8ebf0;
}

.ds-apple-popup > header h2 {
  overflow: hidden;
  margin: 0;
  color: var(--ds-text);
  font-family: var(--app-font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-apple-popup-body {
  padding: 8px 20px;
}

.ds-apple-popup-summary {
  margin: 0;
}

.ds-apple-popup-summary > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid #e8ebf0;
}

.ds-apple-popup-summary > div:last-child {
  border-bottom: 0;
}

.ds-apple-popup-summary dt,
.ds-apple-popup-summary dd {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.ds-apple-popup-summary dt {
  color: #8a8a8f;
  font-weight: 400;
}

.ds-apple-popup-summary dd {
  color: #6d6d72;
  font-weight: 500;
}

.ds-apple-popup > footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 60px;
  min-height: 60px;
  padding: 0 16px;
  border-top: 1px solid #e8ebf0;
}

.ds-apple-popup-cancel {
  width: 64px;
  height: var(--ui-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--ui-control-radius);
  color: var(--ds-primary);
  background: transparent;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  cursor: pointer;
}

.ds-apple-popup-cancel:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  .ds-apple-popup-cancel:hover {
    color: #fff;
    background: var(--ui-primary-hover);
  }
}

.ds-apple-popup-cancel:active {
  color: #fff;
  background: var(--ds-primary-strong);
}

.ds-apple-operation-bar .ds-date-trigger,
.ds-apple-operation-bar .ds-filter-trigger,
.ds-apple-operation-bar .ds-order-search-preview,
.ds-apple-operation-bar .ds-toolbar-button-group {
  border: 1px solid var(--ui-control-border);
  background: var(--ui-control-background);
  box-shadow: none;
}

.ds-apple-operation-bar .ds-date-trigger,
.ds-apple-operation-bar .ds-filter-trigger,
.ds-apple-operation-bar .ds-order-search-preview input[type="search"],
.ds-apple-operation-bar .ds-order-search-action > button:not(.primary) {
  color: #6d6d72;
}

.ds-apple-operation-bar .ds-order-search-preview input[type="search"]::placeholder {
  color: #6d6d72;
  opacity: 1;
}

.ds-apple-operation-bar .ds-order-search-action {
  background: transparent;
}

.ds-apple-operation-bar .ds-filter-dropdown.open .ds-filter-trigger {
  background: #fdfdfc;
  color: #6d6d72;
}

.ds-apple-operation-date-range,
.ds-date-range-dropdown,
.ds-date-range-dropdown .ds-date-trigger {
  width: 230px;
}

.ds-date-range-dropdown .ds-date-trigger {
  gap: 10px;
}

.ds-date-range-dropdown .ds-date-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-date-range-dropdown .ds-date-menu {
  right: 0;
  left: auto;
  width: 576px;
  transform-origin: top right;
}

.ds-date-range-calendars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-date-range-quick-actions {
  grid-template-columns: 74px repeat(9, minmax(0, 1fr));
  width: 100%;
  height: var(--ui-control-height);
  margin-top: 12px;
  padding: 0;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-background);
  box-shadow: none;
}

.ds-date-range-quick-label {
  color: #6d6d72;
  font-family: var(--app-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 26px;
}

.ds-date-range-quick-actions button.is-active {
  color: #fff;
  background: var(--ds-primary);
}

.ds-date-range-calendar {
  min-width: 0;
}

.ds-date-range-calendar:first-child {
  padding-right: 12px;
  border-right: 1px solid #e8ebf0;
}

.ds-date-range-calendar:last-child {
  padding-left: 12px;
}

.ds-date-range-calendar .ds-date-day.is-outside {
  visibility: hidden;
  pointer-events: none;
}

.ds-date-nav-placeholder {
  display: block;
  width: 28px;
  height: 28px;
}

.ds-apple-operation-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ds-dialog {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  color: var(--ds-text);
  background: var(--ds-surface);
  box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 220ms var(--ds-ease-out), transform 220ms var(--ds-ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}

.ds-dialog[open] {
  display: block;
}

@starting-style {
  .ds-dialog[open] {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

  .ds-dialog[open]::backdrop {
    opacity: 0;
  }
}

.ds-dialog.is-closing {
  opacity: 0;
  transform: translateY(6px) scale(.985);
  transition-duration: 140ms;
}

.ds-dialog::backdrop {
  background: rgb(15 23 42 / 38%);
  opacity: 1;
  transition: opacity 180ms ease-out, overlay 180ms allow-discrete, display 180ms allow-discrete;
}

.ds-dialog.is-closing::backdrop {
  opacity: 0;
  transition-duration: 140ms;
}

.ds-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-dialog h2 {
  margin: 0;
  color: var(--ds-text);
  font-size: 16px;
  line-height: 24px;
}

.ds-dialog header p {
  margin-top: 3px;
  color: var(--ds-text-secondary);
  font-size: 12px;
  line-height: 18px;
}

.ds-dialog header > button {
  width: var(--ui-control-height);
  min-width: var(--ui-control-height);
  height: var(--ui-control-height);
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--ds-text-secondary);
  background: transparent;
  font-size: 20px;
  line-height: 28px;
  transition: transform 120ms var(--ds-ease-out), color 120ms ease, background-color 120ms ease;
}

.ds-dialog header > button:active { transform: scale(.94); }

.ds-dialog-body {
  display: grid;
  gap: 4px;
  padding: 18px;
}

.ds-dialog-body strong { color: var(--ds-text); font-size: 14px; }
.ds-dialog-body span { color: var(--ds-text-secondary); font-size: 13px; line-height: 20px; }

.ds-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 18px;
}

.ds-toast {
  position: fixed;
  z-index: 300;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #344054;
  border-radius: 8px;
  color: #fff;
  background: #1d2939;
  box-shadow: 0 16px 40px rgb(16 24 40 / 24%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 140ms ease-out, transform 180ms var(--ds-ease-out);
}

.ds-toast.visible {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 180ms, 220ms;
}

.ds-toast span {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .ds-anchor-nav a:hover {
    color: #175cd3;
    background: var(--ds-primary-soft);
  }

  .design-system-page .ds-button.primary:hover { border-color: var(--ds-primary); background: var(--ui-primary-hover); }
  .design-system-page .ds-button.secondary:hover,
.design-system-page .ds-button.icon-only:hover { border-color: var(--ds-primary); color: #fff; background: var(--ui-primary-hover); }
  .design-system-page .ds-button.quiet:hover { color: var(--ds-primary); background: var(--ds-primary-soft); }
  .design-system-page .ds-button.danger:hover { border-color: var(--ds-danger); background: var(--ds-danger-soft); }
  .design-system-page .ds-button.danger-solid:hover { border-color: #b42318; background: #b42318; }
  .design-system-page .ds-field input:hover,
.design-system-page .ds-field select:hover { border-color: var(--ds-primary); }
  .ds-table-demo tbody tr:hover td { background: #f8fbff; }
  .ds-pagination button:hover:not(:disabled):not(.active) { border-color: var(--ds-primary); color: #fff; background: var(--ui-primary-hover); }
  .ds-order-search-action > button.primary:hover,
  .ds-apple-confirm-button:hover { background: var(--ui-primary-hover); }
  .ds-dialog header > button:hover { color: var(--ds-text); background: #f2f4f7; }
  .ds-bottom-filter-field > input:hover { border-color: var(--ds-primary); }
}

@media (max-width: 1280px) {
  .ds-foundation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-type-demo { grid-column: 1 / -1; }
  .ds-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .design-system-page { padding: 24px 16px 48px; }
  .ds-page-header,
.ds-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ds-section-heading p { text-align: left; }
  .ds-two-columns,
.ds-three-columns { grid-template-columns: 1fr; }
  .ds-apple-preview { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ds-apple-sidebar { width: min(100%, 336px); min-height: 624px; }
  .ds-apple-empty-stage { display: none; }
}

@media (max-width: 640px) {
  .ds-page-header h1 { font-size: 24px; line-height: 32px; }
  .ds-foundation-grid,
.ds-metric-grid,
.ds-type-demo { grid-column: auto; }
  .ds-type-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .ds-color-grid { grid-template-columns: 1fr; }
  .ds-filter-row { align-items: stretch; flex-direction: column; }
  .ds-field,
.ds-field-wide,
.ds-field-search { width: 100%; flex-basis: auto; }
  .ds-filter-submit { width: 100%; }
  .ds-pagination { align-items: flex-start; flex-direction: column; }
  .ds-apple-preview { padding: 10px; border-radius: 14px; }
  .ds-apple-sidebar { width: 100%; border-radius: 20px; }
  .ds-apple-sidebar-content { padding-right: 22px; padding-left: 22px; }
  .ds-toast { right: 16px; bottom: 16px; left: 16px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .design-system-page .ds-button,
.ds-anchor-nav a,
.ds-segmented button,
.ds-pagination button,
.ds-switch > span::after,
.ds-dialog,
.ds-dialog::backdrop,
.ds-toast,
.ds-filter-trigger,
.ds-filter-trigger > i,
.ds-filter-menu {
    transition-duration: 0ms;
    transform: none;
  }

  .ds-skeleton i::after {
    animation: none;
    opacity: .45;
  }
}