@morscherlab/mint-sdk 1.0.0-rc.2 → 1.0.0-rc.5

package/src/styles/components/auto-group-modal.css

@@ -21,6 +21,7 @@
   flex-direction: column;
 }
 
+/* --- Paste: free-form textarea (the self-designed input path) --- */
 .mint-auto-group__paste {
   position: relative;
 }
@@ -271,374 +272,311 @@
   gap: 0.375rem;
 }
 
-/* --- Outlier step --- */
-.mint-auto-group__outlier-step {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.mint-auto-group__outlier-banner {
-  padding: 0.75rem 1rem;
-  background: var(--mint-warning-bg);
-  border: 1px solid rgba(245, 158, 11, 0.3);
-  border-radius: var(--radius-md);
-  font-size: 0.8125rem;
-  color: var(--text-primary);
-}
-
-.mint-auto-group__outlier-banner code {
+.mint-auto-group__field-value {
   font-family: 'Fira Code', monospace;
-  background: var(--bg-tertiary);
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.8125rem;
+  font-size: 11.5px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  padding: 2px 8px;
+  border-radius: 9999px;
+  color: var(--text-secondary);
 }
 
-.mint-auto-group__outlier-batch {
+/* --- Navigation --- */
+.mint-auto-group__nav {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
 
-.mint-auto-group__outlier-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-height: 300px;
-  overflow-y: auto;
+.mint-auto-group__nav-spacer {
+  flex: 1;
 }
 
-.mint-auto-group__outlier-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
+/* --- Workspace step --- */
+.mint-auto-group__workspace { display: grid; grid-template-columns: 220px 1fr; gap: 16px; min-height: 480px; position: relative; }
+.mint-auto-group__classes { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
+.mint-auto-group__classes h3 { font-size: 11px; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; margin: 0 0 8px; }
+.mint-auto-group__class { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; background: transparent; border: 1px solid transparent; font-size: 13px; color: var(--text-primary); text-align: left; }
+.mint-auto-group__class:hover { background: var(--bg-tertiary); }
+.mint-auto-group__class--active { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight: 500; }
+.mint-auto-group__class--qc .mint-auto-group__class-dot { background: var(--mint-warning); }
+.mint-auto-group__class-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--text-muted); }
+.mint-auto-group__class-count { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-secondary); padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--border); }
+.mint-auto-group__schema { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+
+/* --- Suggestion banner --- */
+.mint-auto-group__suggest { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); border: 1px dashed var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); font-size: 12.5px; }
+.mint-auto-group__suggest-btn { margin-left: 8px; background: var(--bg-primary); border: 1px solid var(--color-primary); color: var(--color-primary); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; }
+.mint-auto-group__suggest-btn--ghost { border-color: var(--border); color: var(--text-secondary); }
+
+/* --- 3-stat strip (Option B redesign) ---
+ *
+ * Three peer stats at the top of the schema panel:
+ *   Groups (primary, with factor-chip composition below)
+ *   Samples (active class size · class label · token count)
+ *   Avg / group (with min/max sub)
+ *
+ * Replaces the old schema header + group summary bar. The strip is a
+ * single rounded card with 1px gap dividers so the three cells read as
+ * a unit, not three floating panels. */
+.mint-auto-group__stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: var(--border);
+  border: 1px solid var(--border);
   border-radius: var(--radius);
+  overflow: hidden;
 }
-
-.mint-auto-group__outlier-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+.mint-auto-group__stat {
+  background: var(--bg-primary);
+  padding: 12px 14px;
   min-width: 0;
 }
-
-.mint-auto-group__outlier-name {
-  font-family: 'Fira Code', monospace;
-  font-size: 0.8125rem;
+.mint-auto-group__stat-v {
+  font-size: 22px;
+  font-weight: 700;
   color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
 }
-
-.mint-auto-group__outlier-badge {
-  font-size: 0.6875rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
-  background: var(--bg-tertiary);
+.mint-auto-group__stat--primary .mint-auto-group__stat-v { color: var(--color-primary); }
+.mint-auto-group__stat-l {
+  font-size: 11px;
   color: var(--text-muted);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.mint-auto-group__outlier-actions {
-  display: flex;
-  gap: 0.25rem;
-  flex-shrink: 0;
-  margin-left: 0.75rem;
-}
-
-.mint-auto-group__action-btn {
-  font-size: 0.6875rem;
-  padding: 0.25rem 0.5rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.1s;
-}
-
-.mint-auto-group__action-btn:hover {
-  background: var(--bg-hover);
-}
-
-.mint-auto-group__action-btn:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 1px;
-}
-
-.mint-auto-group__action-btn--active {
-  background: var(--color-primary-soft);
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-  font-weight: 500;
-}
-
-.mint-auto-group__action-btn--active.mint-auto-group__action-btn--exclude {
-  background: var(--mint-error-bg);
-  border-color: var(--mint-error);
-  color: var(--mint-error);
-}
-
-.mint-auto-group__action-btn--active.mint-auto-group__action-btn--qc {
-  background: rgba(107, 114, 128, 0.12);
-  border-color: var(--text-secondary);
-  color: var(--text-secondary);
-}
-
-/* --- Field step --- */
-.mint-auto-group__field-step {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.mint-auto-group__field-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-@media (max-width: 600px) {
-  .mint-auto-group__field-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.mint-auto-group__field-card {
-  padding: 0.75rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background: var(--bg-secondary);
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.mint-auto-group__field-card--enabled {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 1px var(--color-primary-soft);
-}
-
-.mint-auto-group__field-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 4px;
+  font-weight: 600;
 }
-
-.mint-auto-group__field-toggle {
+.mint-auto-group__stat-sub {
+  margin-top: 8px;
   display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
   align-items: center;
-  gap: 0.375rem;
-  cursor: pointer;
-  font-size: 0.8125rem;
+  font-size: 11.5px;
   color: var(--text-secondary);
+  min-height: 22px;
 }
-
-.mint-auto-group__field-toggle input {
-  accent-color: var(--color-primary);
-}
-
-.mint-auto-group__field-toggle-label {
-  user-select: none;
-}
-
-.mint-auto-group__field-cardinality {
-  font-size: 0.6875rem;
+.mint-auto-group__stat-sub--muted {
   color: var(--text-muted);
+  font-size: 11.5px;
 }
-
-.mint-auto-group__field-name-input {
-  margin-bottom: 0.5rem;
-}
-
-.mint-auto-group__field-values {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  max-height: 4.5rem;
-  overflow-y: auto;
-}
-
-.mint-auto-group__field-value {
-  font-size: 0.6875rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  font-family: 'Fira Code', monospace;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mint-auto-group__field-more {
-  font-size: 0.6875rem;
-  padding: 0.125rem 0.375rem;
+.mint-auto-group__stat-empty {
   color: var(--text-muted);
   font-style: italic;
 }
-
-.mint-auto-group__field-summary {
-  font-size: 0.8125rem;
+.mint-auto-group__stat-empty strong {
   color: var(--text-secondary);
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius);
+  font-style: normal;
+  font-weight: 600;
 }
-
-.mint-auto-group__field-summary strong {
-  color: var(--text-primary);
+.mint-auto-group__group-chip {
+  font-size: 10.5px;
+  font-family: 'Fira Code', monospace;
+  padding: 2px 7px;
+  border-radius: 9999px;
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  white-space: nowrap;
+  line-height: 1.4;
 }
 
-.mint-auto-group__field-warning {
-  font-size: 0.8125rem;
-  color: var(--mint-warning);
-  padding: 0.5rem 0.75rem;
-  background: var(--mint-warning-bg);
-  border-radius: var(--radius);
+/* --- QC routing radio group (replaces the two checkboxes) --- */
+.mint-auto-group__routing {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid var(--border);
 }
-
-/* --- Preview step --- */
-.mint-auto-group__preview-step {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.mint-auto-group__routing-head {
+  margin: 0 0 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  font-weight: 600;
 }
-
-.mint-auto-group__preview-summary {
+.mint-auto-group__routing-radio {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-  padding: 0.75rem 1rem;
-  background: var(--bg-tertiary);
-  border-radius: var(--radius-md);
-}
-
-.mint-auto-group__preview-stat {
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
-}
-
-.mint-auto-group__preview-stat strong {
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12.5px;
   color: var(--text-primary);
+  padding: 5px 0;
+  cursor: pointer;
+  line-height: 1.4;
 }
-
-.mint-auto-group__preview-stat--excluded strong {
-  color: var(--mint-error);
+.mint-auto-group__routing-radio input {
+  margin-top: 2px;
+  accent-color: var(--color-primary);
+  flex-shrink: 0;
 }
-
-.mint-auto-group__preview-groups {
+.mint-auto-group__routing-radio small {
+  display: block;
+  color: var(--text-muted);
+  font-size: 11px;
+  margin-top: 1px;
+}
+
+/* --- Compact token table (replaces the horizontal cards row) ---
+ *
+ * One row per token position. Lets users scan a 6+ token batch without
+ * horizontal scrolling and without each row carrying redundant card chrome.
+ * Click the row to open the popover (rename, role override, value ops).
+ * The Use checkbox lives inline; @click.stop on the label prevents
+ * accidental popover triggering when toggling Use. */
+.mint-auto-group__token-table {
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  max-height: 20rem;
-  overflow-y: auto;
-}
-
-.mint-auto-group__preview-group {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border);
   border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.mint-auto-group__preview-group[open] {
-  background: var(--bg-secondary);
+  background: var(--bg-primary);
+  overflow: auto;
 }
-
-.mint-auto-group__preview-group-header {
-  display: flex;
+.mint-auto-group__token-row {
+  display: grid;
+  /* Column widths chosen to fit in the lg modal's ~440px schema panel.
+   * Token# stays narrow (single digit), Name + Preview share remaining
+   * flex space, Role pill is fixed for badge stability, # uses a glyph
+   * header so 32px is enough, Use is the checkbox, then the ⋯ trigger. */
+  grid-template-columns: 28px minmax(0, 1fr) 76px 48px minmax(0, 1.4fr) 28px 18px;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  gap: 8px;
+  padding: 9px 12px;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 12.5px;
+  color: var(--text-primary);
+  text-align: left;
   cursor: pointer;
-  font-size: 0.8125rem;
-  user-select: none;
-  min-width: 0;
+  width: 100%;
+  font-family: inherit;
+  transition: background-color 150ms ease;
 }
-
-.mint-auto-group__preview-group-header:hover {
-  background: var(--bg-hover);
+.mint-auto-group__token-row:last-child { border-bottom: 0; }
+.mint-auto-group__token-row:hover { background: var(--bg-secondary); }
+.mint-auto-group__token-row:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
 }
-
-.mint-auto-group__preview-dot {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 50%;
-  flex-shrink: 0;
+.mint-auto-group__token-row--active { background: var(--color-primary-soft); }
+.mint-auto-group__token-row--head {
+  cursor: default;
+  background: var(--bg-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  padding: 8px 14px;
 }
-
-.mint-auto-group__preview-group-name {
+.mint-auto-group__token-row--head:hover { background: var(--bg-secondary); }
+.mint-auto-group__token-ix {
+  font-family: 'Fira Code', monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.mint-auto-group__token-nm {
   font-weight: 500;
-  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
 }
-
-.mint-auto-group__preview-group-count {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  padding: 0.0625rem 0.375rem;
-  border-radius: var(--radius-sm);
-  margin-left: auto;
-}
-
-.mint-auto-group__preview-samples {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  padding: 0.5rem 0.75rem;
-  border-top: 1px solid var(--border-light);
+.mint-auto-group__token-unique {
+  font-family: 'Fira Code', monospace;
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
 }
-
-.mint-auto-group__preview-sample {
-  font-size: 0.75rem;
+.mint-auto-group__token-num { text-align: right; }
+.mint-auto-group__token-preview {
   font-family: 'Fira Code', monospace;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
-  background: var(--bg-tertiary);
+  font-size: 11.5px;
   color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
-
-.mint-auto-group__preview-sample--excluded {
-  opacity: 0.5;
-  text-decoration: line-through;
+.mint-auto-group__token-more {
+  color: var(--text-muted);
+  font-style: italic;
 }
-
-/* --- Excluded section --- */
-.mint-auto-group__preview-excluded {
-  border-top: 1px solid var(--border-color);
-  padding-top: 0.75rem;
+.mint-auto-group__token-use,
+.mint-auto-group__token-use-head { display: flex; justify-content: center; }
+.mint-auto-group__token-use { cursor: pointer; }
+.mint-auto-group__token-use input {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--color-primary);
 }
-
-.mint-auto-group__preview-excluded-title {
-  font-size: 0.75rem;
-  font-weight: 500;
+.mint-auto-group__token-trigger {
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.5rem;
-}
-
-.mint-auto-group__preview-excluded-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
+  text-align: center;
+  font-size: 14px;
+  user-select: none;
 }
 
-/* --- Navigation --- */
-.mint-auto-group__nav {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
+/* --- Role badge (used in token rows and inside the popover) --- */
+.mint-auto-group__role { align-self: flex-start; display: inline-flex; padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 10.5px; text-transform: uppercase; cursor: pointer; }
+.mint-auto-group__role--factor { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; }
+.mint-auto-group__role--constant { background: var(--bg-tertiary); color: var(--text-muted); border-color: transparent; }
+.mint-auto-group__role--replicate { background: var(--mint-info-bg); color: var(--mint-info); border-color: var(--mint-info-border); }
+.mint-auto-group__role--run-order { background: var(--bg-tertiary); color: var(--text-muted); border-color: transparent; }
+.mint-auto-group__role--numeric { background: rgba(249,115,22,.10); color: var(--color-cta); border-color: rgba(249,115,22,.30); }
+.mint-auto-group__role--class-tag { background: rgba(123,208,181,.16); color: #0F766E; border-color: transparent; }
+.mint-auto-group__role--ignore { background: var(--bg-tertiary); color: var(--text-muted); border-color: transparent; }
+
+/* --- Column popover (token rename, role override, value ops) ---
+ * - bg-primary so it reads brighter than the surrounding bg-secondary panels.
+ * - Layered shadow (close + far) reads as elevated rather than recessed.
+ * - z-index 20 sits above schema cards but stays scoped to the modal's
+ *   stacking context. */
+.mint-auto-group__popover { position: absolute; right: 20px; top: 60px; width: 320px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px -8px rgba(15, 23, 42, .22); padding: 14px; z-index: 20; display: flex; flex-direction: column; gap: 12px; }
+.mint-auto-group__popover-head { display: flex; align-items: center; gap: 8px; }
+.mint-auto-group__popover-head .mono { font-family: 'Fira Code', monospace; font-size: 11px; color: var(--text-muted); margin-left: auto; }
+.mint-auto-group__popover-close { background: transparent; border: 0; cursor: pointer; color: var(--text-secondary); font-size: 16px; }
+.mint-auto-group__popover-section { display: flex; flex-direction: column; gap: 6px; }
+.mint-auto-group__popover-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+.mint-auto-group__pills { display: flex; flex-wrap: wrap; gap: 6px; }
+.mint-auto-group__pill-btn { font-size: 11.5px; padding: 3px 10px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; }
+.mint-auto-group__pill-btn--on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
+.mint-auto-group__values-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
+.mint-auto-group__value-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 8px; align-items: center; }
+.mint-auto-group__value-src { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-muted); text-align: right; }
+.mint-auto-group__value-input { border: 1px solid var(--border); background: var(--bg-secondary); padding: 4px 8px; border-radius: var(--radius-sm); font-family: 'Fira Code', monospace; font-size: 12px; }
+.mint-auto-group__value-excl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
+.mint-auto-group__link { background: transparent; border: 0; color: var(--color-primary); font-size: 12.5px; cursor: pointer; text-align: left; padding: 0; }
+
+/* --- CSV download templates (Input step) --- */
+.mint-auto-group__template { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 12px; }
+.mint-auto-group__template-label { font-size: 12.5px; color: var(--text-secondary); }
+.mint-auto-group__template-actions { display: flex; gap: 8px; }
 
-.mint-auto-group__nav-spacer {
-  flex: 1;
-}
+/* --- Preview step --- */
+.mint-auto-group__preview { display: flex; flex-direction: column; gap: 14px; }
+.mint-auto-group__preview-summary { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }
+.mint-auto-group__preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.mint-auto-group__preview-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
+.mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
+.mint-auto-group__preview-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
+.mint-auto-group__preview-group[open] { background: var(--bg-secondary); }
+.mint-auto-group__preview-group summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 0.5rem 0.875rem; }
+.mint-auto-group__preview-group[open] summary { border-bottom: 1px solid var(--border); }
+.mint-auto-group__preview-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0; }
+.mint-auto-group__preview-count { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); padding: 2px 8px; border-radius: 9999px; }
+.mint-auto-group__preview-samples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem 0.875rem 0.625rem; }
+.mint-auto-group__preview-sample { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); padding: 3px 8px; border-radius: 9999px; }
+.mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.mint-auto-group__qc-chip { background: var(--mint-warning-bg); color: #92400E; border: 1px solid var(--mint-warning-border); padding: 4px 10px; border-radius: 9999px; font-size: 12px; }
+.mint-auto-group__fingerprint { margin-top: 14px; }
+.mint-auto-group__fingerprint summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
+.mint-auto-group__fingerprint pre { font-family: 'Fira Code', monospace; font-size: 11px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; overflow-x: auto; }