Support multi-screenshot calibration and cached shop context

src/style.css

@@ -111,9 +111,15 @@ h3 {
   text-transform: uppercase;
 }
 
-.status {
+.status-stack {
   display: grid;
   width: 270px;
+  gap: 5px;
+}
+
+.status {
+  display: grid;
+  width: 100%;
   min-height: 38px;
   place-items: center;
   padding: 8px 14px;
@@ -127,6 +133,25 @@ h3 {
     border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+.sync-status {
+  min-height: 18px;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+.sync-status[data-tone="working"] {
+  color: var(--accent-hover);
+}
+
+.sync-status[data-tone="success"] {
+  color: var(--success);
+}
+
+.sync-status[data-tone="error"] {
+  color: var(--error);
+}
+
 .status[data-tone="working"] {
   border-color: color-mix(in oklch, var(--accent), transparent 55%);
   background: var(--accent-soft);
@@ -216,6 +241,92 @@ h3 {
   align-items: center;
 }
 
+.reference-strip {
+  display: flex;
+  gap: 10px;
+  margin-block-end: 18px;
+  padding: 3px;
+  overflow-x: auto;
+}
+
+.reference-strip[hidden] {
+  display: none;
+}
+
+.reference-item {
+  position: relative;
+  flex: 0 0 220px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: var(--surface);
+}
+
+.reference-item.is-selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+
+.reference-item__select {
+  display: grid;
+  width: 100%;
+  min-height: 68px;
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 6px 30px 6px 6px;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  text-align: start;
+}
+
+.reference-item__select:hover {
+  background: var(--surface-muted);
+}
+
+.reference-item__select img {
+  width: 88px;
+  height: 52px;
+  border-radius: 6px;
+  object-fit: cover;
+  background: oklch(0.18 0.01 255);
+}
+
+.reference-item__select span,
+.reference-item__select strong,
+.reference-item__select small {
+  display: block;
+  min-width: 0;
+}
+
+.reference-item__select small {
+  margin-block-start: 3px;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reference-item__remove {
+  position: absolute;
+  inset-block-start: 5px;
+  inset-inline-end: 5px;
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 6px;
+  background: color-mix(in oklch, var(--surface), transparent 8%);
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+.reference-item__remove:hover {
+  background: var(--error-soft);
+  color: var(--error);
+}
+
 .calibration-guide {
   margin-block-end: 18px;
   border: 1px solid var(--border);
@@ -856,7 +967,7 @@ td:nth-child(4) {
     flex-direction: column;
   }
 
-  .status {
+  .status-stack {
     width: 100%;
   }