@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.4

package/dist/styles.css

@@ -5304,6 +5304,98 @@ html.dark .mint-settings-modal__option-btn--active {
   gap: 1rem;
   grid-template-columns: repeat(var(--mint-settings-cols, 1), minmax(0, 1fr));
 }
+/* ColorSlider Component Styles */
+.mint-color-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.mint-color-slider--disabled {
+  opacity: var(--mint-disabled-opacity);
+}
+.mint-color-slider__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mint-color-slider__track {
+  position: relative;
+  flex: 1;
+}
+.mint-color-slider__input {
+  width: 100%;
+  cursor: pointer;
+}
+.mint-color-slider__input:disabled {
+  cursor: not-allowed;
+}
+.mint-color-slider__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 0.25rem);
+  font-weight: 700;
+}
+.mint-color-slider__labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-muted);
+}
+
+/* Range input styling */
+.color-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--slider-gradient);
+}
+.color-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: 2px solid var(--mint-primary, #6366f1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s ease;
+}
+.color-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+.color-slider::-webkit-slider-thumb:active {
+  transform: scale(1.15);
+}
+.color-slider::-moz-range-thumb {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: 2px solid var(--mint-primary, #6366f1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s ease;
+}
+.color-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+.color-slider:focus {
+  outline: none;
+}
+.color-slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.color-slider:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.color-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+.color-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
 /* BaseTabs Component Styles */
 .mint-tabs {
   display: flex;
@@ -9542,14 +9634,14 @@ to {
 }
 }
 
-.mint-generated-workspace[data-v-64e09924] {
+.mint-generated-workspace[data-v-6c599fd1] {
   position: relative;
   min-width: 0;
   min-height: calc(100vh - 5rem);
   padding: clamp(1rem, 2.5vw, 2.5rem);
   background: var(--color-bg-primary);
 }
-.mint-generated-workspace__loading[data-v-64e09924] {
+.mint-generated-workspace__loading[data-v-6c599fd1] {
   display: flex;
   min-height: 24rem;
   align-items: center;
@@ -9557,7 +9649,7 @@ to {
   gap: 0.75rem;
   color: var(--color-text-secondary);
 }
-.mint-generated-workspace__header[data-v-64e09924] {
+.mint-generated-workspace__header[data-v-6c599fd1] {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -9565,17 +9657,17 @@ to {
   max-width: 76rem;
   margin: 0 auto 1.25rem;
 }
-.mint-generated-workspace__header h1[data-v-64e09924] {
+.mint-generated-workspace__header h1[data-v-6c599fd1] {
   margin: 0;
   color: var(--color-text-primary);
   font-size: clamp(1.35rem, 2vw, 1.8rem);
   line-height: 1.2;
 }
-.mint-generated-workspace__header p[data-v-64e09924]:not(.mint-generated-workspace__eyebrow) {
+.mint-generated-workspace__header p[data-v-6c599fd1]:not(.mint-generated-workspace__eyebrow) {
   margin: 0.4rem 0 0;
   color: var(--color-text-secondary);
 }
-.mint-generated-workspace__eyebrow[data-v-64e09924] {
+.mint-generated-workspace__eyebrow[data-v-6c599fd1] {
   margin: 0 0 0.35rem;
   color: var(--color-text-muted);
   font-size: 0.72rem;
@@ -9583,13 +9675,13 @@ to {
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
-.mint-generated-workspace__resources[data-v-64e09924] {
+.mint-generated-workspace__resources[data-v-6c599fd1] {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.4rem;
 }
-.mint-generated-workspace__resources span[data-v-64e09924] {
+.mint-generated-workspace__resources span[data-v-6c599fd1] {
   padding: 0.3rem 0.55rem;
   border: 1px solid var(--color-border);
   border-radius: 999px;
@@ -9598,7 +9690,7 @@ to {
   font-size: 0.75rem;
   font-weight: 600;
 }
-.mint-generated-workspace__result[data-v-64e09924] {
+.mint-generated-workspace__result[data-v-6c599fd1] {
   max-width: 76rem;
   min-height: 24rem;
   margin: 0 auto;
@@ -9609,10 +9701,10 @@ to {
   box-shadow: var(--shadow-sm);
 }
 @media (max-width: 640px) {
-.mint-generated-workspace__header[data-v-64e09924] {
+.mint-generated-workspace__header[data-v-6c599fd1] {
     flex-direction: column;
 }
-.mint-generated-workspace__resources[data-v-64e09924] {
+.mint-generated-workspace__resources[data-v-6c599fd1] {
     justify-content: flex-start;
 }
 }
@@ -15236,6 +15328,19 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
   min-width: 0;
   padding: 1rem;
 }
+
+.mint-dose-design-workspace[data-v-9923dd0b] {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(300px, 420px);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+@media (max-width: 900px) {
+.mint-dose-design-workspace[data-v-9923dd0b] {
+    grid-template-columns: minmax(0, 1fr);
+}
+}
 /* Divider Component Styles */
 .mint-divider {
   display: flex;
@@ -15771,149 +15876,1007 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1);
     grid-template-columns: minmax(0, 1fr);
 }
 }
-/* SampleHierarchyTree Component Styles */
-.mint-sample-tree {
-  font-size: 0.875rem;
-}
-.mint-sample-tree--sm {
-  font-size: 0.75rem;
-}
-.mint-sample-tree--lg {
-  font-size: 1rem;
-}
-
-/* Node */
-.mint-sample-tree__node {
-  user-select: none;
+/* RackEditor Component Styles */
+.mint-rack-editor {
+  display: flex;
+  flex-direction: column;
 }
 
-/* Node header (clickable row) */
-.mint-sample-tree__node-header {
+/* Rack tabs bar */
+.mint-rack-editor__tabs {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-.mint-sample-tree__node-header:hover {
-  background-color: var(--bg-hover);
-}
-.mint-sample-tree--sm .mint-sample-tree__node-header {
-  padding: 0.25rem 0.375rem;
-  gap: 0.25rem;
+  padding: 0.5rem 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  overflow-x: auto;
 }
-.mint-sample-tree--lg .mint-sample-tree__node-header {
-  padding: 0.5rem 0.625rem;
-  gap: 0.5rem;
+.mint-rack-editor__tabs-inner {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
-
-/* Toggle button */
-.mint-sample-tree__toggle {
+.mint-rack-editor__tab {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  border: 1px solid transparent;
+  cursor: grab;
+  transition: all 0.2s;
   background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
   color: var(--text-muted);
-  cursor: pointer;
-  transition: color 0.15s ease, transform 0.15s ease;
-  flex-shrink: 0;
-}
-.mint-sample-tree__toggle:hover {
-  color: var(--text-primary);
-  background-color: var(--bg-tertiary);
-}
-.mint-sample-tree__toggle svg {
-  width: 0.875rem;
-  height: 0.875rem;
-  transition: transform 0.15s ease;
+  white-space: nowrap;
 }
-.mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
-  transform: rotate(90deg);
+.mint-rack-editor__tab:active {
+  cursor: grabbing;
 }
-.mint-sample-tree--sm .mint-sample-tree__toggle {
-  width: 1rem;
-  height: 1rem;
+.mint-rack-editor__tab:hover {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
 }
-.mint-sample-tree--sm .mint-sample-tree__toggle svg {
-  width: 0.75rem;
-  height: 0.75rem;
+.mint-rack-editor__tab--active {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+  border-bottom-color: var(--bg-secondary);
+  margin-bottom: -1px;
+  z-index: 1;
 }
-.mint-sample-tree--lg .mint-sample-tree__toggle {
-  width: 1.5rem;
-  height: 1.5rem;
+.mint-rack-editor__tab--dragging {
+  opacity: 0.5;
 }
-.mint-sample-tree--lg .mint-sample-tree__toggle svg {
-  width: 1rem;
-  height: 1rem;
+.mint-rack-editor__tab--drag-over {
+  box-shadow: 0 0 0 2px #6366f1, 0 0 0 3px white;
 }
 
-/* Placeholder for leaf nodes (no toggle) */
-.mint-sample-tree__toggle-placeholder {
-  width: 1.25rem;
+/* Slot color dot */
+.mint-rack-editor__slot-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
   flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
 }
-.mint-sample-tree--sm .mint-sample-tree__toggle-placeholder {
-  width: 1rem;
+
+/* Sample count badge */
+.mint-rack-editor__count {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius);
+  font-weight: 500;
 }
-.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
-  width: 1.5rem;
+.mint-rack-editor__count--active {
+  background-color: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+}
+.mint-rack-editor__count--inactive {
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
 }
 
-/* Icon */
-.mint-sample-tree__icon {
+/* Remove button on tab */
+.mint-rack-editor__tab-remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-}
-.mint-sample-tree__icon svg {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__icon {
-  width: 1rem;
-  height: 1rem;
-}
-.mint-sample-tree--sm .mint-sample-tree__icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  font-size: 10px;
+  font-weight: 700;
+  background-color: rgba(239, 68, 68, 0.9);
+  color: white;
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, transform 0.15s;
 }
-.mint-sample-tree--lg .mint-sample-tree__icon {
-  width: 1.5rem;
-  height: 1.5rem;
+.mint-rack-editor__tab:hover .mint-rack-editor__tab-remove {
+  opacity: 1;
 }
-.mint-sample-tree--lg .mint-sample-tree__icon svg {
-  width: 1.25rem;
-  height: 1.25rem;
+.mint-rack-editor__tab-remove:hover {
+  transform: scale(1.1);
 }
 
-/* Icon colors by type */
-.mint-sample-tree__icon--study {
+/* Add rack button */
+.mint-rack-editor__add-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-left: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+  background: transparent;
   color: var(--text-muted);
 }
-.mint-sample-tree__icon--experiment {
-  color: var(--color-primary);
-}
-.mint-sample-tree__icon--plate {
-  color: var(--mint-info);
+.mint-rack-editor__add-btn:hover {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
 }
-.mint-sample-tree__icon--sample {
-  color: var(--mint-success);
+
+/* Toolbar */
+.mint-rack-editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
 }
-.mint-sample-tree__icon--cell_line {
-  color: var(--color-purple);
+.mint-rack-editor__toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-md);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
 }
-.mint-sample-tree__icon--passage {
-  color: var(--text-secondary);
+.mint-rack-editor__toolbar-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--text-muted);
+}
+.mint-rack-editor__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mint-rack-editor__toolbar-divider {
+  width: 1px;
+  height: 1.5rem;
+  background-color: var(--border-color);
+}
+
+/* Format selector buttons */
+.mint-rack-editor__format-btns {
+  display: flex;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+.mint-rack-editor__format-btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+.mint-rack-editor__format-btn--active {
+  background-color: var(--color-primary, #10b981);
+  color: white;
+  font-weight: 600;
+}
+.mint-rack-editor__format-btn--inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
+/* Slot selector buttons */
+.mint-rack-editor__slot-btns {
+  display: flex;
+  gap: 2px;
+}
+.mint-rack-editor__slot-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1.5px solid transparent;
+}
+
+/* Toolbar spacer */
+.mint-rack-editor__toolbar-spacer {
+  flex: 1;
+}
+
+/* Action buttons */
+.mint-rack-editor__action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s;
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+.mint-rack-editor__action-btn:hover {
+  opacity: 0.8;
+}
+
+/* Plate content area */
+.mint-rack-editor__plate {
+  padding: 1rem;
+  flex: 1;
+  overflow: auto;
+}
+
+/* Readonly overlay */
+.mint-rack-editor--readonly {
+  pointer-events: none;
+  opacity: 0.7;
+}
+/* GroupAssigner Component Styles */
+.mint-group-assigner {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Zones container */
+.mint-group-assigner__zones {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+/* Zone */
+.mint-group-assigner__zone {
+  display: flex;
+  flex-direction: column;
+  min-height: 8rem;
+  padding: 0.75rem;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius);
+  background-color: var(--bg-secondary);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+.mint-group-assigner__zone--dragover {
+  border-color: var(--zone-color);
+  background-color: color-mix(in srgb, var(--zone-color) 8%, var(--bg-secondary));
+}
+.mint-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);
+}
+.mint-group-assigner__zone-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--zone-color);
+}
+.mint-group-assigner__zone-count {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+.mint-group-assigner__zone-content {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 0.375rem;
+}
+.mint-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 */
+.mint-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 0.15s ease, box-shadow 0.15s ease;
+}
+.mint-group-assigner__pill:hover {
+  box-shadow: var(--shadow-sm);
+}
+.mint-group-assigner__pill:active {
+  cursor: grabbing;
+}
+.mint-group-assigner__pill--unassigned {
+  background-color: var(--bg-tertiary);
+}
+.mint-group-assigner__pill--dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+}
+.mint-group-assigner__pill-color {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.mint-group-assigner__pill-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.mint-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;
+}
+.mint-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 0.15s ease, background-color 0.15s ease;
+}
+.mint-group-assigner__pill-remove:hover {
+  color: var(--mint-error);
+  background-color: var(--mint-error-bg);
+}
+
+/* Unassigned section */
+.mint-group-assigner__unassigned {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mint-group-assigner__unassigned-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mint-group-assigner__unassigned-title {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mint-group-assigner__clear-btn {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.mint-group-assigner__clear-btn:hover {
+  text-decoration: underline;
+}
+.mint-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(--radius-sm);
+}
+
+/* Validation */
+.mint-group-assigner__validation {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--mint-warning);
+  background-color: var(--mint-warning-bg);
+  border-radius: var(--radius-sm);
+}
+/* ReagentEditor Component Styles */
+.mint-reagent-editor {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+  border-top: 3px solid var(--reagent-color, var(--color-primary));
+  overflow: hidden;
+}
+
+/* Sections */
+.mint-reagent-editor__section {
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-reagent-editor__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+.mint-reagent-editor__section-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  color: var(--reagent-color, var(--color-primary));
+  opacity: 0.7;
+}
+
+/* Identity */
+.mint-reagent-editor__identity {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.mint-reagent-editor__color-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.mint-reagent-editor__color-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.mint-reagent-editor__color-swatch {
+  display: block;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius);
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--border-color);
+  transition: box-shadow 0.15s ease;
+}
+.mint-reagent-editor__color-wrapper:hover .mint-reagent-editor__color-swatch {
+  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 3px var(--reagent-color, var(--border-color));
+}
+.mint-reagent-editor__name-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  padding: 0.25rem 0;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s ease;
+}
+.mint-reagent-editor__name-input::placeholder {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.mint-reagent-editor__name-input:focus {
+  border-bottom-color: var(--reagent-color, var(--color-primary));
+}
+
+/* Fields & layout */
+.mint-reagent-editor__field {
+  margin-bottom: 0.625rem;
+}
+.mint-reagent-editor__field:last-child {
+  margin-bottom: 0;
+}
+.mint-reagent-editor__field--flex {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+}
+.mint-reagent-editor__position-row {
+  display: flex;
+  gap: 0.625rem;
+  width: 100%;
+}
+.mint-reagent-editor .mint-select {
+  width: 100%;
+  min-width: 0;
+}
+.mint-reagent-editor__label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+.mint-reagent-editor__inline-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--form-height-sm);
+  padding: 0 0.625rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  outline: none;
+  text-transform: uppercase;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.mint-reagent-editor__inline-input::placeholder {
+  text-transform: none;
+}
+.mint-reagent-editor__inline-input:focus {
+  border-color: var(--reagent-color, var(--color-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+}
+.mint-reagent-editor__inline-input--error {
+  border-color: var(--mint-error);
+}
+.mint-reagent-editor__inline-input--error:focus {
+  border-color: var(--mint-error);
+  box-shadow: var(--focus-ring-error);
+}
+
+/* Inline field validation error */
+.mint-reagent-editor__field-error {
+  grid-column: 2;
+  font-size: 0.6875rem;
+  color: var(--mint-error);
+  line-height: 1.2;
+}
+
+/* Unit select in section header — uses reagent color */
+.mint-reagent-editor__unit-select {
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--reagent-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 10%, transparent);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+.mint-reagent-editor__unit-select:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 18%, transparent);
+}
+
+/* Dilution generator */
+.mint-reagent-editor__generator {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  margin-bottom: 0.625rem;
+  overflow: hidden;
+}
+.mint-reagent-editor__generator-inputs {
+  display: flex;
+  gap: 0.625rem;
+  margin-bottom: 0.5rem;
+}
+.mint-reagent-editor__generator-inputs > * {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Ensure all child controls fill their parent and can shrink */
+.mint-reagent-editor .mint-number-input {
+  width: 100%;
+  min-width: 0;
+}
+.mint-reagent-editor .mint-number-input__input {
+  min-width: 0;
+  width: 0;
+  flex: 1;
+}
+.mint-reagent-editor .mint-number-input:focus-within {
+  border-color: var(--reagent-color, var(--color-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--reagent-color, var(--color-primary)) 25%, transparent);
+}
+.mint-reagent-editor__presets {
+  display: flex;
+  gap: 0.375rem;
+}
+.mint-reagent-editor__preset-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+.mint-reagent-editor__preset-btn:hover {
+  color: var(--reagent-color, var(--color-primary));
+  border-color: var(--reagent-color, var(--color-primary));
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 8%, transparent);
+}
+.mint-reagent-editor__preset-btn:active {
+  transform: scale(0.96);
+}
+
+/* Manual entry */
+.mint-reagent-editor__manual {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.625rem;
+}
+.mint-reagent-editor__manual .mint-number-input {
+  flex: 1;
+  width: 0; /* flex-basis override so flex: 1 controls sizing */
+}
+.mint-reagent-editor__add-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--form-height-sm);
+  height: var(--form-height-sm);
+  flex-shrink: 0;
+  border-radius: var(--radius);
+  background-color: var(--reagent-color, var(--color-primary));
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: filter 0.15s ease, transform 0.1s ease;
+}
+.mint-reagent-editor__add-btn:hover:not(:disabled) {
+  filter: brightness(0.88);
+}
+.mint-reagent-editor__add-btn:active:not(:disabled) {
+  transform: scale(0.92);
+}
+.mint-reagent-editor__add-btn:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Level table */
+.mint-reagent-editor__table {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  max-height: 14rem;
+  display: flex;
+  flex-direction: column;
+}
+.mint-reagent-editor__table-body {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+.mint-reagent-editor__table-header {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  background-color: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-reagent-editor__table-header .mint-reagent-editor__table-col {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__table-row {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  border-left: 2px solid transparent;
+  transition: background-color 0.1s ease, border-left-color 0.1s ease;
+}
+.mint-reagent-editor__table-row:last-child {
+  border-bottom: none;
+}
+.mint-reagent-editor__table-row:hover {
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 5%, var(--bg-secondary));
+  border-left-color: var(--reagent-color, var(--color-primary));
+}
+.mint-reagent-editor__table-col--level {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.mint-reagent-editor__table-col--reps {
+  width: 5.5rem;
+  flex-shrink: 0;
+}
+.mint-reagent-editor__table-col--action {
+  width: 1.75rem;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
+.mint-reagent-editor__level-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mint-reagent-editor__level-unit {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__remove-level-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, color 0.1s ease, background-color 0.1s ease;
+}
+.mint-reagent-editor__table-row:hover .mint-reagent-editor__remove-level-btn {
+  opacity: 1;
+}
+.mint-reagent-editor__remove-level-btn:hover {
+  color: var(--mint-error);
+  background-color: var(--mint-error-bg);
+}
+
+/* Empty state */
+.mint-reagent-editor__empty {
+  text-align: center;
+  padding: 1.25rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* Position summary — reagent-tinted background */
+.mint-reagent-editor__summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
+  background-color: color-mix(in srgb, var(--reagent-color, var(--color-primary)) 6%, var(--bg-tertiary));
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-reagent-editor__summary-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+.mint-reagent-editor__summary-value {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--reagent-color, var(--text-primary));
+}
+.mint-reagent-editor__summary-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-reagent-editor__summary-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background-color: var(--reagent-color, var(--text-muted));
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+/* Overflow warning */
+.mint-reagent-editor__summary--overflow {
+  background-color: var(--mint-warning-bg);
+}
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-value {
+  color: var(--mint-warning-hover);
+}
+.mint-reagent-editor__summary--overflow .mint-reagent-editor__summary-dot {
+  background-color: var(--mint-warning);
+}
+.mint-reagent-editor__summary-warning {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--mint-warning-hover);
+  margin-left: 0.25rem;
+}
+
+/* Footer */
+.mint-reagent-editor__footer {
+  padding: 0.75rem 1rem;
+}
+.mint-reagent-editor__footer .mint-button {
+  width: 100%;
+}
+/* SampleHierarchyTree Component Styles */
+.mint-sample-tree {
+  font-size: 0.875rem;
+}
+.mint-sample-tree--sm {
+  font-size: 0.75rem;
+}
+.mint-sample-tree--lg {
+  font-size: 1rem;
+}
+
+/* Node */
+.mint-sample-tree__node {
+  user-select: none;
+}
+
+/* Node header (clickable row) */
+.mint-sample-tree__node-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.mint-sample-tree__node-header:hover {
+  background-color: var(--bg-hover);
+}
+.mint-sample-tree--sm .mint-sample-tree__node-header {
+  padding: 0.25rem 0.375rem;
+  gap: 0.25rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__node-header {
+  padding: 0.5rem 0.625rem;
+  gap: 0.5rem;
+}
+
+/* Toggle button */
+.mint-sample-tree__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, transform 0.15s ease;
+  flex-shrink: 0;
+}
+.mint-sample-tree__toggle:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+}
+.mint-sample-tree__toggle svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform 0.15s ease;
+}
+.mint-sample-tree__node--expanded > .mint-sample-tree__node-header .mint-sample-tree__toggle svg {
+  transform: rotate(90deg);
+}
+.mint-sample-tree--sm .mint-sample-tree__toggle {
+  width: 1rem;
+  height: 1rem;
+}
+.mint-sample-tree--sm .mint-sample-tree__toggle svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__toggle {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__toggle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Placeholder for leaf nodes (no toggle) */
+.mint-sample-tree__toggle-placeholder {
+  width: 1.25rem;
+  flex-shrink: 0;
+}
+.mint-sample-tree--sm .mint-sample-tree__toggle-placeholder {
+  width: 1rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__toggle-placeholder {
+  width: 1.5rem;
+}
+
+/* Icon */
+.mint-sample-tree__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.mint-sample-tree__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+.mint-sample-tree--sm .mint-sample-tree__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.mint-sample-tree--sm .mint-sample-tree__icon svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mint-sample-tree--lg .mint-sample-tree__icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Icon colors by type */
+.mint-sample-tree__icon--study {
+  color: var(--text-muted);
+}
+.mint-sample-tree__icon--experiment {
+  color: var(--color-primary);
+}
+.mint-sample-tree__icon--plate {
+  color: var(--mint-info);
+}
+.mint-sample-tree__icon--sample {
+  color: var(--mint-success);
+}
+.mint-sample-tree__icon--cell_line {
+  color: var(--color-purple);
+}
+.mint-sample-tree__icon--passage {
+  color: var(--text-secondary);
 }
 .mint-sample-tree__icon--clone {
   color: var(--mint-warning);
@@ -16432,6 +17395,59 @@ to {
   width: 1rem;
   height: 1rem;
 }
+/* ScientificNumber Component Styles */
+.mint-sci-number {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.125rem;
+  font-family: 'Fira Code', monospace;
+  color: var(--text-primary);
+}
+.mint-sci-number__mantissa,
+.mint-sci-number__plain {
+  font-variant-numeric: tabular-nums;
+}
+.mint-sci-number__times {
+  margin: 0 0.125rem;
+  color: var(--text-muted);
+}
+.mint-sci-number__exponent {
+  font-size: 0.75em;
+}
+.mint-sci-number__suffix {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.mint-sci-number__unit {
+  color: var(--text-muted);
+  margin-left: 0.25rem;
+  font-size: 0.875em;
+}
+.mint-sci-number__copy-btn {
+  margin-left: 0.25rem;
+  padding: 0.125rem;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.mint-sci-number:hover .mint-sci-number__copy-btn {
+  opacity: 1;
+}
+.mint-sci-number__copy-btn:hover {
+  color: var(--color-primary);
+  background-color: var(--bg-hover);
+}
+.mint-sci-number__copy-btn--copied {
+  color: var(--color-success, #10b981);
+}
 /* ChemicalFormula Component Styles */
 .mint-chem-formula {
   display: inline;
@@ -17888,28 +18904,161 @@ to {
   background: color-mix(in srgb, var(--mint-info, #3b82f6) 10%, transparent);
   opacity: 1;
 }
-.mint-lcms-sequence-table__action--danger {
-  color: var(--mint-error, #ef4444);
+.mint-lcms-sequence-table__action--danger {
+  color: var(--mint-error, #ef4444);
+}
+.mint-lcms-sequence-table__action--danger:hover {
+  background: color-mix(in srgb, var(--mint-error, #ef4444) 10%, transparent);
+}
+.mint-lcms-sequence-table__empty,
+.mint-lcms-sequence-table__more {
+  color: var(--text-muted, #64748b);
+  font-size: 0.875rem;
+  padding: 1rem;
+  text-align: center;
+}
+.mint-lcms-sequence-table__more {
+  border-top: 1px solid var(--border-color, #e2e8f0);
+  padding: 0.625rem 1rem;
+}
+@media (prefers-reduced-motion: reduce) {
+.mint-lcms-sequence-table__row,
+  .mint-lcms-sequence-table__action {
+    transition: none;
+}
+}
+/* AuditTrail Component Styles */
+.mint-audit-trail {
+  position: relative;
+}
+.mint-audit-trail__filters {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.mint-audit-trail__filter-select {
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.75rem;
+}
+.mint-audit-trail__list {
+  position: relative;
+  padding-left: 1.5rem;
+}
+.mint-audit-trail__line {
+  position: absolute;
+  left: 0.4375rem;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--border-color);
+}
+.mint-audit-trail__entry {
+  position: relative;
+  padding-bottom: 1.25rem;
+  cursor: pointer;
+}
+.mint-audit-trail__entry:last-child {
+  padding-bottom: 0;
+}
+.mint-audit-trail__dot {
+  position: absolute;
+  left: -1.5rem;
+  top: 0.25rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  border: 2px solid var(--bg-primary);
+  z-index: 1;
+}
+
+/* Dot colors by type */
+.mint-audit-trail__entry--create .mint-audit-trail__dot { background-color: var(--mint-success);
+}
+.mint-audit-trail__entry--update .mint-audit-trail__dot { background-color: var(--color-primary);
+}
+.mint-audit-trail__entry--delete .mint-audit-trail__dot { background-color: var(--mint-error);
+}
+.mint-audit-trail__entry--system .mint-audit-trail__dot { background-color: var(--text-muted);
+}
+.mint-audit-trail__content {
+  /* entry content container */
+}
+.mint-audit-trail__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.mint-audit-trail__avatar {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 0.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.mint-audit-trail__user {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.mint-audit-trail__timestamp {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.mint-audit-trail__action {
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.mint-audit-trail__detail {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-top: 0.125rem;
+}
+.mint-audit-trail__metadata {
+  margin-top: 0.375rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.6875rem;
+}
+.mint-audit-trail__metadata-item {
+  color: var(--text-secondary);
+}
+.mint-audit-trail__metadata-key {
+  color: var(--text-muted);
+  margin-right: 0.125rem;
+}
+.mint-audit-trail__empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+/* Size variants */
+.mint-audit-trail--sm .mint-audit-trail__action { font-size: 0.75rem;
 }
-.mint-lcms-sequence-table__action--danger:hover {
-  background: color-mix(in srgb, var(--mint-error, #ef4444) 10%, transparent);
+.mint-audit-trail--sm .mint-audit-trail__detail { font-size: 0.6875rem;
 }
-.mint-lcms-sequence-table__empty,
-.mint-lcms-sequence-table__more {
-  color: var(--text-muted, #64748b);
-  font-size: 0.875rem;
-  padding: 1rem;
-  text-align: center;
+.mint-audit-trail--sm .mint-audit-trail__entry { padding-bottom: 0.75rem;
 }
-.mint-lcms-sequence-table__more {
-  border-top: 1px solid var(--border-color, #e2e8f0);
-  padding: 0.625rem 1rem;
+.mint-audit-trail--lg .mint-audit-trail__action { font-size: 0.9375rem;
 }
-@media (prefers-reduced-motion: reduce) {
-.mint-lcms-sequence-table__row,
-  .mint-lcms-sequence-table__action {
-    transition: none;
+.mint-audit-trail--lg .mint-audit-trail__detail { font-size: 0.8125rem;
 }
+.mint-audit-trail--lg .mint-audit-trail__entry { padding-bottom: 1.5rem;
 }
 /* BatchProgressList Component Styles */
 .mint-batch-progress {
@@ -18208,48 +19357,372 @@ to { transform: rotate(360deg);
   padding: 2px 8px;
   border-radius: 10px;
 }
-.mint-summary__group-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--border-color);
+.mint-summary__group-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+/* TimeRangeInput Component Styles */
+.mint-time-range {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mint-time-range__start,
+.mint-time-range__end {
+  flex: 1;
+  min-width: 0;
+}
+.mint-time-range__separator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.mint-time-range__separator::before,
+.mint-time-range__separator::after {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 2px;
+  background-color: var(--border-color);
+}
+.mint-time-range__duration {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background-color: var(--bg-tertiary);
+  border-radius: var(--radius, 0.375rem);
+  padding: 0.125rem 0.5rem;
+  white-space: nowrap;
+}
+.mint-time-range__duration--error {
+  color: var(--mint-error);
+}
+/* ResourceCard Component Styles */
+.mint-resource-card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+  overflow: hidden;
+}
+.mint-resource-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+/* Compact mode */
+.mint-resource-card--compact {
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  min-height: 40px;
+}
+.mint-resource-card--compact:hover {
+  box-shadow: none;
+  border-color: var(--border-color);
+  background-color: var(--bg-hover);
+}
+
+/* Card layout (non-compact) */
+.mint-resource-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  padding-bottom: 0;
+}
+
+/* Size variants for header padding */
+.mint-resource-card--sm .mint-resource-card__header {
+  padding: 0.75rem;
+  padding-bottom: 0;
+  gap: 0.625rem;
+}
+.mint-resource-card--lg .mint-resource-card__header {
+  padding: 1.25rem;
+  padding-bottom: 0;
+  gap: 1rem;
+}
+
+/* Image / fallback icon */
+.mint-resource-card__image {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.mint-resource-card--sm .mint-resource-card__image {
+  width: 48px;
+  height: 48px;
+}
+.mint-resource-card--lg .mint-resource-card__image {
+  width: 80px;
+  height: 80px;
+}
+.mint-resource-card__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.mint-resource-card__image-fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+.mint-resource-card__image-fallback svg {
+  width: 50%;
+  height: 50%;
+}
+
+/* Body section */
+.mint-resource-card__body {
+  flex: 1;
+  min-width: 0;
+}
+.mint-resource-card__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.mint-resource-card__name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mint-resource-card--sm .mint-resource-card__name {
+  font-size: 0.8125rem;
+}
+.mint-resource-card--lg .mint-resource-card__name {
+  font-size: 1.0625rem;
+}
+.mint-resource-card__description {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  margin-top: 0.125rem !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mint-resource-card__location {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+}
+
+/* Status indicator */
+.mint-resource-card__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+.mint-resource-card__status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.mint-resource-card__status-dot--available {
+  background-color: var(--mint-success);
+  color: var(--mint-success);
+}
+.mint-resource-card__status-dot--in-use {
+  background-color: var(--color-primary);
+  color: var(--color-primary);
+  animation: mint-resource-pulse 2s ease-in-out infinite;
+}
+.mint-resource-card__status-dot--maintenance {
+  background-color: var(--mint-warning);
+  color: var(--mint-warning);
+}
+.mint-resource-card__status-dot--offline {
+  background-color: var(--mint-error);
+  color: var(--mint-error);
+}
+.mint-resource-card__status-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* Compact status: colored text only */
+.mint-resource-card--compact .mint-resource-card__status-label--available {
+  color: var(--mint-success);
+}
+.mint-resource-card--compact .mint-resource-card__status-label--in-use {
+  color: var(--color-primary);
+}
+.mint-resource-card--compact .mint-resource-card__status-label--maintenance {
+  color: var(--mint-warning);
+}
+.mint-resource-card--compact .mint-resource-card__status-label--offline {
+  color: var(--mint-error);
+}
+.mint-resource-card__next-available {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.125rem !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+}
+
+/* Specs grid */
+.mint-resource-card__specs {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
+}
+.mint-resource-card--sm .mint-resource-card__specs {
+  padding: 0.5rem 0.75rem;
+  gap: 0.375rem 0.75rem;
+}
+.mint-resource-card--lg .mint-resource-card__specs {
+  padding: 0.75rem 1.25rem;
+  gap: 0.5rem 1.25rem;
+}
+.mint-resource-card__spec {
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+}
+.mint-resource-card__spec-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mint-resource-card__spec-value {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+/* Footer (tags + action) */
+.mint-resource-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  padding-top: 0;
+}
+.mint-resource-card--sm .mint-resource-card__footer {
+  padding: 0.5rem 0.75rem;
+  padding-top: 0;
+}
+.mint-resource-card--lg .mint-resource-card__footer {
+  padding: 0.75rem 1.25rem;
+  padding-top: 0;
+}
+.mint-resource-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  flex: 1;
+  min-width: 0;
+}
+.mint-resource-card__action {
+  flex-shrink: 0;
+}
+
+/* Book button */
+.mint-resource-card__book-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  font-family: inherit;
+  white-space: nowrap;
+}
+.mint-resource-card__book-btn:hover {
+  background-color: var(--color-primary-hover);
 }
-/* TimeRangeInput Component Styles */
-.mint-time-range {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+
+/* Compact book button: ghost style */
+.mint-resource-card--compact .mint-resource-card__book-btn {
+  background-color: transparent;
+  color: var(--color-primary);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
 }
-.mint-time-range__start,
-.mint-time-range__end {
+.mint-resource-card--compact .mint-resource-card__book-btn:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+/* Compact layout overrides */
+.mint-resource-card--compact .mint-resource-card__name {
+  font-size: 0.875rem;
   flex: 1;
   min-width: 0;
 }
-.mint-time-range__separator {
+
+/* Spacer between header and specs/footer */
+.mint-resource-card__content {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
+  flex-direction: column;
 }
-.mint-time-range__separator::before,
-.mint-time-range__separator::after {
-  content: '';
-  display: block;
-  width: 1rem;
-  height: 2px;
-  background-color: var(--border-color);
+
+/* Pulse animation for in-use status */
+@keyframes mint-resource-pulse {
+0%, 100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
 }
-.mint-time-range__duration {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  background-color: var(--bg-tertiary);
-  border-radius: var(--radius, 0.375rem);
-  padding: 0.125rem 0.5rem;
-  white-space: nowrap;
+50% {
+    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
+}
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+.mint-resource-card__status-dot--in-use {
+    animation: none;
 }
-.mint-time-range__duration--error {
-  color: var(--mint-error);
 }
 /* SectionCard — the MINT 1.1 one-card system.
  *
@@ -18405,6 +19878,65 @@ button.mint-section-card__row:hover {
   font-size: 0.75rem;
   color: var(--text-secondary);
 }
+/* FitPanel Component Styles */
+.mint-fit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Action bar */
+.mint-fit-panel__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Progress */
+.mint-fit-panel__progress {
+  padding: 0.25rem 0;
+}
+
+/* Result list */
+.mint-fit-panel__results {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.mint-fit-panel__result-list {
+  display: flex;
+  flex-direction: column;
+}
+.mint-fit-panel__result-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-fit-panel__result-row:last-child {
+  border-bottom: none;
+}
+.mint-fit-panel__result-label {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+.mint-fit-panel__result-value {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Result value variants */
+.mint-fit-panel__result-value--success {
+  color: var(--mint-success);
+}
+.mint-fit-panel__result-value--warning {
+  color: var(--mint-warning);
+}
+.mint-fit-panel__result-value--error {
+  color: var(--mint-error);
+}
 
 
 
@@ -20982,6 +22514,97 @@ code, pre {
     transition: none;
   }
 }
+/* ColorSlider Component Styles */
+.mint-color-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.mint-color-slider--disabled {
+  opacity: var(--mint-disabled-opacity);
+}
+.mint-color-slider__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mint-color-slider__track {
+  position: relative;
+  flex: 1;
+}
+.mint-color-slider__input {
+  width: 100%;
+  cursor: pointer;
+}
+.mint-color-slider__input:disabled {
+  cursor: not-allowed;
+}
+.mint-color-slider__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm, 0.25rem);
+  font-weight: 700;
+}
+.mint-color-slider__labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-muted);
+}
+/* Range input styling */
+.color-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--slider-gradient);
+}
+.color-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: 2px solid var(--mint-primary, #6366f1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s ease;
+}
+.color-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+.color-slider::-webkit-slider-thumb:active {
+  transform: scale(1.15);
+}
+.color-slider::-moz-range-thumb {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+  border: 2px solid var(--mint-primary, #6366f1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s ease;
+}
+.color-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+.color-slider:focus {
+  outline: none;
+}
+.color-slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.color-slider:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+.color-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+.color-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
 /* DatePicker Component Styles */
 .mint-date-picker {
   position: relative;
@@ -26799,51 +28422,225 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
   color: var(--text-muted); cursor: not-allowed; opacity: 0.7;
   text-decoration: line-through; text-decoration-color: var(--text-muted);
 }
-.fr-csv-item:disabled:hover { background: none; }
-/* anchor the drop overlay to the main panel */
-.sg-body__main { position: relative; }
-.fr-dropzone {
-  position: absolute; inset: 0.5rem; z-index: 2;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 0.5rem; pointer-events: none;
-  border: 2px dashed var(--color-primary); border-radius: var(--radius-md);
-  background: var(--color-primary-soft);
-  color: var(--color-primary-hover); font-size: 0.8125rem; font-weight: 600;
+.fr-csv-item:disabled:hover { background: none; }
+/* anchor the drop overlay to the main panel */
+.sg-body__main { position: relative; }
+.fr-dropzone {
+  position: absolute; inset: 0.5rem; z-index: 2;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 0.5rem; pointer-events: none;
+  border: 2px dashed var(--color-primary); border-radius: var(--radius-md);
+  background: var(--color-primary-soft);
+  color: var(--color-primary-hover); font-size: 0.8125rem; font-weight: 600;
+}
+.fr-loading {
+  position: absolute; inset: 0; z-index: 3;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 0.625rem;
+  background: var(--bg-secondary);
+  color: var(--text-secondary); font-size: 0.8125rem;
+}
+/* ==========================================================================
+   Host adapter — when AutoGroupModal renders the Smart Group card inside
+   BaseModal, strip BaseModal's own chrome/padding so the .sg-modal card is the
+   only visible frame, and size it to the design.
+   ========================================================================== */
+/* Keyed on the presence of .sg-modal (not the fallthrough `.sg-host` class,
+   which doesn't reliably reach BaseModal's Teleport root) so the flatten always
+   applies under BaseModal, and never matches the bare-rendered standalone
+   stories (they have no .mint-modal ancestor). After this there is exactly one
+   card edge — the .sg-modal one. */
+.mint-modal__container:has(.sg-modal) {
+  width: 980px;
+  max-width: calc(100vw - 2rem);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.mint-modal__body:has(.sg-modal) {
+  padding: 0;
+  background: transparent;
+}
+.mint-modal__container:has(.sg-modal) .sg-modal {
+  height: min(640px, calc(100vh - 4rem));
+}
+.sg-host__error { margin: 0 0 0.75rem; }
+/* GroupAssigner Component Styles */
+.mint-group-assigner {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+/* Zones container */
+.mint-group-assigner__zones {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+/* Zone */
+.mint-group-assigner__zone {
+  display: flex;
+  flex-direction: column;
+  min-height: 8rem;
+  padding: 0.75rem;
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius);
+  background-color: var(--bg-secondary);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+.mint-group-assigner__zone--dragover {
+  border-color: var(--zone-color);
+  background-color: color-mix(in srgb, var(--zone-color) 8%, var(--bg-secondary));
+}
+.mint-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);
+}
+.mint-group-assigner__zone-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--zone-color);
+}
+.mint-group-assigner__zone-count {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+.mint-group-assigner__zone-content {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 0.375rem;
+}
+.mint-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 */
+.mint-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 0.15s ease, box-shadow 0.15s ease;
+}
+.mint-group-assigner__pill:hover {
+  box-shadow: var(--shadow-sm);
+}
+.mint-group-assigner__pill:active {
+  cursor: grabbing;
+}
+.mint-group-assigner__pill--unassigned {
+  background-color: var(--bg-tertiary);
+}
+.mint-group-assigner__pill--dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+}
+.mint-group-assigner__pill-color {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.fr-loading {
-  position: absolute; inset: 0; z-index: 3;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 0.625rem;
-  background: var(--bg-secondary);
-  color: var(--text-secondary); font-size: 0.8125rem;
+.mint-group-assigner__pill-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
 }
-/* ==========================================================================
-   Host adapter — when AutoGroupModal renders the Smart Group card inside
-   BaseModal, strip BaseModal's own chrome/padding so the .sg-modal card is the
-   only visible frame, and size it to the design.
-   ========================================================================== */
-/* Keyed on the presence of .sg-modal (not the fallthrough `.sg-host` class,
-   which doesn't reliably reach BaseModal's Teleport root) so the flatten always
-   applies under BaseModal, and never matches the bare-rendered standalone
-   stories (they have no .mint-modal ancestor). After this there is exactly one
-   card edge — the .sg-modal one. */
-.mint-modal__container:has(.sg-modal) {
-  width: 980px;
-  max-width: calc(100vw - 2rem);
+.mint-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;
+}
+.mint-group-assigner__pill-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
   padding: 0;
-  background: transparent;
+  background: none;
   border: none;
-  border-radius: 0;
-  box-shadow: none;
+  color: var(--text-muted);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
-.mint-modal__body:has(.sg-modal) {
+.mint-group-assigner__pill-remove:hover {
+  color: var(--mint-error);
+  background-color: var(--mint-error-bg);
+}
+/* Unassigned section */
+.mint-group-assigner__unassigned {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mint-group-assigner__unassigned-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mint-group-assigner__unassigned-title {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mint-group-assigner__clear-btn {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
   padding: 0;
-  background: transparent;
+  cursor: pointer;
 }
-.mint-modal__container:has(.sg-modal) .sg-modal {
-  height: min(640px, calc(100vh - 4rem));
+.mint-group-assigner__clear-btn:hover {
+  text-decoration: underline;
+}
+.mint-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(--radius-sm);
+}
+/* Validation */
+.mint-group-assigner__validation {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--mint-warning);
+  background-color: var(--mint-warning-bg);
+  border-radius: var(--radius-sm);
 }
-.sg-host__error { margin: 0 0 0.75rem; }
 /* MoleculeInput Component Styles */
 .mint-molecule-input {
   display: flex;
@@ -29742,94 +31539,325 @@ html.dark .mint-dataframe__loading {
   border-color: rgba(139, 92, 246, 0.4);
   color: #8b5cf6;
 }
-.mint-well-edit-popup__type-btn--iqc {
-  background-color: rgba(236, 72, 153, 0.15);
-  border-color: rgba(236, 72, 153, 0.4);
-  color: #ec4899;
+.mint-well-edit-popup__type-btn--iqc {
+  background-color: rgba(236, 72, 153, 0.15);
+  border-color: rgba(236, 72, 153, 0.4);
+  color: #ec4899;
+}
+/* Injection count buttons */
+.mint-well-edit-popup__count-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr) 2.5rem;
+  gap: 0.25rem;
+}
+.mint-well-edit-popup__count-btn {
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+.mint-well-edit-popup__count-btn--active {
+  background-color: rgba(99, 102, 241, 0.15);
+  border-color: rgba(99, 102, 241, 0.4);
+  color: #6366f1;
+}
+.mint-well-edit-popup__count-input {
+  height: 2rem;
+  padding: 0 0.25rem;
+  font-size: 0.875rem;
+  text-align: center;
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  outline: none;
+  box-sizing: border-box;
+}
+.mint-well-edit-popup__count-input:focus-visible {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+/* Advanced toggle */
+.mint-well-edit-popup__advanced-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  padding-top: 0.25rem;
+}
+.mint-well-edit-popup__advanced-toggle span {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+/* Footer */
+.mint-well-edit-popup__footer {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-color);
+}
+.mint-well-edit-popup__btn {
+  flex: 1;
+  height: 2.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.15s;
+  border: none;
+}
+.mint-well-edit-popup__btn--clear {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+.mint-well-edit-popup__btn--clear:hover {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+.mint-well-edit-popup__btn--save {
+  background-color: #10b981;
+  color: white;
+}
+.mint-well-edit-popup__btn--save:hover {
+  background-color: #059669;
+}
+/* RackEditor Component Styles */
+.mint-rack-editor {
+  display: flex;
+  flex-direction: column;
+}
+/* Rack tabs bar */
+.mint-rack-editor__tabs {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  overflow-x: auto;
+}
+.mint-rack-editor__tabs-inner {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.mint-rack-editor__tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  border: 1px solid transparent;
+  cursor: grab;
+  transition: all 0.2s;
+  background: transparent;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.mint-rack-editor__tab:active {
+  cursor: grabbing;
+}
+.mint-rack-editor__tab:hover {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+.mint-rack-editor__tab--active {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+  border-bottom-color: var(--bg-secondary);
+  margin-bottom: -1px;
+  z-index: 1;
+}
+.mint-rack-editor__tab--dragging {
+  opacity: 0.5;
+}
+.mint-rack-editor__tab--drag-over {
+  box-shadow: 0 0 0 2px #6366f1, 0 0 0 3px white;
+}
+/* Slot color dot */
+.mint-rack-editor__slot-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+/* Sample count badge */
+.mint-rack-editor__count {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius);
+  font-weight: 500;
+}
+.mint-rack-editor__count--active {
+  background-color: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+}
+.mint-rack-editor__count--inactive {
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+/* Remove button on tab */
+.mint-rack-editor__tab-remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  background-color: rgba(239, 68, 68, 0.9);
+  color: white;
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, transform 0.15s;
+}
+.mint-rack-editor__tab:hover .mint-rack-editor__tab-remove {
+  opacity: 1;
 }
-/* Injection count buttons */
-.mint-well-edit-popup__count-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr) 2.5rem;
-  gap: 0.25rem;
+.mint-rack-editor__tab-remove:hover {
+  transform: scale(1.1);
 }
-.mint-well-edit-popup__count-btn {
-  height: 2rem;
-  font-size: 0.875rem;
+/* Add rack button */
+.mint-rack-editor__add-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-left: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
   font-weight: 500;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.15s;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-tertiary);
-  color: var(--text-secondary);
+  transition: all 0.2s;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
 }
-.mint-well-edit-popup__count-btn--active {
-  background-color: rgba(99, 102, 241, 0.15);
-  border-color: rgba(99, 102, 241, 0.4);
-  color: #6366f1;
+.mint-rack-editor__add-btn:hover {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
 }
-.mint-well-edit-popup__count-input {
-  height: 2rem;
-  padding: 0 0.25rem;
-  font-size: 0.875rem;
-  text-align: center;
-  border-radius: var(--radius-sm);
+/* Toolbar */
+.mint-rack-editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-rack-editor__toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-md);
   background-color: var(--bg-tertiary);
   border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  outline: none;
-  box-sizing: border-box;
 }
-.mint-well-edit-popup__count-input:focus-visible {
-  border-color: #6366f1;
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+.mint-rack-editor__toolbar-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--text-muted);
 }
-/* Advanced toggle */
-.mint-well-edit-popup__advanced-toggle {
+.mint-rack-editor__toolbar-section {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-  padding-top: 0.25rem;
 }
-.mint-well-edit-popup__advanced-toggle span {
-  font-size: 0.875rem;
-  color: var(--text-primary);
+.mint-rack-editor__toolbar-divider {
+  width: 1px;
+  height: 1.5rem;
+  background-color: var(--border-color);
 }
-/* Footer */
-.mint-well-edit-popup__footer {
+/* Format selector buttons */
+.mint-rack-editor__format-btns {
   display: flex;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border-color);
 }
-.mint-well-edit-popup__btn {
-  flex: 1;
-  height: 2.25rem;
+.mint-rack-editor__format-btn {
+  padding: 0.25rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
-  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all 0.2s;
   border: none;
 }
-.mint-well-edit-popup__btn--clear {
+.mint-rack-editor__format-btn--active {
+  background-color: var(--color-primary, #10b981);
+  color: white;
+  font-weight: 600;
+}
+.mint-rack-editor__format-btn--inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+/* Slot selector buttons */
+.mint-rack-editor__slot-btns {
+  display: flex;
+  gap: 2px;
+}
+.mint-rack-editor__slot-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1.5px solid transparent;
+}
+/* Toolbar spacer */
+.mint-rack-editor__toolbar-spacer {
+  flex: 1;
+}
+/* Action buttons */
+.mint-rack-editor__action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s;
   background-color: var(--bg-tertiary);
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
 }
-.mint-well-edit-popup__btn--clear:hover {
-  background-color: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+.mint-rack-editor__action-btn:hover {
+  opacity: 0.8;
 }
-.mint-well-edit-popup__btn--save {
-  background-color: #10b981;
-  color: white;
+/* Plate content area */
+.mint-rack-editor__plate {
+  padding: 1rem;
+  flex: 1;
+  overflow: auto;
 }
-.mint-well-edit-popup__btn--save:hover {
-  background-color: #059669;
+/* Readonly overlay */
+.mint-rack-editor--readonly {
+  pointer-events: none;
+  opacity: 0.7;
 }
 /* LoadingSpinner Component Styles */
 .mint-spinner {
@@ -30759,6 +32787,59 @@ html.dark .mint-settings-modal__option-btn--active {
   gap: 1rem;
   grid-template-columns: repeat(var(--mint-settings-cols, 1), minmax(0, 1fr));
 }
+/* ScientificNumber Component Styles */
+.mint-sci-number {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.125rem;
+  font-family: 'Fira Code', monospace;
+  color: var(--text-primary);
+}
+.mint-sci-number__mantissa,
+.mint-sci-number__plain {
+  font-variant-numeric: tabular-nums;
+}
+.mint-sci-number__times {
+  margin: 0 0.125rem;
+  color: var(--text-muted);
+}
+.mint-sci-number__exponent {
+  font-size: 0.75em;
+}
+.mint-sci-number__suffix {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.mint-sci-number__unit {
+  color: var(--text-muted);
+  margin-left: 0.25rem;
+  font-size: 0.875em;
+}
+.mint-sci-number__copy-btn {
+  margin-left: 0.25rem;
+  padding: 0.125rem;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  opacity: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.mint-sci-number:hover .mint-sci-number__copy-btn {
+  opacity: 1;
+}
+.mint-sci-number__copy-btn:hover {
+  color: var(--color-primary);
+  background-color: var(--bg-hover);
+}
+.mint-sci-number__copy-btn--copied {
+  color: var(--color-success, #10b981);
+}
 /* ChemicalFormula Component Styles */
 .mint-chem-formula {
   display: inline;
@@ -31297,10 +33378,131 @@ html.dark .mint-settings-modal__option-btn--active {
   padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
 }
-.mint-wizard--lg .mint-wizard__nav-btn {
-  padding: 0.625rem 1.25rem;
-  font-size: 1rem;
+.mint-wizard--lg .mint-wizard__nav-btn {
+  padding: 0.625rem 1.25rem;
+  font-size: 1rem;
+}
+/* AuditTrail Component Styles */
+.mint-audit-trail {
+  position: relative;
+}
+.mint-audit-trail__filters {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.mint-audit-trail__filter-select {
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.75rem;
+}
+.mint-audit-trail__list {
+  position: relative;
+  padding-left: 1.5rem;
+}
+.mint-audit-trail__line {
+  position: absolute;
+  left: 0.4375rem;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--border-color);
+}
+.mint-audit-trail__entry {
+  position: relative;
+  padding-bottom: 1.25rem;
+  cursor: pointer;
+}
+.mint-audit-trail__entry:last-child {
+  padding-bottom: 0;
+}
+.mint-audit-trail__dot {
+  position: absolute;
+  left: -1.5rem;
+  top: 0.25rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  border: 2px solid var(--bg-primary);
+  z-index: 1;
+}
+/* Dot colors by type */
+.mint-audit-trail__entry--create .mint-audit-trail__dot { background-color: var(--mint-success); }
+.mint-audit-trail__entry--update .mint-audit-trail__dot { background-color: var(--color-primary); }
+.mint-audit-trail__entry--delete .mint-audit-trail__dot { background-color: var(--mint-error); }
+.mint-audit-trail__entry--system .mint-audit-trail__dot { background-color: var(--text-muted); }
+.mint-audit-trail__content {
+  /* entry content container */
+}
+.mint-audit-trail__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.mint-audit-trail__avatar {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 0.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.mint-audit-trail__user {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.mint-audit-trail__timestamp {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.mint-audit-trail__action {
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.mint-audit-trail__detail {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-top: 0.125rem;
+}
+.mint-audit-trail__metadata {
+  margin-top: 0.375rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.6875rem;
+}
+.mint-audit-trail__metadata-item {
+  color: var(--text-secondary);
+}
+.mint-audit-trail__metadata-key {
+  color: var(--text-muted);
+  margin-right: 0.125rem;
+}
+.mint-audit-trail__empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
 }
+/* Size variants */
+.mint-audit-trail--sm .mint-audit-trail__action { font-size: 0.75rem; }
+.mint-audit-trail--sm .mint-audit-trail__detail { font-size: 0.6875rem; }
+.mint-audit-trail--sm .mint-audit-trail__entry { padding-bottom: 0.75rem; }
+.mint-audit-trail--lg .mint-audit-trail__action { font-size: 0.9375rem; }
+.mint-audit-trail--lg .mint-audit-trail__detail { font-size: 0.8125rem; }
+.mint-audit-trail--lg .mint-audit-trail__entry { padding-bottom: 1.5rem; }
 /* BatchProgressList Component Styles */
 .mint-batch-progress {
   display: flex;
@@ -32249,6 +34451,315 @@ html.dark .mint-settings-modal__option-btn--active {
 .mint-schedule__month-more:hover {
   text-decoration: underline;
 }
+/* ResourceCard Component Styles */
+.mint-resource-card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+  overflow: hidden;
+}
+.mint-resource-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+/* Compact mode */
+.mint-resource-card--compact {
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  min-height: 40px;
+}
+.mint-resource-card--compact:hover {
+  box-shadow: none;
+  border-color: var(--border-color);
+  background-color: var(--bg-hover);
+}
+/* Card layout (non-compact) */
+.mint-resource-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  padding-bottom: 0;
+}
+/* Size variants for header padding */
+.mint-resource-card--sm .mint-resource-card__header {
+  padding: 0.75rem;
+  padding-bottom: 0;
+  gap: 0.625rem;
+}
+.mint-resource-card--lg .mint-resource-card__header {
+  padding: 1.25rem;
+  padding-bottom: 0;
+  gap: 1rem;
+}
+/* Image / fallback icon */
+.mint-resource-card__image {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.mint-resource-card--sm .mint-resource-card__image {
+  width: 48px;
+  height: 48px;
+}
+.mint-resource-card--lg .mint-resource-card__image {
+  width: 80px;
+  height: 80px;
+}
+.mint-resource-card__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.mint-resource-card__image-fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
+}
+.mint-resource-card__image-fallback svg {
+  width: 50%;
+  height: 50%;
+}
+/* Body section */
+.mint-resource-card__body {
+  flex: 1;
+  min-width: 0;
+}
+.mint-resource-card__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.mint-resource-card__name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mint-resource-card--sm .mint-resource-card__name {
+  font-size: 0.8125rem;
+}
+.mint-resource-card--lg .mint-resource-card__name {
+  font-size: 1.0625rem;
+}
+.mint-resource-card__description {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  margin-top: 0.125rem !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mint-resource-card__location {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+}
+/* Status indicator */
+.mint-resource-card__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+.mint-resource-card__status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.mint-resource-card__status-dot--available {
+  background-color: var(--mint-success);
+  color: var(--mint-success);
+}
+.mint-resource-card__status-dot--in-use {
+  background-color: var(--color-primary);
+  color: var(--color-primary);
+  animation: mint-resource-pulse 2s ease-in-out infinite;
+}
+.mint-resource-card__status-dot--maintenance {
+  background-color: var(--mint-warning);
+  color: var(--mint-warning);
+}
+.mint-resource-card__status-dot--offline {
+  background-color: var(--mint-error);
+  color: var(--mint-error);
+}
+.mint-resource-card__status-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+/* Compact status: colored text only */
+.mint-resource-card--compact .mint-resource-card__status-label--available {
+  color: var(--mint-success);
+}
+.mint-resource-card--compact .mint-resource-card__status-label--in-use {
+  color: var(--color-primary);
+}
+.mint-resource-card--compact .mint-resource-card__status-label--maintenance {
+  color: var(--mint-warning);
+}
+.mint-resource-card--compact .mint-resource-card__status-label--offline {
+  color: var(--mint-error);
+}
+.mint-resource-card__next-available {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.125rem !important;
+  margin-bottom: 0 !important;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0 !important;
+}
+/* Specs grid */
+.mint-resource-card__specs {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
+}
+.mint-resource-card--sm .mint-resource-card__specs {
+  padding: 0.5rem 0.75rem;
+  gap: 0.375rem 0.75rem;
+}
+.mint-resource-card--lg .mint-resource-card__specs {
+  padding: 0.75rem 1.25rem;
+  gap: 0.5rem 1.25rem;
+}
+.mint-resource-card__spec {
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+}
+.mint-resource-card__spec-label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+.mint-resource-card__spec-value {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+/* Footer (tags + action) */
+.mint-resource-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  padding-top: 0;
+}
+.mint-resource-card--sm .mint-resource-card__footer {
+  padding: 0.5rem 0.75rem;
+  padding-top: 0;
+}
+.mint-resource-card--lg .mint-resource-card__footer {
+  padding: 0.75rem 1.25rem;
+  padding-top: 0;
+}
+.mint-resource-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  flex: 1;
+  min-width: 0;
+}
+.mint-resource-card__action {
+  flex-shrink: 0;
+}
+/* Book button */
+.mint-resource-card__book-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  font-family: inherit;
+  white-space: nowrap;
+}
+.mint-resource-card__book-btn:hover {
+  background-color: var(--color-primary-hover);
+}
+/* Compact book button: ghost style */
+.mint-resource-card--compact .mint-resource-card__book-btn {
+  background-color: transparent;
+  color: var(--color-primary);
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+}
+.mint-resource-card--compact .mint-resource-card__book-btn:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+/* Compact layout overrides */
+.mint-resource-card--compact .mint-resource-card__name {
+  font-size: 0.875rem;
+  flex: 1;
+  min-width: 0;
+}
+/* Spacer between header and specs/footer */
+.mint-resource-card__content {
+  display: flex;
+  flex-direction: column;
+}
+/* Pulse animation for in-use status */
+@keyframes mint-resource-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent);
+  }
+}
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .mint-resource-card__status-dot--in-use {
+    animation: none;
+  }
+}
 /* FormBuilder */
 .mint-form-builder {
   display: flex;
@@ -33458,4 +35969,59 @@ html.dark .mint-experiment-selector__filters-toggle--active {
     background-image: none;
   }
 }
+/* FitPanel Component Styles */
+.mint-fit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+/* Action bar */
+.mint-fit-panel__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+/* Progress */
+.mint-fit-panel__progress {
+  padding: 0.25rem 0;
+}
+/* Result list */
+.mint-fit-panel__results {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.mint-fit-panel__result-list {
+  display: flex;
+  flex-direction: column;
+}
+.mint-fit-panel__result-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.mint-fit-panel__result-row:last-child {
+  border-bottom: none;
+}
+.mint-fit-panel__result-label {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+.mint-fit-panel__result-value {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+/* Result value variants */
+.mint-fit-panel__result-value--success {
+  color: var(--mint-success);
+}
+.mint-fit-panel__result-value--warning {
+  color: var(--mint-warning);
+}
+.mint-fit-panel__result-value--error {
+  color: var(--mint-error);
+}
 /*$vite$:1*/