.quick-count-trigger {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent);
  font-weight: 750;
}

.quick-inventory-count {
  display: grid;
  gap: 16px;
  width: min(820px, calc(100vw - 72px));
}

.quick-count-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.quick-count-guide,
.quick-count-paste {
  grid-column: 1 / -1;
}

.quick-count-guide {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 10px;
  background: var(--accent-soft);
}

.quick-count-guide span,
.quick-count-preview-head span,
.quick-count-table td:nth-child(2) span {
  color: var(--muted);
  font-size: 12px;
}

.quick-count-paste,
.quick-count-note {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.quick-count-paste textarea {
  width: 100%;
  min-height: 154px;
  resize: vertical;
  font: 600 15px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em;
}

.quick-count-match {
  min-width: 116px;
}

.quick-count-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

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

.quick-count-preview-head > div,
.quick-count-table td:nth-child(2) {
  display: grid;
  gap: 3px;
}

.quick-count-errors {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  font-weight: 650;
}

.quick-count-table-wrap {
  max-height: 310px;
  overflow: auto;
}

.quick-count-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.quick-count-table th,
.quick-count-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.quick-count-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-strong, #f7f9fc);
  color: var(--muted);
  font-size: 11px;
}

.quick-count-table th:nth-last-child(-n + 3),
.quick-count-table td:nth-last-child(-n + 3) {
  width: 74px;
  text-align: right;
  white-space: nowrap;
}

.quick-count-table .is-positive { color: var(--success); }
.quick-count-table .is-negative { color: var(--danger); }
.quick-count-table .is-zero { color: var(--muted); }

.quick-count-note input {
  width: 100%;
}

@media (max-width: 720px) {
  .quick-inventory-count {
    width: calc(100vw - 40px);
  }

  .quick-count-entry {
    grid-template-columns: 1fr;
  }

  .quick-count-match {
    width: 100%;
  }

  .quick-count-table th,
  .quick-count-table td {
    padding: 9px 8px;
  }
}