/* ============================================================
 * 易联跨境 · Arco Design 主题全覆盖
 * 加载顺序：最后加载，覆盖 dashboard.css / dashboard-fixes.css / design-system.css
 * 原则：不改变布局结构，仅替换视觉样式（颜色/圆角/阴影/间距/字体/边框）
 * ============================================================ */

/* ========== 1. 全局与布局 ========== */
body {
  background: var(--color-bg-1);
  color: var(--color-text-1);
  font-family: var(--font-family);
  font-size: var(--font-size-body-3);
  line-height: var(--line-height);
}

.app {
  grid-template-columns: 224px minmax(0, 1fr);
}

/* ========== 2. 侧边栏（Arco 深色导航风格） ========== */
.sidebar {
  background: linear-gradient(180deg, #001529 0%, #000C17 100%);
  padding: 20px 12px 16px;
  border-right: none;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 0;
}
.brand-logo {
  max-width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}
.brand img {
  width: auto;
  height: auto;
  max-height: 52px;
  border-radius: 0;
  box-shadow: none;
}

/* 店铺切换 */
.side-store-switch {
  margin: 0 4px 14px;
  padding: 0;
  border: none;
  background: transparent;
}
.side-store-switch select {
  height: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--border-radius-medium);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-normal);
  padding: 0 30px 0 10px;
}
.side-store-switch select:hover {
  border-color: rgba(22, 93, 255, 0.5);
}

/* 导航分组标签 */
.nav-label {
  padding: 14px 10px 6px;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 导航项 */
.nav-item {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--border-radius-medium);
  color: rgba(255,255,255,0.65);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-normal);
  gap: 10px;
  margin: 1px 0;
  transition: all var(--transition-fast);
}
.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.nav-item.active {
  color: #fff;
  background: var(--color-primary-6);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.35);
}
.nav-item span {
  width: 18px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.nav-item.active span {
  color: #fff;
}
.nav-item i {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
}
.nav-item.active i {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* 导航符号方块 */
.nav-symbol {
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.7);
  border-radius: var(--border-radius-small);
}
.nav-item.active .nav-symbol {
  border-color: #fff;
  color: #fff;
}

/* 底部隐私卡片 */
.side-foot { margin-top: auto; }
.privacy-card {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-radius-large);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-body-1);
  line-height: 1.6;
}
.privacy-card strong {
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
  font-weight: var(--font-weight-medium);
}
.privacy-card strong span {
  width: 6px;
  height: 6px;
  background: var(--color-success-6);
  box-shadow: 0 0 6px rgba(0, 180, 42, 0.5);
}
.privacy-card b {
  color: rgba(255,255,255,0.75);
}

/* ========== 3. 顶部栏与工作页签 ========== */
.main {
  padding: 0 24px 32px;
  min-width: 0;
}

.workspace-tabbar {
  height: 56px;
  margin: 0 -24px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--color-border-2);
  grid-template-columns: 36px minmax(0, 1fr) 36px auto;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 80;
}

.workspace-tabs {
  min-height: 36px;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  align-items: center;
}

.workspace-tab {
  height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-normal);
  gap: 6px;
  transition: all var(--transition-fast);
}
.workspace-tab:hover {
  background: var(--color-fill-2);
  color: var(--color-text-1);
}
.workspace-tab.active {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-medium);
}
.workspace-tab i {
  width: 16px;
  height: 16px;
  border-radius: var(--border-radius-circle);
  color: var(--color-text-3);
  font-size: 12px;
}
.workspace-tab i:hover {
  background: var(--color-fill-3);
  color: var(--color-danger-6);
}

.workspace-tab-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  font-size: 18px;
  line-height: 1;
  transition: all var(--transition-fast);
}
.workspace-tab-arrow:hover {
  border-color: var(--color-primary-6);
  color: var(--color-primary-6);
  background: var(--color-primary-1);
}

/* 顶部操作区 */
.topbar {
  min-height: 54px;
  border-bottom: 1px solid var(--color-border-2);
  padding: 10px 0;
}
.topbar h1 {
  font-size: var(--font-size-title-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
  letter-spacing: -0.01em;
}
.breadcrumb {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
}
.top-actions {
  gap: 8px;
  align-items: center;
}

/* 用户标签 */
.user-chip {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
}

/* 数据库同步状态 */
.db-sync {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-medium);
}
.db-sync::before {
  width: 6px;
  height: 6px;
  background: var(--gray-5);
}
.db-sync.synced {
  color: var(--color-success-7);
  background: var(--color-success-1);
  border-color: var(--green-3);
}
.db-sync.synced::before { background: var(--color-success-6); }
.db-sync.syncing {
  color: var(--color-warning-7);
  background: var(--color-warning-1);
  border-color: var(--orange-3);
}
.db-sync.syncing::before { background: var(--color-warning-6); }
.db-sync.error {
  color: var(--color-danger-7);
  background: var(--color-danger-1);
  border-color: var(--red-3);
}
.db-sync.error::before { background: var(--color-danger-6); }

/* 账号切换 */
.account-switch {
  height: 34px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  gap: 6px;
}
.account-switch select {
  height: 26px;
  border: none;
  background: var(--color-fill-1);
  border-radius: var(--border-radius-small);
  color: var(--color-text-1);
  font-weight: var(--font-weight-medium);
}

/* ========== 4. 按钮 ========== */
.btn {
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
  gap: 6px;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.btn:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-primary-6);
  color: var(--color-primary-6);
  background: var(--color-primary-1);
}
.btn:active {
  background: var(--color-primary-2);
}

.btn-primary {
  background: var(--color-primary-6);
  border-color: var(--color-primary-6);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-5);
  border-color: var(--color-primary-5);
  color: #fff;
}
.btn-primary:active {
  background: var(--color-primary-7);
  border-color: var(--color-primary-7);
}

.btn-dark {
  background: var(--gray-8);
  border-color: var(--gray-8);
  color: #fff;
}
.btn-dark:hover {
  background: var(--gray-7);
  border-color: var(--gray-7);
  color: #fff;
}

.btn-danger {
  color: var(--color-danger-6);
  border-color: var(--red-3);
}
.btn-danger:hover {
  background: var(--color-danger-1);
  border-color: var(--color-danger-6);
  color: var(--color-danger-6);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-2);
}
.btn-ghost:hover {
  background: var(--color-fill-2);
  border-color: transparent;
  color: var(--color-text-1);
}

.btn-small {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  font-size: var(--font-size-body-2) !important;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-fill-2);
  border-color: var(--color-border-2);
  color: var(--color-text-4);
}
.btn-primary:disabled {
  background: var(--color-primary-3);
  border-color: var(--color-primary-3);
  color: #fff;
}

/* 文字链接按钮 */
.link-btn {
  color: var(--color-primary-6);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
  padding: 4px 4px;
  transition: color var(--transition-fast);
}
.link-btn:hover {
  color: var(--color-primary-5);
  text-decoration: none;
}
.link-btn:disabled {
  color: var(--color-text-4);
}

/* 图标按钮 */
.icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  transition: all var(--transition-fast);
}
.icon-btn:hover {
  border-color: var(--color-primary-6);
  color: var(--color-primary-6);
  background: var(--color-primary-1);
}

/* ========== 5. 表单控件 ========== */
.field {
  margin-bottom: 14px;
}
.field label {
  margin-bottom: 5px;
  color: var(--color-text-2);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
}
.field label em {
  color: var(--color-danger-6);
}

.control {
  width: 100%;
  min-height: 34px;
  height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-1);
  font-size: var(--font-size-body-3);
  transition: all var(--transition-fast);
}
.control:hover {
  border-color: var(--gray-5);
}
.control:focus {
  border-color: var(--color-primary-6);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.control::placeholder {
  color: var(--color-text-4);
}
.control[readonly] {
  background: var(--color-fill-1);
  color: var(--color-text-3);
  cursor: not-allowed;
}
textarea.control {
  min-height: 72px;
  padding: 8px 11px;
  line-height: var(--line-height);
  resize: vertical;
}

/* select 原生下拉箭头 */
select.control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
}

/* 密码输入框 */
.password-input-wrap .control { padding-right: 40px; }
.password-eye {
  right: 4px;
  width: 30px;
  height: 28px;
  border-radius: var(--border-radius-small);
  color: var(--color-text-3);
  font-size: 16px;
  transition: all var(--transition-fast);
}
.password-eye:hover,
.password-eye.visible {
  background: var(--color-primary-1);
  color: var(--color-primary-6);
}

/* 记住登录 */
.remember-login {
  color: var(--color-text-2);
  font-size: var(--font-size-body-3);
  gap: 6px;
}
.remember-login input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-6);
  border-radius: var(--border-radius-small);
}

/* ========== 6. 自定义下拉组件 (sdm-select) ========== */
.sdm-select-trigger {
  height: 34px;
  padding: 0 32px 0 11px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-1);
  font-size: var(--font-size-body-3);
  transition: all var(--transition-fast);
}
.sdm-select-trigger:hover {
  border-color: var(--gray-5);
  background: #fff;
}
.sdm-select.open > .sdm-select-trigger {
  border-color: var(--color-primary-6);
  box-shadow: var(--shadow-focus);
}
.sdm-select-trigger::after {
  right: 12px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-text-3);
  border-bottom: 1.5px solid var(--color-text-3);
}
.sdm-select-trigger.placeholder { color: var(--color-text-4); }
.sdm-select-trigger:disabled {
  background: var(--color-fill-1);
  color: var(--color-text-4);
  cursor: not-allowed;
}

.sdm-select-menu {
  top: calc(100% + 4px);
  padding: 4px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  background: #fff;
  box-shadow: var(--shadow-3);
}
.sdm-select-option {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--border-radius-medium);
  color: var(--color-text-2);
  font-size: var(--font-size-body-3);
  transition: all var(--transition-fast);
}
.sdm-select-option:hover {
  background: var(--color-primary-1);
  color: var(--color-primary-7);
}
.sdm-select-option.selected {
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-medium);
}
.sdm-select-option i {
  color: var(--color-primary-6);
}
.sdm-select-option:disabled {
  color: var(--color-text-4);
}

/* 深色侧边栏下拉 */
.sdm-select-dark .sdm-select-trigger {
  height: 34px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.sdm-select-dark .sdm-select-trigger::after {
  border-color: rgba(255,255,255,0.5);
}
.sdm-select-dark .sdm-select-menu {
  border-color: rgba(255,255,255,0.1);
  background: #001529;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sdm-select-dark .sdm-select-option {
  color: rgba(255,255,255,0.75);
}
.sdm-select-dark .sdm-select-option:hover,
.sdm-select-dark .sdm-select-option.selected {
  background: rgba(22, 93, 255, 0.25);
  color: #fff;
}

/* ========== 7. 面板与卡片 ========== */
.panel {
  background: #fff;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  box-shadow: none;
  margin-top: 12px;
  overflow: hidden;
}
.panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-2);
  gap: 12px;
}
.panel-head h2 {
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
}
.panel-head p {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  margin-top: 2px;
}
.panel-body {
  padding: 16px;
}

/* 区块标题 */
.section-title {
  padding: 10px 14px;
  background: var(--color-primary-1);
  border-left: 3px solid var(--color-primary-6);
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-7);
  margin-bottom: 14px;
}

/* 编辑卡片 */
.edit-card {
  background: #fff;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  box-shadow: none;
  padding: 16px;
  margin-bottom: 12px;
}

/* ========== 8. 统计卡片 ========== */
.page-summary {
  gap: 12px;
  margin: 14px 0 12px;
}
.stat {
  background: #fff;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  padding: 14px 16px;
  min-height: 76px;
  transition: all var(--transition-fast);
}
.stat:hover {
  border-color: var(--color-primary-4);
  box-shadow: var(--shadow-1);
}
.stat label {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  margin-bottom: 6px;
  font-weight: var(--font-weight-normal);
}
.stat strong {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
  letter-spacing: -0.02em;
}
.stat small {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
  margin-top: 4px;
}

/* ========== 9. 表格 ========== */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

th {
  padding: 10px 12px;
  background: var(--color-fill-1);
  border-bottom: 1px solid var(--color-border-2);
  color: var(--color-text-2);
  text-align: left;
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-border-1);
  font-size: var(--font-size-body-3);
  color: var(--color-text-1);
  vertical-align: middle;
}

tbody tr {
  transition: background var(--transition-fast);
}
tbody tr:hover {
  background: var(--color-fill-1);
}
tbody tr:last-child td { border-bottom: none; }

/* 复选框 */
.check {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-6);
  cursor: pointer;
  border-radius: var(--border-radius-small);
}

/* 产品信息单元格 */
.product-info {
  gap: 10px;
  min-width: 255px;
}
.thumb, .thumb-fallback {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
}
.thumb { object-fit: contain; }
.thumb-fallback {
  display: grid;
  place-items: center;
  color: var(--color-text-3);
  font-weight: var(--font-weight-bold);
}
.product-info strong {
  color: var(--color-text-1);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}
.meta {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
  margin-top: 3px;
}

/* 产品标题链接 */
.product-title {
  color: var(--color-text-1);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.product-title:hover {
  color: var(--color-primary-6);
  text-decoration: none;
}

/* 行操作 */
.row-actions { gap: 4px; }

/* ========== 10. 标签与状态 ========== */
.tag, .status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--border-radius-circle);
  padding: 3px 8px;
  white-space: nowrap;
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.tag {
  background: var(--color-fill-2);
  color: var(--color-text-2);
  border: none;
}

.status-green {
  background: var(--color-success-1);
  color: var(--color-success-7);
}
.status-amber, .status-yellow {
  background: var(--color-warning-1);
  color: var(--color-warning-7);
}
.status-blue {
  background: var(--color-primary-1);
  color: var(--color-primary-7);
}
.status-gray {
  background: var(--color-fill-2);
  color: var(--color-text-3);
}
.status-red {
  background: var(--color-danger-1) !important;
  color: var(--color-danger-7) !important;
}

/* ========== 11. 分页 ========== */
.pager {
  min-height: 52px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border-1);
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  gap: 12px;
  flex-wrap: wrap;
}

.pager-size {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  min-width: 100px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386909C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
}

.pager-pages { gap: 4px; }

.pager-button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pager-button:hover:not(:disabled) {
  background: var(--color-primary-1);
  color: var(--color-primary-6);
}
.pager-button.active {
  background: var(--color-primary-6);
  color: #fff;
  border-color: var(--color-primary-6);
}
.pager-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pager-jump input {
  width: 54px;
  height: 32px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  padding: 0 8px;
  text-align: center;
  font-size: var(--font-size-body-2);
  color: var(--color-text-1);
}
.pager-jump input:focus {
  border-color: var(--color-primary-6);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* ========== 12. 弹窗 Modal ========== */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  padding: 20px;
}

.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-4);
  border: none;
  overflow: hidden;
}
.modal.wide { width: min(900px, 100%); }

.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-1);
  gap: 12px;
}
.modal-head h2 {
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
  margin: 0;
}
.modal-head p {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  margin: 4px 0 0;
}

.modal-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-3);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: grid;
  place-items: center;
}
.modal-close:hover {
  background: var(--color-fill-3);
  color: var(--color-text-1);
}

.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
}

.modal-foot {
  padding: 12px 20px;
  background: #fff;
  border-top: 1px solid var(--color-border-1);
  gap: 8px;
}

/* ========== 13. Toast 提示 ========== */
.toast-wrap {
  right: 20px;
  bottom: 20px;
  gap: 8px;
  z-index: 300;
}
.toast {
  min-width: 280px;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-1);
  font-size: var(--font-size-body-3);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--color-border-2);
  border-left: 3px solid var(--color-primary-6);
}
.toast.success {
  border-left-color: var(--color-success-6);
}
.toast.error {
  border-left-color: var(--color-danger-6);
}
.toast.info {
  border-left-color: var(--color-primary-6);
}

/* ========== 14. 空状态 ========== */
.empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--color-text-3);
}
.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: var(--border-radius-large);
  background: var(--color-primary-1);
  color: var(--color-primary-6);
  font-size: 28px;
  display: grid;
  place-items: center;
}
.empty h3 {
  color: var(--color-text-1);
  font-size: var(--font-size-title-1);
  margin: 0 0 6px;
  font-weight: var(--font-weight-medium);
}
.empty p {
  color: var(--color-text-3);
  font-size: var(--font-size-body-3);
  margin: 0 0 16px;
}

/* ========== 15. 步骤条 ========== */
.stepper {
  gap: 6px;
  margin-bottom: 14px;
}
.step {
  min-width: 140px;
  padding: 8px 12px;
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}
.step.active {
  background: var(--color-primary-6);
  color: #fff;
  box-shadow: 0 4px 10px rgba(22, 93, 255, 0.25);
}
.step.done {
  background: var(--color-primary-1);
  color: var(--color-primary-7);
}

/* ========== 16. 开关 Switch ========== */
.service-toggle {
  gap: 8px;
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
}
.service-toggle span {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-border-3);
  transition: all var(--transition-normal);
}
.service-toggle span:after {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: all var(--transition-normal);
}
.service-toggle input:checked + span {
  background: var(--color-primary-6);
}
.service-toggle input:checked + span:after {
  transform: translateX(16px);
}

/* ========== 17. 图片相关 ========== */
.image-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.image-card {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  background: #fff;
  overflow: hidden;
  transition: all var(--transition-fast);
}
.image-card:hover {
  border-color: var(--color-primary-4);
  box-shadow: var(--shadow-2);
}
.image-stage {
  aspect-ratio: 1;
  background: var(--color-fill-1);
}
.image-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.image-overlay button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--border-radius-medium);
  background: rgba(255,255,255,0.15);
  color: #fff;
  transition: all var(--transition-fast);
}
.image-overlay button:hover {
  background: rgba(255,255,255,0.25);
}
.image-meta {
  padding: 8px 10px;
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
}

/* 上传卡片 */
.upload-card {
  aspect-ratio: 1;
  border: 1.5px dashed var(--color-border-3);
  border-radius: var(--border-radius-large);
  background: var(--color-fill-1);
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  transition: all var(--transition-fast);
}
.upload-card:hover {
  border-color: var(--color-primary-6);
  color: var(--color-primary-6);
  background: var(--color-primary-1);
}

/* ========== 18. 登录页 ========== */
.auth-root {
  background: linear-gradient(135deg, #001529 0%, #002a5c 50%, #e8f3ff 50%, #f7f8fa 100%);
}
.auth-shell {
  width: min(960px, calc(100vw - 48px));
  min-height: 580px;
  border-radius: var(--border-radius-large);
  background: #fff;
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.auth-hero {
  padding: 48px 40px;
  color: #fff;
  background: linear-gradient(155deg, var(--color-primary-7), var(--color-primary-6)), url("assets/icon.png") center/240px no-repeat;
}
.auth-brand {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.auth-brand-logo,
.auth-brand img {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 60px;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.auth-hero h2 {
  font-size: 30px;
  line-height: 1.3;
  margin: 32px 0 12px;
  font-weight: var(--font-weight-semibold);
}
.auth-hero p {
  max-width: 300px;
  line-height: 1.8;
  opacity: 0.8;
  font-size: var(--font-size-body-3);
}
.auth-hero-note {
  font-size: var(--font-size-body-1);
  line-height: 1.8;
  opacity: 0.65;
}
.auth-card {
  padding: 44px 48px;
}
.auth-card h1 {
  font-size: 26px;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 6px;
  color: var(--color-text-1);
}
.auth-subtitle {
  color: var(--color-text-3);
  font-size: var(--font-size-body-3);
  line-height: 1.6;
  margin: 0 0 24px;
}
.auth-form { gap: 14px; }
.auth-code-row .btn {
  height: 36px;
  white-space: nowrap;
}
.auth-links {
  margin-top: 14px;
  gap: 8px;
}
.auth-link {
  color: var(--color-primary-6);
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
  padding: 4px 0;
}
.auth-link:hover { color: var(--color-primary-5); }

.auth-hint {
  padding: 10px 12px;
  border-radius: var(--border-radius-medium);
  background: var(--color-warning-1);
  color: var(--color-warning-7);
  font-size: var(--font-size-body-2);
  line-height: 1.6;
  border: none;
}
.auth-error {
  padding: 10px 12px;
  border-radius: var(--border-radius-medium);
  background: var(--color-danger-1);
  color: var(--color-danger-7);
  font-size: var(--font-size-body-2);
  border: none;
}
.auth-success {
  padding: 10px 12px;
  border-radius: var(--border-radius-medium);
  background: var(--color-success-1);
  color: var(--color-success-7);
  font-size: var(--font-size-body-2);
  border: none;
}
.password-rule {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
  margin-top: 4px;
}

/* ========== 19. 账号与店铺 ========== */
.account-card {
  padding: 16px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  background: #fff;
  transition: all var(--transition-fast);
}
.account-card:hover {
  border-color: var(--color-primary-4);
  box-shadow: var(--shadow-1);
}
.account-card-head h3 {
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
}

.store-card {
  padding: 12px 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  transition: all var(--transition-fast);
}
.store-card:hover {
  border-color: var(--color-primary-4);
}
.store-card.active {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
}

.store-tab {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.store-tab:hover {
  border-color: var(--color-primary-6);
  color: var(--color-primary-6);
}
.store-tab.active {
  border-color: var(--color-primary-6);
  background: var(--color-primary-6);
  color: #fff;
}

/* 权限勾选 */
.permission-check {
  padding: 10px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2) !important;
  transition: all var(--transition-fast);
}
.permission-check:hover {
  border-color: var(--color-primary-4);
}
.permission-check:has(input:checked) {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
  color: var(--color-primary-7) !important;
}
.permission-check input {
  accent-color: var(--color-primary-6);
}

/* ========== 20. 国家选择与标签 ========== */
.country-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  transition: all var(--transition-fast);
  background: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.country-check:hover {
  border-color: var(--color-primary-4);
}
.country-check:has(input:checked) {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-medium);
}
.country-check input {
  accent-color: var(--color-primary-6);
}

/* 编辑页基本信息行：三列顶部对齐统一 */
.country-link-line {
  align-items: start;
  gap: 16px;
}
.country-link-line .field {
  margin-bottom: 0;
}
.country-link-line .field > label {
  display: block;
  margin-bottom: 6px;
  height: 20px;
  line-height: 20px;
}

/* 国家按钮行：允许换行但不影响其他列对齐 */
.country-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* 产品链接行：输入框与按钮等高 */
.purchase-link-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.purchase-link-input {
  min-height: 34px;
  height: 34px;
  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
  border-right: none;
}
.purchase-link-input:focus {
  border-right: 1px solid var(--color-primary-6);
  margin-right: -1px;
}
.purchase-link-button {
  min-height: 34px;
  height: 34px;
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* UPC 方式行：单选按钮统一尺寸 */
.compact-upc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.compact-upc-row .country-check {
  flex: 1;
  padding: 0 6px;
  font-size: var(--font-size-body-1);
}

/* Token 标签 */
.token {
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  border-radius: var(--border-radius-medium);
  padding: 4px 8px;
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
}
.token button {
  color: inherit;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.token button:hover { opacity: 1; }

/* AI 单选 */
.ai-radio {
  padding: 6px 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-circle);
  font-size: var(--font-size-body-2);
  transition: all var(--transition-fast);
  background: #fff;
}
.ai-radio:hover {
  border-color: var(--color-primary-4);
}
.ai-radio:has(input:checked) {
  background: var(--color-primary-1);
  border-color: var(--color-primary-6);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-medium);
}

/* 国家内容页签 */
.country-content-tab {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  transition: all var(--transition-fast);
}
.country-content-tab:hover {
  border-color: var(--color-primary-4);
  color: var(--color-primary-6);
}
.country-content-tab.active {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-medium);
}
.country-content-tab small { color: var(--color-text-3); }

/* ========== 21. 进度与加载 ========== */
.progress {
  padding: 10px 12px;
  border: 1px solid var(--orange-3);
  background: var(--color-warning-1);
  color: var(--color-warning-7);
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-body-2);
  gap: 8px;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-primary-2);
  border-top-color: var(--color-primary-6);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* AI 运行中提示 */
.ai-running {
  padding: 10px 12px;
  border: 1px solid var(--green-3);
  border-radius: var(--border-radius-medium);
  background: var(--color-success-1);
  color: var(--color-success-7);
  font-size: var(--font-size-body-2);
  gap: 8px;
}

/* ========== 22. 价格结果与变体 ========== */
.price-result {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}
.price-result div {
  padding: 12px;
  border-right: 1px solid var(--color-border-1);
}
.price-result div:last-child { border-right: none; }
.price-result small {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
}
.price-result strong {
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
}

.delta-positive {
  color: var(--color-success-6);
  font-weight: var(--font-weight-semibold);
}
.delta-negative {
  color: var(--color-danger-6);
  font-weight: var(--font-weight-semibold);
}

/* 变体图片 */
.variant-images img {
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
}
.variant-image-card {
  width: 54px;
  height: 54px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
}

/* ========== 23. 批量操作栏 ========== */
.batch-bar {
  padding: 12px;
  background: var(--color-fill-1);
  border-radius: var(--border-radius-medium);
  gap: 8px;
  margin-top: 12px;
}

/* ========== 24. 设置说明 ========== */
.settings-note {
  padding: 10px 12px;
  border-radius: var(--border-radius-medium);
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-size: var(--font-size-body-2);
  line-height: 1.6;
  border: none;
}
.field-help {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
  line-height: 1.5;
  margin-top: 5px;
}

/* 设置行 */
.setting-row {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  gap: 12px;
  transition: all var(--transition-fast);
}
.setting-row:hover {
  border-color: var(--color-primary-4);
}
.default-choice {
  color: var(--color-primary-6) !important;
}
.default-choice input {
  accent-color: var(--color-primary-6);
}
.setting-url {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
}

/* ========== 25. API 设置 ========== */
.api-environment-row {
  padding: 14px 16px;
  border: 1px solid var(--color-primary-3);
  border-radius: var(--border-radius-medium);
  background: var(--color-primary-1);
  gap: 12px;
}
.api-environment-row strong {
  font-size: var(--font-size-body-3);
  color: var(--color-text-1);
}
.api-environment-row small {
  color: var(--color-text-3);
}
.api-env-badge {
  padding: 4px 8px;
  border-radius: var(--border-radius-small);
  background: var(--color-primary-6);
  color: #fff;
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
}
.api-production-warning {
  border-color: var(--red-3) !important;
  background: var(--color-danger-1) !important;
  color: var(--color-danger-7) !important;
}

.api-connection {
  padding: 14px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  gap: 10px;
}
.api-connection-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gray-5);
  box-shadow: 0 0 0 4px rgba(134, 144, 156, 0.15);
}
.api-connection strong {
  font-size: var(--font-size-body-3);
  color: var(--color-text-1);
}
.api-connection p {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
  line-height: 1.6;
}
.api-connection small {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
}
.api-connection.success {
  border-color: var(--green-3);
  background: var(--color-success-1);
}
.api-connection.success .api-connection-dot {
  background: var(--color-success-6);
  box-shadow: 0 0 0 4px rgba(0, 180, 42, 0.15);
}
.api-connection.failed {
  border-color: var(--red-3);
  background: var(--color-danger-1);
}
.api-connection.failed .api-connection-dot {
  background: var(--color-danger-6);
  box-shadow: 0 0 0 4px rgba(245, 63, 63, 0.15);
}
.api-loading {
  color: var(--color-primary-6);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
}

/* API 密钥眼睛 */
.api-secret-eye {
  right: 4px;
  width: 30px;
  height: 28px;
  border-radius: var(--border-radius-small);
  color: var(--color-text-3);
  font-size: 16px;
  transition: all var(--transition-fast);
}
.api-secret-eye:hover,
.api-secret-eye.visible {
  background: var(--color-primary-1);
  color: var(--color-primary-6);
}

/* 上传失败提示 */
.upload-failure-box {
  padding: 12px 14px;
  border: 1px solid var(--red-3);
  border-radius: var(--border-radius-medium);
  background: var(--color-danger-1);
  color: var(--color-danger-7);
  font-size: var(--font-size-body-3);
  line-height: 1.7;
}
.upload-result-list > div {
  padding: 8px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  font-size: var(--font-size-body-2);
}

/* ========== 26. 分类与产品类型 ========== */
.category-path-results {
  top: 42px;
  padding: 4px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  background: #fff;
  box-shadow: var(--shadow-3);
}
.category-path-option {
  padding: 8px 10px;
  border-radius: var(--border-radius-medium);
  color: var(--color-text-2);
  transition: all var(--transition-fast);
}
.category-path-option:hover {
  background: var(--color-primary-1);
  color: var(--color-primary-7);
}
.category-path-option small {
  color: var(--color-text-3);
}
.category-source-meta {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
}
.category-source-meta .error-text {
  color: var(--color-danger-6);
}
.category-search-message {
  padding: 10px;
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
}

.product-type-chip {
  padding: 4px 8px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-small);
  background: #fff;
  color: var(--color-text-2);
  font-size: var(--font-size-body-1);
  transition: all var(--transition-fast);
}
.product-type-chip:hover,
.product-type-chip.recommended {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
  color: var(--color-primary-7);
}

.product-type-dropdown.open {
  top: 38px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
  background: #fff;
  box-shadow: var(--shadow-3);
}
.product-type-option {
  padding: 8px 12px;
  border-top: 1px solid var(--color-border-1);
  transition: all var(--transition-fast);
}
.product-type-option:hover {
  background: var(--color-primary-1);
}
.product-type-option strong {
  color: var(--color-text-1);
  font-size: var(--font-size-body-2);
}
.product-type-option small {
  color: var(--color-text-3);
  font-size: var(--font-size-body-1);
}
.product-type-option em {
  padding: 3px 6px;
  border-radius: var(--border-radius-small);
  background: var(--color-fill-2);
  color: var(--color-text-2);
  font-size: var(--font-size-body-1);
}
.product-type-option:hover em {
  background: var(--color-primary-6);
  color: #fff;
}
.product-type-search-button {
  width: 38px;
  border-left: 1px solid var(--color-border-2);
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  background: #fff;
  color: var(--color-text-2);
  font-size: 18px;
  transition: all var(--transition-fast);
}
.product-type-search-button:hover {
  background: var(--color-primary-1);
  color: var(--color-primary-6);
}

/* ========== 27. 服务状态与用量 ========== */
.service-status {
  padding: 4px 8px;
  border-radius: var(--border-radius-small);
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-medium);
}
.service-status.ready {
  color: var(--color-success-7);
  background: var(--color-success-1);
}
.service-status.missing {
  color: var(--color-warning-7);
  background: var(--color-warning-1);
}
.active-service-pills span {
  padding: 4px 8px;
  border-radius: var(--border-radius-small);
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-medium);
}

.usage-summary > div {
  padding: 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  transition: all var(--transition-fast);
}
.usage-summary > div:hover {
  border-color: var(--color-primary-4);
  box-shadow: var(--shadow-1);
}
.usage-summary span {
  color: var(--color-text-3);
  font-size: var(--font-size-body-2);
}
.usage-summary strong {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
  margin-top: 6px;
}

.usage-table-wrap {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}
.usage-table th {
  background: var(--color-fill-1);
  color: var(--color-text-2);
}
.usage-table td {
  border-bottom: 1px solid var(--color-border-1);
}

/* ========== 28. 订单相关 ========== */
.order-product-image {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
}
.money-cell {
  text-align: right !important;
  font-size: var(--font-size-body-3);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}
.money-negative { color: var(--color-danger-6) !important; }
.money-positive { color: var(--color-success-6) !important; }
.profit-positive { color: var(--color-success-6); }
.profit-negative, .warning-text { color: var(--color-danger-6); }

.order-summary b {
  color: var(--color-text-3);
  font-weight: var(--font-weight-normal);
}

/* 业绩图表 */
.performance-track {
  height: 20px;
  border-radius: var(--border-radius-circle);
  background: var(--color-fill-2);
  overflow: hidden;
}
.performance-track i {
  border-radius: var(--border-radius-circle);
  background: var(--color-primary-6);
}
.performance-track i.negative {
  background: var(--color-danger-6);
}

/* ========== 29. 图片灯箱 ========== */
.image-lightbox {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.image-lightbox-inner .image-lightbox-close {
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 20px;
  transition: all var(--transition-fast);
}
.image-lightbox-inner .image-lightbox-close:hover {
  background: rgba(255,255,255,0.15);
}
.image-lightbox-tools {
  padding: 6px 8px;
  border-radius: var(--border-radius-large);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-3);
}
.image-lightbox-inner .image-lightbox-tools button {
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--border-radius-medium);
  color: #fff;
  font-size: 14px;
  transition: all var(--transition-fast);
}
.image-lightbox-inner .image-lightbox-tools button:hover {
  background: rgba(255,255,255,0.15);
}

/* ========== 30. 详情弹窗 ========== */
.detail-hero {
  height: 460px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
}
.detail-thumbs button {
  width: 72px;
  height: 60px;
  padding: 2px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  transition: all var(--transition-fast);
}
.detail-thumbs button:hover {
  border-color: var(--color-primary-6);
}
.detail-copy h3 {
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-1);
}
.detail-copy dt {
  color: var(--color-text-3);
}
.detail-copy dd {
  color: var(--color-text-1);
}

/* 单选选项 */
.detail-option {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  gap: 6px;
  transition: all var(--transition-fast);
}
.detail-option:hover {
  border-color: var(--color-primary-4);
  color: var(--color-primary-6);
}
.detail-option.selected {
  border-color: var(--color-primary-6);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-medium);
}
.detail-option span {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--color-border-3);
  border-radius: 50%;
}
.detail-option.selected span {
  border: 3px solid var(--color-primary-6);
}

/* ========== 31. 翻译相关 ========== */
.translated-box {
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-1);
  font-size: var(--font-size-body-3);
  line-height: 1.65;
}
.translation-empty {
  color: var(--color-text-4);
}
.translated-point {
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
  color: var(--color-text-1);
  font-size: var(--font-size-body-2);
  line-height: 1.55;
}
.translated-point > span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-weight: var(--font-weight-semibold);
}

/* 文本字段操作按钮 */
.text-field-actions button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  color: var(--color-text-2);
  font-size: 14px;
  transition: all var(--transition-fast);
}
.text-field-actions button:hover {
  border-color: var(--color-primary-6);
  background: var(--color-primary-1);
  color: var(--color-primary-6);
}

/* 五点编号 */
.point-row > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-1);
  color: var(--color-primary-7);
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-semibold);
}

/* ========== 32. 国家价格表格 ========== */
.country-price-table-wrap {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}
.country-price-table th,
.country-price-table td {
  border-right: 1px solid var(--color-border-1);
}
.country-price-table th:last-child,
.country-price-table td:last-child {
  border-right: none;
}

.country-price-grid {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}
.country-price-grid > div {
  padding: 12px 14px;
  border-right: 1px solid var(--color-border-1);
  background: #fff;
}
.country-price-grid > div:last-child { border-right: none; }
.country-price-grid small { color: var(--color-text-3); }
.country-price-grid strong,
.country-price-grid b {
  font-size: var(--font-size-title-1);
  font-weight: var(--font-weight-semibold);
}
.country-price-grid b { color: var(--color-primary-7); }

/* 外国价格编辑 */
.foreign-price-editor .control {
  height: 32px;
  min-height: 32px;
  padding: 4px 8px;
  text-align: right;
}
.foreign-price-editor span {
  color: var(--color-text-3);
  font-weight: var(--font-weight-medium);
}

/* ========== 33. 店铺信息表格 ========== */
.store-info-table {
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}
.store-info-head {
  background: var(--color-fill-1);
  color: var(--color-text-2);
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
}
.store-info-head span,
.store-info-row > span,
.store-info-row > strong {
  padding: 10px 12px;
  border-right: 1px solid var(--color-border-1);
}
.store-info-row {
  font-size: var(--font-size-body-3);
  border-top: 1px solid var(--color-border-1);
}
.store-info-row:hover {
  background: var(--color-fill-1);
}

/* ========== 34. Schema 默认面板 ========== */
.schema-default-panel {
  padding: 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: var(--color-fill-1);
}

/* ========== 35. 产品缩略图悬浮预览 ========== */
.product-thumb-popover {
  width: 200px;
  height: 200px;
  padding: 6px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-medium);
  background: #fff;
  box-shadow: var(--shadow-3);
}

/* ========== 36. 危险链接 ========== */
.danger-link {
  color: var(--color-danger-6) !important;
}

/* ========== 37. 加载与错误状态 ========== */
.orders-loading,
.orders-error,
.service-load-error {
  padding: 56px 20px;
  text-align: center;
  color: var(--color-text-3);
}
.orders-error,
.service-load-error strong {
  color: var(--color-danger-6);
}

/* ========== 38. 响应式微调 ========== */
@media (max-width: 1280px) {
  .workspace-tabbar {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 1100px) {
  .workspace-tabbar {
    margin-left: -18px;
    margin-right: -18px;
  }
  .main {
    padding: 0 18px 28px;
  }
}

/* ============================================================
 * 39. Arco 风格导航图标（SVG 线性图标，2px 描边，圆角端点）
 * 通过 data-nav 属性匹配，隐藏原文字符号，替换为 SVG 背景
 * ============================================================ */

.nav-item > span:first-child {
  font-size: 0 !important;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 采集库 - 数据库/云采集 */
.nav-item[data-nav="collection"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E");
}

/* 草稿库 - 文件编辑 */
.nav-item[data-nav="drafts"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
}

/* 产品库 - 商品盒子 */
.nav-item[data-nav="products"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

/* 订单管理 - 收据/列表 */
.nav-item[data-nav="orders"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h2'/%3E%3Cpath d='M8 17h2'/%3E%3Cpath d='M14 13h2'/%3E%3Cpath d='M14 17h2'/%3E%3C/svg%3E");
}

/* 默认设置 - 齿轮 */
.nav-item[data-nav="settings"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* API设置 - 代码/接口 */
.nav-item[data-nav="api-settings"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* AI与翻译 - 魔法棒 */
.nav-item[data-nav="ai-services"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4V2'/%3E%3Cpath d='M15 16v-2'/%3E%3Cpath d='M8 9h2'/%3E%3Cpath d='M20 9h2'/%3E%3Cpath d='M17.8 11.8 19 13'/%3E%3Cpath d='M15 9h0'/%3E%3Cpath d='M17.8 6.2 19 5'/%3E%3Cpath d='m3 21 9-9'/%3E%3Cpath d='M12.2 6.2 11 5'/%3E%3C/svg%3E");
}

/* 账号管理 - 用户 */
.nav-item[data-nav="accounts"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* 店铺中心 - 店铺 */
.nav-item[data-nav="shops"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1-5h16l1 5'/%3E%3Cpath d='M4 9v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}

/* 物流绑定 - 卡车 */
.nav-item[data-nav="logistics"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

/* 透明计划 - 盾牌 */
.nav-item[data-nav="transparency"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* 账号计费 - 钱包 */
.nav-item[data-nav="billing"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7V6a2 2 0 0 0-2-2H5a3 3 0 0 0 0 6h15v8a2 2 0 0 1-2 2H5a3 3 0 0 1-3-3V7'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
}

/* 审计日志 - 文档时钟 */
.nav-item[data-nav="audit"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Ccircle cx='12' cy='14' r='2'/%3E%3Cpath d='M12 10v2'/%3E%3Cpath d='M10 16h4'/%3E%3C/svg%3E");
}

/* 组件规范 - 网格布局 */
.nav-item[data-nav="ui-components"] > span:first-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E");
}

/* 激活态图标颜色保持白色（已由 stroke='%23ffffff' 处理） */
.nav-item.active > span:first-child {
  /* 激活时背景图已是白色，无需额外处理 */
}

/* 非激活态图标颜色 */
.nav-item:not(.active) > span:first-child {
  opacity: 0.65;
}
.nav-item:not(.active):hover > span:first-child {
  opacity: 1;
}

/* nav-symbol 字母方块也隐藏文字，用图标替代 */
.nav-item .nav-symbol {
  font-size: 0 !important;
  border: none !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  width: 18px !important;
  height: 18px !important;
}

/* 带 nav-symbol 的导航项已经在上面通过 data-nav 匹配了 span:first-child */
/* 如果结构是 span.nav-symbol，则覆盖之 */
.nav-item > span.nav-symbol {
  width: 18px;
  height: 18px;
}

/* 按钮中的 + 号保持原样，Arco 风格文字加号即可 */
/* 顶部操作按钮图标保持文字符号，不影响整体视觉 */

/* ============================================================
 * 40. 编辑页细节优化（边距、对齐、尺寸统一）
 * ============================================================ */

/* 产品描述 textarea：适中高度（原 rows=12 ≈ 280px，调整为约 420px） */
#editDescription {
  min-height: 420px !important;
  height: auto;
  line-height: 1.8;
  padding: 12px 14px;
}

/* 产品描述翻译结果框：与输入框等高，空时不显突兀 */
.translated-description {
  min-height: 420px;
  max-height: none;
}

/* 编辑页卡片内边距统一 */
.edit-card {
  padding: 16px 18px;
}
.edit-card .section-title {
  margin: -16px -18px 16px;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

/* 基本信息紧凑网格：标签高度统一，输入框对齐 */
.compact-basic-grid .field {
  margin-bottom: 0;
}
.compact-basic-grid .field > label {
  display: block;
  margin-bottom: 6px;
  height: 20px;
  line-height: 20px;
  font-size: var(--font-size-body-2);
}
.compact-basic-grid .control {
  height: 34px;
  min-height: 34px;
}

/* 售价计算表单：标签统一高度 */
.form-grid .field > label {
  display: block;
  margin-bottom: 6px;
  height: 20px;
  line-height: 20px;
}

/* 表单网格中的按钮：与输入框等高，宽度保持内容自适应 */
.form-grid .field .btn {
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
}

/* 通用：所有 field 内的按钮与输入框等高 */
.field .btn:not(.btn-small) {
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
}

/* 筛选操作区按钮：与筛选输入框等高 */
.filter-actions .btn {
  height: 34px;
  min-height: 34px;
}

/* 编辑页顶部操作栏：按钮等高 */
.edit-heading-row .btn {
  height: 36px;
  min-height: 36px;
}

/* 步骤条：统一高度 */
.stepper .step {
  min-height: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
}

/* 编辑页底部操作栏 */
.edit-footer {
  padding: 16px 0 24px;
}
.edit-footer .btn {
  height: 36px;
  min-height: 36px;
}

/* 变体编辑：token 输入框与按钮等高 */
.add-line {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.add-line .control {
  height: 34px;
  min-height: 34px;
}
.add-line .btn {
  height: 34px;
  min-height: 34px;
  flex: 0 0 auto;
}

/* 变体表格：行高统一 */
.variant-table td {
  padding: 10px 12px;
  vertical-align: middle;
}
.variant-table .control {
  height: 32px;
  min-height: 32px;
}

/* 批量操作栏：标签统一高度 */
.batch-bar .field > label {
  display: block;
  margin-bottom: 6px;
  height: 20px;
  line-height: 20px;
}
.batch-bar .field {
  margin-bottom: 0;
}

/* 文本行：标签与内容顶部对齐统一 */
.text-row {
  align-items: start;
  gap: 14px;
}
.text-label {
  padding-top: 8px;
  min-width: 100px;
  font-size: var(--font-size-body-3);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-2);
}

/* 双语表头：高度统一 */
.bilingual-head {
  margin-left: 114px;
  margin-bottom: 8px;
  height: 20px;
  line-height: 20px;
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-3);
}

/* 产品类型搜索框：按钮与输入框等高 */
.product-type-search-box {
  align-items: stretch;
}
.product-type-search-box .control {
  height: 34px;
  min-height: 34px;
}
.product-type-search-button {
  height: 34px;
  min-height: 34px;
  width: 38px;
  flex: 0 0 38px;
}

/* 图片上传卡片：统一尺寸 */
.upload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--font-size-body-2);
  color: var(--color-text-3);
}

/* 侧边栏与内容区无缝衔接 */
.app {
  gap: 0;
}

/* 内容区第一个卡片与顶部间距 */
.main > :first-child {
  margin-top: 0;
}

/* ============================================================
 * 41. 全局页面边距统一
 * ============================================================ */

/* 统一所有页面内容区左右边距为 24px（由 .main 控制）
   移除 .edit-shell 的额外 10px padding，使编辑页与列表页、设置页边距一致 */
.edit-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0;
  margin-right: 0;
}

/* 确保所有 shell 容器不引入额外左右边距 */
.api-settings-shell,
.service-settings-shell,
.account-list-shell,
.auth-shell {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* 统一页面顶部间距：所有 shell 顶部 16px */
.edit-shell,
.api-settings-shell,
.service-settings-shell,
.account-list-shell {
  margin-top: 16px;
}

/* 列表页内容顶部间距统一 */
.main > .page-summary,
.main > .panel,
.main > .filter-panel,
.main > .table-wrap,
.main > .pager {
  margin-top: 12px;
}

/* 工作页签栏负 margin 与 .main padding 精确匹配，确保全宽 */
.workspace-tabbar {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}
.product-info > .product-thumb-button {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  aspect-ratio: 1 / 1;
  display: grid !important;
  place-items: center;
  box-sizing: border-box;
  padding: 3px !important;
  border: 1px solid var(--color-border-2) !important;
  border-radius: var(--border-radius-medium);
  background: #fff !important;
}
.product-info > .product-thumb-button > img.thumb {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center;
  background: #fff;
}

/* Settings forms use Arco's large control size consistently. Native inputs
   and the enhanced Select trigger must occupy the same 36px row. */
.settings-grid .control:not(textarea),
.settings-grid .sdm-select,
.settings-grid .sdm-select-trigger {
  height: var(--component-size-large) !important;
  min-height: var(--component-size-large) !important;
}

.account-table {
  width: 100%;
  min-width: 1280px;
  table-layout: fixed;
}

.account-table :is(th, td):nth-child(n) {
  width: 12.5% !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.account-table td:nth-child(5) { display: table-cell !important; }
.account-table .row-actions { flex-wrap: nowrap; white-space: nowrap; }
.account-table .account-perm-cell { white-space: nowrap; }
.service-provider-column { display: grid; gap: 14px; align-content: start; min-width: 0; }
.service-save-card { min-height: 72px; }

/* Keep account rows and all three parts of each workspace tab on one visual baseline. */
.account-table tbody tr {
  height: 48px;
}
.account-table tbody td {
  height: 48px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
  line-height: normal;
}
.account-table .account-cell {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  min-width: 0;
  overflow: hidden;
  line-height: 20px;
}
.account-table .account-cell-text {
  display: block;
  height: 20px;
  min-width: 0;
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-table .account-name {
  font-weight: var(--font-weight-semibold);
}
.account-table .account-perm-cell {
  height: 48px;
  overflow: hidden;
}
.account-table .account-cell-tags {
  gap: 3px;
}
.account-table .tag,
.account-table .status {
  height: 24px;
  min-height: 24px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 22px;
}
.account-table .row-actions {
  height: 24px;
  align-items: center;
}
.account-table .account-cell-actions {
  overflow: visible;
}
.account-table .row-actions .link-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin: 0;
  line-height: 20px;
}

.workspace-tab {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  line-height: 20px;
}
.workspace-tab > .workspace-tab-icon,
.workspace-tab > i {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  line-height: 18px !important;
}
.workspace-tab > .workspace-tab-icon {
  margin: 0 !important;
  font-size: 12px;
}
.workspace-tab > .workspace-tab-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin: 0;
  line-height: 20px;
}
.workspace-tab > i {
  margin: 0 0 0 2px !important;
  font-size: 14px;
  font-style: normal;
}
.workspace-tab-arrow {
  display: inline-grid;
  place-items: center;
  padding: 0;
}
