:root {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #17201d;
  background: #f2f4f3;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px clamp(16px, 4vw, 48px);
  color: #fff;
  background: #183f35;
  border-bottom: 4px solid #d39a2c;
}

h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
.app-header p { margin: 4px 0 0; color: #d9e6e1; font-size: 13px; }
.header-actions { display: flex; gap: 8px; }

.mode-tabs {
  display: flex;
  gap: 2px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: #fff;
  border-bottom: 1px solid #ccd5d1;
}

.tab {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #53605b;
  font-weight: 700;
}
.tab.active { color: #135c43; border-bottom-color: #1b7958; }

main { width: min(1260px, 100%); margin: 0 auto; padding: 26px clamp(14px, 3vw, 32px) 60px; }
.view { display: none; }
.view.active { display: block; }
.section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 0 0 16px; }
.section-heading.compact { margin-top: 28px; margin-bottom: 10px; }
h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.status { color: #52605a; font-size: 13px; }
.status.error { color: #a12b2b; }
.status.success { color: #146044; }

.form-grid { display: grid; gap: 12px; }
.task-fields { grid-template-columns: 1fr 1.2fr 1fr; }
label, .wide-label { display: grid; gap: 6px; color: #3e4a45; font-size: 13px; font-weight: 700; }
input, textarea, select {
  width: 100%;
  min-width: 0;
  border: 1px solid #aeb9b4;
  border-radius: 6px;
  background: #fff;
  color: #17201d;
}
input, select { min-height: 42px; padding: 8px 10px; }
textarea { padding: 10px; resize: vertical; line-height: 1.5; font-family: Consolas, "Microsoft YaHei", monospace; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgb(35 119 86 / .18); border-color: #277657; }

.product-source, .import-bar, .action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.file-control {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #8fa79c;
  border-radius: 6px;
  background: #fff;
  color: #205b45;
  cursor: pointer;
}
.file-control input { width: min(350px, 50vw); min-height: 0; margin-left: 10px; padding: 0; border: 0; }
.action-row { margin-top: 14px; }
.primary, .secondary, .danger {
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 6px;
  font-weight: 800;
}
.primary { border: 1px solid #176547; background: #176b4e; color: #fff; }
.secondary { border: 1px solid #87958f; background: #fff; color: #26332e; }
.danger { border: 1px solid #b98f8b; background: #fff; color: #8e2925; }
button:disabled { opacity: .5; cursor: not-allowed; }

.table-wrap { width: 100%; overflow: auto; border: 1px solid #c9d2ce; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; border-bottom: 1px solid #e3e8e5; text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; color: #fff; background: #31594b; }
td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.state-conflict { color: #a12b2b; font-weight: 700; }
.state-uncounted { color: #716023; }
.state-counted { color: #176547; }

.event-list { display: grid; gap: 6px; margin: 10px 0; }
.event { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-left: 4px solid #87958f; background: #fff; font-size: 13px; }
.event.added, .event.replaced { border-left-color: #27815e; }
.event.rejected { border-left-color: #ae3b34; }
.event.duplicate, .event.outdated { border-left-color: #c49129; }

.stats { display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr)); gap: 8px; margin: 18px 0; }
.stat { padding: 10px; border: 1px solid #d2dad6; background: #fff; }
.stat strong { display: block; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span { color: #66716d; font-size: 12px; }

.conflict-list { display: grid; gap: 8px; }
.conflict-row { display: grid; grid-template-columns: 1fr minmax(260px, .8fr); gap: 14px; align-items: center; padding: 11px 12px; border: 1px solid #dec994; background: #fffdf6; }
.conflict-row strong { display: block; margin-bottom: 4px; }
.conflict-row small { color: #6b6250; }
.empty-state { padding: 30px; border: 1px dashed #aeb9b4; color: #68736e; text-align: center; background: #f8faf9; }

@media (max-width: 800px) {
  .app-header { align-items: flex-start; }
  .task-fields { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .conflict-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .app-header { flex-direction: column; }
  .mode-tabs { padding: 0 8px; }
  .tab { flex: 1; padding: 0 8px; }
  main { padding: 18px 10px 50px; }
  .file-control { display: grid; width: 100%; }
  .file-control input { width: 100%; margin: 6px 0 0; }
}