.compact-actions { margin: 0; }
.config-panel { min-height: calc(100vh - 190px); }
.config-toolbar { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 16px; margin-bottom: 11px; padding: 11px; border: 1px solid #e5eaf1; border-radius: 10px; background: #f8fafc; }
.config-search-wrap { position: relative; min-width: 0; }
.config-search-wrap input { width: 100%; min-height: 39px; padding: 8px 12px 8px 36px; color: #1d2939; border: 1px solid #d2dae7; border-radius: 8px; background: #fff; }
.config-search-wrap::before { content: "⌕"; position: absolute; top: 7px; left: 12px; z-index: 1; color: #667085; font-size: 18px; line-height: 1; transform: rotate(-15deg); }
.config-search-wrap input:focus { outline: none; border-color: #7aa7f7; box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.config-search-wrap span { display: block; margin-top: 4px; color: #98a2b3; font-size: 11px; }
.config-wrap { position: relative; max-height: calc(100vh - 355px); min-height: 280px; }
.config-table { min-width: 1570px; }
.config-table input, .config-table select { width: 100%; min-width: 110px; padding: 8px 9px; color: #1d2939; border: 1px solid #d7deea; border-radius: 7px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.config-table input:hover, .config-table select:hover { border-color: #b7c1d0; }
.config-table input:focus, .config-table select:focus { outline: none; border-color: #7aa7f7; box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.config-table .platform-select { min-width: 116px; font-weight: 800; }
.config-table .url-input { min-width: 360px; }
.config-table .description-input { min-width: 240px; }
.config-table .spec-input { min-width: 210px; }
.config-table .quantity-input { min-width: 100px; }
.image-config { display: flex; align-items: center; gap: 9px; min-width: 330px; }
.image-preview { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden; border: 1px solid #dfe5ed; border-radius: 8px; color: #a1aab7; background: #f8fafc; font-size: 11px; }
.image-preview[data-hover-image], .task-image[data-hover-image] { cursor: zoom-in; }
.image-preview:focus-visible, .task-image:focus-visible { outline: 3px solid rgba(37,99,235,.2); outline-offset: 2px; }
.image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.image-preview img[hidden], .image-preview span[hidden] { display: none; }
.image-controls { display: grid; grid-template-columns: minmax(170px, 1fr) auto; align-items: center; gap: 6px; flex: 1; }
.config-table .image-url-input { min-width: 180px; }
.image-upload-button { display: inline-flex; align-items: center; justify-content: center; min-height: 33px; padding: 0 9px; border: 1px solid #cbd5e1; border-radius: 7px; color: #475467; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.image-upload-button:hover { color: #1d4ed8; border-color: #9db8ec; background: #f5f8ff; }
.image-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.image-uploading .image-preview { opacity: .45; }
.image-uploading .image-upload-button { opacity: .55; pointer-events: none; }
.upload-error { color: #c63e4b !important; }
.config-table td:first-child, .config-table th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.config-table th:first-child { z-index: 3; background: #f8fafc; }
.config-table tr[hidden] { display: none; }
.config-empty { position: absolute; inset: 40px 0 0; display: grid; place-content: center; text-align: center; background: rgba(255,255,255,.94); }
.config-empty[hidden] { display: none; }
.config-empty strong, .config-empty span { display: block; }
.config-empty strong { margin-bottom: 6px; color: #667085; font-size: 14px; }
.config-empty span { color: #98a2b3; font-size: 12px; }

.upload-card { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 14px 16px; border: 1px dashed #a9bce0; border-radius: 10px; background: #f8fbff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.upload-card:hover { border-color: #6f99ea; background: #f3f7ff; box-shadow: 0 2px 7px rgba(37, 99, 235, .06); }
.upload-card.dragging { border-style: solid; border-color: #4e83e8; background: #edf4ff; box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.upload-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid #c9d9f5; border-radius: 9px; color: #2563eb; background: #fff; font-size: 19px; }
.upload-card > span:nth-child(2) { min-width: 0; }
.upload-card strong, .upload-card small { display: block; }
.upload-card strong { margin-bottom: 4px; color: #344054; font-size: 14px; }
.upload-card small { overflow: hidden; color: #8490a1; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.upload-card em { margin-left: auto; padding: 5px 7px; border: 1px solid #e3e9f2; border-radius: 5px; color: #758195; background: #fff; font-size: 11px; font-style: normal; letter-spacing: .05em; }
.file { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.purchase-mapping { margin-top: 13px; grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; }
.mapping-actions { margin-top: 11px; }

.purchase-plan { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid #cdddff; border-radius: 9px; color: #355179; background: #f6f9ff; font-size: 13px; }
.purchase-plan span { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; color: #1d4ed8; background: #e9f0ff; font-weight: 800; }
.purchase-plan strong { font-weight: 700; }
.purchase-progress { margin-top: 13px; }
.run-actions { margin-top: 11px; }
.run-actions .btn.primary { min-width: 128px; }
.purchase-summary { grid-template-columns: repeat(6, minmax(130px, 1fr)); }
.purchase-amount-card strong { font-size: 22px !important; font-variant-numeric: tabular-nums; }

.task-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 18px 0 9px; }
.task-title strong, .task-title span { display: block; }
.task-title strong { color: #344054; font-size: 14px; }
.task-title span { margin-top: 3px; color: #98a2b3; font-size: 12px; }
.task-filters { display: grid; grid-template-columns: minmax(190px, 250px) 165px 155px 105px; gap: 8px; }
.current-task-filters { grid-template-columns: minmax(190px, 250px) 165px 105px; }
.task-filters input, .task-filters select { min-height: 35px; padding: 7px 9px; font-size: 13px; }
.purchase-task-wrap { max-height: 530px; }
.history-panel { min-height: calc(100vh - 190px); }
.history-amount-summary { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #c8d9fb; border-radius: 10px; color: #355179; background: #f6f9ff; }
.history-amount-summary span { color: #667085; font-size: 13px; font-weight: 800; }
.history-amount-summary strong { color: #1d4ed8; font-size: 23px; font-variant-numeric: tabular-nums; }
.history-amount-summary small { color: #8793a5; font-size: 12px; }
.history-toolbar { margin-top: 2px; }
.history-task-wrap { max-height: calc(100vh - 370px); min-height: 300px; }
.task-table { min-width: 2020px; }
.task-table th:nth-child(1), .task-table td:nth-child(1) { position: sticky; left: 0; z-index: 1; width: 42px; background: #fff; }
.task-table th:nth-child(2), .task-table td:nth-child(2) { position: sticky; left: 42px; z-index: 1; min-width: 145px; background: #fff; box-shadow: 7px 0 11px rgba(16, 24, 40, .04); }
.task-table th:nth-child(1), .task-table th:nth-child(2) { z-index: 4; background: #f8fafc; }
.task-table tbody tr:hover td:nth-child(1), .task-table tbody tr:hover td:nth-child(2) { background: #f8fbff; }
.row-index { color: #98a2b3; text-align: center; font-variant-numeric: tabular-nums; }
.order-cell strong { color: #344054; font-size: 12px; white-space: nowrap; }
.shop-cell { min-width: 120px; color: #475467; font-weight: 700; white-space: nowrap; }
.sku-code, .order-code { padding: 3px 5px; border: 1px solid #e0e5ec; border-radius: 5px; color: #475467; background: #f8fafc; font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.order-code { color: #147a51; border-color: #bee7d2; background: #f2fbf6; }
.purchase-amount { color: #147a51; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.purchase-time { min-width: 178px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-image { display: block; width: 48px; height: 48px; overflow: hidden; border: 1px solid #dfe5ed; border-radius: 8px; background: #f8fafc; box-shadow: 0 1px 3px rgba(16, 24, 40, .05); }
.task-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.task-image:hover img { transform: scale(1.06); }
.image-hover-preview { position: fixed; z-index: 1000; width: min(340px, calc(100vw - 24px)); padding: 8px; border: 1px solid rgba(148,163,184,.55); border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 48px rgba(15,23,42,.24), 0 3px 10px rgba(15,23,42,.1); pointer-events: none; }
.image-hover-preview[hidden] { display: none; }
.image-hover-preview img { display: block; width: 100%; max-height: min(380px, calc(100vh - 80px)); border-radius: 8px; object-fit: contain; background: #f8fafc; }
.image-hover-preview span { display: block; padding: 7px 3px 1px; color: #667085; font-size: 13px; font-weight: 700; text-align: center; }
.task-image-empty { display: grid; place-items: center; width: 48px; height: 48px; border: 1px dashed #d8dee8; border-radius: 8px; color: #98a2b3; background: #fafbfc; font-size: 11px; text-align: center; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.match-matched { color: #2563eb; border-color: #bfd1fa; background: #f1f6ff; }
.match-unmatched, .purchase-failed { color: #c63e4b; border-color: #f0c3c8; background: #fff4f5; }
.purchase-purchased { color: #14845a; border-color: #b8e3ce; background: #effbf5; }
.purchase-unpurchased, .purchase-prepared, .purchase-submitted { color: #ad690a; border-color: #efd39d; background: #fff9eb; }
.purchase-pending_payment { color: #8b4bc4; border-color: #dac2ef; background: #faf5ff; }
.purchase-blocked { color: #667085; border-color: #d8dee8; background: #f7f8fa; }
.spec-text { display: inline-block; max-width: 210px; overflow: hidden; color: #667085; text-overflow: ellipsis; white-space: nowrap; }
.merge-chip { display: block; width: fit-content; margin-top: 6px; padding: 3px 7px; border: 1px solid #b9cef5; border-radius: 999px; color: #1d4ed8; background: #f2f7ff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.source-link { display: inline-flex; align-items: center; gap: 4px; color: #2563eb; text-decoration: none; white-space: nowrap; }
.source-link:hover { color: #1d4ed8; text-decoration: underline; }
.source-link b { font-size: 11px; }
.platform-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.platform-1688 { color: #b85a14; background: #fff3e8; }
.platform-pinduoduo { color: #c52d38; background: #fff0f1; }
.execution-cell { max-width: 270px; color: #7b8797; line-height: 1.45; }
.execution-cell > span { display: block; }
.configure-sku-action { margin-top: 7px; color: #1d4ed8; border-color: #b9cef5; background: #f4f8ff; }
.configure-sku-action:hover:not(:disabled) { color: #1d4ed8; border-color: #8fb0ec; background: #edf4ff; }
.retry-purchase-action { margin-top: 7px; color: #b42332; border-color: #efb8c0; background: #fff7f8; }
.retry-purchase-action:hover:not(:disabled) { color: #9f1d2b; border-color: #e6919d; background: #fff0f2; }
.manual-order-action { margin-top: 7px; color: #147253; border-color: #a9d8c3; background: #f1faf6; }
.manual-order-action:hover:not(:disabled) { color: #0f6247; border-color: #79c3a2; background: #eaf8f1; }
.confirm-payment-action { margin-top: 7px; color: #7a3caf; border-color: #d5b8eb; background: #fbf7ff; }
.config-row-attention td { background: #f2f7ff !important; transition: background .45s; }
.config-row-error td { background: #fff7f8 !important; }
.config-row-error input { border-color: #df7d88 !important; box-shadow: 0 0 0 2px rgba(217, 76, 89, .08); }
.status-running { color: #ad690a; }
.status-purchased { color: #14845a; }
.status-pending_payment { color: #8b4bc4; }
.status-failed, .status-submitted_unknown { color: #c63e4b; }
.cell-empty { color: #b2bac6; }
.empty-state { height: 145px; text-align: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { margin-bottom: 6px; color: #667085; font-size: 14px; }
.empty-state span { color: #a0a9b7; font-size: 12px; }
.task-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 2px 0; color: #667085; font-size: 13px; }
.task-pagination > div { display: flex; gap: 8px; }
.task-pagination .btn { min-width: 76px; }

@media (max-width: 1100px) {
  .config-toolbar { grid-template-columns: 1fr auto; }
  .config-toolbar .toolbar-meta { display: none; }
  .purchase-summary { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .task-toolbar { align-items: stretch; flex-direction: column; }
  .task-filters { grid-template-columns: minmax(190px, 1fr) 165px 155px 105px; }
  .current-task-filters { grid-template-columns: minmax(190px, 1fr) 165px 105px; }
}

@media (max-width: 820px) {
  .hero { align-items: flex-start; }
  .task-toolbar { align-items: stretch; flex-direction: column; }
  .task-filters { grid-template-columns: 1fr 1fr; }
  .purchase-summary { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .config-toolbar { grid-template-columns: 1fr; }
  .purchase-plan { align-items: flex-start; flex-direction: column; }
  .history-amount-summary { grid-template-columns: 1fr; gap: 4px; }
}