:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #d8dde6;
  --line-strong: #b9c2cf;
  --text: #1f2933;
  --muted: #637083;
  --accent: #0f8b8d;
  --accent-strong: #0a6d6f;
  --warn: #b95000;
  --danger: #b42318;
  --ok: #25744f;
  --soft: #eef7f7;
  --shadow: 0 10px 30px rgba(24, 39, 75, 0.08);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 36px;
}

button:hover {
  border-color: var(--accent);
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-strong);
}

button.danger {
  border-color: #f0b8b2;
  color: var(--danger);
}

button.ghost {
  border-color: transparent;
  background: transparent;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button.is-loading,
.inline-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: spin 0.75s linear infinite;
}

.inline-loading {
  min-height: 36px;
  color: var(--muted);
  white-space: nowrap;
}

tr.is-row-busy {
  background: #f8fbfb;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
  min-height: 36px;
}

textarea {
  min-height: 76px;
  resize: vertical;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

a {
  color: var(--accent-strong);
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #eef3f6;
}

.login-shell {
  width: min(980px, 100%);
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(360px, 0.95fr);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.login-brand-panel {
  display: flex;
  flex-direction: column;
  padding: 48px;
  background: #183d47;
  color: #f7fbfc;
}

.login-brand-mark {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 34px;
  margin-bottom: 42px;
}

.login-brand-mark span {
  display: block;
  width: 9px;
  border-radius: 2px;
}

.login-brand-mark span:nth-child(1) {
  height: 18px;
  background: #6fd0c7;
}

.login-brand-mark span:nth-child(2) {
  height: 28px;
  background: #f0b35b;
}

.login-brand-mark span:nth-child(3) {
  height: 23px;
  background: #ef7f68;
}

.login-kicker {
  margin: 0;
  color: #76d1c7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.login-brand-panel h1 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
}

.login-brand-copy {
  max-width: 240px;
  margin: 0;
  color: #c8d9dd;
  font-size: 14px;
  line-height: 1.7;
}

.login-brand-stats {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgba(225, 244, 243, 0.2);
}

.login-brand-stats div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.login-brand-stats strong {
  color: #fff;
  font-size: 13px;
}

.login-brand-stats span {
  color: #c8d9dd;
  font-size: 12px;
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
}

.login-panel-head {
  margin-bottom: 28px;
}

.login-panel-head .login-kicker {
  color: var(--accent-strong);
}

.login-panel-head h2 {
  margin: 8px 0 6px;
  font-size: 24px;
  line-height: 1.25;
}

.login-panel-head p {
  margin: 0;
  color: var(--muted);
}

.form-stack {
  display: grid;
  gap: 16px;
}

.login-field {
  gap: 7px;
  color: var(--text);
  font-weight: 600;
}

.login-field input {
  min-height: 42px;
  padding-inline: 12px;
  color: var(--text);
  font-weight: 400;
}

.login-field input::placeholder {
  color: #9aa6b2;
}

.login-account-input {
  position: relative;
  display: flex;
}

.login-account-input input {
  border-radius: 6px 0 0 6px;
}

.login-account-toggle {
  width: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border-color: var(--line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.login-account-toggle:hover {
  border-color: var(--line);
  background: #f4f7f8;
}

.login-account-toggle span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}

.login-account-history-menu {
  position: absolute;
  z-index: 16;
  top: calc(100% + 6px);
  right: 42px;
  left: 0;
  display: grid;
  max-height: 220px;
  overflow: auto;
  padding: 5px;
  border: 1px solid #dfcbb8;
  border-radius: 6px;
  background: #fffdf9;
  box-shadow: 0 10px 24px rgba(112, 78, 49, 0.14);
}

.login-account-history-menu[hidden] {
  display: none;
}

.login-account-history-menu button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  color: #374b59;
  background: transparent;
  text-align: left;
}

.login-account-history-menu button:hover {
  background: #fff1df;
}

.login-account-history-menu button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-account-history-menu button small,
.login-account-history-menu p {
  margin: 0;
  color: #7b8e9a;
  font-size: 12px;
  font-weight: 500;
}

.login-account-history-menu p {
  padding: 8px 9px;
}

.login-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 1px;
}

.login-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.login-check input {
  width: 15px;
  min-height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

.login-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

.shell {
  height: 100dvh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
}

.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  overflow: hidden;
}

.brand {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-border, var(--line));
  background: var(--ui-accent-soft, #eef4ff);
  color: var(--ui-accent, #2f6fed);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.brand-logo-link {
  display: inline-flex;
  flex: 0 0 auto;
}

.brand-copy {
  min-width: 0;
}

.brand-title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

.brand-sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.nav {
  min-height: 0;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
}

.nav button {
  text-align: left;
  border-color: transparent;
  background: transparent;
  width: 100%;
}

.nav button.active {
  background: var(--soft);
  border-color: #c2e4e4;
  color: var(--accent-strong);
  font-weight: 700;
}

.nav-group {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.nav-group-title {
  padding: 8px 10px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-group.active .nav-group-title {
  color: var(--accent-strong);
}

.nav-group.collapsed .nav-sub {
  display: none;
}

.nav-group.collapsed .nav-group-icon {
  transform: rotate(-90deg);
}

.nav-group-icon {
  transition: transform 0.16s ease;
}

.nav-sub {
  display: grid;
  gap: 4px;
}

.nav-subtitle {
  padding: 6px 10px 2px 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.nav button.subitem {
  padding-left: 22px;
  font-size: 13px;
}

.nav button.nested {
  padding-left: 34px;
}

.account {
  border-top: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.account-name {
  font-weight: 700;
}

.account-role {
  color: var(--muted);
  font-size: 12px;
}

.main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow-y: auto;
}

.topbar {
  min-height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 16px;
}

.topbar h2 {
  margin: 0;
  font-size: 20px;
}

.top-actions,
.toolbar,
.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.arkswift-balance {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.arkswift-balance.ok {
  border-color: #a7d7c6;
  background: #edf8f3;
  color: var(--ok);
}

.arkswift-balance.error {
  border-color: #f0b8b2;
  background: #fff4f2;
  color: var(--danger);
}

.public-change-reminder-filter {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #e7c779;
  border-radius: 6px;
  background: #fff8df;
  color: #8a5b00;
  font-weight: 700;
  white-space: nowrap;
}

.public-change-reminder-filter.active {
  border-color: #d5ad3f;
  background: #fff1c8;
  color: #765000;
}

.product-table .row-actions .change-reminder-active {
  border-color: #e7c779;
  background: #fff8df;
  color: #8a5b00;
}

.content {
  padding: 18px;
  min-width: 0;
  min-height: 0;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(34, 60, 80, 0.16);
  color: var(--accent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
  visibility: hidden;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.back-to-top:hover {
  background: var(--soft);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.back-to-top-icon {
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("/static/icons/dashboard/arrow-up.svg") center / contain no-repeat;
  mask: url("/static/icons/dashboard/arrow-up.svg") center / contain no-repeat;
}

.import-progress-overlay {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: min(440px, calc(100vw - 40px));
  pointer-events: none;
}

.import-progress-dialog {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.import-progress-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.import-progress-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.import-progress-copy strong {
  color: var(--text);
  font-size: 16px;
}

.import-progress-file {
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-progress-copy small {
  color: var(--muted);
  line-height: 1.6;
}

.leroy-dictionary-progress {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.leroy-dictionary-progress-head,
.leroy-dictionary-progress-counts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.leroy-dictionary-progress-head {
  justify-content: space-between;
}

.leroy-dictionary-progress-head strong {
  color: var(--text);
}

.leroy-dictionary-progress-head span {
  color: var(--accent-strong);
  font-weight: 700;
}

.leroy-dictionary-progress progress {
  width: 100%;
  height: 10px;
  accent-color: var(--accent);
}

.leroy-dictionary-progress-counts {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .import-progress-overlay {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}

@media (max-width: 980px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}

.section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.section-head {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.section-head h3 {
  margin: 0;
  font-size: 16px;
}

.product-head {
  display: block;
}

.product-controls {
  display: grid;
  gap: 12px;
  width: 100%;
}

.section-body {
  padding: 14px;
}

.integration-section-copy {
  margin: 5px 0 0;
  line-height: 1.5;
}

.leroy-import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.leroy-import-summary > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
}

.leroy-import-summary strong {
  font-size: 14px;
}

.leroy-import-summary span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.integration-checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.55;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.floating-table-scrollbar {
  position: fixed;
  z-index: 8;
  display: none;
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  background: var(--panel);
  box-shadow: 0 -4px 12px rgba(24, 39, 54, 0.14);
  scrollbar-color: var(--line-strong) var(--soft);
  scrollbar-width: auto;
}

.floating-table-scrollbar.is-visible {
  display: block;
}

.floating-table-scrollbar-spacer {
  height: 1px;
}

.floating-table-scrollbar.is-visible + .back-to-top {
  bottom: 34px;
}


.platform-api-head > div {
  display: grid;
  gap: 5px;
}

.platform-api-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
}

.platform-account-list {
  display: grid;
}

.platform-account-item {
  min-width: 0;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.platform-account-item:last-child {
  border-bottom: 0;
}

.platform-account-item.is-inactive {
  background: var(--soft);
}

.platform-account-item-head {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.platform-account-identity {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.platform-account-identity .order-platform-mark {
  width: 36px;
  height: 36px;
}

.platform-account-identity > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-account-identity strong,
.platform-account-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-account-identity strong {
  color: var(--text);
  font-size: 15px;
}

.platform-account-identity span {
  color: var(--muted);
  font-size: 12px;
}

.platform-account-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.platform-account-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.platform-account-badge.is-active,
.platform-account-badge.is-success {
  border-color: #a8d7c1;
  background: #edf8f3;
  color: var(--ok);
}

.platform-account-badge.is-error {
  border-color: #efbbb4;
  background: #fff3f1;
  color: var(--danger);
}

.platform-account-badge.is-pending {
  border-color: #e8c98b;
  background: #fff8e8;
  color: var(--warn);
}

.platform-account-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.platform-account-actions button {
  min-height: 32px;
  padding: 5px 10px;
  white-space: nowrap;
}

.platform-account-details {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 0.65fr) minmax(90px, 0.45fr) minmax(170px, 0.9fr);
  gap: 10px 18px;
  margin: 14px 0 0 46px;
}

.platform-account-details > div {
  min-width: 0;
}

.platform-account-details dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.platform-account-details dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-account-health {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: 12px 0 0 46px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.platform-account-health > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-account-health time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.platform-account-health.is-success > span { color: var(--ok); }
.platform-account-health.is-error > span { color: var(--danger); }
.platform-account-health.is-pending > span { color: var(--warn); }

:root[data-theme="dark"] .platform-account-badge.is-active,
:root[data-theme="dark"] .platform-account-badge.is-success {
  border-color: #3c6f58;
  background: #203d32;
  color: #9ddcbb;
}

:root[data-theme="dark"] .platform-account-badge.is-error {
  border-color: #784b47;
  background: #472a29;
  color: #f3aaa3;
}

:root[data-theme="dark"] .platform-account-badge.is-pending {
  border-color: #715f3c;
  background: #413722;
  color: #e8c881;
}

.platform-account-empty {
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
}

.platform-account-empty strong {
  color: var(--text);
}

@media (max-width: 900px) {
  .platform-account-item-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .platform-account-badges {
    grid-column: 1;
  }

  .platform-account-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .platform-account-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .platform-api-head {
    align-items: stretch;
  }

  .platform-api-head > button {
    width: 100%;
  }

  .platform-account-item {
    padding: 14px 12px;
  }

  .platform-account-item-head {
    grid-template-columns: 1fr;
  }

  .platform-account-badges,
  .platform-account-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .platform-account-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .platform-account-actions button {
    min-width: 0;
    padding-inline: 7px;
  }

  .platform-account-details {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .platform-account-health {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-left: 0;
  }

  .platform-account-health > span {
    white-space: normal;
  }
}

.store-offers-toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
}

.store-offers-toolbar > label:not(.checkbox-line) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 38px;
  white-space: nowrap;
}

.store-offers-toolbar > label:first-child {
  flex: 0 1 360px;
  min-width: 240px;
}

.store-offers-toolbar > label:first-child select {
  flex: 1 1 auto;
  min-width: 0;
}

.store-offers-toolbar > label:not(.checkbox-line) + label:not(.checkbox-line) select {
  width: 112px;
}

.store-offers-toolbar > .store-offer-identifier-search {
  flex: 0 1 280px;
  min-width: 210px;
}

.store-offers-toolbar > .store-offer-identifier-search input {
  min-width: 0;
  width: 100%;
}

.store-offers-toolbar .checkbox-line {
  width: auto;
  min-height: 38px;
  margin: 0 2px;
  white-space: nowrap;
}

.store-offer-sync-note {
  flex: 1 1 100%;
  order: 1;
  min-width: 0;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}

.store-offers-table th:nth-child(1) { min-width: 160px; }
.store-offers-table th:nth-child(2) { min-width: 280px; }
.store-offers-table th:nth-child(3) { min-width: 120px; }
.store-offers-table th:nth-child(4) { min-width: 80px; }
.store-offers-table th:nth-child(5),
.store-offers-table th:nth-child(7) { min-width: 170px; }
.store-offers-table th:nth-child(6) { min-width: 150px; }
.store-offers-table th:nth-child(8) { min-width: 130px; }
.store-offers-table th:nth-child(9) { min-width: 76px; }
.store-offers-table th:nth-child(10) { min-width: 280px; }

.repricing-target-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 260px;
}

.repricing-target-controls > label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.repricing-target-controls input[type="number"] {
  width: 94px;
  min-width: 94px;
  min-height: 30px;
  padding: 4px 7px;
}

.repricing-target-controls .checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
}

.repricing-target-controls button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.store-offer-price {
  font-weight: 700;
  white-space: nowrap;
}

.store-offer-price-breakdown {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.store-offer-price-difference {
  font-weight: 700;
  white-space: nowrap;
}

.store-offer-price-difference.is-higher { color: #c2543d; }
.store-offer-price-difference.is-lower { color: #18794e; }

.store-offer-profit {
  display: block;
  font-weight: 700;
}

.store-offer-profit.is-positive { color: #18794e; }
.store-offer-profit.is-negative { color: #c2543d; }

.store-offers-pagination {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.shipping-formula-list {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--line);
}

.shipping-formula-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.8fr) minmax(190px, 0.7fr);
  align-items: start;
  gap: 18px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.shipping-formula-info {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shipping-formula-info > strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.shipping-formula-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 12px;
}

.shipping-formula-billing {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shipping-formula-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  min-width: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.shipping-formula-segment span {
  color: var(--muted);
}

.shipping-formula-segment strong {
  color: var(--text);
  font-family: var(--mono-font);
  font-weight: 600;
}

.shipping-formula-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.shipping-dimension-limits {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
}

.shipping-dimension-limits > strong {
  color: var(--text);
}

.shipping-dimension-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
}

@media (max-width: 980px) {
  .shipping-formula-row {
    grid-template-columns: minmax(210px, 0.8fr) minmax(280px, 1.2fr);
  }

  .shipping-formula-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .shipping-dimension-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 640px) {
  .shipping-formula-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .shipping-formula-actions {
    grid-column: auto;
  }

  .shipping-dimension-grid {
    grid-template-columns: 1fr;
  }
}

.product-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.product-empty-state {
  display: grid;
  min-height: 280px;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.product-empty-state > div,
.product-empty-detail {
  display: grid;
  gap: 7px;
}

.product-empty-state strong,
.product-empty-detail strong {
  color: var(--text);
  font-size: 16px;
}

.product-empty-state span {
  max-width: 400px;
  line-height: 1.6;
}

.product-empty-detail {
  padding: 12px 0;
  color: var(--muted);
  line-height: 1.6;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

.product-table {
  min-width: 1490px;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.product-table th,
.product-table td {
  padding: 8px 7px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product-table .select-column {
  width: 48px;
  text-align: center;
}

.product-table .image-column {
  width: 68px;
}

.product-table .sku-column {
  width: 140px;
}

.product-table .title-column {
  width: 190px;
}

.product-table .category-column {
  width: 100px;
}

.product-table .group-column {
  width: 110px;
}

.product-table .status-column {
  width: 100px;
}

.product-table .price-column {
  width: 100px;
}

.product-table .cost-column {
  width: 124px;
}

.product-table .operation-note-column,
.product-table .binding-note-column {
  width: 270px;
}

.product-table .link-column {
  width: 78px;
}

.product-table .attrs-column {
  width: 31%;
}

.product-table .actions-column {
  width: 170px;
}

.product-table .link-column,
.product-table .price-column,
.product-table .cost-column,
.product-table .status-column {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.product-table .sku-column {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.product-table .title-column {
  line-height: 1.45;
}

.product-table .row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.product-table .row-actions button {
  width: 100%;
  min-height: 28px;
  padding: 5px 7px;
  font-size: 12px;
  white-space: nowrap;
}

.product-table .tooltip-wrap {
  display: block;
  min-width: 0;
}

.product-table .tooltip-wrap > button {
  width: 100%;
}

@media (max-width: 2100px) and (min-width: 981px) {
  .product-workspace .product-table-wrap {
    overflow: visible;
  }

  .product-workspace .product-table {
    display: block;
    min-width: 0;
  }

  .product-workspace .product-table thead {
    display: none;
  }

  .product-workspace .product-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .product-workspace .product-table tr {
    position: relative;
    display: grid;
    gap: 7px;
    width: 100% !important;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .product-workspace .product-table tr.selected {
    border-color: #a8d8d8;
    background: var(--soft);
  }

  .product-workspace .product-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100% !important;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  .product-workspace .product-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .product-workspace .product-table tr:hover td,
  .product-workspace .product-table tr.selected td {
    background: transparent;
  }

  .product-workspace .product-table .select-column {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    justify-content: flex-end;
    width: auto !important;
  }

  .product-workspace .product-table .select-column::before,
  .product-workspace .product-table .image-column::before {
    display: none;
  }

  .product-workspace .product-table .image-column {
    display: block;
    padding-right: 42px;
  }

  .product-workspace .product-table .sku-column {
    padding-right: 42px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .product-workspace .product-table .title-column {
    font-weight: 700;
  }

  .product-workspace .product-table .operation-note-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .product-workspace .product-table .row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-workspace .product-table .tooltip-wrap {
    position: static;
  }

  .product-workspace .product-table .shipping-tooltip {
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    width: auto;
    max-width: none;
  }
}

@media (max-width: 1300px) and (min-width: 981px) {
  .product-workspace .search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-workspace .search-grid > input {
    grid-column: 1 / -1;
  }

  .product-workspace .product-table tbody {
    grid-template-columns: 1fr;
  }
}

.sku-stack {
  display: grid;
  gap: 3px;
}

.operation-note-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.operation-note-control textarea {
  min-height: 40px;
  max-height: 84px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
}

.operation-note-control button {
  min-height: 32px;
  padding: 6px 8px;
}

.attr-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.attr-chip {
  max-width: min(100%, 260px);
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.attr-chip span,
.attr-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attr-chip span {
  max-width: 92px;
  font-weight: 400;
}

.attr-chip strong {
  max-width: 160px;
  color: var(--text);
}

.attr-more {
  color: var(--muted);
  font-size: 12px;
}

td.wrap-cell {
  min-width: 260px;
  white-space: normal;
  line-height: 1.5;
}

th {
  background: #f9fafb;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

tr:hover td {
  background: #fbfefe;
}

tr.selected td {
  background: var(--soft);
}

.thumb {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #f1f3f5;
}

.empty-thumb {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px dashed var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}

.status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f3f5;
  color: #475467;
  font-size: 12px;
}

.status.ok {
  background: #eaf7ef;
  color: var(--ok);
}

.status.warn {
  background: #fff4e8;
  color: var(--warn);
}

.muted {
  color: var(--muted);
}

.tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.shipping-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: 420px;
  max-width: min(420px, calc(100vw - 48px));
  max-height: min(360px, calc(100vh - 24px));
  display: none;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px;
  white-space: normal;
  overflow: auto;
  overscroll-behavior: contain;
}

.tooltip-wrap:hover .shipping-tooltip,
.tooltip-wrap:focus-within .shipping-tooltip {
  display: block;
}

.tooltip-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.tooltip-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px 56px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.tooltip-row:first-of-type {
  border-top: 0;
}

.tooltip-country {
  font-weight: 700;
}

.tooltip-route {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip-price {
  color: var(--accent-strong);
  font-weight: 700;
  text-align: right;
}

.tooltip-weight {
  color: var(--muted);
  text-align: right;
}

.mono {
  font-family: Consolas, "SFMono-Regular", monospace;
}

.search-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 180px) minmax(160px, 190px);
  gap: 10px;
  align-items: center;
}

.product-workspace .search-grid {
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(100px, 140px));
}

.search-grid > input,
.search-grid > select {
  min-height: 38px;
}

.search-grid .toolbar {
  grid-column: 1 / -1;
  min-height: 38px;
  justify-content: flex-start;
  padding-top: 2px;
}

.search-grid .toolbar button {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}

.profit-rate-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.profit-rate-filter span {
  color: var(--muted);
  font-size: 13px;
}

.selection-toolbar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.selection-control {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.selection-summary {
  color: var(--muted);
}

.select-column {
  width: 56px;
  text-align: center;
}

.row-select {
  width: 16px;
  height: 16px;
  margin: 0;
}

.pagination-bar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.pagination-summary {
  color: var(--muted);
  min-width: 160px;
}

.pagination-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pagination-actions button,
.page-jump button {
  padding-inline: 10px;
}

.page-size-control {
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.page-size-control select {
  width: 92px;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  white-space: nowrap;
}

.page-jump input {
  width: 82px;
}

.detail {
  position: sticky;
  top: 82px;
}

@media (min-width: 981px) {
  .product-workspace .detail {
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100dvh - 98px);
    overflow: hidden;
  }

  .product-workspace .detail .section-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.detail-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: #f1f3f5;
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.detail-gallery a {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #f1f3f5;
}

.detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-field-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.detail-field-row {
  display: grid;
  grid-template-columns: minmax(76px, 34%) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 13px;
}

.detail-field-row span {
  color: var(--muted);
}

.detail-field-row strong {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.candidate-list {
  display: grid;
  gap: 10px;
}

.candidate {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.candidate-title {
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
}

.candidate-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.platform-account-form {
  display: grid;
  gap: 20px;
}

.platform-account-section {
  min-width: 0;
}

.platform-account-form [hidden] {
  display: none !important;
}

.platform-account-section + .platform-account-section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.platform-account-section-head {
  margin: 0 0 12px;
}

.platform-account-section-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.form-grid-span-2 {
  grid-column: 1 / -1;
}

.platform-listing-intro {
  margin-bottom: 14px;
}

.platform-listing-layout {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.platform-listing-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}

.platform-listing-panel > h3,
.platform-listing-create > form,
.platform-listing-empty,
.platform-listing-fields,
.platform-listing-shared {
  margin: 0;
  padding: 14px;
}

.platform-listing-create > h3,
.platform-listing-drafts h4 {
  font-size: 15px;
}

.platform-listing-drafts {
  border-top: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 8px;
  max-height: 540px;
  overflow: auto;
}

.platform-listing-drafts h4 {
  margin: 0 0 2px;
}

.platform-listing-draft {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  padding: 9px;
  border: 1px solid var(--line);
  background: transparent;
}

.platform-listing-draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.platform-listing-copy {
  padding-inline: 9px;
}

.platform-listing-draft.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.platform-listing-draft strong,
.platform-listing-draft span:not(.status),
.platform-listing-draft small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-listing-draft small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.platform-listing-editor-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.platform-listing-editor-head h3 {
  margin: 6px 0 2px;
  font-size: 16px;
}

.platform-listing-editor-head p {
  margin: 0;
}

.platform-listing-shared {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.platform-listing-shared strong {
  color: var(--text);
}

.platform-listing-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.platform-listing-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.platform-listing-field-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-listing-field > span {
  font-weight: 600;
}

.platform-listing-field small {
  color: var(--muted);
  font-size: 12px;
}

.platform-listing-source {
  color: var(--muted);
  font-size: 11px;
}

.platform-listing-category-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.platform-listing-empty {
  color: var(--muted);
}

.platform-listing-empty h3 {
  color: var(--text);
  font-size: 16px;
}

.platform-listing-mapping {
  margin-top: 14px;
}

.platform-listing-mapping-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.platform-listing-mapping-list span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  font-size: 12px;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.stock-price-tier-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.stock-price-tier-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stock-price-tier-heading p {
  margin: 4px 0 0;
}

.stock-price-tier-rows {
  display: grid;
  gap: 8px;
}

.stock-price-tier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 34px;
  grid-template-areas:
    "minimum maximum multiplier remove"
    ". . profit .";
  align-items: end;
  column-gap: 10px;
  row-gap: 4px;
}

.stock-price-tier-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.stock-price-tier-min-field { grid-area: minimum; }
.stock-price-tier-max-field { grid-area: maximum; }
.stock-price-tier-multiplier-field { grid-area: multiplier; }
.stock-price-tier-row .tier-remove-button { grid-area: remove; }
.stock-price-tier-row .stock-price-profit-rate { grid-area: profit; }

.stock-price-profit-rate {
  color: var(--accent, #18794e);
  font-size: 12px;
}

.tier-remove-button {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.pricing-section,
.ld-sku-section,
.sale-country-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.pricing-head,
.ld-sku-head,
.sale-country-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pricing-head div,
.ld-sku-head div,
.sale-country-head div {
  display: grid;
  gap: 3px;
}

.pricing-head span,
.ld-sku-head span,
.sale-country-head span {
  color: var(--text);
  font-weight: 700;
}

.pricing-head small,
.ld-sku-head small,
.sale-country-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.pricing-summary {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-weight: 700;
  text-align: right;
}

.sale-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.sale-country-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sale-country-shortcut,
.sale-country-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.sale-country-shortcut {
  border-color: #b9dedd;
  background: #f3fbfa;
}

.sale-country-shortcut input,
.sale-country-option input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.sale-country-shortcut span,
.sale-country-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-country-shortcut strong,
.sale-country-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.sale-country-shortcut small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.sale-country-list-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.country-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  vertical-align: middle;
}

.detail-action-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.detail-action-line button {
  flex: 0 0 auto;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 7px;
  border-radius: 5px;
  background: #ecfdf3;
  color: #067647;
  font-size: 12px;
  line-height: 1.35;
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 160px 150px;
  gap: 10px;
}

.cost-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cost-item-head span {
  color: var(--text);
  font-weight: 700;
}

.cost-item-list,
.currency-list {
  display: grid;
  gap: 8px;
}

.cost-item-row,
.currency-row {
  display: grid;
  grid-template-columns: 170px minmax(160px, 1fr) 120px 150px auto;
  gap: 10px;
  align-items: end;
}

.currency-row {
  grid-template-columns: 140px minmax(160px, 1fr) 170px auto;
}

.category-map-wrap {
  overflow-x: auto;
}

.category-map-table {
  min-width: 760px;
}

.category-map-table th,
.category-map-table td {
  min-width: 180px;
  vertical-align: top;
}

.category-map-table .category-map-base {
  min-width: 220px;
}

.category-map-column-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.category-map-column-head input,
.category-map-table select,
.category-map-table td input {
  min-width: 0;
  width: 100%;
}

.category-map-column-head button,
.category-map-table .actions-column button {
  min-height: 34px;
  padding: 6px 8px;
}

.leroy-category-filters {
  margin-top: 14px;
}

.leroy-category-filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.leroy-category-filters input {
  width: min(360px, 100%);
}

.leroy-category-table-wrap {
  overflow-x: auto;
}

.leroy-category-table {
  min-width: 980px;
}

.leroy-category-table th,
.leroy-category-table td {
  vertical-align: middle;
}

.leroy-category-table th:nth-child(1),
.leroy-category-table td:nth-child(1),
.leroy-category-table th:nth-child(3),
.leroy-category-table td:nth-child(3) {
  min-width: 160px;
}

.leroy-category-table th:nth-child(2),
.leroy-category-table td:nth-child(2) {
  min-width: 240px;
}

.leroy-category-table th:nth-child(5),
.leroy-category-table td:nth-child(5) {
  min-width: 220px;
}

.leroy-category-table select {
  width: 100%;
  min-width: 0;
}

.leroy-category-pagination {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.cost-item-row button,
.currency-row button {
  min-height: 36px;
}

.ld-sku-head button {
  flex: 0 0 auto;
}

.ld-sku-list {
  display: grid;
  gap: 8px;
}

.ld-sku-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px auto;
  gap: 10px;
  align-items: end;
}

.ld-sku-row button {
  min-height: 36px;
}

.ld-sku-empty {
  padding: 4px 0;
}

.image-slot-section {
  display: grid;
  gap: 10px;
}

.image-slot-head {
  display: grid;
  gap: 3px;
}

.image-slot-head span {
  color: var(--text);
  font-weight: 700;
}

.image-slot-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.image-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

.image-slot {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.image-slot-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.image-slot-title span {
  color: var(--text);
  font-weight: 700;
}

.image-slot-title small {
  color: var(--muted);
  font-size: 11px;
}

.image-slot-box {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 1px dashed #b8c4d4;
  border-radius: 8px;
  background: #f7fafc;
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
}

.image-slot.has-image .image-slot-box {
  border-style: solid;
  background: #fff;
}

.image-slot-box input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.image-slot-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-slot-empty {
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}

.image-slot-url {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.image-slot-remove {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.image-slot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.image-slot-actions button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.image-editor-backdrop {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background: rgba(26, 35, 42, 0.48);
}

.image-editor-dialog {
  display: grid;
  width: min(1120px, 100%);
  max-height: calc(100dvh - 36px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(23, 37, 50, 0.3);
}

.image-editor-head,
.image-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.image-editor-head {
  border-bottom: 1px solid var(--line);
}

.image-editor-head h3 {
  margin: 0;
  font-size: 17px;
}

.image-editor-head p,
.image-editor-help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.image-editor-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 260px;
  overflow: hidden;
}

.image-editor-stage {
  min-width: 0;
  min-height: 430px;
  padding: 16px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #edf2f1;
}

.image-editor-stage > img {
  display: block;
  max-width: 100%;
}

.image-editor-controls {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.image-editor-controls > label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.image-editor-controls input,
.image-editor-controls select {
  width: 100%;
}

.image-editor-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-editor-size-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.image-editor-control-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-editor-control-row button,
.image-editor-controls > button {
  min-height: 34px;
}

.image-editor-white-background {
  border-color: #8bc7bd;
  background: #edf9f5;
  color: #0f7069;
  font-weight: 700;
}

.image-editor-white-background:hover:not(:disabled) {
  border-color: #16988f;
  background: #dff4ee;
}

.image-editor-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

:root[data-theme="dark"] .image-editor-dialog {
  border-color: #43515d;
  background: #202c33;
}

:root[data-theme="dark"] .image-editor-head,
:root[data-theme="dark"] .image-editor-foot,
:root[data-theme="dark"] .image-editor-stage {
  border-color: #43515d;
}

:root[data-theme="dark"] .image-editor-stage {
  background: #182228;
}

:root[data-theme="dark"] .image-editor-white-background {
  border-color: #3c8c83;
  background: #213d3a;
  color: #a7e1d9;
}

@media (max-width: 760px) {
  .image-editor-backdrop {
    padding: 0;
  }

  .image-editor-dialog {
    max-height: 100dvh;
    border-radius: 0;
  }

  .image-editor-body {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .image-editor-stage {
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .image-editor-controls {
    overflow: visible;
  }
}

.sku-binding-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.sku-binding-modal {
  width: min(920px, 100%);
}

.sku-binding-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sku-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.sku-search-results {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  max-height: 320px;
}

.sku-search-results table {
  min-width: 680px;
}

.sku-search-results tr.selected {
  background: #eef8f6;
}

.selected-company-product {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafdfc;
}

.library-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #b9dcdc;
  border-radius: 999px;
  background: #eef8f6;
  color: #145c5e;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.group-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid #b9d8c2;
  border-radius: 999px;
  background: #edf8ef;
  color: #176b46;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-management-list {
  display: grid;
  gap: 8px;
}

.group-management-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.sku-filter-row {
  border-top: 1px solid var(--line);
  padding-top: 0;
}

.sku-filter-row label {
  max-width: 320px;
}

.sku-binding-order-sort {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.sku-binding-order-sort:hover,
.sku-binding-order-sort[aria-pressed="true"] {
  color: var(--primary);
}

.sku-binding-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
}

.sku-binding-filter-row label {
  flex: 1 1 280px;
  max-width: 400px;
}

.permission-panel {
  display: grid;
  gap: 10px;
}

.permission-panel-title {
  color: var(--text);
  font-weight: 700;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 12px;
}

.permission-check {
  min-height: 32px;
  align-content: center;
}

.platform-data-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.platform-data-head h3 {
  margin-bottom: 4px;
}

.platform-store-filter {
  width: min(360px, 100%);
}

.platform-date-filter {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.platform-range-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.platform-range-buttons button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.platform-range-buttons button.active {
  border-color: #c2e4e4;
  background: var(--soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.platform-date-filter label {
  width: 150px;
}

.platform-date-filter button {
  min-height: 36px;
}

.platform-head-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.api-category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.api-category-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.api-category-tabs button.active {
  background: var(--soft);
  border-color: #c2e4e4;
  color: var(--accent-strong);
  font-weight: 700;
}

.api-category-tabs span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.api-category-panel .table-wrap {
  border-top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.main:has(.order-workbench-content) {
  overflow: hidden;
}

.order-workbench-content {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
}

.order-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 244px) minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.order-platform-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.order-platform-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
}

.order-platform-sidebar-head strong {
  color: var(--text);
  font-size: 15px;
}

.order-platform-sidebar-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.order-platform-search {
  display: block;
  padding: 0 12px 12px;
}

.order-platform-search input {
  width: 100%;
}

.order-platform-list {
  min-height: 0;
  overflow: auto;
  padding: 4px 8px 10px;
}

.order-platform-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 56px;
  gap: 10px;
  padding: 9px 8px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

.order-platform-item:hover {
  background: #f2f7f8;
}

.order-platform-item.active {
  border-color: #b9dddd;
  background: var(--soft);
  color: var(--accent-strong);
}

.order-platform-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  background: #e7f3f2;
  color: var(--accent);
}

.order-platform-mark.has-logo {
  overflow: hidden;
  padding: 2px;
  border: 1px solid #e4d4c1;
  background: #fffdf8;
}

.order-platform-mark::before {
  width: 17px;
  height: 17px;
  background: currentColor;
  content: "";
  -webkit-mask: url("/static/icons/dashboard/store.svg") center / contain no-repeat;
  mask: url("/static/icons/dashboard/store.svg") center / contain no-repeat;
}

.order-platform-mark.has-logo::before {
  content: none;
}

.order-platform-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-platform-mark.all {
  background: #eef2fb;
  color: #4469ae;
}

.order-platform-mark.all::before {
  -webkit-mask-image: url("/static/icons/dashboard/globe.svg");
  mask-image: url("/static/icons/dashboard/globe.svg");
}

.order-platform-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.order-platform-copy strong,
.order-platform-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-platform-copy strong {
  color: inherit;
  font-size: 13px;
}

.order-platform-copy small,
.order-platform-empty {
  color: var(--muted);
  font-size: 12px;
}

.order-platform-empty {
  padding: 18px 8px;
  text-align: center;
}

.order-workbench-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.order-workbench-head,
.order-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
}

.order-workbench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  border-bottom: 1px solid var(--line);
}

.order-workbench-date-row {
  grid-column: 1 / -1;
  min-width: 0;
}

.order-workbench-title {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 8px;
}

.order-date-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.order-date-filters label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.order-date-filters input {
  width: 118px;
  min-width: 0;
  padding: 5px 6px;
  font-size: 12px;
}

.order-date-filters select {
  width: 180px;
  min-width: 0;
  padding: 5px 6px;
  font-size: 12px;
}

.order-date-filters button {
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.order-workbench-title > span {
  color: var(--muted);
  font-size: 13px;
}

.order-workbench-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-workbench-title small,
.order-status-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.order-workbench-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.arkswift-purchase-store-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.arkswift-purchase-store-tabs button {
  display: grid;
  flex: 0 0 190px;
  gap: 3px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.arkswift-purchase-store-tabs button:hover,
.arkswift-purchase-store-tabs button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.arkswift-purchase-store-tabs button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.arkswift-purchase-store-tabs button span {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arkswift-purchase-store-tabs button small,
.arkswift-purchase-store-head small {
  color: var(--muted);
  font-size: 12px;
}

.arkswift-purchase-store-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.arkswift-purchase-auto-order-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.arkswift-purchase-auto-order-form > div:first-child {
  display: grid;
  gap: 3px;
}

.arkswift-purchase-auto-order-form small {
  color: var(--muted);
  font-size: 12px;
}

.arkswift-purchase-auto-order-fields {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.arkswift-purchase-auto-order-fields > label:not(.checkbox-line) {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.arkswift-purchase-auto-order-fields input[type="number"] {
  width: 140px;
}

.arkswift-purchase-store-head > div:first-child {
  display: grid;
  gap: 2px;
}

.arkswift-purchase-store-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.arkswift-purchase-store-metrics span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.arkswift-purchase-store-metrics .attention {
  border-color: var(--danger);
  color: var(--danger);
}

.arkswift-purchase-table {
  min-width: 1094px;
}

.arkswift-purchase-table th:nth-child(1) { width: 176px; }
.arkswift-purchase-table th:nth-child(2) { width: 104px; }
.arkswift-purchase-table th:nth-child(3) { width: 245px; }
.arkswift-purchase-table th:nth-child(4) { width: 138px; }
.arkswift-purchase-table th:nth-child(5) { width: 146px; }
.arkswift-purchase-table th:nth-child(6) { width: 154px; }
.arkswift-purchase-table th:nth-child(8) { width: 156px; }
.arkswift-purchase-profit { display: grid; gap: 3px; white-space: nowrap; }
.arkswift-purchase-profit small { color: var(--muted); font-size: 12px; }
.arkswift-purchase-profit.is-positive strong { color: #18794e; }
.arkswift-purchase-profit.is-negative strong { color: #c2543d; }
.arkswift-purchase-timer { display: grid; gap: 3px; min-width: 238px; white-space: nowrap; }
.arkswift-purchase-timer strong { color: var(--text); font-size: 13px; }
.arkswift-purchase-timer small { color: var(--muted); font-size: 12px; }
.arkswift-purchase-timer.is-expired strong { color: var(--danger); }

.arkswift-purchase-mapping-panel {
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.arkswift-purchase-mapping-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 0;
}

.arkswift-purchase-mapping-head > div:first-child {
  display: grid;
  gap: 3px;
}

.arkswift-purchase-mapping-head small {
  color: var(--muted);
  font-size: 12px;
}

.arkswift-purchase-mapping-actions,
.arkswift-purchase-mapping-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arkswift-purchase-mapping-actions button,
.arkswift-purchase-mapping-actions .button-like,
.arkswift-purchase-mapping-row-actions button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
}

.arkswift-purchase-mapping-actions .button-like {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.arkswift-purchase-mapping-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px 14px;
}

.arkswift-purchase-mapping-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.arkswift-purchase-mapping-form input {
  min-width: 0;
}

.arkswift-purchase-mapping-list {
  display: grid;
  max-height: 216px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.arkswift-purchase-mapping-list > div {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--line);
}

.arkswift-purchase-mapping-list > p {
  margin: 0;
  padding: 12px 14px;
}

.arkswift-purchase-mapping-list code {
  overflow: hidden;
  color: var(--accent-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .arkswift-purchase-store-tabs {
    padding-inline: 10px;
  }

  .arkswift-purchase-store-tabs button {
    flex-basis: min(240px, 78vw);
  }

  .arkswift-purchase-store-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .arkswift-purchase-store-metrics {
    justify-content: flex-start;
  }

  .arkswift-purchase-mapping-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .arkswift-purchase-mapping-form {
    grid-template-columns: 1fr;
  }

  .arkswift-purchase-mapping-form button {
    width: 100%;
  }

  .arkswift-purchase-mapping-list > div {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .arkswift-purchase-mapping-row-actions {
    grid-column: 1 / -1;
  }
}

.order-search-control {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.order-search-control select,
.order-search-control input,
.order-search-control button {
  min-height: 34px;
  border-radius: 0;
}

.order-search-control select {
  position: relative;
  z-index: 1;
  width: 78px;
  border-radius: 5px 0 0 5px;
}

.order-search-control input {
  width: 160px;
  min-width: 0;
  margin-left: -1px;
}

.order-search-control button {
  margin-left: -1px;
  border-radius: 0;
}

.order-search-control button:last-child {
  border-radius: 0 5px 5px 0;
}

.order-export-control {
  display: flex;
  align-items: stretch;
}

.order-export-control select,
.order-export-control button {
  min-height: 34px;
  border-radius: 0;
}

.order-export-control select {
  max-width: 138px;
  border-radius: 5px 0 0 5px;
}

.order-export-control button {
  margin-left: -1px;
  border-radius: 0 5px 5px 0;
}

.order-status-bar {
  min-height: 50px;
  padding-block: 7px;
  border-bottom: 1px solid var(--line);
}

.order-status-tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
}

.order-status-tabs button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 8px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.order-status-tabs button:hover,
.order-status-tabs button.active {
  border-color: transparent transparent var(--accent);
  background: transparent;
  color: var(--accent-strong);
}

.order-status-tabs button.active {
  font-weight: 700;
}

.order-status-tabs button span {
  color: var(--danger);
  font-size: 11px;
}

.order-status-count strong {
  color: var(--text);
}

.order-records-panel,
.order-records-scroll {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.order-records-scroll {
  height: 100%;
  overflow: auto;
}

.order-record-table {
  min-width: 1268px;
  table-layout: fixed;
}

.order-record-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef7f8;
  color: #385a67;
}

.order-record-table th:nth-child(1) { width: 180px; }
.order-record-table th:nth-child(2) { width: 94px; }
.order-record-table th:nth-child(3) { width: 220px; }
.order-record-table th:nth-child(4) { width: 190px; }
.order-record-table th:nth-child(5) { width: 188px; }
.order-record-table th:nth-child(6) { width: 140px; }
.order-record-table th:nth-child(7) { width: 145px; }
.order-record-table th:nth-child(8) { width: 110px; }

.event-order-table {
  min-width: 1300px;
}

.event-order-table th:nth-child(1) { width: 210px; }
.event-order-table th:nth-child(2) { width: 112px; }
.event-order-table th:nth-child(3) { width: 350px; }
.event-order-table th:nth-child(4) { width: 125px; }
.event-order-table th:nth-child(5) { width: 145px; }
.event-order-table th:nth-child(6) { width: 165px; }
.event-order-table th:nth-child(7) { width: 165px; }

.order-record-table td {
  vertical-align: top;
  background: var(--panel);
}

.order-record-table tbody tr:hover td {
  background: #f7fbfb;
}

.order-record-info,
.order-record-products,
.order-record-product,
.order-record-money {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.order-record-info > strong,
.order-record-product > strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-record-info span,
.order-record-info small,
.order-record-product small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-invoice-button {
  width: fit-content;
  min-height: 27px;
  margin-top: 2px;
  padding: 3px 8px;
  border-color: #9ed7d3;
  background: #edf9f7;
  color: #087f7a;
  font-size: 12px;
}

.order-store-sku-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.order-invoice-actions {
  display: grid;
  gap: 4px;
  justify-items: start;
  margin-top: 2px;
}

.order-invoice-actions .order-invoice-button {
  margin-top: 0;
}

.order-invoice-upload-button {
  width: fit-content;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid #9db6e9;
  border-radius: 5px;
  background: #edf3ff;
  color: #315aab;
  font-size: 12px;
}

.order-invoice-upload-button:hover:not(:disabled) {
  border-color: #5d85d5;
  background: #dce9ff;
}

.order-invoice-button:hover:not(:disabled) {
  border-color: #58aaa4;
  background: #dff3f0;
}

.order-document-button {
  width: fit-content;
  min-height: 27px;
  margin-top: 2px;
  padding: 3px 8px;
  border-color: #b8c8ee;
  background: #f0f4ff;
  color: #345da8;
  font-size: 12px;
}

.order-document-button:hover:not(:disabled) {
  border-color: #7898db;
  background: #e5edff;
}

.order-document-file-list {
  display: grid;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fafcfe;
}

.order-document-file-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.order-document-file-list > div:last-child {
  border-bottom: 0;
}

.order-document-file-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-document-file-list span {
  flex: 0 0 auto;
  color: var(--muted);
}

.order-invoice-hint {
  color: #9a6700 !important;
}

.order-record-products {
  gap: 8px;
}

.order-record-money > strong {
  color: var(--text);
}

.order-record-money .order-profit-summary,
.order-record-table .order-shipping-plan {
  min-width: 0;
}

.order-record-table .order-profit-summary {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
}

.order-record-table .order-profit-summary span,
.order-record-table .order-profit-summary small {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.order-refund-editor {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 6px;
}

.order-refund-editor label {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}

.order-refund-amount-display,
.order-refund-reason {
  min-width: 0;
}

.order-refund-amount-display {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  padding: 7px 8px;
}

.order-refund-amount-display span {
  color: var(--muted);
  font-size: 12px;
}

.order-refund-amount-display strong {
  color: var(--text);
}

.order-refund-reason textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  padding: 6px 8px;
  line-height: 1.35;
  resize: vertical;
}

.order-refund-editor > button {
  justify-self: end;
  min-width: 52px;
}

.order-refund-time {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.platform-order-pagination {
  border-top: 1px solid var(--line);
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
  background: #edf4f4;
  color: #246b6c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.order-status-badge.waiting-acceptance {
  background: #fff6df;
  color: #8a5b00;
}

.order-status-badge.shipping {
  background: #eaf3ff;
  color: #27689a;
}

.order-status-badge.shipped {
  background: #e9f7ee;
  color: #25744f;
}

.order-status-badge.received {
  background: #e9f7ee;
  color: #25744f;
}

.order-status-badge.closed {
  background: #f6ecec;
  color: #98504a;
}

.order-auto-acceptance {
  display: grid;
  gap: 2px;
  margin-top: 7px;
  color: #587276;
  font-size: 12px;
  line-height: 1.35;
}

.order-auto-acceptance.accepted { color: #25744f; }
.order-auto-acceptance.failed,
.order-auto-acceptance.needs_review { color: #a6544d; }
.order-auto-acceptance.submitting { color: #8a5b00; }

.order-auto-acceptance small {
  color: inherit;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .main:has(.order-workbench-content) {
    overflow-y: auto;
  }

  .order-workbench-content {
    display: block;
    height: auto;
    overflow: visible;
  }

  .order-workbench {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .order-platform-sidebar {
    grid-template-rows: auto auto minmax(0, 1fr);
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .order-platform-list {
    display: flex;
    gap: 6px;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .order-platform-item {
    flex: 0 0 210px;
  }

  .order-workbench-main {
    display: block;
    overflow: visible;
  }

  .order-workbench-head,
  .order-status-bar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .order-workbench-head {
    grid-template-columns: 1fr;
  }

  .order-workbench-actions {
    justify-content: flex-start;
  }

  .platform-order-pagination {
    margin-top: 0;
  }

  .order-status-count {
    margin-left: auto;
  }

  .order-records-panel {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .order-workbench-content {
    padding: 8px;
  }

  .order-workbench-head,
  .order-status-bar {
    padding: 10px;
  }

  .order-workbench-title {
    flex-wrap: wrap;
  }

  .order-date-filters {
    width: 100%;
    flex-wrap: wrap;
  }

  .order-workbench-actions,
  .order-workbench-actions .page-size-control {
    width: 100%;
  }

  .order-search-control {
    width: 100%;
  }

  .order-search-control input {
    flex: 1 1 auto;
    width: auto;
  }

  .order-workbench-actions > button {
    flex: 1 1 auto;
  }

  .order-status-count {
    width: 100%;
    margin-left: 0;
  }
}

.order-analysis {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.order-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.order-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.order-metric strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.order-metric span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.order-analysis-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.analysis-list {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.analysis-list-title {
  color: var(--text);
  font-weight: 700;
}

.analysis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
}

.analysis-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-row strong {
  color: var(--text);
}

.time-cell {
  display: grid;
  gap: 2px;
  min-width: 132px;
}

.time-main {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.time-zone {
  color: var(--muted);
  font-size: 12px;
}

.translation-text {
  color: var(--text);
  line-height: 1.5;
}

.translation-error {
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.5;
}

.message-thread-modal {
  width: min(980px, 100%);
}

.message-thread {
  display: grid;
  gap: 12px;
}

.message-thread-item {
  display: grid;
  gap: 8px;
  width: min(82%, 720px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.message-thread-item.customer {
  justify-self: start;
  border-left: 4px solid var(--accent);
}

.message-thread-item.mine {
  justify-self: end;
  border-right: 4px solid #385b9c;
  background: #edf4ff;
}

.message-thread-head,
.message-thread-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.message-thread-translation,
.message-thread-summary {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.series-count {
  display: inline-flex;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #475467;
  font-variant-numeric: tabular-nums;
}

.resolution-status {
  display: inline-flex;
  justify-content: center;
  min-width: 56px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
}

.resolution-status.pending,
.inbox-conversation-state.pending,
.inbox-thread-state.pending {
  background: #fff1e8;
  color: #b54708;
}

.resolution-status.waiting_customer,
.inbox-conversation-state.waiting_customer,
.inbox-thread-state.waiting_customer {
  background: #eef4ff;
  color: #315ea8;
}

.resolution-status.resolved,
.inbox-conversation-state.resolved,
.inbox-thread-state.resolved {
  background: #eaf8ef;
  color: #067647;
}

.platform-unresolved-filter.active {
  border-color: #b54708;
  background: #fff1e8;
  color: #8a3908;
}

.message-center-body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.message-center-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.message-center-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.message-center-metric span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.message-center-metric strong {
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.message-workbench {
  display: grid;
  grid-template-columns: minmax(290px, 0.78fr) minmax(0, 1.72fr);
  min-height: 600px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.message-conversation-panel,
.message-thread-panel {
  min-width: 0;
}

.message-conversation-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.message-panel-head,
.message-thread-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.message-panel-head h4,
.message-thread-panel-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.message-panel-head span,
.message-thread-panel-head > div > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.message-panel-head > strong {
  color: var(--accent);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.message-conversation-list {
  overflow: auto;
  min-height: 0;
}

.message-conversation-item {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.message-conversation-item:hover {
  background: #f2f8f8;
}

.message-conversation-item.selected {
  background: #eaf7f6;
  box-shadow: inset 3px 0 0 #0f9f90;
}

.message-conversation-top,
.message-conversation-meta,
.message-thread-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.message-conversation-top {
  justify-content: space-between;
}

.message-conversation-top > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-conversation-preview {
  display: -webkit-box;
  overflow: hidden;
  color: #40576b;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.message-conversation-meta {
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.message-conversation-meta span:last-child {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.message-thread-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.message-thread-panel-head {
  align-items: center;
}

.message-thread-panel-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.message-thread-scroll {
  min-height: 0;
  max-height: 620px;
  overflow: auto;
  padding: 18px;
  background: #f8fafc;
}

.message-thread-panel .message-thread {
  min-height: 100%;
  align-content: start;
}

.message-thread-panel .message-thread-item {
  width: min(86%, 760px);
}

.message-thread-original {
  color: var(--muted);
  font-size: 12px;
}

.message-thread-original summary {
  cursor: pointer;
  width: max-content;
}

.message-thread-original div {
  margin-top: 7px;
  padding: 8px 10px;
  border-left: 2px solid var(--line-strong);
  background: #f7f9fb;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-thread-empty {
  display: grid;
  min-height: 160px;
  padding: 24px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) {
  .message-center-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-workbench {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .message-conversation-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .message-conversation-list {
    max-height: 340px;
  }

  .message-thread-scroll {
    max-height: none;
    min-height: 400px;
  }
}

@media (max-width: 640px) {
  .message-center-body {
    padding: 10px;
  }

  .message-center-metric {
    min-height: 54px;
    padding: 10px 12px;
  }

  .message-center-metric strong {
    font-size: 18px;
  }

  .message-panel-head,
  .message-thread-panel-head,
  .message-thread-scroll {
    padding: 14px;
  }

  .message-thread-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .message-thread-panel-actions {
    width: 100%;
  }

  .message-thread-panel-actions button {
    flex: 1 1 0;
  }

  .message-thread-panel .message-thread-item {
    width: 100%;
  }
}

:root[data-theme="dark"] .message-center-body,
:root[data-theme="dark"] .message-thread-scroll {
  background: #1d282f;
}

:root[data-theme="dark"] .message-center-metric,
:root[data-theme="dark"] .message-workbench,
:root[data-theme="dark"] .message-conversation-panel {
  border-color: #3b4a56;
  background: #202c33;
}

:root[data-theme="dark"] .message-conversation-item {
  border-bottom-color: #354650;
  color: #e2ebed;
}

:root[data-theme="dark"] .message-conversation-item:hover {
  background: #26363d;
}

:root[data-theme="dark"] .message-conversation-item.selected {
  background: #234042;
  box-shadow: inset 3px 0 0 #69b9b2;
}

:root[data-theme="dark"] .message-thread-original div {
  border-left-color: #526b76;
  background: #1d282f;
}

.message-inbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.main:has(.message-inbox-content) {
  overflow: hidden;
}

.message-inbox-content {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.message-inbox-content > .message-inbox {
  flex: 1 1 auto;
  min-width: 0;
}

.message-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.message-inbox-store,
.message-inbox-head-actions,
.inbox-conversation-head,
.inbox-conversation-foot,
.inbox-reply-actions,
.inbox-context-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.message-inbox-store {
  flex-wrap: wrap;
}

.message-inbox-store > span {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.message-inbox-store > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-inbox .platform-store-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.message-inbox .platform-store-filter select {
  min-width: 160px;
}

.message-inbox-head-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.message-realtime-state {
  color: var(--ok);
  font-size: 12px;
  white-space: nowrap;
}

.message-realtime-state.error {
  color: var(--danger);
}

.message-inbox-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.78fr) minmax(420px, 1.7fr) minmax(220px, 0.58fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.inbox-list-panel,
.inbox-thread-panel,
.inbox-context-panel {
  min-width: 0;
  min-height: 0;
}

.inbox-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.inbox-list-filters {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.inbox-priority-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.inbox-priority-filter {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  text-align: left;
}

.inbox-priority-filter span {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-priority-filter strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.inbox-priority-filter:hover,
.inbox-priority-filter.active {
  border-color: var(--accent);
  background: var(--soft);
  color: var(--accent-strong);
}

.inbox-priority-filter.active strong { color: var(--accent-strong); }

.inbox-list-filters input {
  width: 100%;
}

.inbox-list-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.inbox-list-summary strong {
  color: var(--text);
  font-size: 14px;
}

.inbox-conversation-list {
  overflow: auto;
}

.inbox-conversation-row {
  display: flex;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.inbox-conversation-row:hover,
.inbox-conversation-row.bulk-selected {
  background: #f1f8f7;
}

.inbox-conversation-select {
  display: flex;
  flex: 0 0 34px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  cursor: pointer;
}

.inbox-conversation-row .inbox-conversation {
  flex: 1 1 auto;
  border-bottom: 0;
}

.inbox-conversation {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.inbox-conversation:hover {
  background: #f1f8f7;
}

.inbox-conversation.selected {
  background: #e9f7f5;
  box-shadow: inset 3px 0 0 #0f9f90;
}

.inbox-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 7px 10px;
  flex-wrap: wrap;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}

.inbox-bulk-toolbar button {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 12px;
}

.inbox-bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  white-space: nowrap;
}

.inbox-conversation-head {
  justify-content: space-between;
}

.inbox-conversation-head strong,
.inbox-conversation-head time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-conversation-head strong {
  font-size: 13px;
}

.inbox-conversation-head time,
.inbox-conversation-foot {
  color: var(--muted);
  font-size: 12px;
}

.inbox-conversation-preview {
  display: -webkit-box;
  overflow: hidden;
  color: #486074;
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inbox-conversation-foot {
  justify-content: space-between;
}

.inbox-conversation-foot > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-conversation-state,
.inbox-thread-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 12px;
}

.inbox-pagination {
  border-top: 1px solid var(--line);
}

.inbox-pagination .platform-message-pagination {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.inbox-pagination .pagination-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inbox-pagination .page-jump {
  display: none;
}

.inbox-pagination .pagination-summary {
  font-size: 12px;
}

.inbox-thread-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #f7f9fb;
}

.inbox-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.inbox-thread-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.inbox-thread-head-actions button {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 12px;
}

.inbox-mobile-back { display: none; }

.inbox-thread-head h3,
.inbox-context-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.inbox-thread-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.inbox-thread-history {
  overflow: auto;
  min-height: 0;
  padding: 18px;
}

.inbox-thread-history .message-thread {
  min-height: 100%;
  align-content: end;
}

.inbox-thread-history .message-thread-item {
  width: min(80%, 760px);
}

.inbox-reply-box {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.inbox-reply-box textarea {
  width: 100%;
  min-height: 96px;
  max-height: 220px;
  resize: vertical;
}

.inbox-reply-language {
  display: grid;
  grid-template-columns: auto minmax(180px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.inbox-reply-language select { min-width: 0; }
.inbox-reply-language small { color: var(--muted); line-height: 1.4; }

.inbox-reply-preview {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #b7dfe0;
  background: #f1fbfb;
}

.inbox-reply-preview[hidden] { display: none; }

.inbox-reply-preview-head,
.inbox-reply-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-reply-preview-head {
  justify-content: space-between;
  color: #176466;
  font-size: 12px;
}

.inbox-reply-preview-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  line-height: 1.55;
}

.inbox-reply-actions {
  justify-content: space-between;
}

.inbox-reply-actions span {
  color: var(--muted);
  font-size: 12px;
}

.inbox-reply-action-buttons { flex: 0 0 auto; }

.inbox-reply-actions button.primary:disabled {
  border-color: #9bcfd0;
  background: #d8eff0;
  color: #176466;
  opacity: 1;
}

#sendPlatformMessageReplyBtn {
  min-width: 64px;
  background: #087f84;
  border-color: #087f84;
  color: #fff !important;
  font-weight: 700;
  text-shadow: none;
}

#sendPlatformMessageReplyBtn > span {
  color: #fff !important;
}

#sendPlatformMessageReplyBtn:hover:not(:disabled) {
  background: #056a6e;
  border-color: #056a6e;
}

#sendPlatformMessageReplyBtn:disabled {
  background: #c7e3e4;
  border-color: #9bcfd0;
  color: #245d60 !important;
  opacity: 1;
}

#sendPlatformMessageReplyBtn:disabled > span {
  color: #245d60 !important;
}

:root[data-theme="dark"] .inbox-reply-preview {
  border-color: #376c70;
  background: #1d3639;
}

:root[data-theme="dark"] .inbox-reply-preview-head { color: #9fdfdf; }

.inbox-conversation-badges,
.inbox-thread-state-set {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.new-message-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #a84600;
  background: #fff0df;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.message-reply-sla {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.message-reply-sla.due_soon {
  background: #fff3dd;
  color: #9a5a00;
}

.message-reply-sla.expired {
  background: #fff0ef;
  color: #b42318;
}

.inbox-context-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border-left: 1px solid var(--line);
  background: #ffffff;
  overflow: auto;
}

.inbox-context-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inbox-context-head > span {
  color: var(--muted);
  font-size: 12px;
}

.inbox-context-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.inbox-context-list > div {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.inbox-context-list dt {
  color: var(--muted);
  font-size: 12px;
}

.inbox-context-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.inbox-context-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.message-order-summary {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.message-order-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-order-summary h3 {
  margin: 0;
  font-size: 14px;
}

.message-order-meta {
  display: grid;
  gap: 7px;
  margin: 0;
}

.message-order-meta > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.message-order-meta dt,
.message-order-meta dd {
  margin: 0;
}

.message-order-meta dt,
.message-order-item-copy span,
.message-order-item-copy small,
.message-order-total span,
.message-order-summary-empty {
  color: var(--muted);
  font-size: 12px;
}

.message-order-meta dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.message-order-items {
  display: grid;
  gap: 10px;
}

.message-order-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
}

.message-order-thumb {
  display: block;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
}

.message-order-thumb.empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--bg);
  font-size: 11px;
}

.message-order-item-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.message-order-item-copy strong,
.message-order-item-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-order-item-copy strong {
  font-size: 13px;
}

.message-order-item-price {
  max-width: 92px;
  overflow: hidden;
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-order-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.message-order-total strong {
  font-size: 15px;
}

.message-order-refresh-note {
  margin: 0;
  color: var(--warn);
  font-size: 12px;
  line-height: 1.55;
}

.message-order-summary-empty {
  margin: 0;
  line-height: 1.6;
}

.message-template-panel {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.message-template-head,
.message-template-editor-head,
.message-template-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-template-head h3,
.message-template-editor-head strong {
  margin: 0;
  font-size: 14px;
}

.message-template-head button,
.message-template-editor-head button,
.message-template-token-row button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
}

.danger-text-button {
  border-color: transparent;
  color: var(--danger);
  background: transparent;
}

.message-template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message-template-button {
  min-height: 34px;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent-strong);
  border-color: #b9dddd;
  background: var(--soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-template-empty,
.message-template-settings > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.message-template-settings {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.message-template-settings code {
  color: var(--accent-strong);
  font-family: Consolas, "Courier New", monospace;
}

.message-template-editor {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.message-template-editor label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.message-template-editor input,
.message-template-editor textarea {
  width: 100%;
  color: var(--text);
  background: var(--panel);
}

.message-template-editor textarea {
  min-height: 96px;
  resize: vertical;
}

.message-template-token-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.message-template-token-row > span {
  color: var(--muted);
  font-size: 12px;
}

.message-inbox-empty {
  display: grid;
  min-height: 160px;
  padding: 24px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1260px) {
  .message-inbox-layout {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.7fr);
  }

  .inbox-context-panel {
    display: none;
  }
}

@media (max-width: 800px) {
  .message-inbox {
    height: auto;
    min-height: 0;
  }

  .message-inbox-content {
    display: block;
    height: auto;
    overflow: visible;
  }

  .main:has(.message-inbox-content) {
    overflow-y: auto;
  }

  .message-inbox-head {
    align-items: stretch;
    flex-direction: column;
  }

  .message-inbox-head-actions {
    justify-content: space-between;
  }

  .message-inbox-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .message-inbox-layout:not(.has-selection) .inbox-thread-panel,
  .message-inbox-layout:not(.has-selection) .inbox-context-panel {
    display: none;
  }

  .message-inbox-layout.has-selection .inbox-list-panel {
    display: none;
  }

  .message-inbox-layout.has-selection .inbox-thread-panel {
    display: grid;
  }

  .inbox-mobile-back {
    display: inline-flex;
    width: max-content;
    min-height: 28px;
    margin-bottom: 7px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel);
    color: var(--accent-strong);
    font-size: 12px;
  }

  .inbox-thread-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .inbox-thread-head-actions {
    justify-content: flex-start;
  }

  .inbox-priority-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inbox-reply-language {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .inbox-list-panel {
    max-height: 350px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .inbox-thread-panel {
    min-height: 620px;
  }
}

:root[data-theme="dark"] .message-inbox,
:root[data-theme="dark"] .message-inbox-head,
:root[data-theme="dark"] .inbox-thread-head,
:root[data-theme="dark"] .inbox-reply-box,
:root[data-theme="dark"] .inbox-context-panel {
  border-color: #3b4a56;
  background: #202c33;
}

:root[data-theme="dark"] .inbox-list-panel,
:root[data-theme="dark"] .inbox-thread-panel,
:root[data-theme="dark"] .inbox-thread-history {
  border-color: #3b4a56;
  background: #1d282f;
}

:root[data-theme="dark"] .inbox-conversation {
  border-bottom-color: #354650;
  color: #e2ebed;
}

:root[data-theme="dark"] .inbox-conversation:hover {
  background: #26363d;
}

:root[data-theme="dark"] .inbox-conversation.selected {
  background: #234042;
  box-shadow: inset 3px 0 0 #69b9b2;
}

:root[data-theme="dark"] .inbox-conversation-preview {
  color: #aebfc6;
}

:root[data-theme="dark"] .inbox-conversation-state.pending,
:root[data-theme="dark"] .inbox-thread-state.pending {
  background: #413827;
  color: #e8c37c;
}

:root[data-theme="dark"] .inbox-conversation-state.resolved,
:root[data-theme="dark"] .inbox-thread-state.resolved {
  background: #263d33;
  color: #93d0a9;
}

:root[data-theme="dark"] .inbox-reply-actions button.primary:disabled {
  border-color: #356d70;
  background: #244b4e;
  color: #a8e8e3;
}

:root[data-theme="dark"] .message-reply-sla.due_soon {
  background: #443716;
  color: #f1ca70;
}

:root[data-theme="dark"] .message-reply-sla.expired {
  background: #4b2932;
  color: #f4abb4;
}

.platform-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.platform-item-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}

.order-profit-summary {
  display: grid;
  gap: 3px;
  min-width: 170px;
}

.order-shipping-plan {
  display: grid;
  gap: 3px;
  min-width: 150px;
}

.order-shipping-plan > strong {
  color: var(--text);
}

.order-shipping-plan > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.order-profit-summary > strong {
  color: var(--ok);
}

/* ArkSwift purchase by ERP-store SKU mapping */
.main:has(.arkswift-purchase-page) {
  overflow-y: auto;
}

.order-workbench-content:has(.arkswift-purchase-page) {
  display: block;
  height: auto;
  overflow: visible;
}

.order-workbench.arkswift-purchase-page,
.arkswift-purchase-workspace {
  display: block;
  min-height: 0;
  overflow: visible;
}

.arkswift-purchase-workspace {
  width: 100%;
}

.arkswift-purchase-store-select {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.arkswift-purchase-store-select select {
  min-height: 44px;
  color: var(--text);
}

.arkswift-purchase-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.arkswift-purchase-filter-copy {
  display: grid;
  gap: 3px;
  min-width: 210px;
}

.arkswift-purchase-filter-copy strong {
  color: var(--text);
  font-size: 13px;
}

.arkswift-purchase-filter-copy small {
  color: var(--muted);
  font-size: 12px;
}

.arkswift-purchase-filter-form {
  display: flex;
  flex: 1 1 420px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.arkswift-purchase-search-control {
  display: flex;
  flex: 1 1 420px;
  min-width: 0;
  max-width: 620px;
}

.arkswift-purchase-search-control select,
.arkswift-purchase-search-control input,
.arkswift-purchase-search-control button {
  min-height: 38px;
  border-radius: 0;
}

.arkswift-purchase-search-control select {
  position: relative;
  z-index: 1;
  width: 104px;
  border-radius: 5px 0 0 5px;
}

.arkswift-purchase-search-control input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-left: -1px;
}

.arkswift-purchase-search-control button {
  min-width: 64px;
  margin-left: -1px;
  border-radius: 0 5px 5px 0;
}

.arkswift-purchase-filter-form > button {
  min-height: 38px;
  min-width: 52px;
  padding-inline: 12px;
}

.arkswift-purchase-mapping-list code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arkswift-purchase-store-head small,
.arkswift-purchase-mapping-head small { color: var(--muted); font-size: 12px; }

.arkswift-purchase-mapping-panel { border-bottom: 1px solid var(--line); background: var(--soft); }
.arkswift-purchase-mapping-head,
.arkswift-purchase-store-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.arkswift-purchase-mapping-head > div:first-child,
.arkswift-purchase-store-head > div:first-child { display: grid; gap: 3px; }
.arkswift-purchase-mapping-actions,
.arkswift-purchase-mapping-row-actions,
.arkswift-purchase-store-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.arkswift-purchase-mapping-actions button,
.arkswift-purchase-mapping-actions .button-like,
.arkswift-purchase-mapping-row-actions button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.arkswift-purchase-mapping-actions .button-like { display: inline-flex; align-items: center; cursor: pointer; }

.arkswift-purchase-mapping-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  padding: 0 14px 12px;
}
.arkswift-purchase-mapping-form label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.arkswift-purchase-mapping-form input { min-width: 0; }

.arkswift-purchase-mapping-list { display: grid; max-height: 216px; overflow: auto; border-top: 1px solid var(--line); }
.arkswift-purchase-mapping-list > div {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
}
.arkswift-purchase-mapping-list > p { margin: 0; padding: 12px 14px; }
.arkswift-purchase-mapping-list code { color: var(--accent-strong); }
.arkswift-purchase-store-metrics span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 12px; }
.arkswift-purchase-store-metrics .attention { border-color: var(--danger); color: var(--danger); }
.arkswift-purchase-store-metrics .arkswift-purchase-status-metric {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.arkswift-purchase-store-metrics .arkswift-purchase-status-metric:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.arkswift-purchase-store-metrics .arkswift-purchase-status-metric.is-active {
  border-color: var(--accent);
  background: var(--soft);
  color: var(--accent-strong);
  font-weight: 600;
}
.arkswift-purchase-store-metrics .arkswift-purchase-status-metric.attention {
  border-color: #f0b8b2;
  color: var(--danger);
}
.arkswift-purchase-store-metrics .arkswift-purchase-status-metric.attention:hover,
.arkswift-purchase-store-metrics .arkswift-purchase-status-metric.attention.is-active {
  border-color: var(--danger);
  background: #fff4f2;
  color: var(--danger);
}
.arkswift-purchase-table th:nth-child(7) { width: 238px; }
.arkswift-purchase-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.arkswift-purchase-pager label,
.arkswift-purchase-pager > div { display: flex; align-items: center; gap: 8px; }
.arkswift-purchase-pager label { color: var(--muted); font-size: 13px; }
.arkswift-purchase-pager select { width: 74px; min-height: 32px; padding-block: 3px; }
.arkswift-purchase-pager > div { justify-content: flex-end; }
.arkswift-purchase-pager span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.arkswift-purchase-pager button { min-width: 62px; min-height: 32px; padding: 4px 8px; }
.arkswift-purchase-mapping-pager { min-height: 48px; padding-block: 7px; background: var(--soft); }

@media (max-width: 700px) {
  .arkswift-purchase-store-select { padding-inline: 10px; }
  .arkswift-purchase-filter-bar { align-items: stretch; flex-direction: column; gap: 10px; padding-inline: 10px; }
  .arkswift-purchase-filter-copy { min-width: 0; }
  .arkswift-purchase-filter-form { flex-basis: auto; width: 100%; }
  .arkswift-purchase-search-control { flex-basis: auto; max-width: none; }
  .arkswift-purchase-search-control input { min-width: 0; }
  .arkswift-purchase-auto-order-form { align-items: flex-start; flex-direction: column; }
  .arkswift-purchase-auto-order-fields { align-items: stretch; width: 100%; }
  .arkswift-purchase-mapping-head,
  .arkswift-purchase-store-head { align-items: flex-start; flex-direction: column; }
  .arkswift-purchase-mapping-form { grid-template-columns: 1fr; }
  .arkswift-purchase-mapping-form button { width: 100%; }
  .arkswift-purchase-mapping-list > div { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .arkswift-purchase-mapping-row-actions { grid-column: 1 / -1; }
  .arkswift-purchase-pager { align-items: flex-start; flex-direction: column; }
  .arkswift-purchase-pager > div { width: 100%; justify-content: space-between; }
}

.order-profit-summary span,
.order-profit-summary small,
.platform-item-profit {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.platform-item-profit {
  flex-basis: 100%;
}

.segment-editor {
  display: grid;
  gap: 8px;
}

.segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.segment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 72px;
  gap: 8px;
  align-items: center;
}

.segment-grid-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.segment-row {
  margin-top: 8px;
}

.segment-row button {
  min-height: 36px;
  padding: 6px 8px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.checkbox-line input {
  width: auto;
  min-height: auto;
}

.stock-price-country-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stock-price-country-picker legend {
  margin-bottom: 8px;
  color: var(--text);
}

.stock-price-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.stock-price-channel-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.stock-price-channel-option input {
  width: auto;
  min-height: auto;
}

.stock-price-channel-option span {
  min-width: 0;
}

.stock-price-channel-option small {
  color: var(--muted);
  white-space: nowrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  display: grid;
  place-items: start center;
  padding: 48px 18px;
  z-index: 10;
  overflow: auto;
}

.modal {
  width: min(860px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.modal-head,
.modal-foot {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-head {
  border-bottom: 1px solid var(--line);
}

.modal-head h3 {
  margin: 0;
  font-size: 17px;
}

.modal-body {
  padding: 16px;
}

.modal-foot {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

.notice {
  border: 1px solid #b9dcdc;
  background: var(--soft);
  color: #145c5e;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

.error {
  border: 1px solid #f0b8b2;
  background: #fff5f4;
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* Transient feedback stays outside the page layout. */
.feedback-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 120;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.feedback-toast {
  margin: 0;
  pointer-events: auto;
  box-shadow: 0 12px 28px rgba(20, 44, 61, 0.18);
}

.feedback-toast.feedback-auto-dismiss {
  animation: feedback-toast-fade 5s linear forwards;
}

@keyframes feedback-toast-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-toast.feedback-auto-dismiss {
    animation: none;
  }
}

.feedback-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logs {
  display: grid;
  gap: 8px;
}

.log-item {
  display: grid;
  grid-template-columns: 160px 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.log-main {
  min-width: 0;
}

.log-values {
  color: var(--muted);
  margin-top: 4px;
  word-break: break-word;
}

.log-actions {
  display: flex;
  justify-content: flex-end;
}

.hidden {
  display: none !important;
}

.dashboard-page {
  display: grid;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
}

.dashboard-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 2px 2px;
}

.dashboard-eyebrow,
.dashboard-welcome h3,
.dashboard-welcome p,
.dashboard-panel-head h3,
.dashboard-panel-head p,
.dashboard-metric p,
.dashboard-metric small {
  margin: 0;
}

.dashboard-eyebrow {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-welcome h3 {
  margin-top: 4px;
  font-size: 24px;
  line-height: 1.25;
}

.dashboard-welcome .muted {
  margin-top: 5px;
}

.dashboard-period-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 3px;
}

.dashboard-period-control button {
  min-height: 30px;
  padding: 4px 10px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-period-control button:hover {
  border: 0;
  background: #f4f7fa;
}

.dashboard-period-control button.active {
  background: #e7f5f3;
  color: var(--accent-strong);
  font-weight: 700;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metric {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.metric-marker {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #e8efff;
}

.dashboard-metric.teal .metric-marker {
  background: #dff5f1;
}

.dashboard-metric.orange .metric-marker {
  background: #fff0d8;
}

.dashboard-metric.pink .metric-marker {
  background: #fce7f3;
}

.dashboard-metric p,
.dashboard-metric small {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-metric strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.dashboard-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  color: var(--text);
  font-weight: 700;
}

.dashboard-statuses {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.dashboard-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-color);
  content: "";
}

.dashboard-grid {
  display: grid;
  gap: 14px;
}

.dashboard-grid-top {
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.85fr);
}

.dashboard-grid-bottom {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.dashboard-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.dashboard-panel-head h3 {
  font-size: 14px;
}

.dashboard-panel-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-panel-head > strong {
  color: var(--accent-strong);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dashboard-chart {
  height: 260px;
  padding: 18px 18px 14px;
}

.dashboard-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
  align-items: stretch;
  gap: 6px;
  height: 100%;
  border-bottom: 1px solid var(--line-strong);
}

.dashboard-bar-item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 22px;
  align-items: end;
  min-width: 0;
  height: 100%;
}

.dashboard-bar {
  display: block;
  width: min(18px, 100%);
  min-height: 2px;
  justify-self: center;
  align-self: end;
  border-radius: 3px 3px 0 0;
  background: #2563eb;
}

.dashboard-bar-item small {
  align-self: end;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-38deg);
  transform-origin: center right;
}

.dashboard-distribution {
  display: grid;
  gap: 20px;
  padding: 22px 18px 18px;
}

.dashboard-distribution-bar {
  display: flex;
  height: 22px;
  overflow: hidden;
  border-radius: 5px;
  background: #edf1f5;
}

.dashboard-distribution-bar span {
  min-width: 3px;
  background: var(--segment-color);
  box-shadow: inset -1px 0 #fff;
}

.dashboard-category-list {
  display: grid;
  gap: 9px;
}

.dashboard-category-list > div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.category-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-color);
}

.category-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-category-list strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dashboard-category-list small {
  text-align: right;
}

.dashboard-change-list {
  display: grid;
}

.dashboard-change-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(72px, auto);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.dashboard-change-item:last-child {
  border-bottom: 0;
}

.change-index {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #edf3ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-change-item strong,
.dashboard-change-item p {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-change-item p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-change-item > .mono {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  min-width: 420px;
}

.dashboard-table th,
.dashboard-table td {
  padding: 13px 16px;
  font-size: 13px;
}

.dashboard-table th {
  color: var(--muted);
  font-weight: 500;
}

.dashboard-table td:nth-child(2),
.dashboard-table td:nth-child(3),
.dashboard-table th:nth-child(2),
.dashboard-table th:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dashboard-store-table {
  min-width: 760px;
}

.dashboard-store-table td:nth-child(2),
.dashboard-store-table td:nth-child(3),
.dashboard-store-table th:nth-child(2),
.dashboard-store-table th:nth-child(3) {
  text-align: left;
  font-variant-numeric: normal;
}

.dashboard-store-table td:nth-child(4),
.dashboard-store-table td:nth-child(5),
.dashboard-store-table th:nth-child(4),
.dashboard-store-table th:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dashboard-store-table td:last-child,
.dashboard-store-table th:last-child {
  white-space: nowrap;
}

.dashboard-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
}

@media (max-width: 980px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  .platform-listing-layout {
    grid-template-columns: 1fr;
  }

  .platform-listing-fields {
    grid-template-columns: 1fr;
  }

  .platform-listing-editor-head {
    flex-direction: column;
  }

  .shell {
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 8;
    height: auto;
    min-height: auto;
    grid-template-rows: auto auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .brand {
    padding: 12px 14px;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
  }

  .brand-title {
    font-size: 16px;
  }

  .brand-sub {
    font-size: 11px;
  }

  .nav {
    min-height: auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 12px;
    scroll-snap-type: x proximity;
  }

  .nav button {
    width: auto;
    flex: 0 0 auto;
    padding: 7px 10px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .nav button.subitem,
  .nav button.nested {
    padding-left: 10px;
  }

  .nav-group,
  .nav-sub {
    display: flex;
    gap: 6px;
    margin-top: 0;
    flex: 0 0 auto;
  }

  .nav-subtitle {
    display: none;
  }

  .nav-group-title {
    width: auto;
    flex: 0 0 auto;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .account {
    display: none;
  }

  .main {
    display: block;
    overflow: visible;
  }

  .topbar {
    min-height: auto;
    align-items: flex-start;
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  .topbar h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .content {
    padding: 12px;
  }

  .workspace {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .platform-grid {
    grid-template-columns: 1fr;
  }

  .detail {
    position: static;
  }

  .search-grid {
    grid-template-columns: 1fr;
  }

  .product-workspace .search-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    width: 100%;
  }

  .toolbar button {
    flex: 1 1 140px;
    min-width: 0;
  }

  .selection-toolbar {
    align-items: stretch;
  }

  .selection-control,
  .selection-summary {
    width: 100%;
  }

  .selection-toolbar button {
    flex: 1 1 150px;
  }

  .pagination-bar {
    align-items: stretch;
  }

  .pagination-summary,
  .pagination-actions,
  .page-size-control,
  .page-jump {
    width: 100%;
  }

  .pagination-actions button {
    flex: 1 1 72px;
  }

  .page-size-control,
  .page-jump {
    justify-content: space-between;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .leroy-import-summary {
    grid-template-columns: 1fr;
  }

  .pricing-head,
  .cost-item-head,
  .ld-sku-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pricing-summary {
    text-align: left;
  }

  .pricing-grid,
  .cost-item-row,
  .currency-row,
  .ld-sku-row {
    grid-template-columns: 1fr;
  }

  .sku-binding-form {
    grid-template-columns: 1fr;
  }

  .sku-search-row {
    grid-template-columns: 1fr;
  }

  .sku-binding-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .sku-binding-filter-row label {
    max-width: none;
    width: 100%;
  }

  .sku-binding-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sku-binding-actions button {
    width: 100%;
  }

  .selected-company-product {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-head-actions,
  .platform-date-filter,
  .platform-date-filter label,
  .platform-store-filter {
    width: 100%;
  }

  .platform-range-buttons {
    width: 100%;
  }

  .platform-range-buttons button {
    flex: 1 1 90px;
  }

  .order-metrics,
  .order-analysis-lists {
    grid-template-columns: 1fr;
  }

  .platform-item-line {
    min-width: 0;
  }

  .log-item {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    border-top: 1px solid var(--line);
  }

  .product-table-wrap {
    overflow: visible;
    border-top: 0;
  }

  .product-table {
    display: block;
  }

  .product-table thead {
    display: none;
  }

  .product-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .product-table tr {
    position: relative;
    display: grid;
    gap: 7px;
    width: 100% !important;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .product-table tr.selected {
    border-color: #a8d8d8;
    background: var(--soft);
  }

  .product-table td {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100% !important;
    border-bottom: 0;
    padding: 0;
    min-width: 0;
  }

  .product-table tr:hover td,
  .product-table tr.selected td {
    background: transparent;
  }

  .product-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  }

  .product-table .select-column {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    justify-content: flex-end;
    width: auto !important;
  }

  .product-table .select-column::before,
  .product-table .image-column::before {
    display: none;
  }

  .product-table .image-column {
    display: block;
    padding-right: 42px;
  }

  .product-table .image-column .thumb,
  .product-table .image-column .empty-thumb {
    width: 72px;
    height: 72px;
  }

  .product-table .sku-column {
    padding-right: 42px;
    font-size: 13px;
  }

  .product-table .title-column {
    font-weight: 700;
  }

  .product-table .link-column,
  .product-table .price-column,
  .product-table .cost-column {
    overflow-wrap: anywhere;
  }

  .operation-note-control {
    grid-template-columns: 1fr;
  }

  .attr-chip {
    max-width: 100%;
  }

  .attr-chip span {
    max-width: 84px;
  }

  .attr-chip strong {
    max-width: 170px;
  }

  .product-table .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
  }

  .product-table .row-actions button,
  .product-table .tooltip-wrap {
    width: 100%;
  }

  .product-table .tooltip-wrap button {
    width: 100%;
  }

  .shipping-tooltip {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-width: none;
    max-height: 60vh;
    overflow: auto;
  }

  .tooltip-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .tooltip-price,
  .tooltip-weight {
    text-align: left;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid-top,
  .dashboard-grid-bottom {
    grid-template-columns: 1fr;
  }

  .dashboard-chart {
    height: 230px;
  }
}

@media (max-width: 640px) {
  button,
  input,
  select,
  textarea {
    min-height: 40px;
  }

  .feedback-stack {
    top: 12px;
    right: 12px;
    width: calc(100vw - 24px);
  }

  button {
    padding: 8px 10px;
  }

  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-period-control {
    width: 100%;
  }

  .dashboard-period-control button {
    flex: 1 1 0;
  }

  .dashboard-section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-statuses {
    justify-content: flex-start;
  }

  .dashboard-chart {
    height: 210px;
    padding-inline: 12px;
  }

  .dashboard-bars {
    gap: 4px;
  }

  .dashboard-bar-item small {
    font-size: 9px;
  }

  .dashboard-change-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .dashboard-change-item > .mono {
    display: none;
  }

  .login-page {
    padding: 16px;
    place-items: start center;
  }

  .login-shell {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    padding: 28px 24px;
  }

  .login-brand-mark {
    margin-bottom: 24px;
  }

  .login-brand-panel h1 {
    font-size: 26px;
  }

  .login-brand-stats {
    display: none;
  }

  .login-panel {
    padding: 28px 24px;
  }

  .brand {
    gap: 8px;
  }

  .brand-sub {
    display: none;
  }

  .nav {
    padding: 7px 10px 9px;
  }

  .content {
    padding: 10px;
  }

  .section-head,
  .section-body,
  .order-analysis,
  .api-category-tabs {
    padding: 12px;
  }

  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions button,
  .toolbar button,
  .selection-toolbar button,
  .platform-head-actions button {
    flex: 1 1 calc(50% - 6px);
  }

  .toolbar button {
    white-space: nowrap;
  }

  .pagination-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pagination-actions button,
  .page-size-control select,
  .page-jump input,
  .page-jump button {
    width: 100%;
  }

  .page-size-control,
  .page-jump {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    align-items: center;
  }

  .page-jump {
    grid-template-columns: minmax(0, 1fr) 80px 76px;
  }

  .product-table tbody {
    padding: 8px;
  }

  .product-table tr {
    padding: 10px;
  }

  .product-table td {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .product-table .image-column .thumb,
  .product-table .image-column .empty-thumb {
    width: 64px;
    height: 64px;
  }

  .product-table .row-actions {
    grid-template-columns: 1fr 1fr;
  }

  .group-management-row {
    grid-template-columns: 1fr 1fr;
  }

  .group-management-row input {
    grid-column: 1 / -1;
  }

  .detail-image {
    aspect-ratio: 1 / 1;
  }

  .detail-field-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .detail-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .image-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-grid {
    grid-template-columns: 1fr;
  }

  .segment-head {
    align-items: stretch;
    flex-direction: column;
  }

  .segment-grid {
    grid-template-columns: 1fr;
  }

  .segment-grid-head {
    display: none;
  }

  .api-category-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-category-tabs button {
    justify-content: center;
  }

  .modal-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .modal {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .modal-head,
  .modal-foot {
    padding: 12px;
  }

  .modal-head {
    align-items: center;
  }

  .modal-head h3 {
    font-size: 16px;
  }

  .modal-body {
    overflow: auto;
    padding: 12px;
  }

  .modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-wrap: wrap;
    background: #fff;
  }

  .modal-foot button {
    flex: 1 1 calc(50% - 6px);
  }

  .modal-foot .danger {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .top-actions button,
  .toolbar button,
  .selection-toolbar button,
  .platform-head-actions button,
  .modal-foot button {
    flex-basis: 100%;
  }

  .api-category-tabs,
  .image-slot-grid {
    grid-template-columns: 1fr;
  }

  .product-table .row-actions {
    grid-template-columns: 1fr;
  }
}

/* Light store-operations dashboard */
.dashboard-light-page {
  max-width: none;
  gap: 24px;
  padding: 22px;
  border: 1px solid #dbeeed;
  border-radius: 8px;
  background: #eff9f8;
}

.dashboard-light-page .dashboard-light-head {
  align-items: center;
  min-height: 54px;
  padding: 0 4px;
}

.dashboard-light-page .dashboard-eyebrow { color: #168c83; font-size: 12px; }
.dashboard-light-page .dashboard-welcome h3 { margin-top: 3px; color: #172637; font-size: 25px; }
.dashboard-light-page .dashboard-welcome .muted { margin-top: 4px; color: #718092; }

.dashboard-head-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5f6e80;
  font-size: 12px;
}

.dashboard-user-chip,
.dashboard-date-chip {
  padding: 7px 10px;
  border: 1px solid #d8ebe9;
  border-radius: 6px;
  background: #f8fffe;
}

.dashboard-user-chip { color: #167c76; font-weight: 700; }

.dashboard-light-page .dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-light-page .dashboard-metric {
  min-height: 104px;
  gap: 13px;
  padding: 18px 16px;
  border-color: #e2ebef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(38, 75, 94, 0.07);
}

.dashboard-metric-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #e6f2ff;
  color: #3478d0;
}

.dashboard-metric-icon::before {
  width: 20px;
  height: 20px;
  content: "";
  background: currentColor;
  -webkit-mask: var(--dashboard-metric-icon) center / contain no-repeat;
  mask: var(--dashboard-metric-icon) center / contain no-repeat;
}

.dashboard-light-page .dashboard-metric.dashboard-metric-art-card {
  align-items: center;
  gap: 16px;
}

.dashboard-metric-icon-art {
  width: 64px;
  height: 64px;
  border-radius: 10px;
}

.dashboard-metric-icon-art::before {
  width: 56px;
  height: 56px;
  background: var(--dashboard-metric-art) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

.dashboard-light-page .dashboard-metric p { color: #66758a; font-size: 12px; }
.dashboard-light-page .dashboard-metric strong { margin: 4px 0 5px; color: #152336; font-size: 23px; }
.dashboard-light-page .dashboard-metric small { color: #8491a1; line-height: 1.3; }
.dashboard-metric.mint .dashboard-metric-icon { background: #d9faea; color: #0c9b62; }
.dashboard-metric.blue .dashboard-metric-icon { background: #e0edff; color: #2873df; }
.dashboard-metric.green .dashboard-metric-icon { background: #dcf7e7; color: #159a58; }
.dashboard-metric.violet .dashboard-metric-icon { background: #f0e5ff; color: #8139dc; }
.dashboard-metric.amber .dashboard-metric-icon { background: #fff2cf; color: #c37b00; }
.dashboard-metric.indigo .dashboard-metric-icon { background: #e6e9ff; color: #5864d8; }
.dashboard-metric.rose .dashboard-metric-icon { background: #ffe7ec; color: #d84768; }
.dashboard-metric.sky .dashboard-metric-icon { background: #dff6ff; color: #1388b5; }
.dashboard-metric.violet .dashboard-metric-icon-art {
  border: 1px solid #b9d8df;
  background: #fff7df;
}

.dashboard-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: start;
  gap: 16px;
}

.dashboard-light-page .dashboard-operational-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-access-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
}

.dashboard-access-empty .dashboard-empty { max-width: 360px; text-align: center; }

.dashboard-task-workspace {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8e6e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(38, 75, 94, 0.07);
}

.dashboard-task-workspace-head,
.dashboard-task-list-head,
.dashboard-task-item-head,
.dashboard-task-progress-copy,
.dashboard-task-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-task-workspace-head {
  padding: 15px 16px;
  border-bottom: 1px solid #e8eff1;
  background: #f8fcfc;
}

.dashboard-task-workspace-head p,
.dashboard-task-workspace-head h3,
.dashboard-task-list-head h4,
.dashboard-task-form-head h4,
.dashboard-task-form-head span,
.dashboard-task-member-copy strong,
.dashboard-task-member-copy span,
.dashboard-task-item h4,
.dashboard-task-item p {
  margin: 0;
}

.dashboard-task-workspace-head p {
  color: #168c83;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-task-workspace-head h3 {
  margin-top: 2px;
  color: #1a2a3b;
  font-size: 16px;
}

.dashboard-task-workspace-head > span {
  padding: 5px 8px;
  border-radius: 5px;
  background: #e4f6f3;
  color: #087d74;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-task-form {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8eff1;
}

.dashboard-task-form-head h4,
.dashboard-task-list-head h4,
.dashboard-task-member-copy strong {
  color: #243448;
  font-size: 13px;
}

.dashboard-task-form-head span,
.dashboard-task-member-copy span {
  color: #8491a1;
  font-size: 11px;
}

.dashboard-task-form label {
  gap: 4px;
  color: #6f7f91;
  font-size: 12px;
}

.dashboard-task-form textarea {
  min-height: 58px;
  resize: vertical;
}

.dashboard-task-form button.primary {
  width: 100%;
  min-height: 34px;
}

.dashboard-task-user-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dashboard-task-user-picker legend {
  margin-bottom: 6px;
  padding: 0;
  color: #6f7f91;
  font-size: 12px;
}

.dashboard-task-user-list {
  display: flex;
  max-height: 92px;
  gap: 6px;
  overflow: auto;
  flex-wrap: wrap;
}

.dashboard-task-user-list label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid #dce8eb;
  border-radius: 5px;
  background: #fbfdfd;
  color: #52657a;
  cursor: pointer;
}

.dashboard-task-user-list input {
  width: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: #118e85;
}

.dashboard-task-member-copy {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8eff1;
  background: #fbfdfd;
}

.dashboard-task-list-head {
  padding: 12px 16px 10px;
}

.dashboard-task-list-head > span {
  color: #7c8b9c;
  font-size: 12px;
}

.dashboard-task-list {
  display: grid;
  max-height: 480px;
  overflow: auto;
}

.dashboard-task-empty {
  margin: 0;
  padding: 14px 16px 18px;
}

.dashboard-task-item {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 13px 16px;
  border-top: 1px solid #edf1f4;
}

.dashboard-task-item:first-child { border-top: 0; }

.dashboard-task-item-head { align-items: flex-start; }
.dashboard-task-item h4 {
  overflow: hidden;
  color: #243448;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-task-item-head > div > span { display: block; margin-top: 3px; color: #8391a1; font-size: 11px; }
.dashboard-task-close { min-height: 26px; padding: 3px 7px; font-size: 11px; }
.dashboard-task-checkin { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.dashboard-task-checkin-status { padding: 5px 7px; border-radius: 5px; background: #e4f6ed; color: #178452; font-size: 11px; font-weight: 700; }
.dashboard-task-description { overflow: hidden; color: #5f7184; font-size: 12px; line-height: 1.55; white-space: pre-line; }
.dashboard-task-progress-copy { color: #7b8a9b; font-size: 11px; }
.dashboard-task-progress-copy strong { color: #207b75; font-size: 12px; font-variant-numeric: tabular-nums; }
.dashboard-task-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #e7eff0; }
.dashboard-task-progress span { display: block; height: 100%; border-radius: inherit; background: #19a198; transition: width 180ms ease; }

.dashboard-task-assignees {
  display: flex;
  gap: 5px;
  overflow: hidden;
  flex-wrap: wrap;
}

.dashboard-task-assignees span {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 4px;
  background: #f0f4f6;
  color: #718094;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-task-assignees span.checked { background: #e3f7ed; color: #168650; }
.dashboard-task-checkin-time { color: #8290a0; font-size: 10px; }

@media (max-width: 1180px) {
  .dashboard-command-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  .dashboard-light-page .dashboard-operational-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 930px) {
  .dashboard-command-layout { grid-template-columns: 1fr; }
  .dashboard-light-page .dashboard-operational-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-task-list { max-height: 360px; }
}

@media (max-width: 650px) {
  .dashboard-light-page .dashboard-operational-metrics { grid-template-columns: 1fr; }
  .dashboard-task-workspace-head { align-items: flex-start; }
}

.dashboard-store-zone,
.dashboard-filterbar {
  border: 1px solid #e2ebef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(38, 75, 94, 0.05);
}

.dashboard-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf1f4;
}

.dashboard-zone-head h3,
.dashboard-zone-head p { margin: 0; }
.dashboard-zone-head h3 { color: #172637; font-size: 15px; }
.dashboard-zone-head p { margin-top: 4px; color: #7b8898; font-size: 12px; }
.dashboard-light-page .dashboard-statuses { gap: 7px; }
.dashboard-light-page .dashboard-status { padding: 5px 8px; border-color: #e1e9ef; border-radius: 6px; background: #fbfdff; color: #627286; }

.dashboard-store-runs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.dashboard-store-run {
  position: relative;
  min-width: 0;
  padding: 17px 18px 16px 22px;
  border-right: 1px solid #edf1f4;
}

.dashboard-store-run:last-child { border-right: 0; }
.dashboard-store-accent { position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; border-radius: 0 2px 2px 0; background: var(--store-color); }
.dashboard-store-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dashboard-store-run-head small,
.dashboard-store-run-head strong { display: block; }
.dashboard-store-run-head small { color: #8290a1; font-size: 11px; }
.dashboard-store-run-head strong { max-width: 190px; overflow: hidden; margin-top: 4px; color: #1a2a3b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-store-status { flex: 0 0 auto; padding: 4px 6px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.dashboard-store-status.success { background: #e0f8ea; color: #138752; }
.dashboard-store-status.warning { background: #fff4d7; color: #a86700; }
.dashboard-store-status.danger { background: #ffeaed; color: #c7445e; }
.dashboard-store-status.neutral { background: #edf1f5; color: #718094; }
.dashboard-store-run-data { display: flex; gap: 18px; margin-top: 17px; color: #8190a1; font-size: 12px; }
.dashboard-store-run-data b { display: block; margin-top: 3px; color: #213146; font-size: 15px; font-variant-numeric: tabular-nums; }

.dashboard-filterbar { display: flex; align-items: center; min-height: 68px; gap: 14px; padding: 12px 18px; }
.dashboard-filter-label { color: #526276; font-size: 13px; font-weight: 700; }
.dashboard-light-page .dashboard-period-control { border-color: #dce6ec; background: #fff; }
.dashboard-light-page .dashboard-period-control button { min-height: 32px; color: #66778b; }
.dashboard-light-page .dashboard-period-control button.active { background: #e1f5f3; color: #087c74; }
.dashboard-filter-note { margin-left: auto; color: #8794a4; font-size: 12px; }

.dashboard-light-page .dashboard-grid { gap: 18px; }
.dashboard-light-page .dashboard-grid-top { grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.95fr); }
.dashboard-light-page .dashboard-grid-bottom { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); }
.dashboard-light-page .dashboard-panel { border-color: #e2ebef; border-radius: 8px; box-shadow: 0 7px 20px rgba(38, 75, 94, 0.05); }
.dashboard-light-page .dashboard-panel-head { align-items: center; padding: 16px 18px; border-bottom-color: #edf1f4; }
.dashboard-light-page .dashboard-panel-head h3 { color: #1b2b3d; font-size: 15px; }
.dashboard-light-page .dashboard-panel-head p { color: #7f8c9b; }
.dashboard-light-page .dashboard-panel-head > strong { color: #0c8c83; }
.dashboard-light-page .dashboard-chart { height: 280px; padding: 20px 22px 15px; }
.dashboard-light-page .dashboard-bars { gap: 8px; border-bottom-color: #cfdbe2; }
.dashboard-light-page .dashboard-bar { width: min(22px, 100%); border-radius: 4px 4px 0 0; background: #20a5a4; }
.dashboard-light-page .dashboard-bar-item small { color: #8793a2; transform: none; }
.dashboard-light-page .dashboard-distribution { gap: 18px; padding: 22px 20px; }
.dashboard-light-page .dashboard-distribution-bar { height: 18px; border-radius: 5px; background: #edf2f5; }
.dashboard-light-page .dashboard-category-list > div { color: #738195; }
.dashboard-light-page .dashboard-category-list strong { color: #203146; }
.dashboard-light-page .dashboard-change-item { padding: 14px 18px; border-bottom-color: #edf1f4; }
.dashboard-light-page .change-index { background: #e2f5f3; color: #0d887f; }
.dashboard-light-page .dashboard-change-item strong { color: #253449; }
.dashboard-light-page .dashboard-table th { background: #f8fafb; color: #6e7e91; }
.dashboard-light-page .dashboard-table td { border-bottom: 1px solid #edf1f4; }
.dashboard-light-page .dashboard-table tr:last-child td { border-bottom: 0; }

@media (max-width: 1180px) {
  .dashboard-light-page .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-store-run:nth-child(2n) { border-right: 0; }
  .dashboard-store-run:nth-child(n + 3) { border-top: 1px solid #edf1f4; }
}

@media (max-width: 700px) {
  .dashboard-light-page { gap: 16px; padding: 14px; border-radius: 0; }
  .dashboard-light-page .dashboard-light-head,
  .dashboard-zone-head,
  .dashboard-filterbar { align-items: flex-start; flex-direction: column; }
  .dashboard-head-meta { width: 100%; }
  .dashboard-light-page .dashboard-metrics { grid-template-columns: 1fr; gap: 10px; }
  .dashboard-light-page .dashboard-metric { min-height: 90px; }
  .dashboard-store-runs { grid-template-columns: 1fr; }
  .dashboard-store-run,
  .dashboard-store-run:nth-child(2n) { border-right: 0; }
  .dashboard-store-run + .dashboard-store-run { border-top: 1px solid #edf1f4; }
  .dashboard-light-page .dashboard-statuses { justify-content: flex-start; }
  .dashboard-light-page .dashboard-period-control { width: 100%; }
  .dashboard-light-page .dashboard-period-control button { flex: 1 1 0; }
  .dashboard-filter-note { margin-left: 0; }
  .dashboard-light-page .dashboard-grid-top,
  .dashboard-light-page .dashboard-grid-bottom { grid-template-columns: 1fr; }
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}

.theme-toggle input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.theme-switch {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #dbe3ea;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.theme-switch::after {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  content: "";
  transition: transform 0.16s ease;
}

.theme-toggle input:checked + .theme-switch {
  border-color: var(--accent);
  background: var(--accent);
}

.theme-toggle input:checked + .theme-switch::after {
  transform: translateX(16px);
}

.theme-toggle input:focus-visible + .theme-switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b242c;
  --panel: #222d36;
  --line: #35434f;
  --line-strong: #4a5b68;
  --text: #d7e0e8;
  --muted: #9baab8;
  --accent: #62afa7;
  --accent-strong: #a2d8d2;
  --warn: #e9bc72;
  --danger: #ee989d;
  --ok: #82c99c;
  --soft: #2a4144;
  --shadow: 0 12px 28px rgba(8, 15, 20, 0.22);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .login-page {
  background: var(--bg);
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .modal-foot,
:root[data-theme="dark"] .login-shell,
:root[data-theme="dark"] .login-panel {
  background: var(--panel);
  color: var(--text);
}

:root[data-theme="dark"] button.ghost,
:root[data-theme="dark"] .nav button {
  background: transparent;
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .login-account-toggle:hover {
  background: #22303d;
}

:root[data-theme="dark"] .nav button.active {
  border-color: #2d6b70;
  background: var(--soft);
  color: var(--accent-strong);
}

:root[data-theme="dark"] .login-page {
  background: #0f151c;
}

:root[data-theme="dark"] .login-brand-panel {
  background: #122a34;
}

:root[data-theme="dark"] .login-field input::placeholder,
:root[data-theme="dark"] .login-panel-head p,
:root[data-theme="dark"] .account-role {
  color: var(--muted);
}

:root[data-theme="dark"] tr.is-row-busy,
:root[data-theme="dark"] .product-table tr.selected,
:root[data-theme="dark"] .platform-unresolved-filter.active {
  background: #21303d;
}

:root[data-theme="dark"] .arkswift-balance,
:root[data-theme="dark"] .dashboard-period-control,
:root[data-theme="dark"] .dashboard-status,
:root[data-theme="dark"] .dashboard-user-chip,
:root[data-theme="dark"] .dashboard-date-chip {
  border-color: var(--line);
  background: #1d2935;
  color: var(--muted);
}

:root[data-theme="dark"] .arkswift-balance.ok {
  border-color: #276a56;
  background: #17392e;
  color: #7ce0ac;
}

:root[data-theme="dark"] .arkswift-balance.error {
  border-color: #773e49;
  background: #3d2028;
  color: #ff9a9a;
}

:root[data-theme="dark"] .public-change-reminder-filter,
:root[data-theme="dark"] .product-table .row-actions .change-reminder-active {
  border-color: #755817;
  background: #362d14;
  color: #f3cb63;
}

:root[data-theme="dark"] .public-change-reminder-filter.active {
  border-color: #947027;
  background: #4a3b19;
  color: #ffe096;
}

:root[data-theme="dark"] .section,
:root[data-theme="dark"] .dashboard-panel,
:root[data-theme="dark"] .dashboard-store-zone,
:root[data-theme="dark"] .dashboard-filterbar,
:root[data-theme="dark"] .dashboard-light-page .dashboard-metric {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
}

:root[data-theme="dark"] .dashboard-light-page {
  border-color: #2b5660;
  background: #132329;
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-welcome h3,
:root[data-theme="dark"] .dashboard-light-page .dashboard-metric strong,
:root[data-theme="dark"] .dashboard-zone-head h3,
:root[data-theme="dark"] .dashboard-light-page .dashboard-panel-head h3,
:root[data-theme="dark"] .dashboard-store-run-head strong,
:root[data-theme="dark"] .dashboard-store-run-data b,
:root[data-theme="dark"] .dashboard-light-page .dashboard-category-list strong,
:root[data-theme="dark"] .dashboard-light-page .dashboard-change-item strong {
  color: var(--text);
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-eyebrow,
:root[data-theme="dark"] .dashboard-user-chip,
:root[data-theme="dark"] .dashboard-light-page .dashboard-panel-head > strong {
  color: var(--accent-strong);
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-welcome .muted,
:root[data-theme="dark"] .dashboard-light-page .dashboard-metric p,
:root[data-theme="dark"] .dashboard-light-page .dashboard-metric small,
:root[data-theme="dark"] .dashboard-zone-head p,
:root[data-theme="dark"] .dashboard-store-run-head small,
:root[data-theme="dark"] .dashboard-store-run-data,
:root[data-theme="dark"] .dashboard-filter-label,
:root[data-theme="dark"] .dashboard-filter-note,
:root[data-theme="dark"] .dashboard-light-page .dashboard-panel-head p,
:root[data-theme="dark"] .dashboard-light-page .dashboard-category-list > div,
:root[data-theme="dark"] .dashboard-light-page .dashboard-bar-item small {
  color: var(--muted);
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-period-control,
:root[data-theme="dark"] .dashboard-light-page .dashboard-period-control button,
:root[data-theme="dark"] .dashboard-light-page .dashboard-status {
  border-color: var(--line);
  background: #1c2934;
  color: var(--muted);
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-period-control button.active {
  background: #1c4a4c;
  color: #9ceae3;
}

:root[data-theme="dark"] .dashboard-zone-head,
:root[data-theme="dark"] .dashboard-panel-head,
:root[data-theme="dark"] .dashboard-change-item,
:root[data-theme="dark"] .dashboard-light-page .dashboard-table td,
:root[data-theme="dark"] .dashboard-store-run {
  border-color: var(--line);
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-table th {
  background: #202c37;
  color: var(--muted);
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-distribution-bar,
:root[data-theme="dark"] .dashboard-light-page .dashboard-store-status.neutral {
  background: #2a3744;
}

:root[data-theme="dark"] .dashboard-light-page .dashboard-bars {
  border-bottom-color: var(--line-strong);
}

:root[data-theme="dark"] .dashboard-light-page .change-index {
  background: #1d4b4d;
  color: #9ee7df;
}

:root[data-theme="dark"] .dashboard-store-status.success {
  background: #193f30;
  color: #7be1ac;
}

:root[data-theme="dark"] .dashboard-store-status.warning {
  background: #4a3820;
  color: #ffd37e;
}

:root[data-theme="dark"] .dashboard-store-status.danger {
  background: #4a242d;
  color: #ff9ca9;
}

:root[data-theme="dark"] .order-workbench,
:root[data-theme="dark"] .order-record-table td {
  border-color: var(--line);
  background: var(--panel);
}

:root[data-theme="dark"] .order-platform-sidebar {
  border-color: var(--line);
  background: #202c33;
}

:root[data-theme="dark"] .order-platform-item:hover,
:root[data-theme="dark"] .order-record-table tbody tr:hover td {
  background: #26363d;
}

:root[data-theme="dark"] .order-platform-item.active {
  border-color: #2f6b68;
  background: #234042;
  color: #a7eee8;
}

:root[data-theme="dark"] .order-platform-mark {
  background: #1e4a49;
  color: #92ddd5;
}

:root[data-theme="dark"] .order-platform-mark.has-logo {
  border-color: #58706e;
  background: #fffdf8;
}

:root[data-theme="dark"] .order-platform-mark.all {
  background: #273750;
  color: #afc8ff;
}

:root[data-theme="dark"] .order-record-table th {
  border-color: var(--line);
  background: #263a40;
  color: #b7d4d8;
}

:root[data-theme="dark"] .order-status-badge {
  background: #1f4949;
  color: #9be2dd;
}

:root[data-theme="dark"] .order-status-badge.waiting-acceptance {
  background: #433818;
  color: #f2cf76;
}

:root[data-theme="dark"] .order-status-badge.shipping {
  background: #223f5b;
  color: #9cccf0;
}

:root[data-theme="dark"] .order-status-badge.shipped {
  background: #203f32;
  color: #95d8aa;
}

:root[data-theme="dark"] .order-status-badge.received {
  background: #203f32;
  color: #95d8aa;
}

:root[data-theme="dark"] .order-status-badge.closed {
  background: #4a2b33;
  color: #f0abb3;
}

:root[data-theme="dark"] .notice {
  border-color: #2f6b68;
  background: #153a3b;
  color: #a7eee8;
}

:root[data-theme="dark"] .error {
  border-color: #814552;
  background: #40232b;
  color: #ffb0b8;
}

/* Softer contrast for dense product-management screens. */
:root[data-theme="dark"] .content,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .product-table-wrap {
  background: var(--bg);
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .attr-chip {
  border-color: #435260;
  background: #26323c;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #8495a5;
}

:root[data-theme="dark"] .product-table,
:root[data-theme="dark"] .product-table tbody,
:root[data-theme="dark"] .product-table tbody tr {
  background: #202a32;
}

:root[data-theme="dark"] .product-table th {
  border-bottom-color: #42515d;
  background: #2a3640 !important;
  color: #b9c7d2;
}

:root[data-theme="dark"] .product-table tbody tr td {
  border-bottom-color: #34424d;
  background: #202a32 !important;
}

:root[data-theme="dark"] .product-table tbody tr:nth-child(even) td {
  background: #1f2931 !important;
}

:root[data-theme="dark"] .product-table tbody tr:hover td {
  background: #27343c !important;
}

:root[data-theme="dark"] .product-table tbody tr.selected td,
:root[data-theme="dark"] .product-table tbody tr.selected:hover td {
  background: #294449 !important;
}

:root[data-theme="dark"] .product-table .empty-thumb,
:root[data-theme="dark"] .thumb,
:root[data-theme="dark"] .detail-image,
:root[data-theme="dark"] .detail-gallery a,
:root[data-theme="dark"] .image-slot-box {
  border-color: #43515d;
  background: #2a353d;
}

:root[data-theme="dark"] .detail-field-list,
:root[data-theme="dark"] .shipping-tooltip,
:root[data-theme="dark"] .sku-search-results,
:root[data-theme="dark"] .selected-company-product,
:root[data-theme="dark"] .message-thread-item {
  border-color: #3b4a56;
  background: #25313a;
}

:root[data-theme="dark"] .status,
:root[data-theme="dark"] .library-badge,
:root[data-theme="dark"] .group-badge,
:root[data-theme="dark"] .resolution-status.neutral {
  background: #2b3741;
  color: #b1bfca;
}

:root[data-theme="dark"] .status.ok,
:root[data-theme="dark"] .dashboard-store-status.success,
:root[data-theme="dark"] .resolution-status.resolved,
:root[data-theme="dark"] .inbox-conversation-state.resolved,
:root[data-theme="dark"] .inbox-thread-state.resolved {
  background: #263d33;
  color: #93d0a9;
}

:root[data-theme="dark"] .status.warn,
:root[data-theme="dark"] .dashboard-store-status.warning,
:root[data-theme="dark"] .resolution-status.pending,
:root[data-theme="dark"] .inbox-conversation-state.pending,
:root[data-theme="dark"] .inbox-thread-state.pending {
  background: #413827;
  color: #e8c37c;
}

:root[data-theme="dark"] .resolution-status.waiting_customer,
:root[data-theme="dark"] .inbox-conversation-state.waiting_customer,
:root[data-theme="dark"] .inbox-thread-state.waiting_customer {
  background: #293b55;
  color: #a9c7f5;
}

:root[data-theme="dark"] .dashboard-store-status.danger,
:root[data-theme="dark"] .platform-unresolved-filter.active {
  background: #442b32;
  color: #efa0a7;
}

:root[data-theme="dark"] .theme-switch {
  border-color: #52636f;
  background: #34424d;
}

:root[data-theme="dark"] .theme-switch::after {
  background: #d7e0e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .back-to-top {
  border-color: #4b5c69;
  background: #293640;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  color: #8bc7c0;
}

:root[data-theme="dark"] .back-to-top:hover {
  background: #30414b;
}

/* Keep responsive product cards calm: selection belongs to the card, not every field. */
@media (max-width: 2100px) {
  /* Product cards are independent modules: a tall card must not stretch its neighbours. */
  .product-workspace .product-table tbody {
    align-items: start;
    grid-auto-rows: max-content;
  }

  .product-workspace .product-table tbody tr {
    align-self: start;
    height: auto;
    min-width: 0;
  }

  .product-workspace .product-table td,
  .product-workspace .product-table .operation-note-control,
  .product-workspace .product-table .row-actions {
    min-width: 0;
  }

  .product-workspace .product-table .title-column,
  .product-workspace .product-table .category-column,
  .product-workspace .product-table .group-column,
  .product-workspace .product-table .binding-note-column,
  .product-workspace .product-table .operation-note-column {
    overflow-wrap: anywhere;
  }

  .product-workspace .product-table .group-badge,
  .product-workspace .product-table .personal-version-summary,
  .product-workspace .product-table textarea {
    max-width: 100%;
  }

  :root[data-theme="dark"] .product-workspace .product-table tbody {
    gap: 12px;
  }

  :root[data-theme="dark"] .product-workspace .product-table tbody tr {
    border-color: #3c515a;
    background: #202c33;
  }

  :root[data-theme="dark"] .product-workspace .product-table tbody tr.selected {
    border-color: #5b8586;
    background: #24383a;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  }

  :root[data-theme="dark"] .product-workspace .product-table tbody tr td,
  :root[data-theme="dark"] .product-workspace .product-table tbody tr:nth-child(even) td,
  :root[data-theme="dark"] .product-workspace .product-table tbody tr:hover td,
  :root[data-theme="dark"] .product-workspace .product-table tbody tr.selected td,
  :root[data-theme="dark"] .product-workspace .product-table tbody tr.selected:hover td {
    background: transparent !important;
  }

  :root[data-theme="dark"] .product-workspace .product-table td + td {
    border-top: 1px solid rgba(103, 133, 141, 0.2);
  }

  :root[data-theme="dark"] .product-workspace .product-table td::before {
    color: #91a5aa;
  }

  :root[data-theme="dark"] .product-workspace .product-table .status {
    justify-self: start;
    width: max-content;
  }

  :root[data-theme="dark"] .product-workspace .product-table .status.ok {
    border: 1px solid #315646;
    background: #253b32;
    color: #9bd4af;
  }

  :root[data-theme="dark"] .product-workspace .product-table .status.warn {
    border: 1px solid #655235;
    background: #3b3224;
    color: #e3c484;
  }
}

/* Public product cards use stable attribute modules instead of a loose field list. */
@media (min-width: 641px) and (max-width: 2100px) {
  .product-workspace .product-table:not(.personal-product-table) tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 0;
  }

  .product-workspace .product-table:not(.personal-product-table) td {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    min-height: 34px;
    padding: 7px 0;
    border-top: 1px solid rgba(91, 123, 131, 0.16);
  }

  .product-workspace .product-table:not(.personal-product-table) td::before {
    align-self: start;
    padding-top: 1px;
  }

  .product-workspace .product-table:not(.personal-product-table) .image-column {
    grid-column: 1 / -1;
    min-height: 46px;
    padding-top: 0;
    border-top: 0;
  }

  .product-workspace .product-table:not(.personal-product-table) .select-column {
    min-height: 0;
    padding: 0;
    border-top: 0;
  }

  .product-workspace .product-table:not(.personal-product-table) .sku-column,
  .product-workspace .product-table:not(.personal-product-table) .category-column,
  .product-workspace .product-table:not(.personal-product-table) .status-column {
    grid-column: 1;
  }

  .product-workspace .product-table:not(.personal-product-table) .order-count-column,
  .product-workspace .product-table:not(.personal-product-table) .leroy-order-column,
  .product-workspace .product-table:not(.personal-product-table) .leroy-incident-column,
  .product-workspace .product-table:not(.personal-product-table) .leroy-incident-rate-column,
  .product-workspace .product-table:not(.personal-product-table) .group-column,
  .product-workspace .product-table:not(.personal-product-table) .price-column {
    grid-column: 2;
  }

  .product-workspace .product-table:not(.personal-product-table) .title-column,
  .product-workspace .product-table:not(.personal-product-table) .cost-column,
  .product-workspace .product-table:not(.personal-product-table) .operation-note-column,
  .product-workspace .product-table:not(.personal-product-table) .binding-note-column,
  .product-workspace .product-table:not(.personal-product-table) .link-column,
  .product-workspace .product-table:not(.personal-product-table) .actions-column {
    grid-column: 1 / -1;
  }

  .product-workspace .product-table:not(.personal-product-table) .title-column {
    min-height: 44px;
  }

  .product-workspace .product-table:not(.personal-product-table) .group-badge,
  .product-workspace .product-table:not(.personal-product-table) .status {
    justify-self: start;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .product-workspace .product-table:not(.personal-product-table) .operation-note-control {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .product-workspace .product-table:not(.personal-product-table) .operation-note-control textarea,
  .product-workspace .product-table:not(.personal-product-table) .row-actions {
    min-width: 0;
    width: 100%;
  }

  :root[data-theme="dark"] .product-workspace .product-table:not(.personal-product-table) td {
    border-top-color: rgba(103, 133, 141, 0.22);
  }
}

.personal-library-bar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cce3df;
  background: #f4fbfa;
}

.personal-library-bar label {
  display: grid;
  gap: 5px;
  min-width: 230px;
  color: #446167;
  font-size: 13px;
}

.personal-version-summary {
  display: block;
  margin-top: 6px;
  color: #187a70;
  font-size: 12px;
}

.product-title-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.product-title-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-title-content .personal-version-summary {
  margin-top: 0;
  white-space: nowrap;
}

.product-title-content:has(.personal-version-summary[open]) {
  grid-template-columns: minmax(0, 1fr);
}

.product-title-content:has(.personal-version-summary[open]) .personal-version-summary {
  width: 100%;
  white-space: normal;
}

details.personal-version-summary summary {
  cursor: pointer;
  width: max-content;
}

.personal-version-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding: 7px 8px;
  border-left: 2px solid #8bd3c8;
  background: #f6fbfa;
}

.personal-version-list button {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content max-content;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.personal-version-list button:hover { background: #e7f6f3; }

.personal-version-list strong { color: #1f4444; }
.personal-version-list span { color: #587276; }
.personal-version-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-style: normal; }
.personal-version-list b { color: #087f74; font-size: 12px; font-weight: 600; }
.personal-version-list .personal-version-orders { color: #087f74; font-weight: 600; white-space: nowrap; }
.order-count-column,
.leroy-order-column,
.leroy-incident-column,
.leroy-incident-rate-column { min-width: 88px; text-align: right; white-space: nowrap; }
.leroy-incident-column strong,
.leroy-incident-rate-column strong { color: #b42318; }

.event-order-page { display: grid; gap: 14px; }
.event-order-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0; }
.event-order-head h2 { margin: 0; font-size: 20px; }
.event-order-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.event-order-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.event-order-metrics .order-metric { min-height: 100px; }
.event-order-filters { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); flex-wrap: wrap; }

@media (max-width: 860px) {
  .event-order-head { align-items: flex-start; flex-direction: column; }
  .event-order-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .event-order-metrics { grid-template-columns: 1fr; }
}
.personal-version-updated, .personal-version-source { display: block; margin-top: 4px; font-size: 12px; }
.claim-product-preview { display: grid; gap: 5px; padding: 10px; border: 1px solid #d9e7e5; background: #f7fbfa; }
.compact-modal { width: min(520px, calc(100vw - 32px)); }
.personal-version-owner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #d9e7e5; }
.personal-version-owner span { color: #587276; font-size: 13px; }
.personal-version-image { display: block; width: min(260px, 100%); max-height: 260px; object-fit: contain; border: 1px solid #d9e7e5; background: #f7fbfa; }
.personal-version-title { display: block; margin-top: 4px; font-size: 16px; color: #173a3a; }
.personal-version-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px; border: 1px solid #d9e7e5; background: #f8fbfb; }
.personal-version-data div { min-width: 0; }
.personal-version-data span { display: block; color: #587276; font-size: 12px; }
.personal-version-data strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #173a3a; font-size: 13px; }
.product-language-settings { display: grid; gap: 10px; }
.product-language-settings small { display: block; margin-top: 3px; color: #587276; }
.product-language-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px 12px; }
.product-language-options .checkbox-line { margin: 0; }
.localized-title-section, .localized-description-section { display: grid; gap: 10px; padding: 12px; border: 1px solid #d9e7e5; background: #f8fbfb; }
.localized-title-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.localized-title-head span, .localized-title-head small { display: block; }
.localized-title-head span { font-weight: 700; color: #173a3a; }
.localized-title-head small { margin-top: 3px; color: #587276; }
.localized-title-list, .localized-description-list { display: grid; gap: 8px; }
.localized-language-selector { display: grid; gap: 10px; min-width: 0; }
.localized-language-tabs { display: flex; gap: 7px; min-width: 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.localized-language-tab { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border: 1px solid #c8d7d9; border-radius: 7px; background: #fff; color: #47666a; font-size: 13px; font-weight: 600; white-space: nowrap; }
.localized-language-tab:hover { border-color: #70a6a2; background: #f2f9f8; }
.localized-language-tab.active { border-color: #158a7d; background: #e8f6f2; color: #087f74; box-shadow: inset 0 -2px 0 #087f74; }
.localized-language-panels { min-width: 0; }
.localized-language-panel[hidden] { display: none; }
.localized-description-section [data-localized-language-tabs] { display: none; }
.localized-title-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(64px, max-content) max-content; gap: 8px; align-items: center; }
.localized-description-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) max-content; gap: 8px; align-items: start; }
.localized-title-row input, .localized-description-row textarea { min-width: 0; }
.localized-title-language { color: #365e62; font-size: 13px; font-weight: 700; }
.localized-title-count { color: #587276; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.localized-title-source { color: #087f74; font-size: 13px; font-weight: 600; white-space: nowrap; }
.localized-title-error { margin: 0; color: var(--danger); font-size: 13px; line-height: 1.45; }
.localized-description-detail-row strong { white-space: pre-wrap; }
.pallet-source-section { display: grid; gap: 12px; padding: 12px; border: 1px solid #d9e7e5; background: #f8fbfb; }
.source-stock-cell { display: grid; gap: 3px; min-width: 112px; }
.source-stock-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-stock-cell strong { color: #087f74; font-size: 12px; }
.pallet-shipping-fee-list > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pallet-shipping-fee-list small { color: #587276; font-size: 12px; font-weight: 400; }

.as-ticket-page { display: grid; gap: 14px; }
.dingtalk-robot-list { display: grid; gap: 10px; }
.dingtalk-robot-setting { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); background: var(--soft); }
.dingtalk-robot-setting strong, .dingtalk-robot-setting small { display: block; }
.dingtalk-robot-setting small { margin-top: 3px; color: var(--muted); }
.dingtalk-robot-fields { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr) max-content; gap: 8px 12px; align-items: end; }
.dingtalk-robot-fields label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 13px; }
.dingtalk-robot-fields input { min-width: 0; }
.dingtalk-robot-test { min-height: 36px; white-space: nowrap; }
.dingtalk-robot-hint { grid-column: 1 / 3; font-size: 12px; line-height: 1.4; }
.sku-order-alert-setting { display: grid; gap: 10px; }
.sku-order-alert-setting-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sku-order-alert-setting-head strong, .sku-order-alert-setting-head small { display: block; }
.sku-order-alert-setting-head small { margin-top: 4px; color: var(--muted); line-height: 1.55; max-width: 780px; }
.sku-order-alert-setting-actions, .sku-order-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-order-alert-setting-actions { flex: 0 0 auto; }
.sku-order-alert-rule-list { display: grid; gap: 10px; }
.sku-order-alert-rule { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); background: var(--soft); }
.sku-order-alert-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sku-order-alert-rule-head strong, .sku-order-alert-rule-head small { display: block; }
.sku-order-alert-rule-head small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.sku-order-alert-enabled { white-space: nowrap; }
.sku-order-alert-fields { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(150px, .5fr) minmax(240px, 1.2fr); gap: 8px 12px; align-items: end; }
.sku-order-alert-fields label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 13px; }
.sku-order-alert-fields input { min-width: 0; }
.sku-order-alert-webhook { grid-column: span 2; }
.sku-order-alert-error { color: var(--danger); font-size: 12px; line-height: 1.45; }
.arkswift-open-api-setting { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); background: var(--soft); }
.arkswift-open-api-setting-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.arkswift-open-api-setting-head strong, .arkswift-open-api-setting-head small { display: block; }
.arkswift-open-api-setting-head small { margin-top: 3px; color: var(--muted); }
.arkswift-open-api-credential-list { display: grid; gap: 8px; }
.arkswift-open-api-credential-row { display: grid; grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.6fr) max-content; gap: 8px 12px; align-items: end; }
.arkswift-open-api-credential-row label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 13px; }
.arkswift-open-api-credential-row input, .arkswift-open-api-credential-row textarea { min-width: 0; width: 100%; }
.arkswift-open-api-credential-row textarea { min-height: 78px; resize: vertical; }
.arkswift-open-api-credential-row button { min-height: 36px; white-space: nowrap; }
.arkswift-open-api-empty { color: var(--muted); font-size: 13px; }
.arkswift-open-api-concurrency { display: grid; gap: 5px; width: min(220px, 100%); color: var(--muted); font-size: 13px; }
.arkswift-product-sync-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; padding-top: 2px; }
.arkswift-product-sync-copy { display: grid; gap: 3px; }
.arkswift-product-sync-copy small { color: var(--muted); line-height: 1.5; }
.arkswift-product-sync-actions { display: flex; gap: 8px; align-items: center; }
.arkswift-product-sync-actions button { white-space: nowrap; min-height: 36px; }
.arkswift-product-sync-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 13px; }
.arkswift-product-sync-status small { flex-basis: 100%; line-height: 1.45; }
.arkswift-product-sync-status .sync-errors { color: var(--danger); }
.arkswift-product-inspection-panel { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.arkswift-product-inspection-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.arkswift-product-inspection-form label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.arkswift-product-inspection-form textarea { min-height: 56px; resize: vertical; }
.arkswift-product-inspection-form button { min-height: 36px; white-space: nowrap; }
.arkswift-product-inspection-results { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.arkswift-product-inspection-results table { min-width: 900px; }
.arkswift-product-inspection-results small { display: block; margin-top: 3px; color: var(--muted); }
.sync-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.sync-status.running { color: #956500; border-color: #dfbd65; background: #fff7d7; }
.sync-status.completed { color: #117a63; border-color: #83c8b8; background: #eaf9f4; }
.sync-status.failed { color: #b44343; border-color: #e7aaaa; background: #fff0f0; }
:root[data-theme="dark"] .arkswift-open-api-setting { border-color: #3b5d5c; background: #1f302f; }
.as-ticket-account { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.5fr) max-content; gap: 12px; align-items: end; padding: 12px 14px; border: 1px solid var(--line); background: var(--soft); }
.as-ticket-account-meta { display: grid; gap: 3px; }
.as-ticket-account-meta strong { color: var(--text); }
.as-ticket-account-meta small, .as-ticket-login-state { color: var(--muted); }
.as-ticket-local-agent { display: grid; grid-template-columns: minmax(220px, 1fr) max-content; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #83c8b8; background: #eef8f2; }
.as-ticket-agent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.as-ticket-agent-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--surface); text-decoration: none; white-space: nowrap; }
.as-ticket-agent-pairing { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; align-items: center; }
.as-ticket-agent-pairing input { min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.as-ticket-agent-pairing small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.as-ticket-account label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 13px; }
.as-ticket-account-actions { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
.as-ticket-account button { min-height: 36px; white-space: nowrap; }
.as-ticket-login-state { grid-column: 2 / -1; font-size: 12px; }
.as-ticket-login-qr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 760px; padding: 16px; border: 1px solid var(--line); background: var(--soft); }
.as-ticket-login-qr img { display: block; width: min(100%, 720px); height: auto; max-height: 680px; margin: 0 auto; object-fit: contain; background: #fff; }
.as-ticket-login-qr strong, .as-ticket-login-qr small { display: block; }
.as-ticket-login-qr small { margin-top: 6px; color: var(--muted); line-height: 1.5; }
.as-ticket-login-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.as-ticket-create { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); background: var(--soft); }
.as-ticket-create textarea { min-height: 88px; resize: vertical; }
.as-ticket-route-preview { min-height: 36px; padding: 9px 10px; border-left: 3px solid var(--accent); background: #fff; color: var(--muted); }
.as-ticket-routes { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.as-ticket-routes summary { padding: 11px 0; cursor: pointer; font-weight: 700; }
.as-ticket-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.as-ticket-table th, .as-ticket-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.as-ticket-table th { white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 700; }
.as-ticket-table td > strong, .as-ticket-table td > small { display: block; }
.as-ticket-table td > small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.as-ticket-route-table { min-width: 760px; }
.as-ticket-route-table input { min-width: 150px; }
.as-ticket-list-wrap { border-top: 1px solid var(--line); }
.as-ticket-rma-cell { min-width: 124px; }
.as-ticket-rma-cell button { display: block; width: 100%; min-height: 30px; margin-bottom: 6px; padding: 5px 8px; font-size: 12px; }
.as-ticket-thread { min-width: 280px; }
.as-ticket-thread summary { cursor: pointer; color: var(--accent-strong); white-space: nowrap; }
.as-ticket-message-list { display: grid; gap: 8px; max-width: 420px; margin: 9px 0; }
.as-ticket-message { padding: 8px; border-left: 3px solid var(--line-strong); background: #f8fafb; }
.as-ticket-message.created { border-left-color: var(--accent); }
.as-ticket-message > div { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.as-ticket-message > div strong { color: var(--text); }
.as-ticket-message p { margin: 6px 0 0; line-height: 1.5; }
.as-ticket-reply-form { display: grid; gap: 8px; margin-top: 10px; }
.as-ticket-reply-form textarea { min-height: 76px; resize: vertical; }
.as-ticket-reply-form button { justify-self: start; }

:root[data-theme="dark"] .personal-library-bar,
:root[data-theme="dark"] .personal-version-list,
:root[data-theme="dark"] .claim-product-preview,
:root[data-theme="dark"] .personal-version-owner,
:root[data-theme="dark"] .personal-version-image {
  border-color: #3b5d5c;
  background: #1f302f;
}

:root[data-theme="dark"] .personal-version-list strong { color: #c1e4de; }
:root[data-theme="dark"] .personal-version-list em { color: #d5e3e0; }
:root[data-theme="dark"] .personal-version-list button:hover { background: #294440; }
:root[data-theme="dark"] .personal-version-title { color: #e2f2ee; }
:root[data-theme="dark"] .personal-version-data { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .personal-version-data strong { color: #e2f2ee; }
:root[data-theme="dark"] .product-language-settings small { color: #a8c5c0; }
:root[data-theme="dark"] .localized-title-section, :root[data-theme="dark"] .localized-description-section { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .localized-title-head span { color: #e2f2ee; }
:root[data-theme="dark"] .localized-title-head small { color: #a8c5c0; }
:root[data-theme="dark"] .localized-language-tab { border-color: #4b6e6a; background: #243a38; color: #c0d9d5; }
:root[data-theme="dark"] .localized-language-tab:hover { border-color: #70a6a2; background: #294542; }
:root[data-theme="dark"] .localized-language-tab.active { border-color: #5db9a9; background: #214c46; color: #9ee5d9; box-shadow: inset 0 -2px 0 #5db9a9; }
:root[data-theme="dark"] .localized-title-language { color: #d2e8e4; }
:root[data-theme="dark"] .localized-title-error { color: #ffb0b8; }
:root[data-theme="dark"] .pallet-source-section { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .source-stock-cell strong { color: #79d5c8; }
:root[data-theme="dark"] .pallet-shipping-fee-list small { color: #a8c5c0; }
:root[data-theme="dark"] .as-ticket-create { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .dingtalk-robot-setting { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .sku-order-alert-rule { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .as-ticket-account { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .as-ticket-local-agent { border-color: #3b8570; background: #1d342c; }
:root[data-theme="dark"] .as-ticket-login-qr { border-color: #3b5d5c; background: #1f302f; }
:root[data-theme="dark"] .as-ticket-route-preview { background: #243b39; color: #c4d8d4; }
:root[data-theme="dark"] .as-ticket-message { background: #1f302f; border-left-color: #557775; }
:root[data-theme="dark"] .as-ticket-message > div strong { color: #e2f2ee; }

:root[data-theme="dark"] .dashboard-task-workspace {
  border-color: #385c5b;
  background: #1c2b2e;
  box-shadow: none;
}

:root[data-theme="dark"] .dashboard-task-workspace-head,
:root[data-theme="dark"] .dashboard-task-member-copy {
  border-color: #345352;
  background: #203336;
}

:root[data-theme="dark"] .dashboard-task-form,
:root[data-theme="dark"] .dashboard-task-item {
  border-color: #345352;
}

:root[data-theme="dark"] .dashboard-task-workspace-head h3,
:root[data-theme="dark"] .dashboard-task-form-head h4,
:root[data-theme="dark"] .dashboard-task-list-head h4,
:root[data-theme="dark"] .dashboard-task-member-copy strong,
:root[data-theme="dark"] .dashboard-task-item h4 {
  color: #e0eceb;
}

:root[data-theme="dark"] .dashboard-task-form-head span,
:root[data-theme="dark"] .dashboard-task-member-copy span,
:root[data-theme="dark"] .dashboard-task-form label,
:root[data-theme="dark"] .dashboard-task-user-picker legend,
:root[data-theme="dark"] .dashboard-task-item-head > div > span,
:root[data-theme="dark"] .dashboard-task-progress-copy,
:root[data-theme="dark"] .dashboard-task-checkin-time {
  color: #a7c1be;
}

:root[data-theme="dark"] .dashboard-task-description { color: #c1d2d0; }
:root[data-theme="dark"] .dashboard-task-progress { background: #304846; }
:root[data-theme="dark"] .dashboard-task-user-list label { border-color: #3b5f5d; background: #243a3a; color: #cce0dd; }
:root[data-theme="dark"] .dashboard-task-assignees span { background: #304644; color: #bad0cc; }
:root[data-theme="dark"] .dashboard-task-assignees span.checked { background: #25483d; color: #9de1bb; }
:root[data-theme="dark"] .dashboard-task-checkin-status { background: #24493d; color: #a1dfbc; }

@media (max-width: 760px) {
  .personal-library-bar { align-items: stretch; }
  .personal-library-bar label { min-width: 100%; }
  .personal-library-bar button { flex: 1 1 auto; }
  .personal-version-list button { grid-template-columns: 1fr; gap: 2px; }
  .personal-version-data { grid-template-columns: 1fr; }
  .localized-title-row, .localized-description-row { grid-template-columns: 1fr; }
  .as-ticket-create { padding: 10px; }
  .dingtalk-robot-fields { grid-template-columns: 1fr; }
  .dingtalk-robot-test { width: 100%; }
  .dingtalk-robot-hint { grid-column: auto; }
  .sku-order-alert-setting-head, .sku-order-alert-rule-head { align-items: stretch; flex-direction: column; }
  .sku-order-alert-setting-actions, .sku-order-alert-actions { display: grid; grid-template-columns: 1fr; }
  .sku-order-alert-fields { grid-template-columns: 1fr; }
  .sku-order-alert-webhook { grid-column: auto; }
  .arkswift-open-api-setting-head { align-items: stretch; flex-direction: column; }
  .arkswift-open-api-setting-head button { width: 100%; }
  .arkswift-open-api-credential-row { grid-template-columns: 1fr; }
  .arkswift-open-api-credential-row button { width: 100%; }
  .arkswift-product-sync-panel { grid-template-columns: 1fr; }
  .arkswift-product-sync-actions { display: grid; grid-template-columns: 1fr; }
  .arkswift-product-sync-actions button { width: 100%; }
  .arkswift-product-inspection-form { grid-template-columns: 1fr; }
  .arkswift-product-inspection-form button { width: 100%; }
  .as-ticket-account { grid-template-columns: 1fr; align-items: stretch; }
  .as-ticket-local-agent { grid-template-columns: 1fr; align-items: stretch; }
  .as-ticket-agent-actions { justify-content: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-ticket-agent-actions button, .as-ticket-agent-actions a { width: 100%; min-width: 0; padding: 0 8px; }
  .as-ticket-account-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-ticket-account-actions button { width: 100%; }
  .as-ticket-login-state { grid-column: auto; }
  .as-ticket-login-qr { justify-items: center; max-width: none; }
  .as-ticket-login-qr > div { width: 100%; text-align: center; }
  .as-ticket-login-modes { justify-content: center; }
}

/* Bento grid visual system: shared shell and operational surfaces. */
:root {
  --bento-canvas: #eef2f5;
  --bento-surface: #ffffff;
  --bento-surface-muted: #f8fafb;
  --bento-border: #dce4ea;
  --bento-shadow: 0 10px 24px rgba(24, 39, 54, 0.06);
  --bento-radius: 8px;
  --bento-gap: 12px;
}

body {
  background: var(--bento-canvas);
}

.bento-shell {
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--bento-gap);
  padding: var(--bento-gap);
  background: var(--bento-canvas);
}

.bento-shell .sidebar,
.bento-shell .topbar,
.bento-shell .content {
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  background: var(--bento-surface);
  box-shadow: var(--bento-shadow);
}

.bento-shell .sidebar {
  border-right: 1px solid var(--bento-border);
}

.bento-shell .brand {
  padding: 18px;
  border-bottom-color: var(--bento-border);
}

.bento-shell .brand-logo {
  width: 38px;
  height: 38px;
  border: 1px solid #dce7e8;
  background: #f4fbfb;
}

.bento-shell .brand-title {
  color: #1c2e3b;
  font-size: 16px;
}

.bento-shell .nav {
  gap: 3px;
  padding: 12px;
}

.bento-shell .nav button {
  position: relative;
  min-height: 35px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #536474;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.bento-shell .nav button:hover {
  background: #f1f6f7;
  border-color: #e0eaeb;
  color: #1b6263;
}

.bento-shell .nav button.active {
  border-color: #b9dfdf;
  background: #e7f5f4;
  color: #0b7470;
  box-shadow: inset 3px 0 #0f8b8d;
}

.bento-shell .nav-group-title {
  margin-top: 4px;
  color: #7b8997;
}

.bento-shell .account {
  padding: 14px;
  border-top-color: var(--bento-border);
  background: var(--bento-surface-muted);
}

.bento-shell .theme-toggle {
  padding: 8px 9px;
  border: 1px solid var(--bento-border);
  border-radius: 6px;
  background: #fff;
}

.bento-shell .main {
  gap: var(--bento-gap);
  overflow: hidden;
}

.bento-shell .topbar {
  min-height: 62px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--bento-border);
}

.bento-shell .topbar h2 {
  color: #1b2b38;
  font-size: 18px;
}

.bento-shell .content {
  padding: 16px;
  overflow: auto;
  background: var(--bento-surface-muted);
}

.bento-shell button,
.bento-shell input,
.bento-shell select,
.bento-shell textarea {
  border-color: #ccd8e0;
  border-radius: 6px;
}

.bento-shell button {
  background: #fff;
}

.bento-shell button:hover:not(:disabled) {
  border-color: #62aead;
  background: #f6fbfb;
}

.bento-shell button.primary {
  border-color: #0f8b8d;
  background: #0f8b8d;
  box-shadow: none;
}

.bento-shell button.primary:hover:not(:disabled) {
  border-color: #087779;
  background: #087779;
}

.bento-shell input:focus,
.bento-shell select:focus,
.bento-shell textarea:focus {
  border-color: #37a39e;
  outline: 3px solid rgba(55, 163, 158, 0.13);
  outline-offset: 0;
}

.bento-shell .section,
.bento-shell .dashboard-panel,
.bento-shell .dashboard-store-zone,
.bento-shell .dashboard-filterbar,
.bento-shell .dashboard-task-workspace,
.bento-shell .order-workbench,
.bento-shell .message-center-metric,
.bento-shell .message-workbench,
.bento-shell .message-conversation-panel,
.bento-shell .message-thread-panel,
.bento-shell .inbox-list-panel,
.bento-shell .inbox-thread-panel,
.bento-shell .inbox-context-panel {
  border-color: var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--bento-shadow);
}

.bento-shell .section-head,
.bento-shell .dashboard-panel-head,
.bento-shell .dashboard-zone-head,
.bento-shell .order-workbench-head,
.bento-shell .message-panel-head,
.bento-shell .message-thread-panel-head,
.bento-shell .inbox-thread-head,
.bento-shell .inbox-context-head {
  border-bottom-color: var(--bento-border);
  background: #fbfcfd;
}

.bento-shell .section-body {
  padding: 16px;
}

.bento-shell .dashboard-light-page {
  gap: var(--bento-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bento-shell .dashboard-light-page .dashboard-light-head,
.bento-shell .dashboard-filterbar,
.bento-shell .dashboard-store-zone {
  padding: 16px;
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  background: var(--bento-surface);
  box-shadow: var(--bento-shadow);
}

.bento-shell .dashboard-light-page .dashboard-metrics {
  gap: var(--bento-gap);
}

.bento-shell .dashboard-light-page .dashboard-metric {
  min-height: 112px;
  border-color: var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--bento-shadow);
}

.bento-shell .dashboard-command-layout {
  gap: var(--bento-gap);
}

.bento-shell .dashboard-task-workspace {
  align-self: stretch;
  background: var(--bento-surface);
}

.bento-shell .dashboard-task-workspace-head,
.bento-shell .dashboard-task-member-copy {
  background: #fbfcfd;
}

.bento-shell .dashboard-store-run {
  border-color: #e4eaee;
  border-radius: 6px;
  background: #fff;
}

.bento-shell .workspace {
  gap: var(--bento-gap);
}

.bento-shell .order-workbench {
  gap: 0;
  background: var(--bento-surface);
}

.bento-shell .order-platform-sidebar {
  background: #fbfcfd;
  border-right-color: var(--bento-border);
}

.bento-shell .order-platform-item {
  border-radius: 6px;
}

.bento-shell .order-platform-item.active {
  border-color: #b9dfdf;
  background: #e7f5f4;
  color: #0b7470;
}

.bento-shell .order-record-table th {
  background: #eff7f7;
  color: #315d62;
}

.bento-shell .order-record-table tbody tr:hover td,
.bento-shell .product-table tr:hover td {
  background: #f5fbfa;
}

.bento-shell .message-inbox-layout {
  gap: var(--bento-gap);
}

.bento-shell .inbox-list-panel,
.bento-shell .inbox-thread-panel,
.bento-shell .inbox-context-panel {
  overflow: hidden;
  background: var(--bento-surface);
}

.bento-shell .inbox-conversation.selected,
.bento-shell .message-conversation-item.selected {
  background: #e7f5f4;
  box-shadow: inset 3px 0 #0f8b8d;
}

.bento-shell .modal {
  border-color: var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow: 0 24px 60px rgba(23, 37, 50, 0.2);
}

.bento-shell .back-to-top {
  border-color: #b8d7d5;
  border-radius: 8px;
  background: #fff;
}

:root[data-theme="dark"] {
  --bento-canvas: #182128;
  --bento-surface: #202b33;
  --bento-surface-muted: #1b252d;
  --bento-border: #354752;
  --bento-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .bento-shell {
  background: var(--bento-canvas);
}

:root[data-theme="dark"] .bento-shell .sidebar,
:root[data-theme="dark"] .bento-shell .topbar,
:root[data-theme="dark"] .bento-shell .content,
:root[data-theme="dark"] .bento-shell .section,
:root[data-theme="dark"] .bento-shell .dashboard-panel,
:root[data-theme="dark"] .bento-shell .dashboard-store-zone,
:root[data-theme="dark"] .bento-shell .dashboard-filterbar,
:root[data-theme="dark"] .bento-shell .dashboard-task-workspace,
:root[data-theme="dark"] .bento-shell .order-workbench,
:root[data-theme="dark"] .bento-shell .inbox-list-panel,
:root[data-theme="dark"] .bento-shell .inbox-thread-panel,
:root[data-theme="dark"] .bento-shell .inbox-context-panel {
  border-color: var(--bento-border);
  background: var(--bento-surface);
}

:root[data-theme="dark"] .bento-shell .content,
:root[data-theme="dark"] .bento-shell .dashboard-light-page {
  background: var(--bento-surface-muted);
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page {
  border: 0;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-light-head,
:root[data-theme="dark"] .bento-shell .dashboard-filterbar,
:root[data-theme="dark"] .bento-shell .dashboard-store-zone,
:root[data-theme="dark"] .bento-shell .section-head,
:root[data-theme="dark"] .bento-shell .dashboard-panel-head,
:root[data-theme="dark"] .bento-shell .dashboard-zone-head,
:root[data-theme="dark"] .bento-shell .order-workbench-head,
:root[data-theme="dark"] .bento-shell .inbox-thread-head,
:root[data-theme="dark"] .bento-shell .inbox-context-head,
:root[data-theme="dark"] .bento-shell .dashboard-task-workspace-head,
:root[data-theme="dark"] .bento-shell .dashboard-task-member-copy,
:root[data-theme="dark"] .bento-shell .order-platform-sidebar {
  border-color: var(--bento-border);
  background: #202c34;
}

:root[data-theme="dark"] .bento-shell .brand-title,
:root[data-theme="dark"] .bento-shell .topbar h2 {
  color: var(--text);
}

:root[data-theme="dark"] .bento-shell .nav button {
  color: #a9b8c5;
}

:root[data-theme="dark"] .bento-shell .nav button:hover {
  border-color: #3c515c;
  background: #283740;
  color: #c8ece7;
}

:root[data-theme="dark"] .bento-shell .nav button.active,
:root[data-theme="dark"] .bento-shell .order-platform-item.active,
:root[data-theme="dark"] .bento-shell .inbox-conversation.selected,
:root[data-theme="dark"] .bento-shell .message-conversation-item.selected {
  border-color: #3b7776;
  background: #223f40;
  color: #b6e5df;
  box-shadow: inset 3px 0 #68c5bc;
}

:root[data-theme="dark"] .bento-shell .theme-toggle,
:root[data-theme="dark"] .bento-shell button,
:root[data-theme="dark"] .bento-shell .dashboard-store-run {
  border-color: #3a4c57;
  background: #26333c;
}

:root[data-theme="dark"] .bento-shell .order-record-table th {
  background: #223a3d;
  color: #b4d7d4;
}

.login-page {
  background: var(--bento-canvas);
}

.login-shell {
  gap: var(--bento-gap);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.login-brand-panel,
.login-panel {
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow: var(--bento-shadow);
}

.login-panel {
  background: var(--bento-surface);
}

.modal {
  border-color: var(--bento-border);
  border-radius: var(--bento-radius);
  box-shadow: 0 24px 60px rgba(23, 37, 50, 0.2);
}

.back-to-top {
  border-color: #b8d7d5;
  border-radius: 8px;
  background: #fff;
}

:root[data-theme="dark"] .login-page,
:root[data-theme="dark"] .login-shell {
  background: var(--bento-canvas);
}

:root[data-theme="dark"] .login-brand-panel,
:root[data-theme="dark"] .login-panel,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .back-to-top {
  border-color: var(--bento-border);
}

@media (max-width: 980px) {
  .bento-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: 8px;
  }

  .bento-shell .sidebar,
  .bento-shell .main {
    min-height: auto;
  }

  .bento-shell .sidebar {
    margin-bottom: 8px;
  }

  .bento-shell .main {
    display: grid;
    gap: 8px;
    overflow: visible;
  }

  .bento-shell .content {
    padding: 10px;
    overflow: visible;
  }

  .bento-shell .dashboard-command-layout,
  .bento-shell .workspace,
  .bento-shell .message-inbox-layout {
    gap: 8px;
  }
}

/* Pastel bento profile: inspired by a physical compartment tray while keeping
   dense operational views calm and scannable. */
:root {
  --bento-canvas: #f7f2ea;
  --bento-surface: #fffdfa;
  --bento-surface-muted: #fcf7f0;
  --bento-border: #e7d2bc;
  --bento-shadow: 0 8px 18px rgba(112, 78, 49, 0.09);
  --bento-radius: 8px;
  --bento-gap: 12px;
  --bento-ink: #3e3933;
  --bento-peach: #fff0e5;
  --bento-peach-border: #efc9aa;
  --bento-sky: #eaf5ff;
  --bento-sky-border: #bddcef;
  --bento-mint: #eaf7ef;
  --bento-mint-border: #bfe0c9;
  --bento-butter: #fff6d9;
  --bento-butter-border: #e8d78d;
}

body,
.bento-shell,
.login-page {
  background: var(--bento-canvas);
}

.bento-shell .sidebar,
.bento-shell .topbar,
.bento-shell .content,
.login-panel,
.modal {
  border-color: var(--bento-border);
  background: var(--bento-surface);
  box-shadow: var(--bento-shadow);
}

.bento-shell .sidebar,
.bento-shell .topbar {
  background: #fffaf3;
}

.bento-shell .brand {
  border-bottom-color: #ecdcc9;
}

.bento-shell .brand-logo {
  border-color: var(--bento-peach-border);
  background: var(--bento-peach);
}

.bento-shell .brand-title,
.bento-shell .topbar h2 {
  color: var(--bento-ink);
}

.bento-shell .nav button {
  color: #695f55;
}

.bento-shell .nav button:hover {
  border-color: var(--bento-sky-border);
  background: var(--bento-sky);
  color: #426a7f;
}

.bento-shell .nav button.active {
  border-color: var(--bento-mint-border);
  background: var(--bento-mint);
  color: #326852;
  box-shadow: inset 3px 0 #6fb58b;
}

.bento-shell .account {
  border-top-color: #ecdcc9;
  background: #fff8ef;
}

.bento-shell .theme-toggle,
.bento-shell button,
.bento-shell input,
.bento-shell select,
.bento-shell textarea {
  border-color: #dfcbb8;
}

.bento-shell button {
  color: #554b42;
  background: #fffdf9;
}

.bento-shell button:hover:not(:disabled) {
  border-color: #e5b895;
  background: var(--bento-peach);
}

.bento-shell button.primary {
  border-color: #d77960;
  background: #d77960;
  color: #fff;
}

.bento-shell button.primary:hover:not(:disabled) {
  border-color: #bd604e;
  background: #bd604e;
}

.bento-shell input:focus,
.bento-shell select:focus,
.bento-shell textarea:focus {
  border-color: #d99b61;
  outline-color: rgba(217, 155, 97, 0.18);
}

.bento-shell .content {
  background: #fbf6ef;
}

.bento-shell .section,
.bento-shell .dashboard-panel,
.bento-shell .dashboard-store-zone,
.bento-shell .dashboard-filterbar,
.bento-shell .dashboard-task-workspace,
.bento-shell .order-workbench,
.bento-shell .message-center-metric,
.bento-shell .message-workbench,
.bento-shell .message-conversation-panel,
.bento-shell .message-thread-panel,
.bento-shell .inbox-list-panel,
.bento-shell .inbox-thread-panel,
.bento-shell .inbox-context-panel {
  border-color: var(--bento-border);
  background: var(--bento-surface);
  box-shadow: var(--bento-shadow);
}

.bento-shell .section-head,
.bento-shell .dashboard-panel-head,
.bento-shell .dashboard-zone-head,
.bento-shell .order-workbench-head,
.bento-shell .message-panel-head,
.bento-shell .message-thread-panel-head,
.bento-shell .inbox-thread-head,
.bento-shell .inbox-context-head {
  border-bottom-color: #ecdcc9;
  background: #fff9f2;
}

.bento-shell .dashboard-light-page .dashboard-light-head {
  border-color: var(--bento-sky-border);
  background: var(--bento-sky);
}

.bento-shell .dashboard-filterbar {
  border-color: var(--bento-butter-border);
  background: var(--bento-butter);
}

.bento-shell .dashboard-store-zone {
  border-color: var(--bento-mint-border);
  background: var(--bento-mint);
}

.bento-shell .dashboard-light-page .dashboard-metric {
  border-color: var(--bento-sky-border);
  background: var(--bento-sky);
  box-shadow: 0 7px 16px rgba(77, 119, 151, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(2n) {
  border-color: var(--bento-peach-border);
  background: var(--bento-peach);
  box-shadow: 0 7px 16px rgba(150, 96, 60, 0.07);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(3n) {
  border-color: var(--bento-mint-border);
  background: var(--bento-mint);
  box-shadow: 0 7px 16px rgba(67, 125, 90, 0.07);
}

.bento-shell .dashboard-task-workspace {
  border-color: var(--bento-peach-border);
}

.bento-shell .dashboard-task-workspace-head,
.bento-shell .dashboard-task-member-copy {
  background: #fff7f0;
}

.bento-shell .dashboard-store-run {
  border-color: #d9e5d3;
  background: #f8fcf7;
}

.bento-shell .order-platform-sidebar {
  background: #fff9f2;
  border-right-color: #ecdcc9;
}

.bento-shell .order-platform-item.active,
.bento-shell .inbox-conversation.selected,
.bento-shell .message-conversation-item.selected {
  border-color: var(--bento-mint-border);
  background: var(--bento-mint);
  color: #326852;
  box-shadow: inset 3px 0 #6fb58b;
}

.bento-shell .order-record-table th {
  background: #eaf6f7;
  color: #43656a;
}

.bento-shell .order-record-table tbody tr:hover td,
.bento-shell .product-table tr:hover td {
  background: #fff7ed;
}

.login-brand-panel {
  border-color: var(--bento-sky-border);
  background: #eaf5ff;
  box-shadow: var(--bento-shadow);
}

.back-to-top {
  border-color: var(--bento-peach-border);
  background: #fff8ef;
  box-shadow: 0 6px 14px rgba(112, 78, 49, 0.12);
}

:root[data-theme="dark"] {
  --bento-canvas: #262521;
  --bento-surface: #302d28;
  --bento-surface-muted: #292721;
  --bento-border: #544b41;
  --bento-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .bento-shell,
:root[data-theme="dark"] .login-page,
:root[data-theme="dark"] .login-shell {
  background: var(--bento-canvas);
}

:root[data-theme="dark"] .bento-shell .sidebar,
:root[data-theme="dark"] .bento-shell .topbar,
:root[data-theme="dark"] .bento-shell .content,
:root[data-theme="dark"] .bento-shell .section,
:root[data-theme="dark"] .bento-shell .dashboard-panel,
:root[data-theme="dark"] .bento-shell .dashboard-store-zone,
:root[data-theme="dark"] .bento-shell .dashboard-filterbar,
:root[data-theme="dark"] .bento-shell .dashboard-task-workspace,
:root[data-theme="dark"] .bento-shell .order-workbench,
:root[data-theme="dark"] .bento-shell .inbox-list-panel,
:root[data-theme="dark"] .bento-shell .inbox-thread-panel,
:root[data-theme="dark"] .bento-shell .inbox-context-panel,
:root[data-theme="dark"] .login-panel,
:root[data-theme="dark"] .modal {
  border-color: var(--bento-border);
  background: var(--bento-surface);
}

:root[data-theme="dark"] .bento-shell .content,
:root[data-theme="dark"] .bento-shell .dashboard-light-page {
  background: var(--bento-surface-muted);
}

:root[data-theme="dark"] .bento-shell .sidebar,
:root[data-theme="dark"] .bento-shell .topbar,
:root[data-theme="dark"] .bento-shell .section-head,
:root[data-theme="dark"] .bento-shell .dashboard-panel-head,
:root[data-theme="dark"] .bento-shell .dashboard-zone-head,
:root[data-theme="dark"] .bento-shell .order-workbench-head,
:root[data-theme="dark"] .bento-shell .inbox-thread-head,
:root[data-theme="dark"] .bento-shell .inbox-context-head,
:root[data-theme="dark"] .bento-shell .dashboard-task-workspace-head,
:root[data-theme="dark"] .bento-shell .dashboard-task-member-copy,
:root[data-theme="dark"] .bento-shell .order-platform-sidebar {
  background: #34312b;
}

:root[data-theme="dark"] .bento-shell .nav button:hover {
  border-color: #5b6f70;
  background: #334448;
  color: #d7efeb;
}

:root[data-theme="dark"] .bento-shell .nav button.active,
:root[data-theme="dark"] .bento-shell .order-platform-item.active,
:root[data-theme="dark"] .bento-shell .inbox-conversation.selected,
:root[data-theme="dark"] .bento-shell .message-conversation-item.selected {
  border-color: #557565;
  background: #294238;
  color: #c5e8d1;
  box-shadow: inset 3px 0 #83c299;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-light-head {
  border-color: #526a7b;
  background: #2c3c48;
}

:root[data-theme="dark"] .bento-shell .dashboard-filterbar {
  border-color: #6c613a;
  background: #3d3825;
}

:root[data-theme="dark"] .bento-shell .dashboard-store-zone {
  border-color: #4d6e57;
  background: #293c30;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric {
  border-color: #4d6272;
  background: #2b3b47;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(2n) {
  border-color: #765846;
  background: #45342c;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(3n) {
  border-color: #4c6c57;
  background: #2c4033;
}

/* Dashboard tray layout: wide overview board, six concise metrics and a
   dedicated task compartment, matching the supplied visual reference. */
.bento-shell {
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.bento-shell .sidebar {
  border: 0;
  border-right: 1px solid #eadbc8;
  border-radius: 0;
  background: #fffdf8;
  box-shadow: none;
}

.bento-shell .topbar {
  min-height: 62px;
  margin: 10px 16px 0;
  border-color: #eadbc8;
  background: #fffefb;
  box-shadow: 0 4px 12px rgba(112, 78, 49, 0.07);
}

.bento-shell .content {
  padding: 20px 18px 28px;
  border: 0;
  border-radius: 0;
  background: #fffdf8;
  box-shadow: none;
}

.bento-shell .dashboard-light-page {
  gap: 16px;
}

.bento-shell .dashboard-light-page .dashboard-light-head {
  min-height: 114px;
  padding: 20px 24px;
  border: 1px solid #a6c7dc;
  border-radius: var(--bento-radius);
  background: #eaf6fd;
  box-shadow: 0 7px 16px rgba(77, 119, 151, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-eyebrow {
  color: #5f869a;
  font-weight: 700;
}

.bento-shell .dashboard-light-page .dashboard-welcome h3 {
  color: #313c43;
  font-size: 27px;
}

.bento-shell .dashboard-head-meta {
  gap: 10px;
}

.bento-shell .dashboard-user-chip,
.bento-shell .dashboard-date-chip {
  border-color: #d9cbbd;
  background: #fffdf9;
  color: #65594f;
}

.bento-shell .dashboard-command-layout {
  grid-template-columns: minmax(0, 1fr) 412px;
  gap: 16px;
  align-items: stretch;
}

.bento-shell .dashboard-light-page .dashboard-operational-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(122px, 1fr);
  gap: 14px;
}

.bento-shell .dashboard-light-page .dashboard-metric {
  min-height: 122px;
  padding: 18px 20px;
  border-width: 1px;
  border-color: #9abf9d;
  background: #edfaed;
  box-shadow: 0 6px 13px rgba(72, 120, 79, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(2n) {
  border-color: #d7a173;
  background: #fff0dd;
  box-shadow: 0 6px 13px rgba(150, 96, 60, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(3n) {
  border-color: #9abf9d;
  background: #edfaed;
  box-shadow: 0 6px 13px rgba(72, 120, 79, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(4n) {
  border-color: #d7b372;
  background: #fff4dc;
  box-shadow: 0 6px 13px rgba(150, 115, 47, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(5n) {
  border-color: #9fb7d1;
  background: #edf7ff;
  box-shadow: 0 6px 13px rgba(77, 119, 151, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric:nth-child(6n) {
  border-color: #bd9cbe;
  background: #f8edf8;
  box-shadow: 0 6px 13px rgba(126, 83, 126, 0.08);
}

.bento-shell .dashboard-light-page .dashboard-metric p,
.bento-shell .dashboard-light-page .dashboard-metric small {
  color: #6a6159;
}

.bento-shell .dashboard-light-page .dashboard-metric strong {
  color: #312f2c;
  font-size: 25px;
}

.bento-shell .dashboard-metric-icon {
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.46);
}

.bento-shell .dashboard-task-workspace {
  min-height: 258px;
  border-color: #b78e62;
  background: #fffefb;
  box-shadow: 0 7px 16px rgba(112, 78, 49, 0.08);
}

.bento-shell .dashboard-task-workspace-head {
  padding: 17px 18px;
  border-bottom-color: #d9b890;
  background: #fff7e6;
}

.bento-shell .dashboard-task-workspace-head p {
  color: #8a6749;
}

.bento-shell .dashboard-task-workspace-head h3,
.bento-shell .dashboard-task-form-head h4,
.bento-shell .dashboard-task-list-head h4,
.bento-shell .dashboard-task-member-copy strong {
  color: #42372d;
}

.bento-shell .dashboard-task-workspace-head > span {
  border: 1px solid #bad9c1;
  background: #ebf8ee;
  color: #3b7650;
}

.bento-shell .dashboard-task-form,
.bento-shell .dashboard-task-member-copy {
  border-bottom-color: #eadbc8;
}

.bento-shell .dashboard-task-workspace button.primary {
  border-color: #db805e;
  background: #ed8b64;
}

.bento-shell .dashboard-task-workspace button.primary:hover:not(:disabled) {
  border-color: #c86b4f;
  background: #d97859;
}

.bento-shell .dashboard-store-zone {
  border-color: #9abf9d;
  background: #f4fdf3;
}

.bento-shell .dashboard-zone-head {
  border-bottom-color: #c7dfc5;
  background: #eff9ef;
}

:root[data-theme="dark"] .bento-shell {
  background: var(--bento-canvas);
}

:root[data-theme="dark"] .bento-shell .sidebar {
  border-right-color: #554b41;
  background: #2a2823;
}

:root[data-theme="dark"] .bento-shell .topbar {
  border-color: var(--bento-border);
  background: #302d28;
}

:root[data-theme="dark"] .bento-shell .content {
  background: #292721;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-light-head {
  border-color: #526a7b;
  background: #2b3a45;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric {
  border-color: #55775a;
  background: #2b4030;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(2n) {
  border-color: #765846;
  background: #45342c;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(3n) {
  border-color: #55775a;
  background: #2b4030;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(4n) {
  border-color: #6e633e;
  background: #403a26;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(5n) {
  border-color: #526a7b;
  background: #2b3a45;
}

:root[data-theme="dark"] .bento-shell .dashboard-light-page .dashboard-metric:nth-child(6n) {
  border-color: #6b586c;
  background: #3d3040;
}

:root[data-theme="dark"] .bento-shell .dashboard-task-workspace {
  border-color: #765a43;
  background: #302d28;
}

:root[data-theme="dark"] .bento-shell .dashboard-task-workspace-head {
  border-bottom-color: #765a43;
  background: #3e3429;
}

:root[data-theme="dark"] .bento-shell .dashboard-store-zone {
  border-color: #4d6e57;
  background: #293c30;
}

:root[data-theme="dark"] .bento-shell .dashboard-zone-head {
  border-bottom-color: #4d6e57;
  background: #2e4535;
}

@media (max-width: 1180px) {
  .bento-shell .dashboard-command-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .bento-shell .dashboard-light-page .dashboard-operational-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .bento-shell .topbar { margin: 8px 8px 0; }
  .bento-shell .content { padding: 12px 10px 20px; }
  .bento-shell .dashboard-command-layout { grid-template-columns: 1fr; }
  .bento-shell .dashboard-light-page .dashboard-operational-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .bento-shell .dashboard-light-page .dashboard-light-head { min-height: auto; padding: 16px; }
  .bento-shell .dashboard-light-page .dashboard-operational-metrics { grid-template-columns: 1fr; }
  .bento-shell .dashboard-light-page .dashboard-metric { min-height: 96px; }
}

/* Cream base layer: warm enough to read as a material surface, not a yellow cast. */
:root {
  --bento-canvas: #f8f0e2;
  --bento-surface: #fffdf8;
  --bento-surface-muted: #fcf6ec;
  --bento-border: #e7d5b9;
}

body,
.bento-shell,
.login-page {
  background: #f8f0e2;
}

.bento-shell .sidebar {
  border-right-color: #e8d9c1;
  background: #fffaf0;
}

.bento-shell .topbar {
  border-color: #e5d3b7;
  background: #fffdf8;
}

.bento-shell .content {
  background: #fffaf1;
}

.bento-shell .brand,
.bento-shell .account {
  background: #fff8eb;
}

.bento-shell .dashboard-light-page .dashboard-light-head {
  border-color: #dac39b;
  background: #fff3d9;
  box-shadow: 0 7px 16px rgba(137, 101, 53, 0.09);
}

.bento-shell .dashboard-light-page .dashboard-eyebrow {
  color: #9a754b;
}

.bento-shell .dashboard-user-chip,
.bento-shell .dashboard-date-chip {
  border-color: #d7c29e;
  background: #fffaf0;
}

.bento-shell .dashboard-task-workspace {
  background: #fffcf5;
}

.bento-shell .dashboard-task-workspace-head {
  background: #fff3d9;
}

.bento-shell .dashboard-store-zone {
  background: #f7fbed;
}

.bento-shell .dashboard-zone-head {
  background: #f0f8e8;
}

/* Product-card hover: express focus through the card boundary, never through
   competing row backgrounds inside a dense product record. */
@media (min-width: 981px) and (max-width: 2100px) {
  .bento-shell .product-workspace .product-table tbody tr {
    border-color: #e4d2bd;
    background: #fffdf9;
    box-shadow: 0 3px 9px rgba(112, 78, 49, 0.05);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  }

  .bento-shell .product-workspace .product-table tbody tr td,
  .bento-shell .product-workspace .product-table tbody tr:nth-child(even) td,
  .bento-shell .product-workspace .product-table tbody tr:hover td,
  .bento-shell .product-workspace .product-table tbody tr.selected td,
  .bento-shell .product-workspace .product-table tbody tr.selected:hover td {
    background: transparent !important;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) td {
    border-top-color: rgba(137, 103, 72, 0.16);
  }

  .bento-shell .product-workspace .product-table tbody tr:not(.selected):hover {
    border-color: #d8b386;
    background: #fff9f0;
    box-shadow: 0 10px 20px rgba(112, 78, 49, 0.12);
    transform: translateY(-1px);
  }

  .bento-shell .product-workspace .product-table tbody tr.selected {
    border-color: #9bcfc4;
    background: #f0fbf7;
    box-shadow: 0 7px 16px rgba(51, 128, 112, 0.09);
  }

  .bento-shell .product-workspace .product-table tbody tr.selected:hover {
    border-color: #7ebbad;
    background: #effbf6;
    box-shadow: 0 10px 20px rgba(51, 128, 112, 0.13);
    transform: translateY(-1px);
  }
}

:root[data-theme="dark"] .bento-shell .product-workspace .product-table tbody tr {
  border-color: #544b41;
  background: #302d28;
}

:root[data-theme="dark"] .bento-shell .product-workspace .product-table tbody tr:not(.selected):hover {
  border-color: #806545;
  background: #3b342c;
}

:root[data-theme="dark"] .bento-shell .product-workspace .product-table tbody tr.selected,
:root[data-theme="dark"] .bento-shell .product-workspace .product-table tbody tr.selected:hover {
  border-color: #527d70;
  background: #293e36;
}

/* Login typography: the light brand panel needs ink contrast, not white copy. */
.login-brand-panel .login-kicker {
  color: #2e9f96;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-brand-panel h1 {
  margin: 12px 0 8px;
  color: #263c4b;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
  text-shadow: none;
}

.login-brand-panel .login-brand-copy {
  max-width: 280px;
  color: #60798a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

.login-brand-panel .login-brand-stats {
  border-top-color: #c6dce6;
}

.login-brand-panel .login-brand-stats strong {
  color: #365268;
  font-size: 13px;
  font-weight: 800;
}

.login-brand-panel .login-brand-stats span {
  color: #6e8798;
  font-size: 13px;
  font-weight: 500;
}

.login-panel-head .login-kicker {
  color: #268d84;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-panel-head h2 {
  color: #2b3d49;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
}

.login-panel-head p {
  color: #71808a;
  font-size: 14px;
  line-height: 1.6;
}

:root[data-theme="dark"] .login-brand-panel .login-kicker { color: #7bd6ca; }
:root[data-theme="dark"] .login-brand-panel h1 { color: #f1f8fa; }
:root[data-theme="dark"] .login-brand-panel .login-brand-copy,
:root[data-theme="dark"] .login-brand-panel .login-brand-stats span { color: #b5cbd1; }
:root[data-theme="dark"] .login-brand-panel .login-brand-stats { border-top-color: rgba(225, 244, 243, 0.2); }
:root[data-theme="dark"] .login-brand-panel .login-brand-stats strong { color: #f1f8fa; }
:root[data-theme="dark"] .login-panel-head h2 { color: var(--text); }

:root[data-theme="dark"] .login-account-history-menu {
  border-color: #544b41;
  background: #302d28;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .login-account-history-menu button { color: #d9e1df; }
:root[data-theme="dark"] .login-account-history-menu button:hover { background: #3c352b; }
:root[data-theme="dark"] .login-account-history-menu button small,
:root[data-theme="dark"] .login-account-history-menu p { color: #aebcb8; }

/* Stable public-product cards: missing data reserves its intended slot instead
   of shrinking the card or moving its action controls upward. */
@media (min-width: 981px) and (max-width: 2100px) {
  .bento-shell .product-workspace .product-table:not(.personal-product-table) tbody {
    grid-auto-rows: 628px;
    align-items: stretch;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) tbody tr {
    height: 628px;
    min-height: 628px;
    max-height: 628px;
    grid-template-rows: 46px 34px 34px 34px 64px 34px 34px 40px 54px 34px 132px;
    overflow: hidden;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) .image-column { grid-row: 1; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .sku-column,
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .order-count-column { grid-row: 2; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .leroy-incident-column { grid-row: 3; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .leroy-incident-rate-column { grid-row: 4; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .title-column { grid-row: 5; min-height: 0; max-height: 64px; overflow: hidden; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .category-column,
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .group-column { grid-row: 6; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .status-column,
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .price-column { grid-row: 7; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .cost-column { grid-row: 8; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .operation-note-column { grid-row: 9; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .link-column { grid-row: 10; }
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .actions-column { grid-row: 11; min-height: 0; padding-block: 0; }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) .actions-column .row-actions {
    height: 100%;
    align-content: stretch;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) .actions-column .row-actions > * {
    min-height: 0;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) .personal-version-summary {
    max-height: 35px;
    margin-top: 3px;
    overflow: hidden;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) tbody:has(.personal-version-summary[open]) {
    grid-auto-rows: minmax(628px, auto);
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) tbody tr:has(.personal-version-summary[open]) {
    height: auto;
    max-height: none;
    grid-template-rows: 46px 34px 34px 34px minmax(64px, auto) 34px 34px 40px 54px 34px 132px;
    overflow: visible;
  }

  .bento-shell .product-workspace .product-table:not(.personal-product-table) .title-column:has(.personal-version-summary[open]),
  .bento-shell .product-workspace .product-table:not(.personal-product-table) .personal-version-summary[open] {
    max-height: none;
    overflow: visible;
  }
}

/* Optional jelly UI. The existing cream bento interface remains the default. */
:root[data-ui-style="jelly"] {
  --bg: #f5e9d6;
  --panel: #fffdf7;
  --soft: #fff4df;
  --text: #4d4033;
  --muted: #877766;
  --line: #ead4b5;
  --line-strong: #dfc39c;
  --accent: #73b985;
  --accent-strong: #4b9b63;
  --ok: #529e68;
  --warn: #d5963e;
  --danger: #d66e67;
  --shadow: 0 7px 0 #e7d0ad, 0 15px 30px rgba(117, 86, 51, 0.12);
  --bento-canvas: #f5e9d6;
  --bento-surface: #fffdf7;
  --bento-surface-muted: #fff6e6;
  --bento-border: #e6cba7;
  --bento-ink: #4d4033;
  --bento-mint: #d9f1dc;
  --bento-mint-border: #8fc89a;
  --bento-peach: #ffe1be;
  --bento-peach-border: #e9ad6e;
  --bento-butter: #fff0bd;
  --bento-butter-border: #e5bb62;
  --bento-sky: #dceff6;
  --bento-sky-border: #8cc2d4;
  --bento-radius: 18px;
  --bento-gap: 14px;
  --bento-shadow: 0 7px 0 #e7d0ad, 0 15px 30px rgba(117, 86, 51, 0.12);
}

:root[data-ui-style="jelly"] body {
  color: var(--text);
  background: #f5e9d6;
}

:root[data-ui-style="jelly"] .bento-shell {
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: #f5e9d6;
}

:root[data-ui-style="jelly"] .main {
  gap: 14px;
}

:root[data-ui-style="jelly"] .sidebar,
:root[data-ui-style="jelly"] .topbar,
:root[data-ui-style="jelly"] .content {
  border: 1px solid #e3c8a5;
  border-radius: 20px;
  background: #fffdf7;
  box-shadow: var(--bento-shadow);
}

:root[data-ui-style="jelly"] .sidebar {
  border-right: 1px solid #e3c8a5;
  overflow: hidden;
}

:root[data-ui-style="jelly"] .topbar {
  min-height: 68px;
  padding-inline: 20px;
}

:root[data-ui-style="jelly"] .content {
  padding: 20px;
}

:root[data-ui-style="jelly"] .brand,
:root[data-ui-style="jelly"] .account {
  border-color: #ead4b5;
}

:root[data-ui-style="jelly"] .nav button,
:root[data-ui-style="jelly"] .nav-group-title {
  min-height: 40px;
  margin-block: 3px;
  border: 1px solid #ead8bd;
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 3px 0 #ead8bd, inset 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] .nav button:hover,
:root[data-ui-style="jelly"] .nav-group-title:hover {
  border-color: #a8d7b0;
  background: #edf9ec;
}

:root[data-ui-style="jelly"] .nav button.active,
:root[data-ui-style="jelly"] .nav button[aria-current="page"] {
  border-color: #78b989;
  color: #285d3b;
  background: #d9f1dc;
  box-shadow: 0 4px 0 #a6d4ad, inset 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] .theme-toggle {
  padding: 8px 10px;
  border: 1px solid #e8d1ae;
  border-radius: 12px;
  background: #fff8eb;
  box-shadow: 0 3px 0 #ead8bd, inset 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] .theme-switch {
  border-color: #dcbf98;
  background: #f1dfc6;
}

:root[data-ui-style="jelly"] .theme-toggle input:checked + .theme-switch {
  border-color: #79b988;
  background: #a8dfb0;
}

:root[data-ui-style="jelly"] .bento-shell button {
  border: 1px solid #dfc6a4;
  border-radius: 11px;
  background: #fffdf7;
  color: var(--text);
  box-shadow: 0 3px 0 #e5cfb1, inset 0 1px 0 #ffffff;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

:root[data-ui-style="jelly"] .bento-shell button:hover:not(:disabled) {
  border-color: #a6d1ad;
  background: #f3fbf1;
}

:root[data-ui-style="jelly"] .bento-shell button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #e5cfb1, inset 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] .bento-shell button.primary,
:root[data-ui-style="jelly"] .bento-shell button.btn-primary,
:root[data-ui-style="jelly"] .bento-shell button[type="submit"] {
  border-color: #5ba76d;
  background: #8dcb99;
  color: #173e26;
  box-shadow: 0 3px 0 #5ba76d, inset 0 1px 0 #dff7e2;
}

:root[data-ui-style="jelly"] .bento-shell button.danger,
:root[data-ui-style="jelly"] .bento-shell button.btn-danger,
:root[data-ui-style="jelly"] .bento-shell button.delete {
  border-color: #d88880;
  background: #ffe3df;
  color: #8b332f;
  box-shadow: 0 3px 0 #dfaaa2, inset 0 1px 0 #fff8f7;
}

:root[data-ui-style="jelly"] .bento-shell button:disabled {
  border-color: #e7dbcc;
  background: #f4eee6;
  color: #aa9f94;
  box-shadow: none;
}

:root[data-ui-style="jelly"] .bento-shell input:not([type="checkbox"]):not([type="radio"]),
:root[data-ui-style="jelly"] .bento-shell select,
:root[data-ui-style="jelly"] .bento-shell textarea {
  border-color: #ddc6a7;
  border-radius: 10px;
  background: #fffdf8;
  color: var(--text);
  box-shadow: inset 0 2px 4px rgba(148, 105, 59, 0.08), 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] .bento-shell input:focus,
:root[data-ui-style="jelly"] .bento-shell select:focus,
:root[data-ui-style="jelly"] .bento-shell textarea:focus,
:root[data-ui-style="jelly"] .bento-shell button:focus-visible {
  outline: 3px solid rgba(114, 185, 133, 0.34);
  outline-offset: 2px;
  border-color: #71b982;
}

:root[data-ui-style="jelly"] .bento-shell :is(
  .section,
  .dashboard-panel,
  .dashboard-store-zone,
  .dashboard-filterbar,
  .dashboard-task-workspace,
  .order-workbench,
  .message-workbench,
  .message-center-metric,
  .inbox-list-panel,
  .inbox-thread-panel,
  .inbox-context-panel,
  .product-toolbar,
  .filter-panel,
  .settings-section,
  .table-wrap,
  .product-table-wrap
) {
  border: 1px solid #e7cfad;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 5px 0 #efddc3, 0 10px 22px rgba(117, 86, 51, 0.08);
}

:root[data-ui-style="jelly"] .bento-shell :is(.section, .dashboard-panel, .order-workbench, .message-workbench) > :is(h1, h2, h3, .section-title) {
  color: #44392f;
}

:root[data-ui-style="jelly"] .bento-shell :is(.dashboard-metric, .message-center-metric) {
  border-width: 1px;
  border-radius: 17px;
  box-shadow: 0 6px 0 rgba(160, 121, 76, 0.24), 0 12px 22px rgba(117, 86, 51, 0.09);
}

:root[data-ui-style="jelly"] .dashboard-operational-metrics > :nth-child(3n + 1) {
  border-color: #8fc89a;
  background: #e3f5e5;
}

:root[data-ui-style="jelly"] .dashboard-operational-metrics > :nth-child(3n + 2) {
  border-color: #91c3d4;
  background: #e1f1f7;
}

:root[data-ui-style="jelly"] .dashboard-operational-metrics > :nth-child(3n) {
  border-color: #e5b46d;
  background: #fff0c9;
}

:root[data-ui-style="jelly"] .dashboard-metric-icon,
:root[data-ui-style="jelly"] .dashboard-metric-icon-art {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 3px 0 rgba(130, 99, 62, 0.16);
}

:root[data-ui-style="jelly"] .bento-shell :is(.status, .tag, .badge, .chip, .dashboard-date-chip, .dashboard-user-chip) {
  border: 1px solid #dfc7a6;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) {
  overflow: hidden;
  border: 1px solid #e5ceae;
  border-radius: 15px;
  background: #fffdf8;
}

:root[data-ui-style="jelly"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) th {
  border-bottom-color: #e5ceae;
  background: #fff1d7;
  color: #675240;
}

:root[data-ui-style="jelly"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) td {
  border-bottom-color: #f0dfc8;
}

:root[data-ui-style="jelly"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) tbody tr:hover {
  background: #f4fbef;
}

:root[data-ui-style="jelly"] .bento-shell :is(.order-platform-item.active, .inbox-conversation.active, .inbox-conversation.selected, .message-conversation.active) {
  border-color: #8dc399;
  background: #e3f5e5;
  box-shadow: inset 0 1px 0 #ffffff;
}

:root[data-ui-style="jelly"] :is(.modal, .modal-dialog, .dialog, [role="dialog"]) {
  border: 1px solid #e1c5a1;
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: 0 9px 0 #e5cfb1, 0 24px 46px rgba(68, 47, 29, 0.24);
}

:root[data-ui-style="jelly"] .modal-backdrop {
  background: rgba(92, 65, 40, 0.28);
  backdrop-filter: blur(3px);
}

:root[data-ui-style="jelly"] .login-page {
  background: #f5e9d6;
}

:root[data-ui-style="jelly"] .login-panel,
:root[data-ui-style="jelly"] .login-brand-panel,
:root[data-ui-style="jelly"] .login-account-history-menu {
  border-color: #e2c6a3;
  background: #fffdf7;
  box-shadow: var(--bento-shadow);
}

:root[data-ui-style="jelly"] .login-brand-panel {
  background: #dff2e1;
}

:root[data-ui-style="jelly"][data-theme="dark"] {
  --bg: #27221d;
  --panel: #342d26;
  --soft: #40362d;
  --text: #f6eadb;
  --muted: #c5b5a2;
  --line: #655343;
  --line-strong: #7d6450;
  --bento-canvas: #27221d;
  --bento-surface: #342d26;
  --bento-surface-muted: #40362d;
  --bento-border: #6b5746;
  --bento-ink: #f6eadb;
  --bento-shadow: 0 7px 0 #1e1a16, 0 15px 30px rgba(0, 0, 0, 0.28);
}

:root[data-ui-style="jelly"][data-theme="dark"] body,
:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell,
:root[data-ui-style="jelly"][data-theme="dark"] .login-page {
  background: #27221d;
}

:root[data-ui-style="jelly"][data-theme="dark"] :is(.sidebar, .topbar, .content, .login-panel, .login-brand-panel, .login-account-history-menu),
:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell :is(.section, .dashboard-panel, .dashboard-store-zone, .dashboard-filterbar, .dashboard-task-workspace, .order-workbench, .message-workbench, .message-center-metric, .inbox-list-panel, .inbox-thread-panel, .inbox-context-panel, .product-toolbar, .filter-panel, .settings-section, .table-wrap, .product-table-wrap) {
  border-color: #6b5746;
  background: #342d26;
  box-shadow: 0 6px 0 #211c18, 0 14px 26px rgba(0, 0, 0, 0.24);
}

:root[data-ui-style="jelly"][data-theme="dark"] .nav button,
:root[data-ui-style="jelly"][data-theme="dark"] .nav-group-title,
:root[data-ui-style="jelly"][data-theme="dark"] .theme-toggle,
:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell button,
:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell input:not([type="checkbox"]):not([type="radio"]),
:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell select,
:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell textarea {
  border-color: #735d4b;
  background: #40362d;
  color: #f6eadb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #211c18;
}

:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) {
  border-color: #6b5746;
  background: #342d26;
}

:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) th {
  border-bottom-color: #6b5746;
  background: #493b30;
  color: #f6eadb;
}

:root[data-ui-style="jelly"][data-theme="dark"] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) td {
  border-bottom-color: #503f33;
}

:root[data-ui-style="jelly"][data-theme="dark"] .dashboard-operational-metrics > :nth-child(3n + 1) {
  border-color: #558962;
  background: #294131;
}

:root[data-ui-style="jelly"][data-theme="dark"] .dashboard-operational-metrics > :nth-child(3n + 2) {
  border-color: #5e93a4;
  background: #293d45;
}

:root[data-ui-style="jelly"][data-theme="dark"] .dashboard-operational-metrics > :nth-child(3n) {
  border-color: #a98245;
  background: #514126;
}

@media (max-width: 980px) {
  :root[data-ui-style="jelly"] .bento-shell {
    display: block;
    padding: 8px;
  }

  :root[data-ui-style="jelly"] .sidebar,
  :root[data-ui-style="jelly"] .topbar,
  :root[data-ui-style="jelly"] .content {
    border-radius: 16px;
  }

  :root[data-ui-style="jelly"] .main {
    gap: 8px;
  }
}

/* Shared interface-style selector. */
.ui-style-select {
  cursor: default;
}

.ui-style-select select {
  min-width: 124px;
  padding: 5px 26px 5px 8px;
  font: inherit;
}

/* Internal EAN-13 generator */
.ean-generator-page { max-width: 1180px; display: grid; gap: 16px; }
.ean-generator-panel { display: grid; gap: 18px; }
.ean-generator-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 14px; }
.ean-generator-form label, .ean-generator-input input { min-width: 0; }
.ean-generator-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ean-generator-submit { display: flex; align-items: end; }
.ean-generator-submit button { width: 100%; }
.ean-generator-output .section-head > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.ean-generator-table-wrap { max-height: 600px; }
.ean-generator-table th:first-child, .ean-generator-table td:first-child { width: 72px; text-align: right; }
.ean-generator-table code { color: var(--accent-strong); font-weight: 700; }
.ean-generator-preview-note, .ean-generator-empty { margin: 0; }
.ean-generator-empty { min-height: 180px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 6px; }
@media (max-width: 980px) { .ean-generator-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ean-generator-form { grid-template-columns: 1fr; }
  .ean-generator-output .section-head { align-items: flex-start; flex-direction: column; }
}
.ean-generator-field { min-width: 0; }
.ean-generator-field > label { display: block; margin-bottom: 6px; }
.ean-generator-pool { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); }
.ean-generator-pool strong { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.ean-generator-table code { user-select: none; }

/* Initial authenticated paint: preserve the ERP frame while data is loading. */
.bootstrap-shell .sidebar {
  display: flex;
  flex-direction: column;
}
.initial-app-shell {
  position: relative;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 100vh;
  color: #25313b;
  background: #f7f8f6;
}
.initial-app-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 16px;
  border-right: 1px solid #d8ded9;
  background: #ffffff;
}
.initial-app-brand { min-height: 44px; font-size: 21px; font-weight: 700; }
.initial-app-sidebar > span,
.initial-app-panel > i {
  display: block;
  border-radius: 4px;
  background: #e3e8e5;
  animation: bootstrap-loading-pulse 1.1s ease-in-out infinite alternate;
}
.initial-app-sidebar > span { height: 36px; }
.initial-app-main { display: grid; align-content: start; gap: 22px; padding: 26px 38px; }
.initial-app-title { min-height: 30px; font-size: 22px; font-weight: 700; }
.initial-app-panel {
  display: grid;
  gap: 14px;
  min-height: 220px;
  padding: 22px;
  border: 1px solid #d8ded9;
  border-radius: 6px;
  background: #ffffff;
}
.initial-app-panel > i { height: 42px; }
.initial-app-panel > i:first-child { width: 34%; height: 24px; }
.initial-app-panel > i:last-child { width: 68%; }
.initial-app-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) {
  .initial-app-shell { grid-template-columns: 1fr; }
  .initial-app-sidebar { display: none; }
  .initial-app-main { padding: 20px 16px; }
}
.bootstrap-nav-skeleton {
  display: grid;
  gap: 9px;
  padding: 18px 14px;
}
.bootstrap-skeleton {
  display: block;
  border-radius: 4px;
  background: var(--soft);
  animation: bootstrap-loading-pulse 1.1s ease-in-out infinite alternate;
}
.bootstrap-nav-skeleton .bootstrap-skeleton { height: 32px; }
.bootstrap-header-skeleton { width: 180px; height: 28px; }
.bootstrap-content-loading {
  display: grid;
  gap: 16px;
  max-width: 1180px;
}
.bootstrap-panel {
  display: grid;
  gap: 14px;
  min-height: 208px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.bootstrap-title-skeleton { width: min(280px, 42%); height: 24px; }
.bootstrap-row-skeleton { width: 100%; height: 42px; }
.bootstrap-row-skeleton.short { width: 64%; }
.deferred-view-loading { max-width: 1180px; }
@keyframes bootstrap-loading-pulse {
  from { opacity: .48; }
  to { opacity: .86; }
}

:root[data-theme="dark"] .bootstrap-skeleton { background: var(--line); }

/* Help center */
.help-page { max-width: 1180px; display: grid; gap: 16px; }
.help-intro .section-body { padding-top: 12px; }
.help-steps { display: grid; gap: 8px; margin: 0; padding-left: 22px; line-height: 1.65; }
.help-table th { white-space: nowrap; }
.help-table td { line-height: 1.6; vertical-align: top; }
.help-table td:first-child { color: var(--accent-strong); font-weight: 700; }
.help-note { border-top: 1px solid var(--line); color: var(--muted); line-height: 1.7; }
.help-note strong { color: var(--text); }
.help-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.help-status-grid > div { display: grid; gap: 5px; border-left: 3px solid var(--accent); background: var(--soft); padding: 12px; }
.help-status-grid strong { color: var(--text); }
.help-status-grid span { color: var(--muted); line-height: 1.6; }
@media (max-width: 700px) {
  .help-status-grid { grid-template-columns: 1fr; }
  .help-table { min-width: 640px; }
  .stock-price-tier-heading { align-items: stretch; flex-direction: column; }
  .stock-price-tier-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
    grid-template-areas:
      "minimum maximum remove"
      "multiplier multiplier ."
      "profit profit .";
  }
}

/* Phase 1 information architecture and dashboard priorities. */
.bento-shell .nav-group {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(203, 183, 151, 0.42);
}

.bento-shell .nav-group-title {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #7b6b59;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bento-shell .nav-group-title:hover {
  border-color: #ead9bd;
  background: #fff7e9;
  color: #6b5541;
}

.bento-shell .nav-group.active .nav-group-title {
  border-color: #dfc79f;
  background: #fff3d9;
  color: #775531;
}

.bento-shell .nav-sub {
  gap: 2px;
  padding: 2px 0 3px 4px;
}

.bento-shell .nav button.subitem {
  min-height: 31px;
  padding: 6px 10px 6px 18px;
  font-size: 12px;
}

.bento-shell .top-actions {
  justify-content: flex-end;
}

.bento-shell .top-actions #refreshBtn {
  min-width: 64px;
}

.dashboard-priority-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bento-shell .dashboard-priority-card {
  --priority-color: #2873df;
  position: relative;
  display: grid;
  min-height: 88px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 8px 12px;
  padding: 14px 15px;
  border: 1px solid var(--bento-border);
  border-left: 4px solid var(--priority-color);
  border-radius: var(--bento-radius);
  background: var(--bento-surface);
  box-shadow: var(--bento-shadow);
  color: var(--bento-ink);
  text-align: left;
}

.bento-shell .dashboard-priority-card:hover {
  border-color: var(--priority-color);
  background: #fffaf0;
  transform: translateY(-1px);
}

.dashboard-priority-card.violet { --priority-color: #7c3aed; }
.dashboard-priority-card.amber { --priority-color: #c37b00; }
.dashboard-priority-card.rose { --priority-color: #d84768; }
.dashboard-priority-card.green { --priority-color: #159a58; }
.dashboard-priority-card.sky { --priority-color: #1388b5; }

.dashboard-priority-copy {
  display: grid;
  gap: 3px;
}

.dashboard-priority-copy > span {
  color: #66758a;
  font-size: 12px;
}

.dashboard-priority-copy strong {
  color: #152336;
  font-size: 23px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-priority-card small {
  min-width: 0;
  overflow: hidden;
  color: #8491a1;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-priority-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--priority-color);
  font-size: 20px;
  line-height: 1;
}

.bento-shell .dashboard-metric.is-actionable {
  width: 100%;
  border: 1px solid var(--bento-border);
  color: inherit;
  text-align: left;
}

.bento-shell .dashboard-metric.is-actionable:hover {
  border-color: #b7d9d4;
  background: #fffdf8;
  transform: translateY(-1px);
}

.dashboard-collaboration-zone {
  display: grid;
  min-width: 0;
}

.dashboard-collaboration-zone .dashboard-task-workspace {
  width: 100%;
}

@media (max-width: 980px) {
  .dashboard-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-priority-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="dark"] .bento-shell .nav-group {
  border-top-color: rgba(112, 93, 70, 0.5);
}

:root[data-theme="dark"] .bento-shell .nav-group-title,
:root[data-theme="dark"] .dashboard-priority-copy > span,
:root[data-theme="dark"] .dashboard-priority-card small {
  color: var(--muted);
}

:root[data-theme="dark"] .bento-shell .nav-group-title:hover,
:root[data-theme="dark"] .bento-shell .nav-group.active .nav-group-title,
:root[data-theme="dark"] .bento-shell .dashboard-priority-card,
:root[data-theme="dark"] .bento-shell .dashboard-metric.is-actionable {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="dark"] .dashboard-priority-copy strong {
  color: var(--text);
}

:root[data-ui-style="jelly"] .bento-shell .nav-group {
  border-top-color: #e2c6a3;
}

:root[data-ui-style="jelly"] .bento-shell .dashboard-priority-card {
  border-radius: 10px;
  box-shadow: var(--bento-shadow);
}

/* Preview theme: neutral enterprise surfaces with a restrained blue action color. */
:root:not([data-theme="dark"]) {
  --bento-canvas: #f5f6f8;
  --bento-surface: #ffffff;
  --bento-surface-muted: #f8fafc;
  --bento-border: #dfe3e8;
  --bento-ink: #20242c;
  --bento-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  --bento-radius: 6px;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
}

:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) .bento-shell,
:root:not([data-theme="dark"]) .login-page {
  background: #f5f6f8;
}

:root:not([data-theme="dark"]) .bento-shell .sidebar,
:root:not([data-theme="dark"]) .bento-shell .brand,
:root:not([data-theme="dark"]) .bento-shell .account,
:root:not([data-theme="dark"]) .bento-shell .topbar {
  border-color: #dfe3e8;
  background: #ffffff;
}

:root:not([data-theme="dark"]) .bento-shell .content {
  background: #f8fafc;
}

:root:not([data-theme="dark"]) .bento-shell .brand-logo {
  border-color: #dbe3f0;
  background: #f7faff;
}

:root:not([data-theme="dark"]) .bento-shell .brand-title,
:root:not([data-theme="dark"]) .bento-shell .topbar h2 {
  color: #20242c;
}

:root:not([data-theme="dark"]) .bento-shell .nav-group {
  border-top-color: #edf0f3;
}

:root:not([data-theme="dark"]) .bento-shell .nav-group-title {
  color: #697386;
}

:root:not([data-theme="dark"]) .bento-shell .nav-group-title:hover {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #344054;
}

:root:not([data-theme="dark"]) .bento-shell .nav-group.active .nav-group-title {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

:root:not([data-theme="dark"]) .bento-shell .nav button {
  color: #566174;
}

:root:not([data-theme="dark"]) .bento-shell .nav button:hover {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #1d4ed8;
}

:root:not([data-theme="dark"]) .bento-shell .nav button.active {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 3px 0 #2563eb;
}

:root:not([data-theme="dark"]) .bento-shell button.primary {
  border-color: #2563eb;
  background: #2563eb;
}

:root:not([data-theme="dark"]) .bento-shell button.primary:hover:not(:disabled) {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

:root:not([data-theme="dark"]) .bento-shell input:focus,
:root:not([data-theme="dark"]) .bento-shell select:focus,
:root:not([data-theme="dark"]) .bento-shell textarea:focus {
  border-color: #60a5fa;
  outline-color: rgba(37, 99, 235, 0.16);
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-light-head,
:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric,
:root:not([data-theme="dark"]) .bento-shell .dashboard-store-zone,
:root:not([data-theme="dark"]) .bento-shell .dashboard-filterbar,
:root:not([data-theme="dark"]) .bento-shell .dashboard-panel,
:root:not([data-theme="dark"]) .bento-shell .dashboard-task-workspace {
  border-color: #dfe3e8;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-light-head {
  box-shadow: none;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-welcome h3,
:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric strong,
:root:not([data-theme="dark"]) .bento-shell .dashboard-zone-head h3,
:root:not([data-theme="dark"]) .bento-shell .dashboard-panel-head h3 {
  color: #20242c;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-eyebrow,
:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-panel-head > strong {
  color: #2563eb;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-light-head {
  border-top: 3px solid #2563eb;
  background: #ffffff;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-user-chip,
:root:not([data-theme="dark"]) .bento-shell .dashboard-date-chip {
  border-color: #dfe3e8;
  background: #f8fafc;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-user-chip {
  color: #344054;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-zone-head,
:root:not([data-theme="dark"]) .bento-shell .dashboard-task-workspace-head,
:root:not([data-theme="dark"]) .bento-shell .section-head,
:root:not([data-theme="dark"]) .bento-shell .dashboard-panel-head {
  border-bottom-color: #edf0f3;
  background: #fbfcfd;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-store-zone {
  background: #ffffff;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-store-run,
:root:not([data-theme="dark"]) .bento-shell .dashboard-task-workspace {
  border-color: #e5e7eb;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-priority-card {
  border-color: #dfe3e8;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-priority-card:hover,
:root:not([data-theme="dark"]) .bento-shell .dashboard-metric.is-actionable:hover {
  background: #f8fbff;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-metric.is-actionable {
  border-color: #dfe3e8;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-metric-icon {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #2563eb;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-metric.violet .dashboard-metric-icon,
:root:not([data-theme="dark"]) .bento-shell .dashboard-metric.amber .dashboard-metric-icon,
:root:not([data-theme="dark"]) .bento-shell .dashboard-metric.rose .dashboard-metric-icon {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #2563eb;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-metric.violet .dashboard-metric-icon-art {
  border-color: #dbeafe;
  background: #eff6ff;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-period-control,
:root:not([data-theme="dark"]) .bento-shell .dashboard-status,
:root:not([data-theme="dark"]) .bento-shell .dashboard-table th {
  border-color: #dfe3e8;
  background: #f8fafc;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-period-control button.active {
  background: #eff6ff;
  color: #1d4ed8;
}

:root:not([data-theme="dark"]) .bento-shell .dashboard-table th {
  color: #475467;
}

/* Preview typography scale: keep operational text readable without oversized headings. */
:root {
  --erp-font-xs: 12px;
  --erp-font-sm: 13px;
  --erp-font-md: 14px;
  --erp-font-lg: 16px;
  --erp-font-xl: 18px;
  --erp-font-2xl: 22px;
}

body {
  font-size: var(--erp-font-md);
  line-height: 1.45;
}

.bento-shell .brand-title {
  font-size: var(--erp-font-lg);
}

.bento-shell .brand-sub,
.bento-shell .account-role {
  font-size: var(--erp-font-xs);
  line-height: 1.4;
}

.bento-shell .nav > button,
.bento-shell .nav button.subitem {
  font-size: var(--erp-font-sm);
  line-height: 1.35;
}

.bento-shell .nav > button {
  font-weight: 600;
}

.bento-shell .nav-group-title {
  font-size: var(--erp-font-xs);
  line-height: 1.35;
  text-transform: none;
}

.bento-shell .topbar h2 {
  font-size: var(--erp-font-xl);
  line-height: 1.35;
}

.bento-shell .dashboard-light-page .dashboard-welcome h3 {
  font-size: var(--erp-font-2xl);
  line-height: 1.3;
}

.bento-shell .dashboard-light-page .dashboard-eyebrow {
  font-size: var(--erp-font-xs);
  line-height: 1.35;
}

.dashboard-priority-copy > span {
  font-size: var(--erp-font-sm);
  font-weight: 600;
  line-height: 1.35;
}

.dashboard-priority-copy strong {
  font-size: var(--erp-font-2xl);
  line-height: 1.1;
}

.dashboard-priority-card small {
  font-size: var(--erp-font-xs);
  line-height: 1.4;
}

.bento-shell .dashboard-light-page .dashboard-metric p {
  font-size: var(--erp-font-sm);
  font-weight: 500;
  line-height: 1.35;
}

.bento-shell .dashboard-light-page .dashboard-metric strong {
  font-size: var(--erp-font-2xl);
  line-height: 1.15;
}

.bento-shell .dashboard-light-page .dashboard-metric small {
  font-size: var(--erp-font-xs);
  line-height: 1.4;
}

.bento-shell .dashboard-zone-head h3,
.bento-shell .dashboard-panel-head h3,
.bento-shell .dashboard-task-workspace-head h3 {
  font-size: var(--erp-font-lg);
  line-height: 1.35;
}

.bento-shell .dashboard-zone-head p,
.bento-shell .dashboard-panel-head p,
.bento-shell .dashboard-filter-note,
.bento-shell .dashboard-store-run-head small,
.bento-shell .dashboard-store-run-data {
  font-size: var(--erp-font-xs);
  line-height: 1.4;
}

.bento-shell .dashboard-store-run-head strong,
.bento-shell .dashboard-task-list-head h4,
.bento-shell .dashboard-task-form-head h4 {
  font-size: var(--erp-font-md);
  line-height: 1.4;
}

.bento-shell .dashboard-table th,
.bento-shell .dashboard-table td {
  font-size: var(--erp-font-sm);
  line-height: 1.45;
}

.bento-shell button,
.bento-shell input,
.bento-shell select,
.bento-shell textarea {
  line-height: 1.35;
}

/* Strawberry theme: a restrained kawaii option for the operational workspace. */
.dashboard-head-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) {
  --bento-canvas: #fff7fa;
  --bento-surface: #ffffff;
  --bento-surface-muted: #fffafd;
  --bento-border: #f0d7e0;
  --bento-ink: #3b2f35;
  --bento-shadow: 0 2px 8px rgba(181, 61, 104, 0.05);
  --accent: #e8477a;
  --accent-strong: #c83265;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) body,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .login-page {
  background: #fff7fa;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .sidebar,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .brand,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .account,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .topbar {
  border-color: #f0d7e0;
  background: #ffffff;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .content {
  background: #fffafd;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .brand-title,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .topbar h2,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-welcome h3 {
  color: #3b2f35;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .nav-group {
  border-top-color: #f6e8ed;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .nav-group-title {
  color: #806874;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .nav button:hover,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .nav-group-title:hover {
  border-color: #f4cfdb;
  background: #fff3f7;
  color: #c83265;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .nav button.active,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .nav-group.active .nav-group-title {
  border-color: #f4c9d8;
  background: #ffe8f0;
  color: #bd285b;
  box-shadow: inset 3px 0 #e8477a;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell button.primary {
  border-color: #e8477a;
  background: #e8477a;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell button.primary:hover:not(:disabled) {
  border-color: #c83265;
  background: #c83265;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell input:focus,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell select:focus,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell textarea:focus {
  border-color: #f082a5;
  outline-color: rgba(232, 71, 122, 0.15);
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-light-head {
  border-color: #f0d7e0;
  border-top-color: #e8477a;
  background: #ffffff;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-eyebrow,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-panel-head > strong {
  color: #d9366d;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-user-chip,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-date-chip,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-period-control,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-status,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-table th {
  border-color: #f0d7e0;
  background: #fff7fa;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric-icon,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric.violet .dashboard-metric-icon,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric.amber .dashboard-metric-icon,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric.rose .dashboard-metric-icon,
:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric.violet .dashboard-metric-icon-art {
  border-color: #f4c9d8;
  background: #fff0f5;
  color: #d9366d;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric {
  border-color: #f0d7e0;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(181, 61, 104, 0.045);
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric:hover {
  border-color: #eeb9cb;
  background: #fffafd;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric p {
  color: #705763;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric strong {
  color: #3b2f35;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric small {
  color: #8a707b;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-light-page .dashboard-metric .dashboard-metric-icon-art {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric-icon-art::before {
  width: 100%;
  height: 100%;
  background: var(--dashboard-metric-art) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-metric-icon-art::after {
  display: none;
  content: none;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .dashboard-priority-card.violet {
  --priority-color: #e8477a;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) .bento-shell .dashboard-period-control button.active {
  background: #ffe8f0;
  color: #bd285b;
}

@media (max-width: 700px) {
  .dashboard-head-side {
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
  }

}

/* Jelly lists should read as one continuous surface, not stacked buttons. */
:root[data-ui-style="jelly"] .bento-shell .inbox-conversation,
:root[data-ui-style="jelly"] .bento-shell .message-conversation-item {
  border: 0;
  border-bottom: 1px solid #ead8bd;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-ui-style="jelly"] .bento-shell .inbox-conversation:hover,
:root[data-ui-style="jelly"] .bento-shell .message-conversation-item:hover {
  border-bottom-color: #d8c29f;
  background: #fff8eb;
  box-shadow: none;
}

:root[data-ui-style="jelly"] .bento-shell .inbox-conversation.selected,
:root[data-ui-style="jelly"] .bento-shell .message-conversation-item.selected {
  border-bottom-color: #8dc399;
  border-radius: 0;
  background: #e3f5e5;
  box-shadow: inset 3px 0 #79b988;
}

/* Unified workspace system: shared structure, theme-specific accent colors. */
:root {
  --ui-canvas: #f5f7fa;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f8fafc;
  --ui-border: #dfe3e8;
  --ui-border-strong: #cbd5e1;
  --ui-text: #20242c;
  --ui-muted: #667085;
  --ui-accent: #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-soft: #eff6ff;
  --ui-accent-line: #bfdbfe;
  --ui-radius: 6px;
}

:root[data-ui-style="classic"]:not([data-theme="dark"]) {
  --ui-canvas: #f5f7fa;
  --ui-surface-muted: #f8fafc;
  --ui-accent: #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-soft: #eff6ff;
  --ui-accent-line: #bfdbfe;
}

:root[data-ui-style="strawberry"]:not([data-theme="dark"]) {
  --ui-canvas: #f7f7f9;
  --ui-surface-muted: #fafafa;
  --ui-border: #e4e4e7;
  --ui-border-strong: #d4d4d8;
  --ui-text: #332b30;
  --ui-muted: #766872;
  --ui-accent: #d94674;
  --ui-accent-hover: #bd285b;
  --ui-accent-soft: #fff1f5;
  --ui-accent-line: #f3c2d1;
}

:root[data-ui-style="jelly"]:not([data-theme="dark"]) {
  --ui-canvas: #f5f7f6;
  --ui-surface-muted: #f8faf8;
  --ui-border: #dfe5e1;
  --ui-border-strong: #cbd7cf;
  --ui-text: #212923;
  --ui-muted: #66736a;
  --ui-accent: #2f855a;
  --ui-accent-hover: #246b49;
  --ui-accent-soft: #edf8f1;
  --ui-accent-line: #b9dfc8;
}

:root[data-theme="dark"] {
  --ui-canvas: #15191d;
  --ui-surface: #1c2228;
  --ui-surface-muted: #20272e;
  --ui-border: #34404a;
  --ui-border-strong: #46545f;
  --ui-text: #edf1f5;
  --ui-muted: #aab4be;
  --ui-accent: #60a5fa;
  --ui-accent-hover: #93c5fd;
  --ui-accent-soft: #1e344d;
  --ui-accent-line: #315b82;
}

:root[data-theme="dark"][data-ui-style="strawberry"] {
  --ui-accent: #f082a5;
  --ui-accent-hover: #f5a4bd;
  --ui-accent-soft: #492536;
  --ui-accent-line: #75405a;
}

:root[data-theme="dark"][data-ui-style="jelly"] {
  --ui-accent: #77c792;
  --ui-accent-hover: #9addaf;
  --ui-accent-soft: #203c2c;
  --ui-accent-line: #3e6c4e;
}

:root[data-ui-style] {
  --bg: var(--ui-canvas);
  --panel: var(--ui-surface);
  --soft: var(--ui-surface-muted);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border);
  --line-strong: var(--ui-border-strong);
  --accent: var(--ui-accent);
  --accent-strong: var(--ui-accent-hover);
  --bento-canvas: var(--ui-canvas);
  --bento-surface: var(--ui-surface);
  --bento-surface-muted: var(--ui-surface-muted);
  --bento-border: var(--ui-border);
  --bento-shadow: none;
  --bento-radius: var(--ui-radius);
  --bento-gap: 14px;
}

:root[data-ui-style] body,
:root[data-ui-style] .bento-shell,
:root[data-ui-style] .login-page {
  background: var(--ui-canvas);
}

:root[data-ui-style] .bento-shell {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  color: var(--ui-text);
}

:root[data-ui-style] .bento-shell .main {
  gap: 0;
}

:root[data-ui-style] .bento-shell .sidebar,
:root[data-ui-style] .bento-shell .topbar,
:root[data-ui-style] .bento-shell .content {
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .sidebar {
  border: 0;
  border-right: 1px solid var(--ui-border);
}

:root[data-ui-style] .bento-shell .topbar {
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
}

:root[data-ui-style] .bento-shell .content {
  padding: 18px;
  border: 0;
  background: var(--ui-canvas);
}

:root[data-ui-style] .bento-shell .brand {
  padding: 16px;
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .brand-logo {
  width: 38px;
  height: 38px;
  border-color: var(--ui-accent-line);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: 18px;
}

:root[data-ui-style] .bento-shell .account {
  padding: 12px;
  border-top-color: var(--ui-border);
  background: var(--ui-surface-muted);
}

:root[data-ui-style] .bento-shell .nav {
  gap: 2px;
  padding: 10px;
}

:root[data-ui-style] .bento-shell .nav button,
:root[data-ui-style] .bento-shell .nav-group-title {
  min-height: 36px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-muted);
  transform: none;
}

:root[data-ui-style] .bento-shell .nav button:hover,
:root[data-ui-style] .bento-shell .nav-group-title:hover {
  border: 0;
  background: var(--ui-surface-muted);
  box-shadow: none;
  color: var(--ui-text);
}

:root[data-ui-style] .bento-shell .nav button.active,
:root[data-ui-style] .bento-shell .nav button[aria-current="page"],
:root[data-ui-style] .bento-shell .nav-group.active .nav-group-title {
  border: 0;
  background: var(--ui-accent-soft);
  box-shadow: inset 2px 0 var(--ui-accent);
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell .theme-toggle {
  padding: 8px 9px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell button {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-text);
  transform: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

:root[data-ui-style] .bento-shell button:hover:not(:disabled) {
  border-color: var(--ui-accent-line);
  background: var(--ui-accent-soft);
  box-shadow: none;
  transform: none;
}

:root[data-ui-style] .bento-shell button:active:not(:disabled) {
  box-shadow: none;
  transform: none;
}

:root[data-ui-style] .bento-shell button.primary,
:root[data-ui-style] .bento-shell button.btn-primary,
:root[data-ui-style] .bento-shell button[type="submit"] {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  box-shadow: none;
  color: #ffffff;
}

:root[data-ui-style] .bento-shell button.primary:hover:not(:disabled),
:root[data-ui-style] .bento-shell button.btn-primary:hover:not(:disabled),
:root[data-ui-style] .bento-shell button[type="submit"]:hover:not(:disabled) {
  border-color: var(--ui-accent-hover);
  background: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell input:not([type="checkbox"]):not([type="radio"]),
:root[data-ui-style] .bento-shell select,
:root[data-ui-style] .bento-shell textarea {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-text);
}

:root[data-ui-style] .bento-shell input:focus,
:root[data-ui-style] .bento-shell select:focus,
:root[data-ui-style] .bento-shell textarea:focus,
:root[data-ui-style] .bento-shell button:focus-visible {
  border-color: var(--ui-accent);
  outline: 3px solid color-mix(in srgb, var(--ui-accent) 15%, transparent);
  outline-offset: 0;
}

:root[data-ui-style] .bento-shell :is(
  .section,
  .dashboard-panel,
  .dashboard-store-zone,
  .dashboard-filterbar,
  .dashboard-task-workspace,
  .order-workbench,
  .message-workbench,
  .message-center-metric,
  .product-toolbar,
  .filter-panel,
  .settings-section,
  .table-wrap,
  .product-table-wrap
) {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell :is(
  .section-head,
  .dashboard-panel-head,
  .dashboard-zone-head,
  .order-workbench-head,
  .message-panel-head,
  .message-thread-panel-head,
  .inbox-thread-head,
  .inbox-context-head,
  .dashboard-task-workspace-head
) {
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface-muted);
}

:root[data-ui-style] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell :is(.product-table, .data-table, .dashboard-table, .order-table) th {
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

:root[data-ui-style] .bento-shell .message-inbox {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .message-inbox-head {
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .message-inbox-layout {
  gap: 0;
}

:root[data-ui-style] .bento-shell .message-inbox :is(.inbox-list-panel, .inbox-thread-panel, .inbox-context-panel) {
  border: 0;
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .message-inbox .inbox-list-panel,
:root[data-ui-style] .bento-shell .message-inbox .inbox-thread-panel {
  border-right: 1px solid var(--ui-border);
}

:root[data-ui-style] .bento-shell .message-inbox :is(.inbox-list-filters, .inbox-thread-head, .inbox-context-head, .inbox-pagination) {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
}

:root[data-ui-style] .bento-shell .inbox-conversation,
:root[data-ui-style] .bento-shell .message-conversation-item {
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .inbox-conversation:hover,
:root[data-ui-style] .bento-shell .message-conversation-item:hover {
  border-bottom-color: var(--ui-border);
  background: var(--ui-surface-muted);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .inbox-conversation.selected,
:root[data-ui-style] .bento-shell .message-conversation-item.selected {
  border-bottom-color: var(--ui-accent-line);
  border-radius: 0;
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 var(--ui-accent);
  color: var(--ui-text);
}

:root[data-ui-style] .bento-shell .dashboard-light-page {
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

:root[data-ui-style] .bento-shell .dashboard-page.dashboard-light-page .dashboard-light-head {
  padding: 4px 4px 14px 13px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .dashboard-light-page .dashboard-eyebrow,
:root[data-ui-style] .bento-shell .dashboard-light-page .dashboard-panel-head > strong {
  color: var(--ui-accent);
}

:root[data-ui-style] .bento-shell .dashboard-priority-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .dashboard-priority-card {
  min-height: 82px;
  border: 0;
  border-right: 1px solid var(--ui-border);
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
  transform: none;
}

:root[data-ui-style] .bento-shell .dashboard-priority-card:last-child {
  border-right: 0;
}

:root[data-ui-style] .bento-shell .dashboard-priority-card:hover {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
  box-shadow: none;
  transform: none;
}

:root[data-ui-style] .bento-shell .dashboard-light-page .dashboard-operational-metrics > .dashboard-metric {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
  transform: none;
}

:root[data-ui-style] .bento-shell .dashboard-light-page .dashboard-operational-metrics > .dashboard-metric:hover {
  border-color: var(--ui-accent-line);
  background: var(--ui-surface-muted);
  box-shadow: none;
  transform: none;
}

:root[data-ui-style] .bento-shell .dashboard-light-page .dashboard-metric .dashboard-metric-icon-art {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .dashboard-metric-icon-art::before {
  width: 100%;
  height: 100%;
  background: var(--dashboard-metric-art) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

:root[data-ui-style] .bento-shell .dashboard-metric-icon-art::after {
  display: none;
  content: none;
}

:root[data-ui-style] :is(.modal, .modal-dialog, .dialog, [role="dialog"]) {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}

:root[data-ui-style] .login-shell {
  gap: 14px;
}

:root[data-ui-style] .login-panel,
:root[data-ui-style] .login-brand-panel,
:root[data-ui-style] .login-account-history-menu {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--ui-surface);
  box-shadow: none;
}

/* Keep the order workspace aligned with the selected interface theme. */
:root[data-ui-style] .bento-shell .order-workbench {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .order-workbench-head,
:root[data-ui-style] .bento-shell .order-platform-sidebar {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
}

:root[data-ui-style] .bento-shell .order-platform-item {
  border-color: transparent;
  background: transparent;
  color: var(--ui-text);
  box-shadow: none;
}

:root[data-ui-style] .bento-shell .order-platform-item:hover {
  border-color: var(--ui-accent-line);
  background: color-mix(in srgb, var(--ui-accent-soft) 62%, var(--ui-surface));
}

:root[data-ui-style] .bento-shell .order-platform-item.active {
  border-color: var(--ui-accent-line);
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 var(--ui-accent);
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell .order-platform-mark,
:root[data-ui-style] .bento-shell .order-platform-mark.all {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

:root[data-ui-style] .bento-shell .order-status-bar,
:root[data-ui-style] .bento-shell .platform-order-pagination {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .order-status-tabs button {
  border-color: transparent;
  background: transparent;
  color: var(--ui-muted);
}

:root[data-ui-style] .bento-shell .order-status-tabs button:hover {
  border-color: var(--ui-accent-line);
  background: color-mix(in srgb, var(--ui-accent-soft) 62%, var(--ui-surface));
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell .order-status-tabs button.active {
  border-color: var(--ui-accent-line);
  background: var(--ui-accent-soft);
  box-shadow: inset 0 -2px var(--ui-accent);
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell .order-record-table th {
  border-color: var(--ui-border);
  background: var(--ui-surface-muted);
  color: var(--ui-muted);
}

:root[data-ui-style] .bento-shell .order-record-table td {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .order-record-table tbody tr:hover td {
  background: color-mix(in srgb, var(--ui-accent-soft) 48%, var(--ui-surface));
}

:root[data-ui-style] .bento-shell .order-store-sku-link {
  border: 0;
  background: transparent;
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell :is(
  .order-invoice-button,
  .order-invoice-upload-button,
  .order-document-button
) {
  border-color: var(--ui-accent-line);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell :is(
  .order-invoice-button,
  .order-invoice-upload-button,
  .order-document-button
):hover:not(:disabled) {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface));
  color: var(--ui-accent-hover);
}

:root[data-ui-style] .bento-shell .order-refund-amount-display,
:root[data-ui-style] .bento-shell .order-document-file-list,
:root[data-ui-style] .bento-shell .order-metric {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

:root[data-ui-style] .bento-shell .order-metric:hover {
  border-color: var(--ui-accent-line);
  background: var(--ui-accent-soft);
}

:root[data-ui-style] .bento-shell .order-status-badge:not(.waiting-acceptance):not(.shipping):not(.shipped):not(.received):not(.closed) {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
}

@media (max-width: 980px) {
  :root[data-ui-style] .bento-shell {
    display: block;
    padding: 0;
  }

  :root[data-ui-style] .bento-shell .sidebar {
    margin: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
  }

  :root[data-ui-style] .bento-shell .main {
    gap: 0;
  }

  :root[data-ui-style] .bento-shell .content {
    padding: 12px;
  }
}

@media (max-width: 700px) {
  :root[data-ui-style] .bento-shell .dashboard-priority-grid {
    border: 0;
    background: transparent;
  }

  :root[data-ui-style] .bento-shell .dashboard-priority-card,
  :root[data-ui-style] .bento-shell .dashboard-priority-card:last-child {
    margin-bottom: 8px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
  }
}

/* AS stock and price sync workspace. Keep the history grid readable at desktop
   widths while allowing the table itself to scroll on narrow screens. */
.stock-price-sync-page {
  display: grid;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  gap: 16px;
}

.stock-price-sync-page > .panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 8px;
  background: var(--ui-surface, var(--panel));
  box-shadow: 0 8px 24px rgba(24, 39, 54, 0.06);
}

.stock-price-sync-page > .panel:first-child {
  border-top: 3px solid var(--ui-accent, var(--accent));
}

.stock-price-sync-page > .panel > .form-grid {
  padding: 18px 20px 20px;
}

.stock-price-sync-page .section-head {
  min-height: 62px;
  padding: 15px 20px;
  background: var(--ui-surface-muted, #f8fafc);
}

.stock-price-sync-page .section-head h3 {
  color: var(--ui-text, var(--text));
  font-size: 17px;
  line-height: 1.3;
}

.stock-price-sync-page .section-head p {
  max-width: 980px;
  margin: 6px 0 0;
  line-height: 1.55;
}

.stock-price-sync-history-head > div {
  display: grid;
  gap: 4px;
}

.stock-price-sync-history-count {
  color: var(--ui-muted, var(--muted));
  font-size: 12px;
  line-height: 1.2;
}

.stock-price-sync-history-wrap {
  max-height: clamp(360px, 58vh, 620px);
  overflow: auto;
  scrollbar-color: var(--ui-border-strong, var(--line-strong)) var(--ui-surface-muted, var(--soft));
}

.stock-price-sync-history-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}

.stock-price-sync-history-table .stock-price-sync-col-shop { width: 22%; }
.stock-price-sync-history-table .stock-price-sync-col-time { width: 21%; }
.stock-price-sync-history-table .stock-price-sync-col-total,
.stock-price-sync-history-table .stock-price-sync-col-submitted,
.stock-price-sync-history-table .stock-price-sync-col-success,
.stock-price-sync-history-table .stock-price-sync-col-failed { width: 14.25%; }

.stock-price-sync-history-table th,
.stock-price-sync-history-table td {
  padding: 12px 14px;
}

.stock-price-sync-history-table th:nth-child(n + 3),
.stock-price-sync-history-table td:nth-child(n + 3) {
  text-align: right;
}

.stock-price-sync-history-table th {
  color: var(--ui-muted, #667085);
  background: var(--ui-surface-muted, #f8fafc);
  letter-spacing: 0;
}

.stock-price-sync-history-table tbody tr {
  transition: background-color 160ms ease;
}

.stock-price-sync-history-table tbody tr:hover td {
  background: color-mix(in srgb, var(--ui-accent-soft, var(--soft)) 58%, var(--ui-surface, var(--panel)));
}

.stock-price-sync-shop {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.stock-price-sync-shop strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text, var(--text));
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-price-sync-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ui-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent-soft, var(--soft)) 78%, transparent);
}

.stock-price-sync-run-row.is-succeeded .stock-price-sync-status-dot {
  background: var(--ok, #25744f);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #25744f) 14%, transparent);
}

.stock-price-sync-run-row.is-failed .stock-price-sync-status-dot {
  background: var(--danger, #b42318);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #b42318) 14%, transparent);
}

.stock-price-sync-count {
  display: inline-block;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.35;
}

.stock-price-sync-count-total { color: var(--ui-text, var(--text)); }
.stock-price-sync-count-submitted { color: var(--ui-accent-hover, var(--accent-strong)); }
.stock-price-sync-count-success { color: var(--ok, #25744f); }
.stock-price-sync-count-failed { color: var(--danger, #b42318); }

.stock-price-sync-empty {
  height: 180px;
  text-align: center !important;
  vertical-align: middle;
}

@media (max-width: 980px) {
  .stock-price-sync-page {
    gap: 12px;
  }

  .stock-price-sync-page > .panel > .form-grid {
    padding: 15px;
  }

  .stock-price-sync-page .section-head {
    padding: 14px 15px;
  }

  .stock-price-sync-history-wrap {
    max-height: min(56vh, 540px);
  }
}

@media (max-width: 640px) {
  .stock-price-sync-page .section-head {
    min-height: 56px;
  }

  .stock-price-sync-history-table {
    min-width: 700px;
  }

  .stock-price-sync-history-table th,
  .stock-price-sync-history-table td {
    padding: 10px 11px;
  }

  .stock-price-sync-history-table .stock-price-sync-col-shop { width: 25%; }
  .stock-price-sync-history-table .stock-price-sync-col-time { width: 23%; }
  .stock-price-sync-history-table .stock-price-sync-col-total,
  .stock-price-sync-history-table .stock-price-sync-col-submitted,
  .stock-price-sync-history-table .stock-price-sync-col-success,
  .stock-price-sync-history-table .stock-price-sync-col-failed { width: 13%; }
}