/*
 * Supplemental styles layered on top of Bootstrap 5 to support the
 * Gridfinity label generator preview and custom artwork.
 */

:root {
  color-scheme: light;
  --page-bg-start: #f8fafc;
  --page-bg-end: #e2e8f0;
  --placeholder-text: rgba(15, 23, 42, 0.6);
  --qr-info-bg: rgba(15, 23, 42, 0.08);
  --qr-info-color: #0f172a;
  --qr-tooltip-bg: #ffffff;
  --qr-tooltip-color: #0f172a;
  --qr-tooltip-border: rgba(148, 163, 184, 0.4);
  --qr-tooltip-shadow: rgba(15, 23, 42, 0.18);
  --qr-focus-ring: rgba(59, 130, 246, 0.45);
  --theme-toggle-bg: rgba(15, 23, 42, 0.04);
  --theme-toggle-bg-hover: rgba(15, 23, 42, 0.08);
  --theme-toggle-border: rgba(15, 23, 42, 0.12);
  --theme-toggle-color: #0f172a;
  --theme-toggle-focus-ring: rgba(59, 130, 246, 0.4);
  --focus-ring-color: rgba(59, 130, 246, 0.45);
  --focus-ring-border: #2563eb;
  --field-invalid-ring: rgba(220, 53, 69, 0.45);
  --field-help-bg: rgba(148, 163, 184, 0.12);
  --field-help-border: rgba(148, 163, 184, 0.4);
  --picker-control-height: 2.875rem;
  --label-preview-bg: #f8fafc;
  --label-preview-check-1: rgba(148, 163, 184, 0.24);
  --label-preview-check-2: rgba(148, 163, 184, 0.1);
  --label-preview-check-size: 24px;
  --form-icon-filter: none;
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --range-track-bg: rgba(148, 163, 184, 0.45);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --page-bg-start: #0f172a;
  --page-bg-end: #1e293b;
  --placeholder-text: rgba(226, 232, 240, 0.7);
  --bs-body-bg: #0f172a;
  --bs-body-color: #e2e8f0;
  --bs-border-color: rgba(148, 163, 184, 0.45);
  --bs-dropdown-bg: #0f172a;
  --bs-dropdown-link-color: #e2e8f0;
  --bs-dropdown-link-hover-bg: #1e293b;
  --bs-dropdown-link-hover-color: #e2e8f0;
  --bs-dropdown-link-active-bg: #1e293b;
  --bs-form-control-bg: #111827;
  --bs-form-control-color: #e2e8f0;
  --bs-form-control-disabled-bg: rgba(15, 23, 42, 0.7);
  --bs-form-select-bg: #111827;
  --bs-form-select-color: #e2e8f0;
  --bs-form-select-disabled-bg: rgba(15, 23, 42, 0.7);
  --qr-info-bg: rgba(148, 163, 184, 0.22);
  --qr-info-color: #e2e8f0;
  --qr-tooltip-bg: #0f172a;
  --qr-tooltip-color: #e2e8f0;
  --qr-tooltip-border: rgba(148, 163, 184, 0.4);
  --qr-tooltip-shadow: rgba(8, 15, 30, 0.45);
  --qr-focus-ring: rgba(125, 211, 252, 0.45);
  --theme-toggle-bg: rgba(15, 23, 42, 0.45);
  --theme-toggle-bg-hover: rgba(15, 23, 42, 0.6);
  --theme-toggle-border: rgba(148, 163, 184, 0.55);
  --theme-toggle-color: #e2e8f0;
  --theme-toggle-focus-ring: rgba(125, 211, 252, 0.45);
  --focus-ring-color: rgba(125, 211, 252, 0.55);
  --focus-ring-border: #38bdf8;
  --field-invalid-ring: rgba(248, 113, 113, 0.6);
  --field-help-bg: rgba(148, 163, 184, 0.18);
  --field-help-border: rgba(148, 163, 184, 0.55);
  --label-preview-bg: #0b1120;
  --label-preview-check-1: rgba(148, 163, 184, 0.22);
  --label-preview-check-2: rgba(148, 163, 184, 0.1);
  --form-icon-filter: brightness(0) saturate(100%) invert(0.92);
  --range-track-bg: rgba(148, 163, 184, 0.4);
}

body {
  /*
   * Opt-in to the dynamic viewport units used by mobile Safari and pad safe
   * areas so the gradient background fills the notch and home indicator space
   * when the site is saved to the home screen.
   */
  background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  transition: background 0.3s ease;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: 'Poppins', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

main {
  max-width: 840px;
  margin-inline: auto;
}

.title-section p {
  max-width: 520px;
  margin: 0.5rem auto 0;
}

.upcoming-focus-areas-header {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.height-options > * {
  flex: 1 1 0;
}

.custom-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 0.75rem;
  background-color: rgba(15, 23, 42, 0.08);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: inherit;
}

:root[data-theme='dark'] .custom-icon-preview {
  background-color: rgba(148, 163, 184, 0.2);
}


.title-brand {
  flex-wrap: wrap;
}

.title-logo {
  width: clamp(3rem, 10vw, 4.5rem);
  aspect-ratio: 1 / 1;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('images/icons/logo.svg') center / contain no-repeat;
          mask: url('images/icons/logo.svg') center / contain no-repeat;
  flex-shrink: 0;
}

.title-heading {
  font-family: 'Poppins', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.75rem, 6vw, 3.25rem);
  line-height: 1.1;
  font-weight: 600;
}

.section-heading {
  font-family: 'Poppins', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 600;
}

.section-heading span {
  font-family: 'Poppins', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: inherit;
}

.collapsible-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.is-collapsed .collapsible-section-header {
  margin-bottom: 0;
}

.section-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--theme-toggle-border);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.section-toggle-button:hover {
  background-color: var(--theme-toggle-bg-hover);
}

#todo-list .card-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--bs-card-cap-bg, var(--bs-tertiary-bg));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(15, 23, 42, 0.24);
}

[data-theme='dark'] #todo-list .card-header,
[data-bs-theme='dark'] #todo-list .card-header {
  border-bottom-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(15, 23, 42, 0.6);
}

.status-tablist,
.category-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.status-tab,
.category-tab {
  --status-tab-accent: var(--bs-primary);
  --status-tab-accent-soft: rgba(var(--bs-primary-rgb), 0.12);
  --status-tab-border: rgba(var(--bs-primary-rgb), 0.35);
  --status-tab-text: var(--bs-primary);
  --status-tab-text-active: var(--bs-primary-text-emphasis, var(--bs-primary));
  --status-tab-hover-bg: rgba(var(--bs-primary-rgb), 0.08);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.375rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--status-tab-border, var(--bs-border-color));
  background-color: transparent;
  color: var(--status-tab-text, var(--bs-body-color));
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

:is(.status-tab, .category-tab):hover,
:is(.status-tab, .category-tab):focus-visible {
  border-color: var(--status-tab-accent);
  color: var(--status-tab-text-active, var(--status-tab-text));
}

:is(.status-tab, .category-tab):hover {
  background-color: var(--status-tab-hover-bg, var(--status-tab-accent-soft));
}

:is(.status-tab, .category-tab):focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.status-tab--active {
  color: var(--status-tab-text-active, var(--status-tab-text));
  background-color: var(--status-tab-accent-soft);
  border-color: var(--status-tab-accent);
  box-shadow: inset 0 0 0 1px var(--status-tab-accent);
}

.status-tab[data-variant='secondary'],
.category-tab[data-variant='secondary'] {
  --status-tab-accent: var(--bs-secondary);
  --status-tab-accent-soft: rgba(var(--bs-secondary-rgb), 0.15);
  --status-tab-border: rgba(var(--bs-secondary-rgb), 0.35);
  --status-tab-text: var(--bs-secondary);
  --status-tab-text-active: var(--bs-secondary-text-emphasis, var(--bs-secondary));
  --status-tab-hover-bg: rgba(var(--bs-secondary-rgb), 0.12);
}

.status-tab[data-variant='info'],
.category-tab[data-variant='info'] {
  --status-tab-accent: var(--bs-info);
  --status-tab-accent-soft: rgba(var(--bs-info-rgb), 0.18);
  --status-tab-border: rgba(var(--bs-info-rgb), 0.35);
  --status-tab-text: var(--bs-info);
  --status-tab-text-active: var(--bs-info-text-emphasis, var(--bs-info));
  --status-tab-hover-bg: rgba(var(--bs-info-rgb), 0.12);
}

.status-tab[data-variant='warning'],
.category-tab[data-variant='warning'] {
  --status-tab-accent: var(--bs-warning);
  --status-tab-accent-soft: rgba(var(--bs-warning-rgb), 0.2);
  --status-tab-border: rgba(var(--bs-warning-rgb), 0.4);
  --status-tab-text: var(--bs-warning-text-emphasis, var(--bs-warning));
  --status-tab-text-active: var(--bs-warning-text-emphasis, var(--bs-warning));
  --status-tab-hover-bg: rgba(var(--bs-warning-rgb), 0.18);
}

.status-tab[data-variant='success'],
.category-tab[data-variant='success'] {
  --status-tab-accent: var(--bs-success);
  --status-tab-accent-soft: rgba(var(--bs-success-rgb), 0.18);
  --status-tab-border: rgba(var(--bs-success-rgb), 0.35);
  --status-tab-text: var(--bs-success);
  --status-tab-text-active: var(--bs-success-text-emphasis, var(--bs-success));
  --status-tab-hover-bg: rgba(var(--bs-success-rgb), 0.12);
}

.status-tab[data-variant='danger'],
.category-tab[data-variant='danger'] {
  --status-tab-accent: var(--bs-danger);
  --status-tab-accent-soft: rgba(var(--bs-danger-rgb), 0.18);
  --status-tab-border: rgba(var(--bs-danger-rgb), 0.4);
  --status-tab-text: var(--bs-danger);
  --status-tab-text-active: var(--bs-danger-text-emphasis, var(--bs-danger));
  --status-tab-hover-bg: rgba(var(--bs-danger-rgb), 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .status-tab,
  .category-tab {
    transition: none;
  }
}

.todo-category-filter {
  min-width: 0;
  flex-shrink: 1;
}

.todo-category-filter .category-tablist {
  width: auto;
}

#todo-list .todo-item-categories {
  margin-top: 0.25rem;
}

.todo-item-categories {
  align-items: center;
}

#todo-list .todo-item-notes {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.todo-item-categories .badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-category-default {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
}

[data-theme='dark'] .badge-category-default,
[data-bs-theme='dark'] .badge-category-default {
  background-color: rgba(148, 163, 184, 0.16);
  color: var(--bs-body-color);
  border-color: rgba(148, 163, 184, 0.35);
}

#todo-list li[data-status] {
  position: relative;
  --todo-status-accent: var(--bs-border-color);
  --todo-status-background: var(--bs-tertiary-bg, var(--bs-list-group-bg));
  --todo-divider-color: var(--bs-border-color-translucent, var(--bs-border-color));
  border-inline-start: 0.35rem solid var(--todo-status-accent);
  padding-inline-start: calc(var(--bs-list-group-item-padding-x) + 0.5rem);
  background-color: var(--todo-status-background);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#todo-list li[data-status]:not(:last-child) {
  border-bottom: 1px solid var(--todo-divider-color);
}

[data-theme='dark'] #todo-list li[data-status],
[data-bs-theme='dark'] #todo-list li[data-status] {
  --todo-divider-color: color-mix(in srgb, var(--bs-border-color) 50%, transparent);
}

#todo-list li[data-status='todo'] {
  --todo-status-accent: var(--bs-secondary-border-subtle);
  --todo-status-background: var(--bs-secondary-bg-subtle);
}

#todo-list li[data-status='in-progress'] {
  --todo-status-accent: var(--bs-info-border-subtle);
  --todo-status-background: var(--bs-info-bg-subtle);
}

#todo-list li[data-status='in-review'] {
  --todo-status-accent: var(--bs-primary-border-subtle);
  --todo-status-background: var(--bs-primary-bg-subtle);
}

#todo-list li[data-status='blocked'] {
  --todo-status-accent: var(--bs-warning-border-subtle);
  --todo-status-background: var(--bs-warning-bg-subtle);
}

#todo-list li[data-status='done'] {
  --todo-status-accent: var(--bs-success-border-subtle);
  --todo-status-background: var(--bs-success-bg-subtle);
}

.section-toggle-button:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 0.2rem var(--theme-toggle-focus-ring);
}

.section-toggle-icon {
  transition: transform 0.2s ease;
}

.section-toggle-button[aria-expanded='false'] .section-toggle-icon {
  transform: rotate(180deg);
}

@media (min-width: 769px) {
  .section-toggle-button {
    display: none;
  }
}

[data-collapsible-content] {
  /*
   * Allow validation outlines and other visual affordances to render fully
   * when sections are expanded. The JavaScript animation logic toggles
   * `overflow: hidden` inline during transitions, so the default can safely be
   * visible without affecting the collapse behavior.
   */
  overflow: visible;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  will-change: max-height;
}

@media (prefers-reduced-motion: reduce) {
  [data-collapsible-content] {
    transition: none;
  }

  .section-toggle-icon {
    transition: none;
  }
}

.field-help {
  border-radius: 0.9rem;
  border: 1px solid var(--field-help-border);
  background-color: var(--field-help-bg);
  padding: 0.75rem 1rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.field-help[open] {
  border-color: rgba(59, 130, 246, 0.4);
}

.field-help-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.field-help-summary::-webkit-details-marker {
  display: none;
}


.label-suboptions {
  display: grid;
  gap: 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--bs-border-color, rgba(148, 163, 184, 0.35));
  overflow: visible;
  max-height: 400px;
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    margin-top 0.2s ease,
    padding-left 0.2s ease;
}

.label-suboptions.is-collapsed {
  opacity: 0;
  pointer-events: none;
  margin-top: 0 !important;
  border-left-color: transparent;
  max-height: 0;
  padding-left: 0;
  overflow: hidden;
}

.label-suboptions.is-collapsed .label-suboption {
  opacity: 0;
}

.label-suboption {
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .label-suboptions {
    transition: none;
  }

  .label-suboption {
    transition: none;
  }
}

.field-help-summary i {
  color: #2563eb;
}

.field-help-summary:focus-visible {
  outline: 2px solid var(--theme-toggle-focus-ring);
  outline-offset: 2px;
}

:root[data-theme='dark'] .field-help-summary i {
  color: #93c5fd;
}

.field-help-body {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.validation-message {
  font-weight: 600;
}

.fuse-type-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  min-height: 100%;
  padding: 0.85rem 1rem;
}

.fuse-type-option__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.fuse-type-option__icon img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--form-icon-filter);
  transition: filter 0.2s ease;
}

.fuse-type-option__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

.actions .btn:disabled,
.actions .btn.disabled {
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  box-shadow: none;
}

.actions .btn.btn-primary:disabled,
.actions .btn.btn-primary.disabled,
.actions .btn.btn-outline-primary:disabled,
.actions .btn.btn-outline-primary.disabled {
  color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
  #fuse-selection-row {
    --bs-gutter-x: 0.75rem;
  }

  #fuse-selection-row > [class*='col-'] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .actions .btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding-inline: 0.75rem;
    font-size: 0.95rem;
  }
}

.fuse-type-option__title {
  font-weight: 600;
}

.fuse-type-option__description {
  font-size: 0.95rem;
}

/*
 * Previously `.field-invalid` added an outline via a pseudo-element.  That
 * extra ring duplicated Bootstrap's native validation styling, so the
 * pseudo-element is disabled and positioning resets to their defaults to keep
 * the layout unchanged while letting `.is-invalid` controls provide the visual
 * cue.
 */
.field-invalid {
  position: static;
  z-index: auto;
  isolation: auto;
}

.field-invalid::after {
  content: none;
}

.bolt-drive-picker {
  position: relative;
  display: block;
}

.bolt-drive-picker.is-open {
  z-index: 25;
}

.bolt-drive-picker__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color, rgba(148, 163, 184, 0.38));
  background-color: var(--bs-body-bg, #ffffff);
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  font-size: 1rem;
  line-height: 1.35;
  min-height: var(--picker-control-height);
  height: var(--picker-control-height);
}

.bolt-drive-picker__button:focus-visible {
  outline: none;
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.bolt-drive-picker__button:hover {
  background-color: rgba(148, 163, 184, 0.08);
}

.bolt-drive-picker__button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.bolt-drive-picker.is-disabled .bolt-drive-picker__button {
  cursor: not-allowed;
}

.bolt-drive-picker__button.is-invalid,
.bolt-drive-picker.is-invalid .bolt-drive-picker__button {
  border-color: var(--bs-danger-border-subtle, #f1aeb5);
  box-shadow: 0 0 0 0.25rem var(--field-invalid-ring);
}

.picker-input {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color, rgba(148, 163, 184, 0.38));
  background-color: var(--bs-body-bg, #ffffff);
  padding: 0.625rem 0.875rem;
  min-height: var(--picker-control-height);
  height: var(--picker-control-height);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.picker-input:focus {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.picker-input:not(:disabled):hover {
  background-color: rgba(148, 163, 184, 0.08);
}

.picker-input:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.picker-input.is-invalid,
.is-invalid .picker-input,
.picker-input.is-invalid:focus,
.is-invalid .picker-input:focus {
  border-color: var(--bs-danger-border-subtle, #f1aeb5);
  box-shadow: 0 0 0 0.25rem var(--field-invalid-ring);
}

.picker-input-with-icon {
  position: relative;
}

.picker-input-with-icon__icon {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.picker-input-with-icon.has-icon .picker-input-with-icon__icon {
  display: inline-flex;
}

.picker-input-with-icon__icon-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  filter: var(--form-icon-filter);
  transition: filter 0.2s ease;
}

.picker-input-with-icon__input {
  padding-left: 0.875rem;
}

.picker-input-with-icon.has-icon .picker-input-with-icon__input {
  padding-left: calc(0.875rem + 2.25rem + 0.75rem);
}

.bolt-drive-picker__current {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.bolt-drive-picker__current-label {
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bolt-drive-picker__current-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background-color: transparent;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.bolt-drive-picker__current-icon--no-background {
  background: none !important;
  border-radius: 0;
  overflow: visible;
}

.bolt-drive-picker__current-icon.is-empty {
  visibility: hidden;
}

.bolt-drive-picker__current-icon-image.is-rotated-90,
.bolt-drive-picker__option-icon-image.is-rotated-90 {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.bolt-drive-picker__current-icon-image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
  filter: var(--form-icon-filter);
  transition: filter 0.2s ease;
}

.bolt-drive-picker__current-icon-image--omega {
  max-width: 80%;
  max-height: 80%;
  margin: auto;
}

.bolt-drive-picker__current-icon-glyph {
  display: inline-block;
  min-width: 1.5rem;
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.bolt-drive-picker__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.bolt-drive-picker__chevron::before {
  content: '';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.bolt-drive-picker.is-open .bolt-drive-picker__chevron::before {
  transform: rotate(-135deg);
}

.bolt-drive-picker__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  background-color: var(--bs-body-bg, #ffffff);
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color, rgba(148, 163, 184, 0.32));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.15);
  padding: 0.5rem 0.25rem;
  margin: 0;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  z-index: 30;
}

.bolt-drive-picker__list[hidden] {
  display: none;
}

.bolt-drive-picker__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.65rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  font-weight: 600;
}

.bolt-drive-picker__option:focus {
  outline: none;
}

.bolt-drive-picker__option:hover,
.bolt-drive-picker__option:focus {
  background-color: rgba(37, 99, 235, 0.12);
}

.bolt-drive-picker__option.is-selected {
  background-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.bolt-drive-picker__option-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.bolt-drive-picker__option-icon.is-empty {
  visibility: hidden;
}

.bolt-drive-picker__option-icon-image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
  filter: var(--form-icon-filter);
  transition: filter 0.2s ease;
}

.bolt-drive-picker__option-icon-glyph {
  display: inline-block;
  min-width: 1.5rem;
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.bolt-drive-picker__option-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bolt-drive-picker__group {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #64748b);
}

.bolt-drive-picker__group + .bolt-drive-picker__option {
  margin-top: 0.25rem;
}

.bolt-drive-picker__option + .bolt-drive-picker__group {
  margin-top: 0.5rem;
}

.bolt-head-picker .bolt-drive-picker__current-icon-image,
.bolt-head-picker .bolt-drive-picker__option-icon-image {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

:root[data-theme='dark'] .bolt-drive-picker__button {
  background-color: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.42);
}

:root[data-theme='dark'] .picker-input {
  background-color: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.42);
  color: #e2e8f0;
}

:root[data-theme='dark'] .picker-input:not(:disabled):hover {
  background-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme='dark'] .bolt-drive-picker__button:hover {
  background-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme='dark'] .bolt-drive-picker__list {
  background-color: rgba(15, 23, 42, 0.98);
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 18px 36px rgba(8, 15, 30, 0.55);
}

:root[data-theme='dark'] .bolt-drive-picker__option:hover,
:root[data-theme='dark'] .bolt-drive-picker__option:focus {
  background-color: rgba(148, 163, 184, 0.28);
}

:root[data-theme='dark'] .bolt-drive-picker__option.is-selected {
  background-color: rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
}

.size-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
  gap: 0.125rem;
}

.label-preview-viewport {
  position: relative;
  width: 100%;
}

.label-preview-viewport--scaled {
  overflow: hidden;
}

.label-preview-viewport--scaled .label-preview {
  position: absolute;
  left: 50%;
  top: 0;
}

.label-preview {
  position: relative;
  margin: 0 auto;
  border-radius: 0;
  background-color: var(--label-preview-bg);
  background-image: repeating-conic-gradient(
    var(--label-preview-check-1) 0deg 90deg,
    var(--label-preview-check-2) 90deg 180deg
  );
  background-size: var(--label-preview-check-size) var(--label-preview-check-size);
  overflow: visible;
  border: 0;
}

.label-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 0;
}

.label-preview > * {
  position: relative;
  z-index: 1;
}

.label-preview-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.label-frame {
  fill: #ffffff;
  stroke: rgba(100, 116, 139, 0.6);
  stroke-width: 0.25;
  vector-effect: non-scaling-stroke;
}

.preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--placeholder-text);
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  transition: color 0.3s ease;
}

.preview-placeholder .placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.75rem;
  opacity: 0.65;
}

.preview-placeholder .placeholder-text {
  font-size: 0.95rem;
}

.hardware-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.label-inner.has-hardware-image .hardware-icon {
  align-self: stretch;
  height: calc(100% + var(--label-padding-y) * 2);
}

.label-inner.has-hardware-image .hardware-icon:not(:empty) {
  margin-inline-start: calc(-1 * var(--label-padding-inline-start));
  margin-left: calc(-1 * var(--label-padding-inline-start));
  margin-block-start: calc(-1 * var(--label-padding-y));
  margin-block-end: calc(-1 * var(--label-padding-y));
  margin-top: calc(-1 * var(--label-padding-y));
  margin-bottom: calc(-1 * var(--label-padding-y));
  justify-content: flex-start;
}

.hardware-icon svg {
  width: auto;
}

.hardware-icon img.hardware-fallback-image {
  display: block;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
}

.hardware-icon img.hardware-photo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(100%);
}

.hardware-icon img.hardware-illustration {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.label-inner.has-hardware-image .text-block {
  align-items: center;
  text-align: center;
}

.bolt-image-group {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.25rem;
  max-height: 100%;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
}

.bolt-image-group img {
  display: block;
  max-height: 100%;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
}

.bolt-drive-view {
  transform: none;
}

.custom-image-preview {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
}

.custom-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 48px;
  padding: 4px;
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #000000;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  flex: 1;
  gap: 0.2em;
}

.text-line {
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#line1 {
  white-space: nowrap;
}

.text-line.small {
  font-size: 0.7em;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-code {
  display: none;
  border-radius: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  align-self: center;
}

.label-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--label-gap, 12px);
  box-sizing: border-box;
  border-radius: 0;
  background: #ffffff;
  border: 0;
  box-shadow: none;
  color: #000000;
  font-family: 'Oswald', 'Poppins', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
  z-index: 1;
  --label-gap: 12px;
  --label-padding-x: 14px;
  --label-padding-y: 10px;
  --label-padding-inline-start: var(--label-padding-x);
  --label-padding-inline-end: var(--label-padding-x);
  padding: var(--label-padding-y) var(--label-padding-inline-end) var(--label-padding-y)
    var(--label-padding-inline-start);
}

.label-inner::before {
  content: none;
}

.label-inner > * {
  position: relative;
  z-index: 1;
}

.qr-info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background-color: var(--qr-info-bg);
  color: var(--qr-info-color);
  font-size: 1rem;
  line-height: 1;
  cursor: default;
  flex-shrink: 0;
  user-select: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.qr-info-icon i {
  line-height: 1;
}

.qr-info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 0.75rem);
  transform: translate(-50%, -10px);
  background-color: var(--qr-tooltip-bg);
  color: var(--qr-tooltip-color);
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--qr-tooltip-border);
  box-shadow: 0 10px 30px var(--qr-tooltip-shadow);
  font-size: 0.75rem;
  line-height: 1.35;
  max-width: 240px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  z-index: 10;
}

.qr-info-icon::before {
  content: '';
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--qr-tooltip-bg);
  border-left: 1px solid var(--qr-tooltip-border);
  border-top: 1px solid var(--qr-tooltip-border);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
  z-index: 9;
}

.qr-info-icon:hover::after,
.qr-info-icon:focus-visible::after,
.qr-info-icon:hover::before,
.qr-info-icon:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.qr-info-icon:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 2px var(--qr-focus-ring);
}

.theme-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.theme-toggle-wrapper > * {
  flex-shrink: 0;
}

.theme-utility-link,
.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--theme-toggle-border);
  background-color: var(--theme-toggle-bg);
  color: var(--theme-toggle-color);
  font-family: 'Barlow', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-utility-link {
  text-decoration: none;
}

.theme-toggle-button {
  cursor: pointer;
}

.theme-utility-link:hover,
.theme-toggle-button:hover {
  background-color: var(--theme-toggle-bg-hover);
  color: var(--theme-toggle-color);
}

.theme-utility-link:focus-visible,
.theme-toggle-button:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: calc(var(--focus-outline-offset) + 2px);
  box-shadow: 0 0 0 0.2rem var(--theme-toggle-focus-ring);
  text-decoration: none;
}

.theme-utility-icon {
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle-text {
  font-size: 0.85rem;
}

/*
 * Provide highly visible focus indicators across form controls, radio button
 * groups that use the Bootstrap `.btn-check` pattern, and the range slider.
 * Exclude invalid controls so their red validation state remains dominant
 * when focused.
 */
.form-control:focus:not(.is-invalid),
.form-select:focus:not(.is-invalid) {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
}

:root[data-theme='dark'] .form-select {
  background-color: var(--bs-form-select-bg);
  color: var(--bs-form-select-color);
  border-color: var(--bs-border-color);
  background-image: var(
    --bs-form-select-bg-img,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2.75 5.75 8 11.25l5.25-5.5'/%3e%3c/svg%3e")
  );
}

:root[data-theme='dark'] .form-control {
  background-color: var(--bs-form-control-bg);
  color: var(--bs-form-control-color);
  border-color: var(--bs-border-color);
}

:root[data-theme='dark'] .form-select:disabled {
  background-color: var(--bs-form-select-disabled-bg);
}

:root[data-theme='dark'] .form-select option,
:root[data-theme='dark'] .form-select optgroup {
  background-color: #0f172a;
  color: #e2e8f0;
}

:root[data-theme='dark'] .form-select option:checked,
:root[data-theme='dark'] .form-select option:hover {
  background-color: #1e293b;
  color: #e2e8f0;
}

.form-check-input:focus:not(.is-invalid) {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
}

.btn-check:focus-visible + .btn {
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
  border-color: var(--focus-ring-border);
  z-index: 1;
}

.form-range:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-border);
  outline-offset: var(--focus-outline-offset);
}

.form-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  background-color: var(--range-track-bg);
  border-radius: 999px;
}

.form-range::-moz-range-track {
  height: 0.5rem;
  background-color: var(--range-track-bg);
  border-radius: 999px;
  border: none;
}

.form-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}

.form-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus-ring-border);
  outline-offset: 2px;
}

/*
 * Bolster dark mode contrast so that text and icons meet WCAG AA levels when
 * placed on secondary surfaces.
 */
:root[data-theme='dark'] .card {
  background-color: #111827;
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme='dark'] .bg-body-secondary {
  background-color: #1f2937 !important;
  color: #f1f5f9 !important;
}

:root[data-theme='dark'] .bg-body-secondary.border {
  border-color: rgba(148, 163, 184, 0.6) !important;
}

:root[data-theme='dark'] .bg-body-secondary .text-secondary {
  color: #cbd5f5 !important;
}

:root[data-theme='dark'] .text-muted {
  color: rgba(226, 232, 240, 0.78) !important;
}

@media (min-width: 576px) {
  #thread-length-row,
  #bolt-standard-group {
    --thread-length-gap: 1rem;
    gap: var(--thread-length-gap);
  }

  #thread-length-row > .thread-length-field,
  #bolt-standard-group > .thread-length-field {
    flex: 0 0 calc(50% - (var(--thread-length-gap) / 2));
    max-width: calc(50% - (var(--thread-length-gap) / 2));
  }
}

@media (max-width: 575.98px) {
  .theme-toggle-wrapper {
    justify-content: center;
  }

  #thread-length-row,
  #bolt-standard-group {
    --thread-length-gap: 0.75rem;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--thread-length-gap);
    row-gap: var(--thread-length-gap);
  }

  #thread-length-row > .thread-length-field,
  #bolt-standard-group > .thread-length-field {
    padding-left: 0;
    padding-right: 0;
  }

  #thread-length-row.single-column,
  #bolt-standard-group.single-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

#thread-length-row.single-column > .thread-length-field,
#bolt-standard-group.single-column > .thread-length-field {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.part-type-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.part-type-picker__chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color, rgba(148, 163, 184, 0.38));
  background-color: var(--bs-body-bg, #ffffff);
  color: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  min-height: var(--picker-control-height);
  height: var(--picker-control-height);
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}

.part-type-picker__chip:focus-visible {
  outline: none;
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.part-type-picker__chip:hover {
  background-color: rgba(148, 163, 184, 0.08);
}

.part-type-picker__chip[aria-expanded='true'] {
  border-color: rgba(59, 130, 246, 0.35);
  background-color: rgba(59, 130, 246, 0.12);
}

.part-type-picker__chip-thumbnail {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.part-type-picker__chip-image {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  filter: var(--form-icon-filter);
}

.part-type-picker__chip-image.is-rotated-90 {
  transform: rotate(90deg);
}

.part-type-picker__chip-fallback {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.32), rgba(148, 163, 184, 0.18));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.part-type-picker__chip-fallback--icon {
  background: transparent;
}

.part-type-picker__chip-fallback--icon i {
  font-size: 1.125rem;
  line-height: 1;
  color: var(--bs-body-color, #0f172a);
}

.part-type-picker__chip-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.part-type-picker__dialog {
  border: none;
  border-radius: 1.25rem;
  padding: 0;
  max-width: min(640px, calc(100vw - 2rem));
  width: min(640px, calc(100vw - 2rem));
  box-shadow: 0 32px 56px rgba(15, 23, 42, 0.22);
  background: transparent;
  color: inherit;
}

.part-type-picker__dialog::backdrop {
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(3px);
}

.part-type-picker__dialog-surface {
  background-color: var(--bs-body-bg, #ffffff);
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  box-shadow: 0 32px 56px rgba(15, 23, 42, 0.22);
}

.part-type-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
}

.part-type-picker__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.part-type-picker__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: rgba(100, 116, 139, 0.95);
}

.part-type-picker__close {
  border: none;
  background: rgba(148, 163, 184, 0.16);
  color: inherit;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.part-type-picker__close-icon {
  position: relative;
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

.part-type-picker__close-icon::before,
.part-type-picker__close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.part-type-picker__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.part-type-picker__close:hover {
  background: rgba(148, 163, 184, 0.28);
}

.part-type-picker__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.part-type-picker__search-row {
  padding: 0 1.5rem 0;
}

.part-type-picker__search {
  width: 100%;
  border-radius: 0.85rem;
  border: 1px solid var(--bs-border-color, rgba(148, 163, 184, 0.38));
  background-color: var(--bs-body-bg, #ffffff);
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.part-type-picker__search:focus {
  outline: none;
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.part-type-picker__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0.75rem;
}

.part-type-picker__filter {
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(148, 163, 184, 0.16);
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.part-type-picker__filter:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.45);
}

.part-type-picker__filter.is-active,
.part-type-picker__filter[aria-pressed='true'] {
  background: rgba(59, 130, 246, 0.24);
  border-color: rgba(59, 130, 246, 0.55);
  color: var(--bs-body-color, #0f172a);
}

.part-type-picker__recent {
  padding: 1rem 1.5rem 1.5rem;
  margin: 0 1.5rem 1.75rem;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.part-type-picker__section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: rgba(71, 85, 105, 0.95);
}

.part-type-picker__recent-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 112px);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.part-type-picker__grid {
  padding: 0 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1rem;
}

.part-type-picker__empty {
  padding: 0 1.5rem;
  margin: 0;
  font-size: 0.95rem;
  color: rgba(100, 116, 139, 0.95);
}

.part-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.12);
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-align: center;
  color: inherit;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

.part-type-card:focus-visible {
  outline: none;
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-ring-color);
}

.part-type-card:hover {
  border-color: rgba(59, 130, 246, 0.55);
  transform: translateY(-2px);
}

.part-type-card.is-selected {
  border-color: rgba(59, 130, 246, 0.75);
  background: rgba(59, 130, 246, 0.16);
  box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.18);
}

.part-type-card__thumb {
  width: 100%;
  height: min(4rem, 52%);
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.part-type-card__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: var(--form-icon-filter);
}

.part-type-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--bs-body-color, #0f172a);
}

.part-type-card__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.25;
}

.part-type-card--recent {
  min-width: 7rem;
}

.part-type-picker__fallback-backdrop {
  position: fixed;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(3px);
  z-index: 1050;
}

.part-type-picker__fallback-backdrop[hidden] {
  display: none;
}

body.part-type-picker-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .part-type-picker__dialog-surface {
    max-height: calc(100vh - 2rem);
  }
  .part-type-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .part-type-picker__header {
    padding: 1.15rem 1rem 0.85rem;
  }
  .part-type-picker__search-row,
  .part-type-picker__filters,
  .part-type-picker__recent,
  .part-type-picker__grid,
  .part-type-picker__empty {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .part-type-picker__recent {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

:root[data-theme='dark'] .part-type-picker__chip {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.3);
}

:root[data-theme='dark'] .part-type-picker__chip:hover {
  background-color: rgba(148, 163, 184, 0.18);
}

:root[data-theme='dark'] .part-type-picker__chip[aria-expanded='true'] {
  background-color: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.6);
}

:root[data-theme='dark'] .part-type-picker__chip-thumbnail {
  background: none;
}

:root[data-theme='dark'] .part-type-picker__dialog-surface {
  background-color: rgba(15, 23, 42, 0.98);
  box-shadow: 0 32px 56px rgba(2, 6, 23, 0.65);
}

:root[data-theme='dark'] .part-type-picker__recent {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.65);
}

:root[data-theme='dark'] .part-type-picker__subtitle,
:root[data-theme='dark'] .part-type-picker__section-title,
:root[data-theme='dark'] .part-type-picker__empty {
  color: rgba(148, 163, 184, 0.85);
}

:root[data-theme='dark'] .part-type-picker__close {
  background: rgba(148, 163, 184, 0.25);
}

:root[data-theme='dark'] .part-type-picker__close:hover {
  background: rgba(59, 130, 246, 0.35);
}

:root[data-theme='dark'] .part-type-picker__search {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.95);
}

:root[data-theme='dark'] .part-type-picker__filter {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(71, 85, 105, 0.3);
}

:root[data-theme='dark'] .part-type-picker__filter.is-active,
:root[data-theme='dark'] .part-type-picker__filter[aria-pressed='true'] {
  background: rgba(59, 130, 246, 0.35);
  border-color: rgba(59, 130, 246, 0.7);
  color: rgba(226, 232, 240, 0.95);
}

:root[data-theme='dark'] .part-type-card {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.7);
}

:root[data-theme='dark'] .part-type-card:hover {
  border-color: rgba(96, 165, 250, 0.75);
}

:root[data-theme='dark'] .part-type-card.is-selected {
  border-color: rgba(96, 165, 250, 0.95);
  background: rgba(37, 99, 235, 0.32);
}

:root[data-theme='dark'] .part-type-card__thumb {
  background: transparent;
}