:root {
  color-scheme: light;
  --ink: #142126;
  --muted: #687a80;
  --line: #dbe6e5;
  --soft: #f3f8f7;
  --green: #00a98f;
  --green-dark: #087565;
  --blue: #1675d1;
  --danger: #b63f4b;
}

* { box-sizing: border-box; }

/* 扩展窗口按内容自动定尺寸：根节点必须有独立宽度，不能用 vw 反向依赖窗口。
   只由根节点滚动，始终预留滚动条位置，历史展开和悬停时不挤压内容。 */
html {
  width: 460px;
  min-width: 460px;
  max-width: 460px;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0;
  background: #f6faf9;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button { font: inherit; }
.brand-row > .text-action { flex: 0 0 auto; white-space: nowrap; }

.app-header {
  padding: 18px 18px 15px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.brand-row,
.account-row,
.status-head,
.detail-title,
.metric-row,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand h1 { margin: 0; font-size: 17px; line-height: 1.2; letter-spacing: 0; }
.brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.app-header p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

main { padding: 14px 16px 18px; }

.text-action,
.compact-button {
  border: 0;
  background: transparent;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.compact-button {
  min-width: 52px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.compact-button.primary { border-color: var(--green); background: var(--green); color: #fff; }

.account-row { margin-bottom: 12px; }
.account-copy { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-copy i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #a9b6b8; }
.account-copy i.online { background: var(--green); box-shadow: 0 0 0 4px rgb(0 169 143 / 12%); }
.account-copy strong { display: block; font-size: 12px; }
.account-copy span { display: block; max-width: 230px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.status-card,
.detail-panel,
.mode-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.status-card { padding: 15px; }
.phase { display: flex; align-items: center; gap: 8px; }
.phase strong { font-size: 14px; }
.phase-indicator { width: 9px; height: 9px; border-radius: 50%; background: #9aa9ac; }
.status-head > b { color: var(--green-dark); font-size: 13px; }
.status-message { min-height: 38px; margin-top: 10px; color: #53676d; font-size: 12px; line-height: 1.55; }
.progress-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: #e9f0ef; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .25s ease; }
.task-meta { margin-top: 10px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wait-hint { margin-top: 10px; padding: 9px 10px; border-radius: 7px; background: #eef7ff; color: #43616e; font-size: 11px; line-height: 1.45; }

.status-card[data-state="collecting"] .phase-indicator,
.status-card[data-state="analyzing"] .phase-indicator {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgb(22 117 209 / 12%);
  animation: pulse 1.4s ease-in-out infinite;
}
.status-card[data-state="completed"] .phase-indicator { background: var(--green); box-shadow: 0 0 0 4px rgb(0 169 143 / 12%); }
.status-card[data-state="failed"] .phase-indicator { background: var(--danger); box-shadow: 0 0 0 4px rgb(182 63 75 / 12%); }

@keyframes pulse {
  50% { opacity: .35; transform: scale(.8); }
}

.service-line { display: flex; justify-content: flex-end; min-height: 25px; padding: 7px 2px 4px; }
.service-line span { color: var(--muted); font-size: 10px; }
.service-line span.ok { color: var(--green-dark); }
.service-line span.warn { color: #a56a19; }

.action-section { display: grid; gap: 8px; }
.main-button,
.secondary-button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.main-button { background: linear-gradient(105deg, var(--green), var(--blue)); color: #fff; }
.main-button:hover { filter: brightness(.97); }
.main-button:disabled,
.secondary-button:disabled { cursor: not-allowed; opacity: .55; }
.main-button.danger { background: var(--danger); }
.report-button { margin-top: 12px; background: var(--ink); }
.secondary-button { margin-top: 12px; border: 1px solid #a8c8c4; background: #fff; color: #245d58; }
/* 网格列必须允许收缩，否则长商品标题的最小内容宽度会撑出扩展弹窗。 */
.history-panel { margin-top: 12px; min-width: 0; }
.history-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; min-width: 0; }
.history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); }
.history-item > div { min-width: 0; }
.history-item strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.history-item span { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; line-height: 1.4; }
.history-item[data-status="3"] span { color: var(--green-dark); }
.history-item[data-status="4"] span { color: var(--danger); }
.history-item button { min-width: 42px; min-height: 32px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--green-dark); cursor: pointer; font-size: 11px; font-weight: 700; }
.history-item button:hover { border-color: var(--green); }
.history-item button:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.history-list .detail-note { overflow-wrap: anywhere; line-height: 1.5; }
.detail-panel { margin-top: 12px; padding: 13px; }
.detail-title strong,
.section-heading strong { font-size: 13px; }
.detail-title span,
.section-heading span { color: var(--muted); font-size: 11px; }
.metric-row { margin-top: 10px; font-size: 11px; }
.metric-row span { color: var(--muted); }
.metric-row b { font-size: 13px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.metric-grid div { padding: 9px; border-radius: 7px; background: var(--soft); }
.metric-grid span { display: block; color: var(--muted); font-size: 10px; }
.metric-grid b { display: block; margin-top: 3px; font-size: 14px; }
.detail-note { margin-top: 9px; color: var(--muted); font-size: 10px; }
.param-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.param-tag { padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); color: #4c6267; font-size: 10px; }
.live-preview { max-height: 68px; margin-top: 9px; overflow: auto; border-top: 1px solid var(--line); padding-top: 8px; color: #53686d; font-size: 10px; line-height: 1.55; }

.mode-panel { margin-top: 12px; padding: 14px; }
.section-heading span { display: block; margin-top: 2px; }
.mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
.mode { min-height: 58px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.mode strong { display: block; font-size: 12px; }
.mode small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.mode.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.mode.active small { color: #c6d1d3; }
.option-note { margin-top: 8px; color: var(--muted); font-size: 10px; text-align: center; }

/* 采集流程四步可视化指示条 */
.steps-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.tracker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tracker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b5c3c6;
  transition: all 0.25s ease;
}
.tracker-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.tracker-label small {
  display: inline-block;
  font-size: 9px;
  background: rgba(0, 169, 143, 0.15);
  color: var(--green-dark);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 2px;
}
.tracker-line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin: 0 4px 14px 4px;
}
.tracker-item.active .tracker-dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgb(22 117 209 / 18%);
  transform: scale(1.15);
}
.tracker-item.active .tracker-label {
  color: var(--blue);
  font-weight: 700;
}
.tracker-item.done .tracker-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgb(0 169 143 / 15%);
}
.tracker-item.done .tracker-label {
  color: var(--green-dark);
  font-weight: 600;
}