@morscherlab/mld-sdk 0.7.5 → 0.7.6

package/dist/styles.css

@@ -5957,403 +5957,831 @@ html.dark .mld-toggle__track:focus-visible {
   justify-content: flex-end;
   gap: 0.75rem;
 }
-/* GroupAssigner Component Styles */
-.mld-group-assigner {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+/* AutoGroupModal - Smart grouping wizard */
+.mld-auto-group {
+  min-height: 400px;
 }
-/* Zones container */
-.mld-group-assigner__zones {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
+/* --- Mode toggle --- */
+.mld-auto-group__mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
 }
-/* Zone */
-.mld-group-assigner__zone {
+/* --- Input step --- */
+.mld-auto-group__input-step {
   display: flex;
   flex-direction: column;
-  min-height: 8rem;
-  padding: 0.75rem;
-  border: 2px dashed var(--border-color);
-  border-radius: var(--mld-radius);
-  background-color: var(--bg-secondary);
-  transition: border-color var(--mld-transition), background-color var(--mld-transition);
-}
-.mld-group-assigner__zone--dragover {
-  border-color: var(--zone-color);
-  background-color: color-mix(in srgb, var(--zone-color) 8%, var(--bg-secondary));
 }
-.mld-group-assigner__zone-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border-color);
+.mld-auto-group__paste {
+  position: relative;
 }
-.mld-group-assigner__zone-label {
+.mld-auto-group__textarea {
+  width: 100%;
+  font-family: 'Fira Code', monospace;
   font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--zone-color);
+  line-height: 1.5;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  resize: vertical;
+  box-sizing: border-box;
 }
-.mld-group-assigner__zone-count {
+.mld-auto-group__textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+.mld-auto-group__textarea::placeholder {
+  color: var(--text-muted);
+}
+.mld-auto-group__sample-count {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.75rem;
   font-size: 0.75rem;
   color: var(--text-muted);
+  background: var(--bg-secondary);
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-sm);
 }
-.mld-group-assigner__zone-content {
-  flex: 1;
+/* --- CSV / Dropzone --- */
+.mld-auto-group__csv {
   display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 0.375rem;
+  flex-direction: column;
 }
-.mld-group-assigner__zone-empty {
+.mld-auto-group__dropzone {
+  position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-size: 0.8125rem;
-  color: var(--text-muted);
+  gap: 0.75rem;
+  padding: 3rem 2rem;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-tertiary);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
 }
-/* Pills */
-.mld-group-assigner__pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  background-color: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: 9999px;
-  cursor: grab;
-  user-select: none;
-  transition: transform var(--mld-transition), box-shadow var(--mld-transition);
+.mld-auto-group__dropzone--dragover {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
 }
-.mld-group-assigner__pill:hover {
-  box-shadow: var(--mld-shadow-sm);
+.mld-auto-group__file-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
 }
-.mld-group-assigner__pill:active {
-  cursor: grabbing;
+.mld-auto-group__upload-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: var(--text-muted);
 }
-.mld-group-assigner__pill--unassigned {
-  background-color: var(--bg-tertiary);
+.mld-auto-group__upload-text {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
 }
-.mld-group-assigner__pill--dragging {
-  opacity: 0.5;
-  transform: scale(0.95);
+.mld-auto-group__upload-highlight {
+  color: var(--color-primary);
+  font-weight: 500;
 }
-.mld-group-assigner__pill-color {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 50%;
+.mld-auto-group__file-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+}
+.mld-auto-group__file-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted);
   flex-shrink: 0;
 }
-.mld-group-assigner__pill-name {
-  font-size: 0.8125rem;
+.mld-auto-group__file-name {
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-primary);
-  white-space: nowrap;
 }
-.mld-group-assigner__pill-count {
-  font-size: 0.6875rem;
+.mld-auto-group__file-rows {
+  font-size: 0.75rem;
   color: var(--text-muted);
-  padding: 0.125rem 0.375rem;
-  background-color: var(--bg-tertiary);
-  border-radius: 9999px;
+  margin-left: auto;
 }
-.mld-group-assigner__pill-remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
-  padding: 0;
+.mld-auto-group__file-clear {
+  font-size: 0.75rem;
+  color: var(--color-primary);
   background: none;
   border: none;
-  color: var(--text-muted);
-  border-radius: 50%;
   cursor: pointer;
-  transition: color var(--mld-transition), background-color var(--mld-transition);
+  padding: 0;
+  margin-left: 0.5rem;
 }
-.mld-group-assigner__pill-remove:hover {
-  color: var(--mld-error);
-  background-color: var(--mld-error-soft);
+.mld-auto-group__file-clear:hover {
+  text-decoration: underline;
 }
-/* Unassigned section */
-.mld-group-assigner__unassigned {
+/* --- Outlier step --- */
+.mld-auto-group__outlier-step {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-}
-.mld-group-assigner__unassigned-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  gap: 0.75rem;
 }
-.mld-group-assigner__unassigned-title {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
+.mld-auto-group__outlier-banner {
+  padding: 0.75rem 1rem;
+  background: var(--mld-warning-bg);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  color: var(--text-primary);
 }
-.mld-group-assigner__clear-btn {
-  font-size: 0.75rem;
-  color: var(--color-primary);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
+.mld-auto-group__outlier-banner code {
+  font-family: 'Fira Code', monospace;
+  background: var(--bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
 }
-.mld-group-assigner__clear-btn:hover {
-  text-decoration: underline;
+.mld-auto-group__outlier-batch {
+  display: flex;
+  gap: 0.5rem;
 }
-.mld-group-assigner__unassigned-list {
+.mld-auto-group__outlier-list {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  max-height: 8rem;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 300px;
   overflow-y: auto;
-  padding: 0.5rem;
-  background-color: var(--bg-secondary);
+}
+.mld-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);
-  border-radius: var(--mld-radius-sm);
+  border-radius: var(--radius);
 }
-/* Validation */
-.mld-group-assigner__validation {
+.mld-auto-group__outlier-info {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  min-width: 0;
+}
+.mld-auto-group__outlier-name {
+  font-family: 'Fira Code', monospace;
   font-size: 0.8125rem;
-  color: var(--mld-warning);
-  background-color: var(--mld-warning-soft);
-  border-radius: var(--mld-radius-sm);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-/* MoleculeInput Component Styles */
-.mld-molecule-input {
+.mld-auto-group__outlier-badge {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.mld-auto-group__outlier-actions {
   display: flex;
-  flex-direction: column;
-  border-radius: 0.5rem;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+}
+.mld-auto-group__action-btn {
+  font-size: 0.6875rem;
+  padding: 0.25rem 0.5rem;
   border: 1px solid var(--border-color);
-  background-color: var(--bg-secondary);
-  overflow: hidden;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.1s;
 }
-.mld-molecule-input:focus-within {
-  border-color: transparent;
-  box-shadow: 0 0 0 2px var(--color-primary);
+.mld-auto-group__action-btn:hover {
+  background: var(--bg-hover);
 }
-.mld-molecule-input--disabled {
-  opacity: 0.5;
-  pointer-events: none;
+.mld-auto-group__action-btn--active {
+  background: var(--color-primary-soft);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  font-weight: 500;
 }
-.mld-molecule-input--readonly {
-  pointer-events: none;
-}
-.mld-molecule-input--error {
+.mld-auto-group__action-btn--active.mld-auto-group__action-btn--exclude {
+  background: var(--mld-error-bg);
   border-color: var(--mld-error);
+  color: var(--mld-error);
 }
-.mld-molecule-input--error:focus-within {
-  box-shadow: 0 0 0 2px var(--mld-error);
-}
-/* Editor container */
-.mld-molecule-input__editor {
-  position: relative;
-  width: 100%;
-  min-height: 200px;
-  background-color: var(--bg-secondary);
-}
-.mld-molecule-input__editor iframe {
-  border: none;
-  display: block;
+.mld-auto-group__action-btn--active.mld-auto-group__action-btn--qc {
+  background: rgba(107, 114, 128, 0.12);
+  border-color: #6B7280;
+  color: #6B7280;
 }
-/* Skeleton loader */
-.mld-molecule-input__skeleton {
+/* --- Field step --- */
+.mld-auto-group__field-step {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   gap: 1rem;
-  height: 100%;
-  min-height: 200px;
-  background-color: var(--bg-tertiary);
-}
-.mld-molecule-input__skeleton-icon {
-  width: 3rem;
-  height: 3rem;
-  color: var(--text-muted);
-  animation: mld-molecule-pulse 1.5s ease-in-out infinite;
 }
-.mld-molecule-input__skeleton-text {
-  font-size: 0.875rem;
-  color: var(--text-muted);
+.mld-auto-group__field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
 }
-@keyframes mld-molecule-pulse {
-  0%, 100% {
-    opacity: 0.4;
-  }
-  50% {
-    opacity: 1;
+@media (max-width: 600px) {
+  .mld-auto-group__field-grid {
+    grid-template-columns: 1fr;
   }
 }
-/* Readonly SVG display */
-.mld-molecule-input__readonly {
+.mld-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;
+}
+.mld-auto-group__field-card--enabled {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 1px var(--color-primary-soft);
+}
+.mld-auto-group__field-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  padding: 1rem;
-  background-color: var(--bg-tertiary);
-}
-.mld-molecule-input__readonly svg {
-  max-width: 100%;
-  max-height: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
 }
-/* Empty state */
-.mld-molecule-input__empty {
+.mld-auto-group__field-toggle {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  min-height: 200px;
-  padding: 1rem;
+  gap: 0.375rem;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+.mld-auto-group__field-toggle input {
+  accent-color: var(--color-primary);
+}
+.mld-auto-group__field-toggle-label {
+  user-select: none;
+}
+.mld-auto-group__field-cardinality {
+  font-size: 0.6875rem;
   color: var(--text-muted);
 }
-.mld-molecule-input__empty-icon {
-  width: 2.5rem;
-  height: 2.5rem;
+.mld-auto-group__field-name-input {
+  margin-bottom: 0.5rem;
 }
-.mld-molecule-input__empty-text {
-  font-size: 0.875rem;
+.mld-auto-group__field-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
 }
-/* SMILES preview */
-.mld-molecule-input__smiles {
-  padding: 0.5rem 0.75rem;
-  font-family: 'Fira Code', monospace;
-  font-size: 0.75rem;
+.mld-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);
-  background-color: var(--bg-tertiary);
-  border-top: 1px solid var(--border-color);
-  word-break: break-all;
-  user-select: all;
+  font-family: 'Fira Code', monospace;
 }
-.mld-molecule-input__smiles-label {
-  font-weight: 500;
+.mld-auto-group__field-more {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
   color: var(--text-muted);
-  margin-right: 0.5rem;
+  font-style: italic;
 }
-/* Error state */
-.mld-molecule-input__error {
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  color: var(--mld-error);
-  background-color: var(--mld-error-bg);
-  border-top: 1px solid var(--mld-error);
+.mld-auto-group__field-summary {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius);
 }
-.mld-molecule-input__error-icon {
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.5rem;
-  vertical-align: middle;
+.mld-auto-group__field-summary strong {
+  color: var(--text-primary);
 }
-/* Actions toolbar */
-.mld-molecule-input__actions {
+.mld-auto-group__field-warning {
+  font-size: 0.8125rem;
+  color: var(--mld-warning);
+  padding: 0.5rem 0.75rem;
+  background: var(--mld-warning-bg);
+  border-radius: var(--radius);
+}
+/* --- Preview step --- */
+.mld-auto-group__preview-step {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  background-color: var(--bg-tertiary);
-  border-top: 1px solid var(--border-color);
+  flex-direction: column;
+  gap: 1rem;
 }
-.mld-molecule-input__action-btn {
+.mld-auto-group__preview-summary {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.375rem;
-  background: transparent;
-  border: none;
-  border-radius: 0.25rem;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
 }
-.mld-molecule-input__action-btn:hover:not(:disabled) {
-  color: var(--text-primary);
-  background-color: var(--bg-hover);
+.mld-auto-group__preview-stat {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
 }
-.mld-molecule-input__action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.mld-auto-group__preview-stat strong {
+  color: var(--text-primary);
 }
-.mld-molecule-input__action-btn svg {
-  width: 1rem;
-  height: 1rem;
+.mld-auto-group__preview-stat--excluded strong {
+  color: var(--mld-error);
 }
-/* ConcentrationInput Component Styles */
-.mld-concentration-input {
+.mld-auto-group__preview-groups {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.375rem;
+  max-height: 320px;
+  overflow-y: auto;
 }
-.mld-concentration-input__controls {
-  display: flex;
-  border-radius: 0.5rem;
+.mld-auto-group__preview-group {
   border: 1px solid var(--border-color);
+  border-radius: var(--radius);
   overflow: hidden;
-  box-sizing: border-box;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.mld-concentration-input__controls--sm {
-  min-height: var(--form-height-sm);
+.mld-auto-group__preview-group[open] {
+  background: var(--bg-secondary);
 }
-.mld-concentration-input__controls--md {
-  min-height: var(--form-height-md);
+.mld-auto-group__preview-group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  user-select: none;
 }
-.mld-concentration-input__controls--lg {
-  min-height: var(--form-height-lg);
+.mld-auto-group__preview-group-header:hover {
+  background: var(--bg-hover);
 }
-.mld-concentration-input__controls:focus-within {
-  border-color: transparent;
-  box-shadow: 0 0 0 2px var(--color-primary);
+.mld-auto-group__preview-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.mld-concentration-input--error .mld-concentration-input__controls {
-  border-color: var(--mld-error);
+.mld-auto-group__preview-group-name {
+  font-weight: 500;
+  color: var(--text-primary);
 }
-.mld-concentration-input--error .mld-concentration-input__controls:focus-within {
-  box-shadow: 0 0 0 2px var(--mld-error);
+.mld-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;
 }
-.mld-concentration-input--disabled .mld-concentration-input__controls {
-  opacity: 0.5;
+.mld-auto-group__preview-samples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-light);
 }
-/* Value input */
-.mld-concentration-input__value {
-  flex: 1;
-  min-width: 0;
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border: none;
-  outline: none;
-  line-height: 1.25;
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
+.mld-auto-group__preview-sample {
+  font-size: 0.75rem;
+  font-family: 'Fira Code', monospace;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
 }
-.mld-concentration-input__value::-webkit-outer-spin-button,
-.mld-concentration-input__value::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.mld-auto-group__preview-sample--excluded {
+  opacity: 0.5;
+  text-decoration: line-through;
 }
-.mld-concentration-input__value::placeholder {
+/* --- Excluded section --- */
+.mld-auto-group__preview-excluded {
+  border-top: 1px solid var(--border-color);
+  padding-top: 0.75rem;
+}
+.mld-auto-group__preview-excluded-title {
+  font-size: 0.75rem;
+  font-weight: 500;
   color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
 }
-.mld-concentration-input__value--sm {
-  padding: 0.375rem 0.625rem;
-  font-size: 0.875rem;
+.mld-auto-group__preview-excluded-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
 }
-.mld-concentration-input__value--md {
-  padding: 0.5rem 0.75rem;
+/* --- Navigation --- */
+.mld-auto-group__nav {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+/* GroupAssigner Component Styles */
+.mld-group-assigner {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+/* Zones container */
+.mld-group-assigner__zones {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+/* Zone */
+.mld-group-assigner__zone {
+  display: flex;
+  flex-direction: column;
+  min-height: 8rem;
+  padding: 0.75rem;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--mld-radius);
+  background-color: var(--bg-secondary);
+  transition: border-color var(--mld-transition), background-color var(--mld-transition);
+}
+.mld-group-assigner__zone--dragover {
+  border-color: var(--zone-color);
+  background-color: color-mix(in srgb, var(--zone-color) 8%, var(--bg-secondary));
+}
+.mld-group-assigner__zone-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.mld-group-assigner__zone-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--zone-color);
+}
+.mld-group-assigner__zone-count {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+.mld-group-assigner__zone-content {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 0.375rem;
+}
+.mld-group-assigner__zone-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+/* Pills */
+.mld-group-assigner__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 9999px;
+  cursor: grab;
+  user-select: none;
+  transition: transform var(--mld-transition), box-shadow var(--mld-transition);
+}
+.mld-group-assigner__pill:hover {
+  box-shadow: var(--mld-shadow-sm);
+}
+.mld-group-assigner__pill:active {
+  cursor: grabbing;
+}
+.mld-group-assigner__pill--unassigned {
+  background-color: var(--bg-tertiary);
+}
+.mld-group-assigner__pill--dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+}
+.mld-group-assigner__pill-color {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.mld-group-assigner__pill-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.mld-group-assigner__pill-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  padding: 0.125rem 0.375rem;
+  background-color: var(--bg-tertiary);
+  border-radius: 9999px;
+}
+.mld-group-assigner__pill-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: color var(--mld-transition), background-color var(--mld-transition);
+}
+.mld-group-assigner__pill-remove:hover {
+  color: var(--mld-error);
+  background-color: var(--mld-error-soft);
+}
+/* Unassigned section */
+.mld-group-assigner__unassigned {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mld-group-assigner__unassigned-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mld-group-assigner__unassigned-title {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mld-group-assigner__clear-btn {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.mld-group-assigner__clear-btn:hover {
+  text-decoration: underline;
+}
+.mld-group-assigner__unassigned-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  max-height: 8rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius-sm);
+}
+/* Validation */
+.mld-group-assigner__validation {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--mld-warning);
+  background-color: var(--mld-warning-soft);
+  border-radius: var(--mld-radius-sm);
+}
+/* MoleculeInput Component Styles */
+.mld-molecule-input {
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  overflow: hidden;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.mld-molecule-input:focus-within {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+.mld-molecule-input--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.mld-molecule-input--readonly {
+  pointer-events: none;
+}
+.mld-molecule-input--error {
+  border-color: var(--mld-error);
+}
+.mld-molecule-input--error:focus-within {
+  box-shadow: 0 0 0 2px var(--mld-error);
+}
+/* Editor container */
+.mld-molecule-input__editor {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  background-color: var(--bg-secondary);
+}
+.mld-molecule-input__editor iframe {
+  border: none;
+  display: block;
+}
+/* Skeleton loader */
+.mld-molecule-input__skeleton {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  height: 100%;
+  min-height: 200px;
+  background-color: var(--bg-tertiary);
+}
+.mld-molecule-input__skeleton-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--text-muted);
+  animation: mld-molecule-pulse 1.5s ease-in-out infinite;
+}
+.mld-molecule-input__skeleton-text {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+@keyframes mld-molecule-pulse {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+/* Readonly SVG display */
+.mld-molecule-input__readonly {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 1rem;
+  background-color: var(--bg-tertiary);
+}
+.mld-molecule-input__readonly svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+/* Empty state */
+.mld-molecule-input__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 200px;
+  padding: 1rem;
+  color: var(--text-muted);
+}
+.mld-molecule-input__empty-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mld-molecule-input__empty-text {
+  font-size: 0.875rem;
+}
+/* SMILES preview */
+.mld-molecule-input__smiles {
+  padding: 0.5rem 0.75rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  border-top: 1px solid var(--border-color);
+  word-break: break-all;
+  user-select: all;
+}
+.mld-molecule-input__smiles-label {
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-right: 0.5rem;
+}
+/* Error state */
+.mld-molecule-input__error {
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--mld-error);
+  background-color: var(--mld-error-bg);
+  border-top: 1px solid var(--mld-error);
+}
+.mld-molecule-input__error-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.5rem;
+  vertical-align: middle;
+}
+/* Actions toolbar */
+.mld-molecule-input__actions {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background-color: var(--bg-tertiary);
+  border-top: 1px solid var(--border-color);
+}
+.mld-molecule-input__action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.mld-molecule-input__action-btn:hover:not(:disabled) {
+  color: var(--text-primary);
+  background-color: var(--bg-hover);
+}
+.mld-molecule-input__action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mld-molecule-input__action-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+/* ConcentrationInput Component Styles */
+.mld-concentration-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.mld-concentration-input__controls {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.mld-concentration-input__controls--sm {
+  min-height: var(--form-height-sm);
+}
+.mld-concentration-input__controls--md {
+  min-height: var(--form-height-md);
+}
+.mld-concentration-input__controls--lg {
+  min-height: var(--form-height-lg);
+}
+.mld-concentration-input__controls:focus-within {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+.mld-concentration-input--error .mld-concentration-input__controls {
+  border-color: var(--mld-error);
+}
+.mld-concentration-input--error .mld-concentration-input__controls:focus-within {
+  box-shadow: 0 0 0 2px var(--mld-error);
+}
+.mld-concentration-input--disabled .mld-concentration-input__controls {
+  opacity: 0.5;
+}
+/* Value input */
+.mld-concentration-input__value {
+  flex: 1;
+  min-width: 0;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border: none;
+  outline: none;
+  line-height: 1.25;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.mld-concentration-input__value::-webkit-outer-spin-button,
+.mld-concentration-input__value::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.mld-concentration-input__value::placeholder {
+  color: var(--text-muted);
+}
+.mld-concentration-input__value--sm {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+.mld-concentration-input__value--md {
+  padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
 }
 .mld-concentration-input__value--lg {
@@ -18048,1883 +18476,2480 @@ to {
   flex-shrink: 0;
   border-radius: 0.125rem;
 }
-.mld-sample-legend__swatch--sm {
-  width: 0.75rem;
-  height: 0.75rem;
+.mld-sample-legend__swatch--sm {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mld-sample-legend__swatch--md {
+  width: 1rem;
+  height: 1rem;
+}
+.mld-sample-legend__swatch--lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mld-sample-legend__name {
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mld-sample-legend__name--sm {
+  font-size: 0.75rem;
+}
+.mld-sample-legend__name--md {
+  font-size: 0.875rem;
+}
+.mld-sample-legend__name--lg {
+  font-size: 1rem;
+}
+.mld-sample-legend__count {
+  color: var(--text-muted);
+  background-color: var(--bg-secondary);
+  border-radius: 9999px;
+  padding: 0 0.375rem;
+  min-width: 1.5rem;
+  text-align: center;
+}
+.mld-sample-legend__count--sm {
+  font-size: 0.625rem;
+}
+.mld-sample-legend__count--md {
+  font-size: 0.75rem;
+}
+.mld-sample-legend__count--lg {
+  font-size: 0.75rem;
+}
+.mld-sample-legend__remove {
+  margin-left: auto;
+  padding: 0.125rem;
+  border-radius: 0.25rem;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+.mld-sample-legend__remove:hover {
+  color: var(--mld-error);
+}
+.mld-sample-legend__remove-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Add button */
+.mld-sample-legend__add {
+  display: flex;
+  align-items: center;
+  border: 2px dashed var(--border-color);
+  border-radius: 0.5rem;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.mld-sample-legend__add:hover {
+  color: var(--text-primary);
+  border-color: rgba(59, 130, 246, 0.5);
+}
+.mld-sample-legend__add:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+.mld-sample-legend__add--sm {
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.mld-sample-legend__add--md {
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+}
+.mld-sample-legend__add--lg {
+  gap: 0.625rem;
+  padding: 0.5rem 1rem;
+}
+.mld-sample-legend__add-icon--sm {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mld-sample-legend__add-icon--md {
+  width: 1rem;
+  height: 1rem;
+}
+.mld-sample-legend__add-icon--lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mld-sample-legend__add-text--sm {
+  font-size: 0.75rem;
+}
+.mld-sample-legend__add-text--md {
+  font-size: 0.875rem;
+}
+.mld-sample-legend__add-text--lg {
+  font-size: 1rem;
+}
+/* PlateMapEditor Component Styles */
+.mld-plate-editor {
+  display: flex;
+}
+.mld-plate-editor--with-sidebar {
+  gap: 1rem;
+}
+
+/* Main plate area */
+.mld-plate-editor__main {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Toolbar */
+.mld-plate-editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+}
+
+/* Plate tabs */
+.mld-plate-editor__tabs {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}
+.mld-plate-editor__tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.mld-plate-editor__tab--active {
+  background-color: var(--color-primary);
+  color: white;
+  border-color: transparent;
+}
+.mld-plate-editor__tab-slot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+.mld-plate-editor__tab-name {
+  font-weight: 500;
+}
+.mld-plate-editor__tab-count {
+  padding: 0 0.375rem;
+  min-width: 1.25rem;
+  text-align: center;
+  font-size: 0.625rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  background-color: var(--bg-secondary);
+  color: var(--text-muted);
+}
+.mld-plate-editor__tab--active .mld-plate-editor__tab-count {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+.mld-plate-editor__tab-remove {
+  opacity: 0;
+  margin-left: 0.25rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: opacity 0.15s ease;
+}
+.mld-plate-editor__tab:hover .mld-plate-editor__tab-remove {
+  opacity: 1;
+}
+.mld-plate-editor__tab--active .mld-plate-editor__tab-remove {
+  color: rgba(255, 255, 255, 0.7);
+}
+.mld-plate-editor__tab-remove svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Add plate button */
+.mld-plate-editor__add-plate {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  border: 1px dashed var(--border-color);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.mld-plate-editor__add-plate:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.mld-plate-editor__add-plate svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Toolbar spacer */
+.mld-plate-editor__spacer {
+  flex: 1;
+}
+
+/* Toolbar actions */
+.mld-plate-editor__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.mld-plate-editor__action-btn {
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.mld-plate-editor__action-btn:hover {
+  background-color: rgba(128, 128, 128, 0.1);
 }
-.mld-sample-legend__swatch--md {
+.mld-plate-editor__action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.mld-plate-editor__action-btn svg {
   width: 1rem;
   height: 1rem;
 }
-.mld-sample-legend__swatch--lg {
-  width: 1.25rem;
-  height: 1.25rem;
+.mld-plate-editor__divider {
+  width: 1px;
+  height: 1rem;
+  margin: 0 0.25rem;
+  background-color: var(--border-color);
 }
-.mld-sample-legend__name {
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+/* Selection info bar */
+.mld-plate-editor__selection-bar {
+  margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
 }
-.mld-sample-legend__name--sm {
-  font-size: 0.75rem;
+.mld-plate-editor__selection-count {
+  color: var(--text-secondary);
 }
-.mld-sample-legend__name--md {
+.mld-plate-editor__selection-count strong {
+  font-weight: 600;
+}
+.mld-plate-editor__assign-btn {
+  padding: 0.25rem 0.75rem;
   font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
-.mld-sample-legend__name--lg {
-  font-size: 1rem;
+.mld-plate-editor__assign-btn:hover {
+  opacity: 0.9;
 }
-.mld-sample-legend__count {
-  color: var(--text-muted);
+.mld-plate-editor__clear-btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
   background-color: var(--bg-secondary);
-  border-radius: 9999px;
-  padding: 0 0.375rem;
-  min-width: 1.5rem;
-  text-align: center;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
 }
-.mld-sample-legend__count--sm {
-  font-size: 0.625rem;
+.mld-plate-editor__clear-btn:hover {
+  background-color: rgba(239, 68, 68, 0.1);
 }
-.mld-sample-legend__count--md {
-  font-size: 0.75rem;
+
+/* Legend */
+.mld-plate-editor__legend {
+  margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.25rem;
 }
-.mld-sample-legend__count--lg {
-  font-size: 0.75rem;
+.mld-plate-editor__legend-items {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
-.mld-sample-legend__remove {
-  margin-left: auto;
-  padding: 0.125rem;
+.mld-plate-editor__legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.mld-plate-editor__legend-swatch {
+  width: 0.875rem;
+  height: 0.875rem;
   border-radius: 0.25rem;
+}
+.mld-plate-editor__legend-label {
+  font-size: 0.75rem;
   color: var(--text-muted);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: color 0.15s ease;
 }
-.mld-sample-legend__remove:hover {
-  color: var(--mld-error);
+.mld-plate-editor__legend-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
 }
-.mld-sample-legend__remove-icon {
+.mld-plate-editor__legend-hint svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
-/* Add button */
-.mld-sample-legend__add {
-  display: flex;
-  align-items: center;
-  border: 2px dashed var(--border-color);
+/* Sidebar */
+.mld-plate-editor__sidebar {
+  width: 13rem;
+  flex-shrink: 0;
+}
+.mld-plate-editor__sidebar-panel {
   border-radius: 0.5rem;
-  color: var(--text-muted);
-  background: transparent;
-  cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  padding: 0.75rem;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
 }
-.mld-sample-legend__add:hover {
+.mld-plate-editor__sidebar-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.75rem;
   color: var(--text-primary);
-  border-color: rgba(59, 130, 246, 0.5);
 }
-.mld-sample-legend__add:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-primary);
-}
-.mld-sample-legend__add--sm {
-  gap: 0.375rem;
-  padding: 0.25rem 0.5rem;
+
+/* Add sample form */
+.mld-plate-editor__add-sample {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-color);
 }
-.mld-sample-legend__add--md {
+.mld-plate-editor__add-sample-form {
+  display: flex;
   gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
 }
-.mld-sample-legend__add--lg {
-  gap: 0.625rem;
-  padding: 0.5rem 1rem;
+.mld-plate-editor__add-sample-input {
+  flex: 1;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
 }
-.mld-sample-legend__add-icon--sm {
-  width: 0.75rem;
-  height: 0.75rem;
+.mld-plate-editor__add-sample-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--color-primary);
 }
-.mld-sample-legend__add-icon--md {
-  width: 1rem;
-  height: 1rem;
+.mld-plate-editor__add-sample-btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
 }
-.mld-sample-legend__add-icon--lg {
-  width: 1.25rem;
-  height: 1.25rem;
+.mld-plate-editor__add-sample-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
-.mld-sample-legend__add-text--sm {
+
+/* Shortcuts */
+.mld-plate-editor__shortcuts {
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+.mld-plate-editor__shortcuts-title {
   font-size: 0.75rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--text-muted);
 }
-.mld-sample-legend__add-text--md {
-  font-size: 0.875rem;
+.mld-plate-editor__shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
 }
-.mld-sample-legend__add-text--lg {
-  font-size: 1rem;
+.mld-plate-editor__shortcut-key {
+  padding: 0 0.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--bg-primary);
 }
-/* PlateMapEditor Component Styles */
-.mld-plate-editor {
+
+/* Import modal */
+.mld-plate-editor__modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
 }
-.mld-plate-editor--with-sidebar {
-  gap: 1rem;
+.mld-plate-editor__modal {
+  width: 100%;
+  max-width: 28rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
-
-/* Main plate area */
-.mld-plate-editor__main {
-  flex: 1;
-  min-width: 0;
+.mld-plate-editor__modal-title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: 0.75rem;
+  color: var(--text-primary);
+}
+.mld-plate-editor__modal-field {
+  margin-bottom: 0.75rem;
 }
-
-/* Toolbar */
-.mld-plate-editor__toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
+.mld-plate-editor__modal-label {
+  display: block;
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+  color: var(--text-secondary);
+}
+.mld-plate-editor__modal-select,
+.mld-plate-editor__modal-textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
+  color: var(--text-primary);
 }
-
-/* Plate tabs */
-.mld-plate-editor__tabs {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  flex-wrap: wrap;
+.mld-plate-editor__modal-select:focus,
+.mld-plate-editor__modal-textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--color-primary);
 }
-.mld-plate-editor__tab {
-  position: relative;
+.mld-plate-editor__modal-textarea {
+  font-family: monospace;
+  font-size: 0.875rem;
+  resize: none;
+}
+.mld-plate-editor__modal-actions {
   display: flex;
-  align-items: center;
+  justify-content: flex-end;
   gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
+  margin-top: 1rem;
+}
+.mld-plate-editor__modal-cancel {
+  padding: 0.5rem 1rem;
   font-size: 0.875rem;
   border-radius: 0.375rem;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
   border: 1px solid var(--border-color);
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
   cursor: pointer;
-  transition: all 0.2s ease;
-}
-.mld-plate-editor__tab--active {
-  background-color: var(--color-primary);
-  color: white;
-  border-color: transparent;
-}
-.mld-plate-editor__tab-slot {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 9999px;
-  flex-shrink: 0;
-}
-.mld-plate-editor__tab-name {
-  font-weight: 500;
+  transition: background-color 0.15s ease;
 }
-.mld-plate-editor__tab-count {
-  padding: 0 0.375rem;
-  min-width: 1.25rem;
-  text-align: center;
-  font-size: 0.625rem;
-  font-weight: 600;
-  border-radius: 9999px;
-  background-color: var(--bg-secondary);
-  color: var(--text-muted);
+.mld-plate-editor__modal-cancel:hover {
+  background-color: var(--bg-tertiary);
 }
-.mld-plate-editor__tab--active .mld-plate-editor__tab-count {
-  background-color: rgba(255, 255, 255, 0.2);
+.mld-plate-editor__modal-submit {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  background-color: var(--color-primary);
   color: white;
-}
-.mld-plate-editor__tab-remove {
-  opacity: 0;
-  margin-left: 0.25rem;
-  background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--text-muted);
   transition: opacity 0.15s ease;
 }
-.mld-plate-editor__tab:hover .mld-plate-editor__tab-remove {
-  opacity: 1;
+.mld-plate-editor__modal-submit:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
-.mld-plate-editor__tab--active .mld-plate-editor__tab-remove {
-  color: rgba(255, 255, 255, 0.7);
+/* ExperimentTimeline Component Styles */
+.mld-timeline {
+  display: flex;
+  flex-direction: column;
 }
-.mld-plate-editor__tab-remove svg {
-  width: 0.875rem;
-  height: 0.875rem;
+.mld-timeline--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
 }
 
-/* Add plate button */
-.mld-plate-editor__add-plate {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.375rem 0.5rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  border: 1px dashed var(--border-color);
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
+/* Step item */
+.mld-timeline__step {
+  position: relative;
 }
-.mld-plate-editor__add-plate:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+.mld-timeline--horizontal .mld-timeline__step {
+  flex-shrink: 0;
 }
-.mld-plate-editor__add-plate svg {
-  width: 1rem;
+
+/* Connector line */
+.mld-timeline__connector {
+  position: absolute;
+  background-color: var(--border-color);
+}
+.mld-timeline--vertical .mld-timeline__connector {
+  left: 1rem;
+  top: 100%;
+  width: 2px;
   height: 1rem;
+  transform: translateX(-50%);
 }
-
-/* Toolbar spacer */
-.mld-plate-editor__spacer {
-  flex: 1;
+.mld-timeline--horizontal .mld-timeline__connector {
+  top: 50%;
+  left: 100%;
+  height: 2px;
+  width: 2rem;
+  transform: translateY(-50%);
 }
 
-/* Toolbar actions */
-.mld-plate-editor__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.mld-plate-editor__action-btn {
-  padding: 0.375rem;
-  border-radius: 0.25rem;
-  background: transparent;
-  border: none;
-  color: var(--text-secondary);
+/* Step card */
+.mld-timeline__card {
+  position: relative;
+  border-radius: 0.5rem;
+  border-width: 2px;
+  border-style: solid;
+  transition: all 0.2s ease;
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
 }
-.mld-plate-editor__action-btn:hover {
-  background-color: rgba(128, 128, 128, 0.1);
+.mld-timeline--horizontal .mld-timeline__card {
+  min-width: 180px;
 }
-.mld-plate-editor__action-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.mld-timeline--vertical .mld-timeline__card {
+  width: 100%;
 }
-.mld-plate-editor__action-btn svg {
-  width: 1rem;
-  height: 1rem;
+.mld-timeline__card--sm {
+  padding: 0.5rem;
 }
-.mld-plate-editor__divider {
-  width: 1px;
-  height: 1rem;
-  margin: 0 0.25rem;
-  background-color: var(--border-color);
+.mld-timeline__card--md {
+  padding: 0.75rem;
 }
-
-/* Selection info bar */
-.mld-plate-editor__selection-bar {
-  margin-top: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
+.mld-timeline__card--lg {
+  padding: 1rem;
 }
-.mld-plate-editor__selection-count {
-  color: var(--text-secondary);
+.mld-timeline__card--dragging {
+  opacity: 0.5;
 }
-.mld-plate-editor__selection-count strong {
-  font-weight: 600;
+.mld-timeline__card--drag-over {
+  box-shadow: 0 0 0 2px var(--color-primary);
 }
-.mld-plate-editor__assign-btn {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.25rem;
-  background-color: var(--color-primary);
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
+.mld-timeline__card--editable {
+  cursor: grab;
 }
-.mld-plate-editor__assign-btn:hover {
-  opacity: 0.9;
+.mld-timeline__card--editable:active {
+  cursor: grabbing;
 }
-.mld-plate-editor__clear-btn {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.25rem;
-  background-color: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
+
+/* Status colors */
+.mld-timeline__card--pending {
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-color);
+}
+.mld-timeline__card--in-progress {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.6);
+}
+.mld-timeline__card--completed {
+  background-color: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.6);
 }
-.mld-plate-editor__clear-btn:hover {
+.mld-timeline__card--failed {
   background-color: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.6);
+}
+.mld-timeline__card--skipped {
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-color);
 }
 
-/* Legend */
-.mld-plate-editor__legend {
-  margin-top: 0.75rem;
+/* Header */
+.mld-timeline__header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 0.25rem;
 }
-.mld-plate-editor__legend-items {
-  display: flex;
-  align-items: center;
+.mld-timeline__header--sm {
+  gap: 0.5rem;
+}
+.mld-timeline__header--md {
+  gap: 0.75rem;
+}
+.mld-timeline__header--lg {
   gap: 1rem;
 }
-.mld-plate-editor__legend-item {
+
+/* Icon */
+.mld-timeline__icon {
+  flex-shrink: 0;
+  border-radius: 9999px;
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  justify-content: center;
 }
-.mld-plate-editor__legend-swatch {
-  width: 0.875rem;
-  height: 0.875rem;
-  border-radius: 0.25rem;
+.mld-timeline__icon--sm {
+  width: 1.5rem;
+  height: 1.5rem;
 }
-.mld-plate-editor__legend-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
+.mld-timeline__icon--md {
+  width: 2rem;
+  height: 2rem;
 }
-.mld-plate-editor__legend-hint {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
+.mld-timeline__icon--lg {
+  width: 2.5rem;
+  height: 2.5rem;
 }
-.mld-plate-editor__legend-hint svg {
-  width: 0.875rem;
-  height: 0.875rem;
+.mld-timeline__icon svg {
+  stroke: currentColor;
+}
+.mld-timeline__icon--sm svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mld-timeline__icon--md svg {
+  width: 1rem;
+  height: 1rem;
+}
+.mld-timeline__icon--lg svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
-/* Sidebar */
-.mld-plate-editor__sidebar {
-  width: 13rem;
-  flex-shrink: 0;
+/* Status text colors */
+.mld-timeline__icon--pending {
+  color: var(--text-muted);
 }
-.mld-plate-editor__sidebar-panel {
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
+.mld-timeline__icon--in-progress {
+  color: #3b82f6;
 }
-.mld-plate-editor__sidebar-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-bottom: 0.75rem;
-  color: var(--text-primary);
+.mld-timeline__icon--completed {
+  color: #10b981;
+}
+.mld-timeline__icon--failed {
+  color: #ef4444;
+}
+.mld-timeline__icon--skipped {
+  color: var(--text-muted);
 }
 
-/* Add sample form */
-.mld-plate-editor__add-sample {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
+/* Title and meta */
+.mld-timeline__content {
+  flex: 1;
+  min-width: 0;
 }
-.mld-plate-editor__add-sample-form {
+.mld-timeline__title-row {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
-.mld-plate-editor__add-sample-input {
-  flex: 1;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
+.mld-timeline__title {
+  font-weight: 500;
   color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mld-plate-editor__add-sample-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--color-primary);
+.mld-timeline__title--sm {
+  font-size: 0.75rem;
 }
-.mld-plate-editor__add-sample-btn {
-  padding: 0.25rem 0.5rem;
+.mld-timeline__title--md {
   font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.375rem;
-  background-color: var(--color-primary);
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-.mld-plate-editor__add-sample-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
 }
-
-/* Shortcuts */
-.mld-plate-editor__shortcuts {
-  margin-top: 1rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
+.mld-timeline__title--lg {
+  font-size: 1rem;
 }
-.mld-plate-editor__shortcuts-title {
+.mld-timeline__duration {
+  color: var(--text-muted);
   font-size: 0.75rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+}
+.mld-timeline__duration--sm {
+  font-size: 0.625rem;
+}
+.mld-timeline__type {
   color: var(--text-muted);
+  text-transform: capitalize;
 }
-.mld-plate-editor__shortcuts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+.mld-timeline__type--sm {
+  font-size: 0.625rem;
+}
+.mld-timeline__type--md {
+  font-size: 0.75rem;
+}
+.mld-timeline__type--lg {
   font-size: 0.75rem;
+}
+
+/* Expand indicator */
+.mld-timeline__expand-icon {
+  width: 1rem;
+  height: 1rem;
   color: var(--text-muted);
+  transition: transform 0.2s ease;
 }
-.mld-plate-editor__shortcut-key {
-  padding: 0 0.25rem;
-  border-radius: 0.25rem;
-  background-color: var(--bg-primary);
+.mld-timeline__expand-icon--expanded {
+  transform: rotate(180deg);
 }
 
-/* Import modal */
-.mld-plate-editor__modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 50;
+/* Remove button */
+.mld-timeline__remove-btn {
+  padding: 0.25rem;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: color 0.15s ease;
 }
-.mld-plate-editor__modal {
-  width: 100%;
-  max-width: 28rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+.mld-timeline__remove-btn:hover {
+  color: var(--mld-error);
 }
-.mld-plate-editor__modal-title {
-  font-size: 1.125rem;
-  font-weight: 500;
-  margin-bottom: 0.75rem;
-  color: var(--text-primary);
+.mld-timeline__remove-btn svg {
+  width: 1rem;
+  height: 1rem;
 }
-.mld-plate-editor__modal-field {
-  margin-bottom: 0.75rem;
+
+/* Expanded content */
+.mld-timeline__expanded {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(var(--border-color-rgb, 0, 0, 0), 0.5);
 }
-.mld-plate-editor__modal-label {
-  display: block;
-  font-size: 0.875rem;
-  margin-bottom: 0.25rem;
+.mld-timeline__description {
   color: var(--text-secondary);
+  margin-top: 0 !important;
+  margin-bottom: 0.5rem !important;
+  padding: 0 !important;
 }
-.mld-plate-editor__modal-select,
-.mld-plate-editor__modal-textarea {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-}
-.mld-plate-editor__modal-select:focus,
-.mld-plate-editor__modal-textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--color-primary);
+.mld-timeline__description--sm {
+  font-size: 0.75rem;
 }
-.mld-plate-editor__modal-textarea {
-  font-family: monospace;
+.mld-timeline__description--md {
   font-size: 0.875rem;
-  resize: none;
 }
-.mld-plate-editor__modal-actions {
+.mld-timeline__parameters {
   display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1rem;
+  flex-direction: column;
+  gap: 0.25rem;
 }
-.mld-plate-editor__modal-cancel {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  background-color: var(--bg-secondary);
+.mld-timeline__param {
+  display: flex;
+  justify-content: space-between;
+}
+.mld-timeline__param--sm {
+  font-size: 0.625rem;
+}
+.mld-timeline__param--md {
+  font-size: 0.75rem;
+}
+.mld-timeline__param-key {
+  color: var(--text-muted);
+}
+.mld-timeline__param-value {
   color: var(--text-primary);
-  border: 1px solid var(--border-color);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
+  font-weight: 500;
 }
-.mld-plate-editor__modal-cancel:hover {
-  background-color: var(--bg-tertiary);
+
+/* Status controls */
+.mld-timeline__status-controls {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
 }
-.mld-plate-editor__modal-submit {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  border-radius: 0.375rem;
-  background-color: var(--color-primary);
-  color: white;
+.mld-timeline__status-btn {
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  background: transparent;
   border: none;
   cursor: pointer;
-  transition: opacity 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  color: var(--text-muted);
 }
-.mld-plate-editor__modal-submit:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+.mld-timeline__status-btn:hover {
+  background-color: var(--bg-tertiary);
 }
-/* ExperimentTimeline Component Styles */
-.mld-timeline {
-  display: flex;
-  flex-direction: column;
+.mld-timeline__status-btn--active {
+  font-weight: 500;
 }
-.mld-timeline--horizontal {
-  flex-direction: row;
-  align-items: flex-start;
-  overflow-x: auto;
-  padding-bottom: 0.5rem;
+.mld-timeline__status-btn--pending.mld-timeline__status-btn--active {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
 }
-
-/* Step item */
-.mld-timeline__step {
-  position: relative;
+.mld-timeline__status-btn--in-progress.mld-timeline__status-btn--active {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
 }
-.mld-timeline--horizontal .mld-timeline__step {
-  flex-shrink: 0;
+.mld-timeline__status-btn--completed.mld-timeline__status-btn--active {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+.mld-timeline__status-btn--failed.mld-timeline__status-btn--active {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+.mld-timeline__status-btn--skipped.mld-timeline__status-btn--active {
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
 }
 
-/* Connector line */
-.mld-timeline__connector {
+/* Add step button (inline) */
+.mld-timeline__add-inline {
   position: absolute;
-  background-color: var(--border-color);
-}
-.mld-timeline--vertical .mld-timeline__connector {
   left: 1rem;
-  top: 100%;
-  width: 2px;
-  height: 1rem;
+  bottom: -0.5rem;
   transform: translateX(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  z-index: 10;
 }
-.mld-timeline--horizontal .mld-timeline__connector {
-  top: 50%;
-  left: 100%;
-  height: 2px;
+.mld-timeline__step:hover .mld-timeline__add-inline,
+.mld-timeline__add-inline:focus {
+  opacity: 1;
+}
+.mld-timeline__add-inline:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.mld-timeline__add-inline svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Spacer */
+.mld-timeline__spacer--vertical {
+  height: 1rem;
+}
+.mld-timeline__spacer--horizontal {
   width: 2rem;
-  transform: translateY(-50%);
 }
 
-/* Step card */
-.mld-timeline__card {
-  position: relative;
+/* Empty state */
+.mld-timeline__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  border: 2px dashed var(--border-color);
+  border-radius: 0.5rem;
+}
+.mld-timeline__empty-content {
+  text-align: center;
+}
+.mld-timeline__empty-text {
+  color: var(--text-muted);
+  margin-top: 0 !important;
+  margin-bottom: 0.5rem !important;
+  padding: 0 !important;
+}
+.mld-timeline__empty-btn {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
   border-radius: 0.5rem;
-  border-width: 2px;
-  border-style: solid;
-  transition: all 0.2s ease;
   cursor: pointer;
+  transition: background-color 0.15s ease;
 }
-.mld-timeline--horizontal .mld-timeline__card {
-  min-width: 180px;
+.mld-timeline__empty-btn:hover {
+  opacity: 0.9;
 }
-.mld-timeline--vertical .mld-timeline__card {
-  width: 100%;
+
+/* Add step button (end) */
+.mld-timeline__add-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 2px dashed var(--border-color);
+  border-radius: 0.5rem;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
 }
-.mld-timeline__card--sm {
+.mld-timeline__add-end--sm {
   padding: 0.5rem;
 }
-.mld-timeline__card--md {
+.mld-timeline__add-end--md {
   padding: 0.75rem;
 }
-.mld-timeline__card--lg {
+.mld-timeline__add-end--lg {
   padding: 1rem;
 }
-.mld-timeline__card--dragging {
-  opacity: 0.5;
+.mld-timeline--horizontal .mld-timeline__add-end {
+  min-width: 120px;
+  flex-shrink: 0;
 }
-.mld-timeline__card--drag-over {
-  box-shadow: 0 0 0 2px var(--color-primary);
+.mld-timeline--vertical .mld-timeline__add-end {
+  width: 100%;
+  margin-top: 1rem;
 }
-.mld-timeline__card--editable {
-  cursor: grab;
+.mld-timeline__add-end:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
 }
-.mld-timeline__card--editable:active {
-  cursor: grabbing;
+.mld-timeline__add-end svg {
+  width: 1rem;
+  height: 1rem;
 }
-
-/* Status colors */
-.mld-timeline__card--pending {
-  background-color: var(--bg-tertiary);
-  border-color: var(--border-color);
+.mld-timeline__add-end-text--sm {
+  font-size: 0.75rem;
 }
-.mld-timeline__card--in-progress {
-  background-color: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.6);
+.mld-timeline__add-end-text--md {
+  font-size: 0.875rem;
 }
-.mld-timeline__card--completed {
-  background-color: rgba(16, 185, 129, 0.1);
-  border-color: rgba(16, 185, 129, 0.6);
+.mld-timeline__add-end-text--lg {
+  font-size: 1rem;
 }
-.mld-timeline__card--failed {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.6);
+.mld-wizard {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  outline: none;
+}
+
+/* Progress indicator */
+.mld-wizard__progress {
+}
+.mld-wizard__steps-indicator {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.mld-wizard__step-connector {
+  flex: 1;
+  height: 2px;
+  background-color: var(--border-color);
+  margin-top: 1rem;
+  transition: background-color 0.2s ease;
 }
-.mld-timeline__card--skipped {
-  background-color: var(--bg-tertiary);
-  border-color: var(--border-color);
+.mld-wizard__step-connector--completed {
+  background-color: var(--mld-success);
 }
-
-/* Header */
-.mld-timeline__header {
+.mld-wizard__step-indicator {
   display: flex;
+  flex-direction: column;
   align-items: center;
-}
-.mld-timeline__header--sm {
   gap: 0.5rem;
+  cursor: pointer;
+  min-width: 4rem;
 }
-.mld-timeline__header--md {
-  gap: 0.75rem;
-}
-.mld-timeline__header--lg {
-  gap: 1rem;
+.mld-wizard__step-indicator--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
-
-/* Icon */
-.mld-timeline__icon {
-  flex-shrink: 0;
+.mld-wizard__step-dot {
+  width: 2rem;
+  height: 2rem;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 2px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-muted);
+  transition: all 0.2s ease;
 }
-.mld-timeline__icon--sm {
+
+/* Size variants for dot */
+.mld-wizard--sm .mld-wizard__step-dot {
   width: 1.5rem;
   height: 1.5rem;
+  font-size: 0.625rem;
 }
-.mld-timeline__icon--md {
-  width: 2rem;
-  height: 2rem;
-}
-.mld-timeline__icon--lg {
+.mld-wizard--lg .mld-wizard__step-dot {
   width: 2.5rem;
   height: 2.5rem;
+  font-size: 0.875rem;
 }
-.mld-timeline__icon svg {
-  stroke: currentColor;
-}
-.mld-timeline__icon--sm svg {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.mld-timeline__icon--md svg {
-  width: 1rem;
-  height: 1rem;
+.mld-wizard__step-indicator--active .mld-wizard__step-dot {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+  color: white;
 }
-.mld-timeline__icon--lg svg {
-  width: 1.25rem;
-  height: 1.25rem;
+.mld-wizard__step-indicator--completed .mld-wizard__step-dot {
+  border-color: var(--mld-success);
+  background-color: var(--mld-success);
+  color: white;
 }
-
-/* Status text colors */
-.mld-timeline__icon--pending {
+.mld-wizard__step-label {
+  font-size: 0.75rem;
   color: var(--text-muted);
+  text-align: center;
+  white-space: nowrap;
 }
-.mld-timeline__icon--in-progress {
-  color: #3b82f6;
-}
-.mld-timeline__icon--completed {
-  color: #10b981;
-}
-.mld-timeline__icon--failed {
-  color: #ef4444;
+.mld-wizard__step-indicator--active .mld-wizard__step-label {
+  color: var(--text-primary);
+  font-weight: 500;
 }
-.mld-timeline__icon--skipped {
-  color: var(--text-muted);
+.mld-wizard__step-indicator--completed .mld-wizard__step-label {
+  color: var(--text-secondary);
 }
 
-/* Title and meta */
-.mld-timeline__content {
+/* Body */
+.mld-wizard__body {
   flex: 1;
-  min-width: 0;
+  min-height: 0;
 }
-.mld-timeline__title-row {
+
+/* Navigation */
+.mld-wizard__navigation {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
 }
-.mld-timeline__title {
+.mld-wizard__nav-btn {
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
   font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  border: none;
+}
+.mld-wizard__nav-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mld-wizard__nav-btn--cancel {
+  background: transparent;
+  color: var(--text-muted);
+}
+.mld-wizard__nav-btn--cancel:hover:not(:disabled) {
   color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
-.mld-timeline__title--sm {
-  font-size: 0.75rem;
+.mld-wizard__nav-btn--back {
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
 }
-.mld-timeline__title--md {
-  font-size: 0.875rem;
+.mld-wizard__nav-btn--back:hover:not(:disabled) {
+  background-color: var(--bg-hover);
 }
-.mld-timeline__title--lg {
-  font-size: 1rem;
+.mld-wizard__nav-btn--next {
+  background-color: var(--color-primary);
+  color: white;
 }
-.mld-timeline__duration {
-  color: var(--text-muted);
-  font-size: 0.75rem;
+.mld-wizard__nav-btn--next:hover:not(:disabled) {
+  background-color: var(--color-primary-hover);
 }
-.mld-timeline__duration--sm {
-  font-size: 0.625rem;
+.mld-wizard__nav-btn--finish {
+  background-color: var(--mld-success);
+  color: white;
 }
-.mld-timeline__type {
-  color: var(--text-muted);
-  text-transform: capitalize;
+.mld-wizard__nav-btn--finish:hover:not(:disabled) {
+  opacity: 0.9;
 }
-.mld-timeline__type--sm {
+
+/* Size variants for connector alignment */
+.mld-wizard--sm .mld-wizard__step-connector {
+  margin-top: 0.75rem;
+}
+.mld-wizard--lg .mld-wizard__step-connector {
+  margin-top: 1.25rem;
+}
+.mld-wizard--sm .mld-wizard__step-label {
   font-size: 0.625rem;
 }
-.mld-timeline__type--md {
+.mld-wizard--sm .mld-wizard__nav-btn {
+  padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
 }
-.mld-timeline__type--lg {
+.mld-wizard--lg .mld-wizard__nav-btn {
+  padding: 0.625rem 1.25rem;
+  font-size: 1rem;
+}
+/* AutoGroupModal - Smart grouping wizard */
+.mld-auto-group {
+  min-height: 400px;
+}
+
+/* --- Mode toggle --- */
+.mld-auto-group__mode-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+/* --- Input step --- */
+.mld-auto-group__input-step {
+  display: flex;
+  flex-direction: column;
+}
+.mld-auto-group__paste {
+  position: relative;
+}
+.mld-auto-group__textarea {
+  width: 100%;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  resize: vertical;
+  box-sizing: border-box;
+}
+.mld-auto-group__textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+.mld-auto-group__textarea::placeholder {
+  color: var(--text-muted);
+}
+.mld-auto-group__sample-count {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.75rem;
   font-size: 0.75rem;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-sm);
 }
 
-/* Expand indicator */
-.mld-timeline__expand-icon {
-  width: 1rem;
-  height: 1rem;
+/* --- CSV / Dropzone --- */
+.mld-auto-group__csv {
+  display: flex;
+  flex-direction: column;
+}
+.mld-auto-group__dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 3rem 2rem;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-tertiary);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.mld-auto-group__dropzone--dragover {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+}
+.mld-auto-group__file-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.mld-auto-group__upload-icon {
+  width: 2.5rem;
+  height: 2.5rem;
   color: var(--text-muted);
-  transition: transform 0.2s ease;
 }
-.mld-timeline__expand-icon--expanded {
-  transform: rotate(180deg);
+.mld-auto-group__upload-text {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+.mld-auto-group__upload-highlight {
+  color: var(--color-primary);
+  font-weight: 500;
+}
+.mld-auto-group__file-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+}
+.mld-auto-group__file-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+.mld-auto-group__file-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
 }
-
-/* Remove button */
-.mld-timeline__remove-btn {
-  padding: 0.25rem;
+.mld-auto-group__file-rows {
+  font-size: 0.75rem;
   color: var(--text-muted);
-  background: transparent;
+  margin-left: auto;
+}
+.mld-auto-group__file-clear {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
   border: none;
-  border-radius: 0.25rem;
   cursor: pointer;
-  transition: color 0.15s ease;
-}
-.mld-timeline__remove-btn:hover {
-  color: var(--mld-error);
+  padding: 0;
+  margin-left: 0.5rem;
 }
-.mld-timeline__remove-btn svg {
-  width: 1rem;
-  height: 1rem;
+.mld-auto-group__file-clear:hover {
+  text-decoration: underline;
 }
 
-/* Expanded content */
-.mld-timeline__expanded {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid rgba(var(--border-color-rgb, 0, 0, 0), 0.5);
+/* --- Outlier step --- */
+.mld-auto-group__outlier-step {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
-.mld-timeline__description {
-  color: var(--text-secondary);
-  margin-top: 0 !important;
-  margin-bottom: 0.5rem !important;
-  padding: 0 !important;
+.mld-auto-group__outlier-banner {
+  padding: 0.75rem 1rem;
+  background: var(--mld-warning-bg);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  color: var(--text-primary);
 }
-.mld-timeline__description--sm {
-  font-size: 0.75rem;
+.mld-auto-group__outlier-banner code {
+  font-family: 'Fira Code', monospace;
+  background: var(--bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
 }
-.mld-timeline__description--md {
-  font-size: 0.875rem;
+.mld-auto-group__outlier-batch {
+  display: flex;
+  gap: 0.5rem;
 }
-.mld-timeline__parameters {
+.mld-auto-group__outlier-list {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
+  max-height: 300px;
+  overflow-y: auto;
 }
-.mld-timeline__param {
+.mld-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);
+  border-radius: var(--radius);
 }
-.mld-timeline__param--sm {
-  font-size: 0.625rem;
+.mld-auto-group__outlier-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
 }
-.mld-timeline__param--md {
-  font-size: 0.75rem;
+.mld-auto-group__outlier-name {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.mld-timeline__param-key {
+.mld-auto-group__outlier-badge {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
   color: var(--text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
 }
-.mld-timeline__param-value {
-  color: var(--text-primary);
-  font-weight: 500;
-}
-
-/* Status controls */
-.mld-timeline__status-controls {
-  margin-top: 0.75rem;
+.mld-auto-group__outlier-actions {
   display: flex;
-  flex-wrap: wrap;
   gap: 0.25rem;
+  flex-shrink: 0;
+  margin-left: 0.75rem;
 }
-.mld-timeline__status-btn {
-  padding: 0.125rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  background: transparent;
-  border: none;
+.mld-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: background-color 0.15s ease, color 0.15s ease;
-  color: var(--text-muted);
+  transition: all 0.1s;
 }
-.mld-timeline__status-btn:hover {
-  background-color: var(--bg-tertiary);
+.mld-auto-group__action-btn:hover {
+  background: var(--bg-hover);
 }
-.mld-timeline__status-btn--active {
+.mld-auto-group__action-btn--active {
+  background: var(--color-primary-soft);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
   font-weight: 500;
 }
-.mld-timeline__status-btn--pending.mld-timeline__status-btn--active {
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
+.mld-auto-group__action-btn--active.mld-auto-group__action-btn--exclude {
+  background: var(--mld-error-bg);
+  border-color: var(--mld-error);
+  color: var(--mld-error);
 }
-.mld-timeline__status-btn--in-progress.mld-timeline__status-btn--active {
-  background-color: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
+.mld-auto-group__action-btn--active.mld-auto-group__action-btn--qc {
+  background: rgba(107, 114, 128, 0.12);
+  border-color: #6B7280;
+  color: #6B7280;
 }
-.mld-timeline__status-btn--completed.mld-timeline__status-btn--active {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+
+/* --- Field step --- */
+.mld-auto-group__field-step {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-.mld-timeline__status-btn--failed.mld-timeline__status-btn--active {
-  background-color: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+.mld-auto-group__field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
 }
-.mld-timeline__status-btn--skipped.mld-timeline__status-btn--active {
-  background-color: var(--bg-tertiary);
-  color: var(--text-muted);
+@media (max-width: 600px) {
+.mld-auto-group__field-grid {
+    grid-template-columns: 1fr;
 }
-
-/* Add step button (inline) */
-.mld-timeline__add-inline {
-  position: absolute;
-  left: 1rem;
-  bottom: -0.5rem;
-  transform: translateX(-50%);
-  width: 1rem;
-  height: 1rem;
-  background-color: var(--bg-primary);
+}
+.mld-auto-group__field-card {
+  padding: 0.75rem;
   border: 1px solid var(--border-color);
-  border-radius: 9999px;
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.mld-auto-group__field-card--enabled {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 1px var(--color-primary-soft);
+}
+.mld-auto-group__field-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.mld-auto-group__field-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-  z-index: 10;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
 }
-.mld-timeline__step:hover .mld-timeline__add-inline,
-.mld-timeline__add-inline:focus {
-  opacity: 1;
+.mld-auto-group__field-toggle input {
+  accent-color: var(--color-primary);
 }
-.mld-timeline__add-inline:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+.mld-auto-group__field-toggle-label {
+  user-select: none;
 }
-.mld-timeline__add-inline svg {
-  width: 0.75rem;
-  height: 0.75rem;
+.mld-auto-group__field-cardinality {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
 }
-
-/* Spacer */
-.mld-timeline__spacer--vertical {
-  height: 1rem;
+.mld-auto-group__field-name-input {
+  margin-bottom: 0.5rem;
 }
-.mld-timeline__spacer--horizontal {
-  width: 2rem;
+.mld-auto-group__field-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+.mld-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;
+}
+.mld-auto-group__field-more {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+.mld-auto-group__field-summary {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius);
+}
+.mld-auto-group__field-summary strong {
+  color: var(--text-primary);
+}
+.mld-auto-group__field-warning {
+  font-size: 0.8125rem;
+  color: var(--mld-warning);
+  padding: 0.5rem 0.75rem;
+  background: var(--mld-warning-bg);
+  border-radius: var(--radius);
 }
 
-/* Empty state */
-.mld-timeline__empty {
+/* --- Preview step --- */
+.mld-auto-group__preview-step {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  border: 2px dashed var(--border-color);
-  border-radius: 0.5rem;
+  flex-direction: column;
+  gap: 1rem;
 }
-.mld-timeline__empty-content {
-  text-align: center;
+.mld-auto-group__preview-summary {
+  display: flex;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
 }
-.mld-timeline__empty-text {
-  color: var(--text-muted);
-  margin-top: 0 !important;
-  margin-bottom: 0.5rem !important;
-  padding: 0 !important;
+.mld-auto-group__preview-stat {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
 }
-.mld-timeline__empty-btn {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  background-color: var(--color-primary);
-  color: white;
-  border: none;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
+.mld-auto-group__preview-stat strong {
+  color: var(--text-primary);
 }
-.mld-timeline__empty-btn:hover {
-  opacity: 0.9;
+.mld-auto-group__preview-stat--excluded strong {
+  color: var(--mld-error);
 }
-
-/* Add step button (end) */
-.mld-timeline__add-end {
+.mld-auto-group__preview-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.mld-auto-group__preview-group {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.mld-auto-group__preview-group[open] {
+  background: var(--bg-secondary);
+}
+.mld-auto-group__preview-group-header {
   display: flex;
   align-items: center;
-  justify-content: center;
   gap: 0.5rem;
-  border: 2px dashed var(--border-color);
-  border-radius: 0.5rem;
-  color: var(--text-muted);
-  background: transparent;
+  padding: 0.5rem 0.75rem;
   cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-.mld-timeline__add-end--sm {
-  padding: 0.5rem;
-}
-.mld-timeline__add-end--md {
-  padding: 0.75rem;
+  font-size: 0.8125rem;
+  user-select: none;
 }
-.mld-timeline__add-end--lg {
-  padding: 1rem;
+.mld-auto-group__preview-group-header:hover {
+  background: var(--bg-hover);
 }
-.mld-timeline--horizontal .mld-timeline__add-end {
-  min-width: 120px;
+.mld-auto-group__preview-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
   flex-shrink: 0;
 }
-.mld-timeline--vertical .mld-timeline__add-end {
-  width: 100%;
-  margin-top: 1rem;
+.mld-auto-group__preview-group-name {
+  font-weight: 500;
+  color: var(--text-primary);
 }
-.mld-timeline__add-end:hover {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+.mld-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;
 }
-.mld-timeline__add-end svg {
-  width: 1rem;
-  height: 1rem;
+.mld-auto-group__preview-samples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-light);
 }
-.mld-timeline__add-end-text--sm {
+.mld-auto-group__preview-sample {
   font-size: 0.75rem;
+  font-family: 'Fira Code', monospace;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
 }
-.mld-timeline__add-end-text--md {
-  font-size: 0.875rem;
+.mld-auto-group__preview-sample--excluded {
+  opacity: 0.5;
+  text-decoration: line-through;
 }
-.mld-timeline__add-end-text--lg {
-  font-size: 1rem;
+
+/* --- Excluded section --- */
+.mld-auto-group__preview-excluded {
+  border-top: 1px solid var(--border-color);
+  padding-top: 0.75rem;
 }
-/* GroupingModal Component Styles */
-.mld-grouping-modal {
+.mld-auto-group__preview-excluded-title {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+.mld-auto-group__preview-excluded-list {
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.25rem;
 }
 
-/* Dropzone */
-.mld-grouping-modal__dropzone {
-  position: relative;
+/* --- Navigation --- */
+.mld-auto-group__nav {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  border: 2px dashed var(--border-color);
-  border-radius: var(--mld-radius);
-  background-color: var(--bg-secondary);
-  cursor: pointer;
-  transition: border-color var(--mld-transition), background-color var(--mld-transition);
+  gap: 0.5rem;
 }
-.mld-grouping-modal__dropzone:hover,
-.mld-grouping-modal__dropzone--dragover {
-  border-color: var(--color-primary);
-  background-color: var(--color-primary-soft);
+/* SampleSelector Component Styles - RFA Design */
+.mld-sample-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  height: 100%;
+  /* No padding/background/border - let parent container provide styling */
 }
-.mld-grouping-modal__file-input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
+
+/* Select All Row */
+.mld-sample-selector__select-all {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--bg-tertiary);
   cursor: pointer;
+  transition: background-color var(--mld-transition);
 }
-.mld-grouping-modal__upload-icon {
-  width: 3rem;
-  height: 3rem;
-  color: var(--text-muted);
-  margin-bottom: 0.75rem;
+.mld-sample-selector__select-all:hover {
+  background-color: var(--bg-hover);
 }
-.mld-grouping-modal__upload-text {
+.mld-sample-selector__select-all-label {
   font-size: 0.875rem;
-  color: var(--text-primary);
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
-}
-.mld-grouping-modal__upload-highlight {
-  color: var(--color-primary);
   font-weight: 500;
+  color: var(--text-primary);
 }
-.mld-grouping-modal__upload-hint {
+.mld-sample-selector__select-all-count {
+  margin-left: auto;
   font-size: 0.75rem;
   color: var(--text-muted);
-  margin-top: 0.25rem !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
+  font-variant-numeric: tabular-nums;
 }
 
-/* Error */
-.mld-grouping-modal__error {
-  padding: 0.75rem;
-  border-radius: var(--mld-radius-sm);
-  background-color: var(--mld-error-soft);
-  color: var(--mld-error);
-  font-size: 0.875rem;
+/* Checkboxes */
+.mld-sample-selector__checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.mld-sample-selector__checkbox--small {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.mld-sample-selector__checkbox--tiny {
+  width: 0.75rem;
+  height: 0.75rem;
 }
 
-/* File info */
-.mld-grouping-modal__file-info {
+/* Indeterminate checkbox styling */
+.mld-sample-selector__checkbox:indeterminate {
+  background-color: currentColor;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  background-size: 100% 100%;
+  background-position: center;
+  border-color: transparent;
+}
+
+/* Action Buttons Row */
+.mld-sample-selector__actions {
+  position: relative;
+}
+.mld-sample-selector__actions-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background-color: var(--bg-tertiary);
-  border-radius: var(--mld-radius-sm);
+  flex-wrap: nowrap; /* Ensure buttons stay on one line */
 }
-.mld-grouping-modal__file-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  color: var(--text-muted);
+
+/* BaseButton overrides for action buttons */
+.mld-sample-selector__action-btn {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-width: 0; /* Allow buttons to shrink below content size */
+}
+.mld-sample-selector__action-btn--reset {
+  flex: 0 0 auto; /* Don't grow or shrink */
+  min-width: auto;
+  padding: 0.5rem;
+}
+.mld-sample-selector__action-icon {
+  width: 1rem;
+  height: 1rem;
   flex-shrink: 0;
 }
-.mld-grouping-modal__file-name {
-  flex: 1;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-  font-weight: 500;
-  white-space: nowrap;
+
+/* Level Popover */
+.mld-sample-selector__popover {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 0.5rem;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius-lg);
+  box-shadow: var(--mld-shadow-lg);
   overflow: hidden;
-  text-overflow: ellipsis;
+  z-index: 50;
 }
-.mld-grouping-modal__file-clear {
-  font-size: 0.75rem;
-  color: var(--color-primary);
+.mld-sample-selector__popover-header {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+  background-color: var(--bg-secondary);
+}
+.mld-sample-selector__popover-body {
+  padding: 0.25rem 0;
+}
+.mld-sample-selector__level-btn {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0;
-}
-.mld-grouping-modal__file-clear:hover {
-  text-decoration: underline;
+  transition: background-color var(--mld-transition);
 }
-
-/* Config section */
-.mld-grouping-modal__config {
+.mld-sample-selector__level-btn:hover {
+  background-color: var(--bg-hover);
+}
+.mld-sample-selector__level-info {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.125rem;
 }
-.mld-grouping-modal__config-row {
+.mld-sample-selector__level-title {
   display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
 }
-.mld-grouping-modal__label {
+.mld-sample-selector__level-badge {
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  background-color: var(--color-primary);
+  color: white;
+  border-radius: 9999px;
+  font-variant-numeric: tabular-nums;
+}
+.mld-sample-selector__level-desc {
   font-size: 0.75rem;
-  font-weight: 500;
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
 }
-.mld-grouping-modal__group-columns {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+.mld-sample-selector__level-example {
+  margin-left: 0.25rem;
 }
-.mld-grouping-modal__selected-columns {
+.mld-sample-selector__level-example code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.6875rem;
+}
+
+/* Grouped View */
+.mld-sample-selector__grouped {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  flex: 1;
+  min-height: 0;
+  gap: 0.5rem;
 }
-.mld-grouping-modal__selected-column {
+.mld-sample-selector__groups-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0.75rem;
-  background-color: var(--bg-tertiary);
-  border-radius: var(--mld-radius-sm);
-  border: 1px solid var(--border-color);
 }
-.mld-grouping-modal__column-name {
+.mld-sample-selector__groups-title {
   font-size: 0.875rem;
+  font-weight: 500;
   color: var(--text-primary);
 }
-.mld-grouping-modal__column-actions {
+.mld-sample-selector__groups-controls {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.mld-grouping-modal__column-btn {
+.mld-sample-selector__expand-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
+  padding: 0.25rem;
   background: none;
   border: none;
   border-radius: var(--mld-radius-sm);
   color: var(--text-muted);
   cursor: pointer;
-  transition: color var(--mld-transition), background-color var(--mld-transition);
+  transition: background-color var(--mld-transition);
 }
-.mld-grouping-modal__column-btn:hover:not(:disabled) {
-  color: var(--text-primary);
+.mld-sample-selector__expand-btn:hover {
   background-color: var(--bg-hover);
 }
-.mld-grouping-modal__column-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.mld-grouping-modal__column-btn--remove:hover:not(:disabled) {
-  color: var(--mld-error);
-  background-color: var(--mld-error-soft);
+.mld-sample-selector__expand-icon {
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
-/* Match status */
-.mld-grouping-modal__match-status {
-  display: flex;
-  gap: 1rem;
-  padding: 0.75rem;
-  background-color: var(--bg-tertiary);
-  border-radius: var(--mld-radius-sm);
+/* Shared scrollbar styles */
+.mld-sample-selector__tree,
+.mld-sample-selector__flat-list {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-color) transparent;
 }
-.mld-grouping-modal__match-stat {
-  display: flex;
-  align-items: baseline;
-  gap: 0.375rem;
+.mld-sample-selector__tree::-webkit-scrollbar,
+.mld-sample-selector__flat-list::-webkit-scrollbar {
+  width: 6px;
 }
-.mld-grouping-modal__match-count {
-  font-size: 1rem;
-  font-weight: 600;
+.mld-sample-selector__tree::-webkit-scrollbar-track,
+.mld-sample-selector__flat-list::-webkit-scrollbar-track {
+  background: transparent;
 }
-.mld-grouping-modal__match-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
+.mld-sample-selector__tree::-webkit-scrollbar-thumb,
+.mld-sample-selector__flat-list::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 3px;
 }
-.mld-grouping-modal__match-stat--matched .mld-grouping-modal__match-count {
-  color: var(--mld-success);
+.mld-sample-selector__tree::-webkit-scrollbar-thumb:hover,
+.mld-sample-selector__flat-list::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
 }
-.mld-grouping-modal__match-stat--unmatched .mld-grouping-modal__match-count {
-  color: var(--mld-warning);
+
+/* Tree View */
+.mld-sample-selector__tree {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 0.25rem;
 }
 
-/* Preview */
-.mld-grouping-modal__preview {
+/* Major Group */
+.mld-sample-selector__major-group {
+  margin-bottom: 0.25rem;
+}
+.mld-sample-selector__major-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 0.5rem;
-}
-.mld-grouping-modal__preview-title {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
-}
-.mld-grouping-modal__table-wrapper {
-  overflow-x: auto;
-  border: 1px solid var(--border-color);
+  padding: 0.375rem 0.5rem;
   border-radius: var(--mld-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--mld-transition);
 }
-.mld-grouping-modal__table {
-  display: table !important;
-  overflow: visible !important;
-  width: 100%;
-  border-collapse: collapse;
-  border: none !important;
-  margin: 0 !important;
-  font-size: 0.8125rem;
-}
-.mld-grouping-modal__table thead {
-  display: table-header-group !important;
-}
-.mld-grouping-modal__table tbody {
-  display: table-row-group !important;
+.mld-sample-selector__major-header:hover {
+  background-color: var(--bg-hover);
 }
-.mld-grouping-modal__table tr {
-  border: none !important;
+.mld-sample-selector__major-header:hover .mld-sample-selector__delete-btn--hidden {
+  opacity: 1;
 }
-.mld-grouping-modal__th,
-.mld-grouping-modal__td {
-  padding: 0.5rem 0.75rem;
-  text-align: left;
+.mld-sample-selector__major-name {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.mld-grouping-modal__th {
-  font-weight: 500;
+
+/* Chevron */
+.mld-sample-selector__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
   color: var(--text-muted);
-  background-color: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
-.mld-grouping-modal__td {
-  color: var(--text-primary);
-  border-bottom: 1px solid var(--border-color);
+.mld-sample-selector__chevron--small {
+  width: 0.75rem;
+  height: 0.75rem;
 }
-.mld-grouping-modal__table tbody tr:last-child .mld-grouping-modal__td {
-  border-bottom: none;
+.mld-sample-selector__chevron--open {
+  transform: rotate(90deg);
 }
-.mld-grouping-modal__th--sample,
-.mld-grouping-modal__td--sample {
-  background-color: rgba(59, 130, 246, 0.08);
+
+/* Color Dot */
+.mld-sample-selector__color-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
-.mld-grouping-modal__th--group,
-.mld-grouping-modal__td--group {
-  background-color: rgba(168, 85, 247, 0.08);
+.mld-sample-selector__color-dot--large {
+  width: 0.75rem;
+  height: 0.75rem;
 }
-.mld-grouping-modal__preview-note {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding: 0 !important;
+.mld-sample-selector__color-dot--clickable {
+  cursor: pointer;
+  transition: transform var(--mld-transition);
+  border: none;
+  padding: 0;
+  background: none;
+}
+.mld-sample-selector__color-dot--clickable:hover {
+  transform: scale(1.25);
 }
 
-/* Footer */
-.mld-grouping-modal__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
+/* Count Badge */
+.mld-sample-selector__count-badge {
+  font-size: 0.625rem;
+  font-weight: 500;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  font-variant-numeric: tabular-nums;
 }
-/* SampleSelector Component Styles - RFA Design */
-.mld-sample-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  height: 100%;
-  /* No padding/background/border - let parent container provide styling */
+.mld-sample-selector__count-badge--small {
+  font-size: 0.5625rem;
+  padding: 0.0625rem 0.3125rem;
 }
 
-/* Select All Row */
-.mld-sample-selector__select-all {
+/* Delete Button */
+.mld-sample-selector__delete-btn {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  border-radius: 0.5rem;
-  background-color: var(--bg-tertiary);
+  justify-content: center;
+  padding: 0.125rem;
+  background: none;
+  border: none;
+  border-radius: var(--mld-radius-sm);
+  color: #F87171;
   cursor: pointer;
-  transition: background-color var(--mld-transition);
-}
-.mld-sample-selector__select-all:hover {
-  background-color: var(--bg-hover);
-}
-.mld-sample-selector__select-all-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
+  transition: all var(--mld-transition);
 }
-.mld-sample-selector__select-all-count {
-  margin-left: auto;
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
+.mld-sample-selector__delete-btn:hover {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #EF4444;
 }
-
-/* Checkboxes */
-.mld-sample-selector__checkbox {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 0.25rem;
-  accent-color: var(--color-primary);
-  cursor: pointer;
-  flex-shrink: 0;
+.mld-sample-selector__delete-btn--hidden {
+  opacity: 0;
 }
-.mld-sample-selector__checkbox--small {
+.mld-sample-selector__delete-btn svg {
   width: 0.875rem;
   height: 0.875rem;
 }
-.mld-sample-selector__checkbox--tiny {
-  width: 0.75rem;
-  height: 0.75rem;
-}
 
-/* Indeterminate checkbox styling */
-.mld-sample-selector__checkbox:indeterminate {
-  background-color: currentColor;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  background-size: 100% 100%;
-  background-position: center;
-  border-color: transparent;
+/* Sub Groups */
+.mld-sample-selector__sub-groups {
+  margin-left: 1rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid;
 }
-
-/* Action Buttons Row */
-.mld-sample-selector__actions {
-  position: relative;
+.mld-sample-selector__sub-group {
+  margin-bottom: 0.125rem;
+  border-radius: var(--mld-radius);
+  transition: background-color var(--mld-transition), box-shadow var(--mld-transition);
 }
-.mld-sample-selector__actions-row {
+.mld-sample-selector__sub-group--drag-over {
+  background-color: var(--color-primary-soft);
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+.mld-sample-selector__sub-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  flex-wrap: nowrap; /* Ensure buttons stay on one line */
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--mld-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--mld-transition);
+}
+.mld-sample-selector__sub-header:hover {
+  background-color: var(--bg-hover);
+}
+.mld-sample-selector__sub-header:hover .mld-sample-selector__delete-btn--hidden {
+  opacity: 1;
+}
+.mld-sample-selector__sub-name {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* BaseButton overrides for action buttons */
-.mld-sample-selector__action-btn {
-  flex: 1 1 auto;
+/* Samples */
+.mld-sample-selector__samples {
+  margin-left: 1rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid;
+}
+.mld-sample-selector__sample {
   display: flex;
   align-items: center;
-  justify-content: center;
   gap: 0.5rem;
-  min-width: 0; /* Allow buttons to shrink below content size */
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--mld-radius-sm);
+  transition: background-color var(--mld-transition), opacity var(--mld-transition);
+  cursor: grab;
 }
-.mld-sample-selector__action-btn--reset {
-  flex: 0 0 auto; /* Don't grow or shrink */
-  min-width: auto;
-  padding: 0.5rem;
+.mld-sample-selector__sample:hover {
+  background-color: var(--bg-hover);
 }
-.mld-sample-selector__action-icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
+.mld-sample-selector__sample:hover .mld-sample-selector__remove-btn {
+  opacity: 1;
+}
+.mld-sample-selector__sample:hover .mld-sample-selector__drag-handle {
+  opacity: 1;
+}
+.mld-sample-selector__sample--dragging {
+  opacity: 0.5;
+  cursor: grabbing;
 }
 
-/* Level Popover */
-.mld-sample-selector__popover {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 100%;
-  margin-top: 0.5rem;
-  background-color: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--mld-radius-lg);
-  box-shadow: var(--mld-shadow-lg);
-  overflow: hidden;
-  z-index: 50;
+/* Drag Handle */
+.mld-sample-selector__drag-handle {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  opacity: 0;
+  transition: opacity var(--mld-transition);
+  cursor: grab;
 }
-.mld-sample-selector__popover-header {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.mld-sample-selector__sample-name {
+  flex: 1;
+  font-size: 0.75rem;
   color: var(--text-secondary);
-  background-color: var(--bg-secondary);
-}
-.mld-sample-selector__popover-body {
-  padding: 0.25rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.mld-sample-selector__level-btn {
-  width: 100%;
-  padding: 0.625rem 0.75rem;
-  text-align: left;
+.mld-sample-selector__remove-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem;
   background: none;
   border: none;
+  border-radius: var(--mld-radius-sm);
+  color: #FB923C;
   cursor: pointer;
-  transition: background-color var(--mld-transition);
+  opacity: 0;
+  transition: all var(--mld-transition);
 }
-.mld-sample-selector__level-btn:hover {
-  background-color: var(--bg-hover);
+.mld-sample-selector__remove-btn:hover {
+  background-color: rgba(251, 146, 60, 0.2);
+  color: #F97316;
 }
-.mld-sample-selector__level-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+.mld-sample-selector__remove-btn svg {
+  width: 0.625rem;
+  height: 0.625rem;
 }
-.mld-sample-selector__level-title {
+
+/* Empty State */
+.mld-sample-selector__empty {
+  text-align: center;
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+/* Ungrouped Section */
+.mld-sample-selector__ungrouped {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+.mld-sample-selector__ungrouped-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--mld-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--mld-transition);
+}
+.mld-sample-selector__ungrouped-header:hover {
+  background-color: var(--bg-hover);
+}
+.mld-sample-selector__ungrouped-label {
+  flex: 1;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--text-primary);
+  color: var(--text-muted);
 }
-.mld-sample-selector__level-badge {
-  font-size: 0.6875rem;
+.mld-sample-selector__ungrouped-count {
+  font-size: 0.625rem;
   padding: 0.125rem 0.375rem;
-  background-color: var(--color-primary);
-  color: white;
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
   border-radius: 9999px;
   font-variant-numeric: tabular-nums;
 }
-.mld-sample-selector__level-desc {
-  font-size: 0.75rem;
-  color: var(--text-muted);
+.mld-sample-selector__ungrouped-list {
+  margin-left: 1.25rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid var(--border-color);
 }
-.mld-sample-selector__level-example {
-  margin-left: 0.25rem;
+
+/* New Group Input */
+.mld-sample-selector__new-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.mld-sample-selector__new-group-input {
+  flex: 1;
+  min-width: 0;
+}
+.mld-sample-selector__new-group-btn {
+  flex-shrink: 0;
 }
-.mld-sample-selector__level-example code {
-  font-family: ui-monospace, monospace;
-  font-size: 0.6875rem;
+
+/* Hidden color input */
+.mld-sample-selector__color-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-/* Grouped View */
-.mld-sample-selector__grouped {
+/* Flat View */
+.mld-sample-selector__flat {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
   gap: 0.5rem;
 }
-.mld-sample-selector__groups-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.mld-sample-selector__search {
+  position: relative;
 }
-.mld-sample-selector__groups-title {
+.mld-sample-selector__search-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+.mld-sample-selector__search-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
   font-size: 0.875rem;
-  font-weight: 500;
   color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  outline: none;
+  transition: border-color var(--mld-transition);
 }
-.mld-sample-selector__groups-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
+.mld-sample-selector__search-input:focus {
+  border-color: var(--color-primary);
 }
-.mld-sample-selector__expand-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  background: none;
-  border: none;
-  border-radius: var(--mld-radius-sm);
+.mld-sample-selector__search-input::placeholder {
   color: var(--text-muted);
-  cursor: pointer;
-  transition: background-color var(--mld-transition);
-}
-.mld-sample-selector__expand-btn:hover {
-  background-color: var(--bg-hover);
-}
-.mld-sample-selector__expand-icon {
-  width: 0.875rem;
-  height: 0.875rem;
 }
-
-/* Shared scrollbar styles */
-.mld-sample-selector__tree,
 .mld-sample-selector__flat-list {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-color) transparent;
-}
-.mld-sample-selector__tree::-webkit-scrollbar,
-.mld-sample-selector__flat-list::-webkit-scrollbar {
-  width: 6px;
-}
-.mld-sample-selector__tree::-webkit-scrollbar-track,
-.mld-sample-selector__flat-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-.mld-sample-selector__tree::-webkit-scrollbar-thumb,
-.mld-sample-selector__flat-list::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 3px;
-}
-.mld-sample-selector__tree::-webkit-scrollbar-thumb:hover,
-.mld-sample-selector__flat-list::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-/* Tree View */
-.mld-sample-selector__tree {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-right: 0.25rem;
 }
-
-/* Major Group */
-.mld-sample-selector__major-group {
-  margin-bottom: 0.25rem;
-}
-.mld-sample-selector__major-header {
+.mld-sample-selector__flat-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.5rem;
   border-radius: var(--mld-radius-sm);
-  cursor: pointer;
   transition: background-color var(--mld-transition);
 }
-.mld-sample-selector__major-header:hover {
+.mld-sample-selector__flat-item:hover {
   background-color: var(--bg-hover);
 }
-.mld-sample-selector__major-header:hover .mld-sample-selector__delete-btn--hidden {
-  opacity: 1;
-}
-.mld-sample-selector__major-name {
+.mld-sample-selector__flat-name {
   flex: 1;
   font-size: 0.875rem;
-  font-weight: 600;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Chevron */
-.mld-sample-selector__chevron {
-  width: 0.875rem;
-  height: 0.875rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-.mld-sample-selector__chevron--small {
-  width: 0.75rem;
-  height: 0.75rem;
+/* Transitions */
+.mld-popover-enter-active {
+  transition: all 0.15s ease-out;
 }
-.mld-sample-selector__chevron--open {
-  transform: rotate(90deg);
+.mld-popover-leave-active {
+  transition: all 0.1s ease-in;
 }
-
-/* Color Dot */
-.mld-sample-selector__color-dot {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 50%;
-  flex-shrink: 0;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+.mld-popover-enter-from,
+.mld-popover-leave-to {
+  opacity: 0;
+  transform: translateY(-0.25rem);
 }
-.mld-sample-selector__color-dot--large {
-  width: 0.75rem;
-  height: 0.75rem;
+.mld-collapse-enter-active {
+  transition: all 0.2s ease-out;
+  overflow: hidden;
 }
-.mld-sample-selector__color-dot--clickable {
-  cursor: pointer;
-  transition: transform var(--mld-transition);
-  border: none;
-  padding: 0;
-  background: none;
+.mld-collapse-leave-active {
+  transition: all 0.15s ease-in;
+  overflow: hidden;
 }
-.mld-sample-selector__color-dot--clickable:hover {
-  transform: scale(1.25);
+.mld-collapse-enter-from,
+.mld-collapse-leave-to {
+  opacity: 0;
+  max-height: 0;
 }
-
-/* Count Badge */
-.mld-sample-selector__count-badge {
-  font-size: 0.625rem;
-  font-weight: 500;
-  padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
-  font-variant-numeric: tabular-nums;
+.mld-collapse-enter-to,
+.mld-collapse-leave-from {
+  opacity: 1;
+  max-height: 500px;
 }
-.mld-sample-selector__count-badge--small {
-  font-size: 0.5625rem;
-  padding: 0.0625rem 0.3125rem;
+/* GroupingModal Component Styles */
+.mld-grouping-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-/* Delete Button */
-.mld-sample-selector__delete-btn {
+/* Dropzone */
+.mld-grouping-modal__dropzone {
+  position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem;
-  background: none;
-  border: none;
-  border-radius: var(--mld-radius-sm);
-  color: #F87171;
+  padding: 2rem;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--mld-radius);
+  background-color: var(--bg-secondary);
   cursor: pointer;
-  transition: all var(--mld-transition);
+  transition: border-color var(--mld-transition), background-color var(--mld-transition);
 }
-.mld-sample-selector__delete-btn:hover {
-  background-color: rgba(239, 68, 68, 0.2);
-  color: #EF4444;
+.mld-grouping-modal__dropzone:hover,
+.mld-grouping-modal__dropzone--dragover {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary-soft);
 }
-.mld-sample-selector__delete-btn--hidden {
+.mld-grouping-modal__file-input {
+  position: absolute;
+  inset: 0;
   opacity: 0;
+  cursor: pointer;
 }
-.mld-sample-selector__delete-btn svg {
-  width: 0.875rem;
-  height: 0.875rem;
+.mld-grouping-modal__upload-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
 }
-
-/* Sub Groups */
-.mld-sample-selector__sub-groups {
-  margin-left: 1rem;
-  padding-left: 0.75rem;
-  border-left: 2px solid;
+.mld-grouping-modal__upload-text {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
 }
-.mld-sample-selector__sub-group {
-  margin-bottom: 0.125rem;
-  border-radius: var(--mld-radius);
-  transition: background-color var(--mld-transition), box-shadow var(--mld-transition);
+.mld-grouping-modal__upload-highlight {
+  color: var(--color-primary);
+  font-weight: 500;
 }
-.mld-sample-selector__sub-group--drag-over {
-  background-color: var(--color-primary-soft);
-  box-shadow: inset 0 0 0 2px var(--color-primary);
+.mld-grouping-modal__upload-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+
+/* Error */
+.mld-grouping-modal__error {
+  padding: 0.75rem;
+  border-radius: var(--mld-radius-sm);
+  background-color: var(--mld-error-soft);
+  color: var(--mld-error);
+  font-size: 0.875rem;
 }
-.mld-sample-selector__sub-header {
+
+/* File info */
+.mld-grouping-modal__file-info {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--bg-tertiary);
   border-radius: var(--mld-radius-sm);
-  cursor: pointer;
-  transition: background-color var(--mld-transition);
-}
-.mld-sample-selector__sub-header:hover {
-  background-color: var(--bg-hover);
 }
-.mld-sample-selector__sub-header:hover .mld-sample-selector__delete-btn--hidden {
-  opacity: 1;
+.mld-grouping-modal__file-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
 }
-.mld-sample-selector__sub-name {
+.mld-grouping-modal__file-name {
   flex: 1;
   font-size: 0.875rem;
-  font-weight: 500;
   color: var(--text-primary);
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.mld-grouping-modal__file-clear {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.mld-grouping-modal__file-clear:hover {
+  text-decoration: underline;
+}
 
-/* Samples */
-.mld-sample-selector__samples {
-  margin-left: 1rem;
-  padding-left: 0.75rem;
-  border-left: 2px solid;
+/* Config section */
+.mld-grouping-modal__config {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-.mld-sample-selector__sample {
+.mld-grouping-modal__config-row {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--mld-radius-sm);
-  transition: background-color var(--mld-transition), opacity var(--mld-transition);
-  cursor: grab;
+  flex-direction: column;
+  gap: 0.375rem;
 }
-.mld-sample-selector__sample:hover {
-  background-color: var(--bg-hover);
+.mld-grouping-modal__label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
 }
-.mld-sample-selector__sample:hover .mld-sample-selector__remove-btn {
-  opacity: 1;
+.mld-grouping-modal__group-columns {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
-.mld-sample-selector__sample:hover .mld-sample-selector__drag-handle {
-  opacity: 1;
+.mld-grouping-modal__selected-columns {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
 }
-.mld-sample-selector__sample--dragging {
-  opacity: 0.5;
-  cursor: grabbing;
+.mld-grouping-modal__selected-column {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--bg-tertiary);
+  border-radius: var(--mld-radius-sm);
+  border: 1px solid var(--border-color);
 }
-
-/* Drag Handle */
-.mld-sample-selector__drag-handle {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-  color: var(--text-muted);
-  opacity: 0;
-  transition: opacity var(--mld-transition);
-  cursor: grab;
+.mld-grouping-modal__column-name {
+  font-size: 0.875rem;
+  color: var(--text-primary);
 }
-.mld-sample-selector__sample-name {
-  flex: 1;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.mld-grouping-modal__column-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
-.mld-sample-selector__remove-btn {
+.mld-grouping-modal__column-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
   background: none;
   border: none;
   border-radius: var(--mld-radius-sm);
-  color: #FB923C;
+  color: var(--text-muted);
   cursor: pointer;
-  opacity: 0;
-  transition: all var(--mld-transition);
+  transition: color var(--mld-transition), background-color var(--mld-transition);
 }
-.mld-sample-selector__remove-btn:hover {
-  background-color: rgba(251, 146, 60, 0.2);
-  color: #F97316;
+.mld-grouping-modal__column-btn:hover:not(:disabled) {
+  color: var(--text-primary);
+  background-color: var(--bg-hover);
 }
-.mld-sample-selector__remove-btn svg {
-  width: 0.625rem;
-  height: 0.625rem;
+.mld-grouping-modal__column-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
 }
-
-/* Empty State */
-.mld-sample-selector__empty {
-  text-align: center;
-  padding: 1rem;
-  font-size: 0.875rem;
-  color: var(--text-muted);
+.mld-grouping-modal__column-btn--remove:hover:not(:disabled) {
+  color: var(--mld-error);
+  background-color: var(--mld-error-soft);
 }
 
-/* Ungrouped Section */
-.mld-sample-selector__ungrouped {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
-}
-.mld-sample-selector__ungrouped-header {
+/* Match status */
+.mld-grouping-modal__match-status {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
+  gap: 1rem;
+  padding: 0.75rem;
+  background-color: var(--bg-tertiary);
   border-radius: var(--mld-radius-sm);
-  cursor: pointer;
-  transition: background-color var(--mld-transition);
 }
-.mld-sample-selector__ungrouped-header:hover {
-  background-color: var(--bg-hover);
+.mld-grouping-modal__match-stat {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
 }
-.mld-sample-selector__ungrouped-label {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-muted);
+.mld-grouping-modal__match-count {
+  font-size: 1rem;
+  font-weight: 600;
 }
-.mld-sample-selector__ungrouped-count {
-  font-size: 0.625rem;
-  padding: 0.125rem 0.375rem;
-  background-color: var(--bg-tertiary);
+.mld-grouping-modal__match-label {
+  font-size: 0.75rem;
   color: var(--text-muted);
-  border-radius: 9999px;
-  font-variant-numeric: tabular-nums;
-}
-.mld-sample-selector__ungrouped-list {
-  margin-left: 1.25rem;
-  padding-left: 0.75rem;
-  border-left: 2px solid var(--border-color);
-}
-
-/* New Group Input */
-.mld-sample-selector__new-group {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-.mld-sample-selector__new-group-input {
-  flex: 1;
-  min-width: 0;
 }
-.mld-sample-selector__new-group-btn {
-  flex-shrink: 0;
+.mld-grouping-modal__match-stat--matched .mld-grouping-modal__match-count {
+  color: var(--mld-success);
 }
-
-/* Hidden color input */
-.mld-sample-selector__color-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.mld-grouping-modal__match-stat--unmatched .mld-grouping-modal__match-count {
+  color: var(--mld-warning);
 }
 
-/* Flat View */
-.mld-sample-selector__flat {
+/* Preview */
+.mld-grouping-modal__preview {
   display: flex;
   flex-direction: column;
-  flex: 1;
-  min-height: 0;
   gap: 0.5rem;
 }
-.mld-sample-selector__search {
-  position: relative;
-}
-.mld-sample-selector__search-icon {
-  position: absolute;
-  left: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1rem;
-  height: 1rem;
+.mld-grouping-modal__preview-title {
+  font-size: 0.75rem;
+  font-weight: 500;
   color: var(--text-muted);
-  pointer-events: none;
-}
-.mld-sample-selector__search-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-  font-size: 0.875rem;
-  color: var(--text-primary);
-  background-color: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.5rem;
-  outline: none;
-  transition: border-color var(--mld-transition);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
 }
-.mld-sample-selector__search-input:focus {
-  border-color: var(--color-primary);
+.mld-grouping-modal__table-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius-sm);
 }
-.mld-sample-selector__search-input::placeholder {
-  color: var(--text-muted);
+.mld-grouping-modal__table {
+  display: table !important;
+  overflow: visible !important;
+  width: 100%;
+  border-collapse: collapse;
+  border: none !important;
+  margin: 0 !important;
+  font-size: 0.8125rem;
 }
-.mld-sample-selector__flat-list {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 0.25rem;
+.mld-grouping-modal__table thead {
+  display: table-header-group !important;
 }
-.mld-sample-selector__flat-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--mld-radius-sm);
-  transition: background-color var(--mld-transition);
+.mld-grouping-modal__table tbody {
+  display: table-row-group !important;
 }
-.mld-sample-selector__flat-item:hover {
-  background-color: var(--bg-hover);
+.mld-grouping-modal__table tr {
+  border: none !important;
 }
-.mld-sample-selector__flat-name {
-  flex: 1;
-  font-size: 0.875rem;
-  color: var(--text-primary);
+.mld-grouping-modal__th,
+.mld-grouping-modal__td {
+  padding: 0.5rem 0.75rem;
+  text-align: left;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-
-/* Transitions */
-.mld-popover-enter-active {
-  transition: all 0.15s ease-out;
+.mld-grouping-modal__th {
+  font-weight: 500;
+  color: var(--text-muted);
+  background-color: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
 }
-.mld-popover-leave-active {
-  transition: all 0.1s ease-in;
+.mld-grouping-modal__td {
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-color);
 }
-.mld-popover-enter-from,
-.mld-popover-leave-to {
-  opacity: 0;
-  transform: translateY(-0.25rem);
+.mld-grouping-modal__table tbody tr:last-child .mld-grouping-modal__td {
+  border-bottom: none;
 }
-.mld-collapse-enter-active {
-  transition: all 0.2s ease-out;
-  overflow: hidden;
+.mld-grouping-modal__th--sample,
+.mld-grouping-modal__td--sample {
+  background-color: rgba(59, 130, 246, 0.08);
 }
-.mld-collapse-leave-active {
-  transition: all 0.15s ease-in;
-  overflow: hidden;
+.mld-grouping-modal__th--group,
+.mld-grouping-modal__td--group {
+  background-color: rgba(168, 85, 247, 0.08);
 }
-.mld-collapse-enter-from,
-.mld-collapse-leave-to {
-  opacity: 0;
-  max-height: 0;
+.mld-grouping-modal__preview-note {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
 }
-.mld-collapse-enter-to,
-.mld-collapse-leave-from {
-  opacity: 1;
-  max-height: 500px;
+
+/* Footer */
+.mld-grouping-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
 }
 /* GroupAssigner Component Styles */
 .mld-group-assigner {
@@ -22172,167 +23197,6 @@ to {
   color: var(--text-muted);
   padding-left: 0.125rem;
 }
-.mld-wizard {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  outline: none;
-}
-
-/* Progress indicator */
-.mld-wizard__progress {
-}
-.mld-wizard__steps-indicator {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}
-.mld-wizard__step-connector {
-  flex: 1;
-  height: 2px;
-  background-color: var(--border-color);
-  margin-top: 1rem;
-  transition: background-color 0.2s ease;
-}
-.mld-wizard__step-connector--completed {
-  background-color: var(--mld-success);
-}
-.mld-wizard__step-indicator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  min-width: 4rem;
-}
-.mld-wizard__step-indicator--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.mld-wizard__step-dot {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border: 2px solid var(--border-color);
-  background-color: var(--bg-secondary);
-  color: var(--text-muted);
-  transition: all 0.2s ease;
-}
-
-/* Size variants for dot */
-.mld-wizard--sm .mld-wizard__step-dot {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.625rem;
-}
-.mld-wizard--lg .mld-wizard__step-dot {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
-}
-.mld-wizard__step-indicator--active .mld-wizard__step-dot {
-  border-color: var(--color-primary);
-  background-color: var(--color-primary);
-  color: white;
-}
-.mld-wizard__step-indicator--completed .mld-wizard__step-dot {
-  border-color: var(--mld-success);
-  background-color: var(--mld-success);
-  color: white;
-}
-.mld-wizard__step-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  text-align: center;
-  white-space: nowrap;
-}
-.mld-wizard__step-indicator--active .mld-wizard__step-label {
-  color: var(--text-primary);
-  font-weight: 500;
-}
-.mld-wizard__step-indicator--completed .mld-wizard__step-label {
-  color: var(--text-secondary);
-}
-
-/* Body */
-.mld-wizard__body {
-  flex: 1;
-  min-height: 0;
-}
-
-/* Navigation */
-.mld-wizard__navigation {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
-}
-.mld-wizard__nav-btn {
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  border: none;
-}
-.mld-wizard__nav-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.mld-wizard__nav-btn--cancel {
-  background: transparent;
-  color: var(--text-muted);
-}
-.mld-wizard__nav-btn--cancel:hover:not(:disabled) {
-  color: var(--text-primary);
-}
-.mld-wizard__nav-btn--back {
-  background-color: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-.mld-wizard__nav-btn--back:hover:not(:disabled) {
-  background-color: var(--bg-hover);
-}
-.mld-wizard__nav-btn--next {
-  background-color: var(--color-primary);
-  color: white;
-}
-.mld-wizard__nav-btn--next:hover:not(:disabled) {
-  background-color: var(--color-primary-hover);
-}
-.mld-wizard__nav-btn--finish {
-  background-color: var(--mld-success);
-  color: white;
-}
-.mld-wizard__nav-btn--finish:hover:not(:disabled) {
-  opacity: 0.9;
-}
-
-/* Size variants for connector alignment */
-.mld-wizard--sm .mld-wizard__step-connector {
-  margin-top: 0.75rem;
-}
-.mld-wizard--lg .mld-wizard__step-connector {
-  margin-top: 1.25rem;
-}
-.mld-wizard--sm .mld-wizard__step-label {
-  font-size: 0.625rem;
-}
-.mld-wizard--sm .mld-wizard__nav-btn {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
-}
-.mld-wizard--lg .mld-wizard__nav-btn {
-  padding: 0.625rem 1.25rem;
-  font-size: 1rem;
-}
 /* AuditTrail Component Styles */
 .mld-audit-trail {
   position: relative;