/* V1.32Beta-job-change-gallery2
   Profession selection keeps the approved character master as the only card art.
   Profession identity is carried by restrained color, type and the spec crest. */

html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog {
  --job-selected-color: #7fe3ff;
  --job-selected-secondary: #f1d991;
  --job-selected-deep: #071727;
  --job-selected-role-color: #caa7ff;
  --job-hall-art: url("assets/ui/job-change/job-change-hall-of-destinies-gpt-image2-v1.webp?v=V1.32Beta-job-change-gallery1");
}

html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) {
  padding: clamp(10px, 1.8vw, 24px) !important;
  background: rgba(2, 7, 13, 0.2) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-backdrop {
  background:
    linear-gradient(90deg, rgba(5, 12, 20, 0.72), rgba(5, 13, 23, 0.5), rgba(5, 12, 20, 0.72)),
    rgba(3, 8, 14, 0.66) !important;
  backdrop-filter: blur(11px) saturate(0.78) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual {
  position: relative !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: min(1120px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  max-height: calc(100dvh - 28px) !important;
  color: #f3f8fc !important;
  background:
    linear-gradient(180deg, rgba(5, 14, 24, 0.3), rgba(4, 11, 19, 0.72)),
    var(--job-hall-art) center / cover no-repeat !important;
  border: 1px solid color-mix(in srgb, var(--job-selected-color) 62%, #d6bd75) !important;
  border-radius: 8px !important;
  box-shadow:
    0 34px 90px rgba(0, 5, 12, 0.72),
    0 0 0 2px rgba(231, 244, 252, 0.78),
    0 0 0 4px color-mix(in srgb, var(--job-selected-color) 34%, rgba(200, 168, 91, 0.38)),
    inset 0 0 80px rgba(1, 8, 15, 0.36) !important;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--job-selected-color) 13%, transparent),
      transparent 24% 76%,
      color-mix(in srgb, var(--job-selected-secondary) 10%, transparent)),
    linear-gradient(180deg, rgba(2, 8, 14, 0.05), rgba(2, 7, 13, 0.38)) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-head {
  position: relative !important;
  z-index: 4 !important;
  grid-template-columns: 58px minmax(0, 1fr) 42px !important;
  min-height: 82px !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  color: #eef8ff !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--job-selected-color) 15%, rgba(5, 15, 25, 0.96)),
      rgba(5, 15, 25, 0.88) 30% 70%,
      rgba(5, 15, 25, 0.96)),
    rgba(5, 15, 25, 0.92) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--job-selected-color) 48%, rgba(222, 190, 112, 0.62)) !important;
  box-shadow: 0 8px 24px rgba(0, 7, 13, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  overflow: hidden !important;
  background:
    var(--job-selected-spec-icon) center / 78% no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--job-selected-color) 40%, #102437), #06111c 72%) !important;
  border: 1px solid color-mix(in srgb, var(--job-selected-color) 72%, #f1d99a) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 2px rgba(239, 247, 251, 0.82),
    0 0 0 4px color-mix(in srgb, var(--job-selected-color) 35%, transparent),
    0 0 24px color-mix(in srgb, var(--job-selected-color) 46%, transparent),
    inset 0 0 14px rgba(255, 255, 255, 0.14) !important;
  transform: none !important;
  transition: background-image 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid color-mix(in srgb, var(--job-selected-secondary) 58%, transparent) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil > i {
  display: none !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading small {
  color: color-mix(in srgb, var(--job-selected-color) 72%, #ffe7a8) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--job-selected-color) 72%, #ffe7a8) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading strong {
  color: #f4f9fc !important;
  -webkit-text-fill-color: #f4f9fc !important;
  font-size: clamp(22px, 2.15vw, 30px) !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72), 0 0 18px color-mix(in srgb, var(--job-selected-color) 24%, transparent) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading span {
  color: rgba(218, 232, 241, 0.78) !important;
  -webkit-text-fill-color: rgba(218, 232, 241, 0.78) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  color: #eef8ff !important;
  background: rgba(7, 20, 32, 0.8) !important;
  border: 1px solid color-mix(in srgb, var(--job-selected-color) 54%, rgba(220, 239, 249, 0.66)) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 5, 10, 0.34) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-close:hover {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--job-selected-color) 24%, rgba(7, 20, 32, 0.92)) !important;
  border-color: color-mix(in srgb, var(--job-selected-color) 76%, #f1d89a) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-stage {
  position: relative !important;
  z-index: 2 !important;
  min-height: 0 !important;
  padding: clamp(14px, 2vw, 24px) !important;
  overflow: auto !important;
  background:
    linear-gradient(180deg, rgba(2, 8, 14, 0.28), rgba(2, 8, 14, 0.5)),
    linear-gradient(90deg, rgba(8, 25, 39, 0.52), transparent 24% 76%, rgba(8, 25, 39, 0.52)) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf.preview-job-shelf:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: min(920px, 100%) !important;
  max-width: 100% !important;
  gap: clamp(14px, 2vw, 22px) !important;
  margin: 0 auto !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card.preview-job-card {
  --job-profession-color: #7fe3ff;
  --job-profession-secondary: #f1d991;
  --job-profession-deep: #071727;
  --job-role-color: #caa7ff;
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(310px, 1fr) auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  color: #eef8ff !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--job-profession-deep) 82%, rgba(12, 27, 40, 0.88)),
      color-mix(in srgb, var(--job-profession-deep) 92%, #02070c)) !important;
  border: 2px solid color-mix(in srgb, var(--job-profession-color) 64%, rgba(222, 190, 112, 0.58)) !important;
  border-radius: 7px !important;
  box-shadow:
    0 18px 34px rgba(0, 5, 10, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 38px color-mix(in srgb, var(--job-profession-color) 7%, transparent) !important;
  isolation: isolate !important;
  filter: saturate(0.92) brightness(0.93) !important;
  transition: translate 180ms ease, filter 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card.preview-job-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  background:
    linear-gradient(90deg, var(--job-profession-color), transparent 18% 82%, var(--job-profession-color)) top / 100% 3px no-repeat,
    linear-gradient(180deg, var(--job-profession-color), transparent 32% 68%, var(--job-profession-secondary)) left / 3px 100% no-repeat,
    linear-gradient(180deg, var(--job-profession-secondary), transparent 32% 68%, var(--job-profession-color)) right / 3px 100% no-repeat !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card.preview-job-card:hover:not(:disabled) {
  z-index: 3 !important;
  translate: 0 -4px !important;
  filter: saturate(1.03) brightness(1.02) !important;
  border-color: color-mix(in srgb, var(--job-profession-color) 82%, #ffe9a9) !important;
  box-shadow:
    0 22px 42px rgba(0, 5, 10, 0.54),
    0 0 0 1px rgba(255, 255, 255, 0.74),
    0 0 24px color-mix(in srgb, var(--job-profession-color) 32%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--job-profession-color) 10%, transparent) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card.preview-job-card.selected {
  z-index: 4 !important;
  translate: 0 -2px !important;
  filter: saturate(1.1) brightness(1.035) !important;
  border-color: var(--job-profession-color) !important;
  box-shadow:
    0 23px 46px rgba(0, 5, 10, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.92),
    0 0 0 4px color-mix(in srgb, var(--job-profession-color) 68%, transparent),
    0 0 34px color-mix(in srgb, var(--job-profession-color) 48%, transparent),
    inset 0 0 48px color-mix(in srgb, var(--job-profession-color) 14%, transparent) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card.preview-job-card.selected::after {
  content: "✓" !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 18 !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  color: #07111a !important;
  background: color-mix(in srgb, var(--job-profession-color) 78%, #ffffff) !important;
  border: 1px solid #fff2c5 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(3, 10, 17, 0.78), 0 0 18px var(--job-profession-color) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-art.preview-job-card-art {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background-color: color-mix(in srgb, var(--job-profession-deep) 84%, #0b1721) !important;
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--job-profession-color) 15%, rgba(3, 9, 15, 0.46)),
      transparent 19% 81%,
      color-mix(in srgb, var(--job-profession-secondary) 13%, rgba(3, 9, 15, 0.48))),
    var(--character-art) !important;
  background-size: cover, contain !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--job-profession-color) 55%, rgba(222, 190, 112, 0.5)) !important;
  box-shadow: inset 0 -44px 45px rgba(2, 7, 12, 0.34) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-art.preview-job-card-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--job-profession-color) 14%, transparent),
      transparent 22% 78%,
      color-mix(in srgb, var(--job-profession-secondary) 12%, transparent)),
    linear-gradient(180deg, transparent 58%, rgba(2, 6, 11, 0.76)) !important;
  animation: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-art.preview-job-card-art::after {
  content: "" !important;
  position: absolute !important;
  left: 13% !important;
  right: 13% !important;
  bottom: 0 !important;
  z-index: 6 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--job-profession-color), var(--job-role-color), transparent) !important;
  box-shadow: 0 0 16px var(--job-profession-color) !important;
  animation: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-emblem {
  position: absolute !important;
  top: 13px !important;
  left: 13px !important;
  z-index: 12 !important;
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  background:
    var(--job-spec-icon) center / 80% no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--job-profession-color) 34%, #122635), #061019 72%) !important;
  border: 1px solid color-mix(in srgb, var(--job-profession-color) 72%, #f5de9d) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 2px rgba(3, 10, 17, 0.78),
    0 0 18px color-mix(in srgb, var(--job-profession-color) 48%, transparent),
    inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-art.preview-job-card-art
  > .preview-job-card-inscription.card-inscription {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: auto !important;
  bottom: 12px !important;
  z-index: 11 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: auto !important;
  max-width: none !important;
  gap: 3px !important;
  padding: 0 !important;
  text-align: right !important;
  transform: none !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-art
  > .preview-job-card-inscription.card-inscription
  small {
  padding: 5px 9px !important;
  color: var(--job-profession-color) !important;
  -webkit-text-fill-color: var(--job-profession-color) !important;
  background: rgba(3, 9, 15, 0.86) !important;
  border: 1px solid color-mix(in srgb, var(--job-profession-color) 52%, transparent) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  text-shadow: 0 1px 3px #000 !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-art
  > .preview-job-card-inscription.card-inscription
  strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(21px, 2vw, 29px) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.96), 0 0 16px rgba(0, 0, 0, 0.7) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card.preview-job-card
  > .preview-job-card-copy.preview-job-card-copy {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "path tags"
    "skill tags" !important;
  align-content: center !important;
  align-items: center !important;
  min-height: 108px !important;
  gap: 5px 12px !important;
  padding: 12px 14px !important;
  color: #eef8ff !important;
  text-align: left !important;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--job-profession-color) 14%, var(--job-profession-deep)),
      color-mix(in srgb, var(--job-profession-deep) 92%, #02070c) 52%,
      color-mix(in srgb, var(--job-role-color) 9%, var(--job-profession-deep))) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-path {
  grid-area: path !important;
  display: flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
  gap: 9px !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-path small {
  flex: 0 1 auto !important;
  width: auto !important;
  color: color-mix(in srgb, var(--job-profession-color) 78%, #ffe6a8) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--job-profession-color) 78%, #ffe6a8) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-align: left !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-path strong {
  flex: 1 1 auto !important;
  width: auto !important;
  color: #f8fbfd !important;
  -webkit-text-fill-color: #f8fbfd !important;
  font-size: clamp(19px, 1.8vw, 24px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--job-profession-color) 25%, transparent) !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-copy > em {
  grid-area: skill !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 8px !important;
  overflow: hidden !important;
  color: color-mix(in srgb, var(--job-role-color) 72%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--job-role-color) 72%, #ffffff) !important;
  background: color-mix(in srgb, var(--job-role-color) 12%, rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid color-mix(in srgb, var(--job-role-color) 42%, transparent) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 780 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-tags {
  grid-area: tags !important;
  display: grid !important;
  align-content: center !important;
  justify-items: end !important;
  gap: 5px !important;
}

html body:not(.maintenance-mode)
  > #previewJobDialog
  #previewJobShelf#previewJobShelf
  .preview-job-card-tags b {
  display: block !important;
  width: fit-content !important;
  max-width: 88px !important;
  padding: 4px 7px !important;
  overflow: hidden !important;
  color: color-mix(in srgb, var(--job-profession-secondary) 78%, #ffffff) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-left: 2px solid var(--job-profession-color) !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-foot {
  position: relative !important;
  z-index: 4 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 78px !important;
  gap: 18px !important;
  padding: 10px 18px !important;
  color: #eef8ff !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--job-selected-color) 13%, rgba(4, 14, 23, 0.96)),
      rgba(4, 14, 23, 0.96) 38% 72%,
      color-mix(in srgb, var(--job-selected-deep) 82%, rgba(4, 14, 23, 0.96))) !important;
  border-top: 1px solid color-mix(in srgb, var(--job-selected-color) 52%, rgba(220, 188, 109, 0.58)) !important;
  box-shadow: 0 -9px 24px rgba(0, 6, 12, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 52px !important;
  align-content: center !important;
  gap: 2px !important;
  padding-left: 62px !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  background:
    var(--job-selected-spec-icon) center / 78% no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--job-selected-color) 38%, #102331), #061019 72%) !important;
  border: 1px solid color-mix(in srgb, var(--job-selected-color) 72%, #f1d793) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 17px color-mix(in srgb, var(--job-selected-color) 38%, transparent) !important;
  transform: translateY(-50%) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy small {
  color: rgba(202, 220, 231, 0.72) !important;
  -webkit-text-fill-color: rgba(202, 220, 231, 0.72) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy strong {
  color: color-mix(in srgb, var(--job-selected-color) 60%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--job-selected-color) 60%, #ffffff) !important;
  text-shadow: 0 0 17px color-mix(in srgb, var(--job-selected-color) 34%, transparent) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm {
  min-width: 188px !important;
  min-height: 48px !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--job-selected-color) 58%, #163247),
      color-mix(in srgb, var(--job-selected-deep) 70%, #07131e)) !important;
  border: 1px solid color-mix(in srgb, var(--job-selected-color) 72%, #f1d794) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 7px 18px rgba(0, 6, 12, 0.36),
    0 0 20px color-mix(in srgb, var(--job-selected-color) 22%, transparent) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm:hover:not(:disabled) {
  translate: 0 -2px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--job-selected-color) 72%, #24455c),
      color-mix(in srgb, var(--job-selected-deep) 58%, #0b2131)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 22px rgba(0, 6, 12, 0.42),
    0 0 28px color-mix(in srgb, var(--job-selected-color) 36%, transparent) !important;
}

html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm:disabled {
  color: rgba(220, 231, 238, 0.58) !important;
  background: rgba(18, 31, 41, 0.86) !important;
  border-color: color-mix(in srgb, var(--job-selected-color) 24%, rgba(174, 194, 206, 0.4)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html body:not(.maintenance-mode)
    > #previewJobDialog.preview-job-dialog:not([hidden])
    #previewJobShelf
    .preview-job-card {
    animation: preview-job-gallery-card-in 360ms cubic-bezier(0.18, 0.8, 0.26, 1) both !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog.preview-job-dialog:not([hidden])
    #previewJobShelf
    .preview-job-card:nth-child(2) {
    animation-delay: 55ms !important;
  }
}

@keyframes preview-job-gallery-card-in {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) > #previewJobDialog.preview-job-dialog:not([hidden]) {
    padding: 6px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: auto !important;
    max-height: calc(100dvh - 12px) !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-head {
    grid-template-columns: 44px minmax(0, 1fr) 34px !important;
    min-height: 64px !important;
    gap: 8px !important;
    padding: 8px 9px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-sigil {
    width: 38px !important;
    height: 38px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading strong {
    font-size: clamp(17px, 5vw, 21px) !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-stage {
    padding: 9px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf.preview-job-shelf:not([hidden]) {
    gap: 8px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card.preview-job-card {
    grid-template-rows: minmax(218px, 35dvh) auto !important;
    border-width: 1px !important;
    border-radius: 6px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-emblem {
    top: 8px !important;
    left: 8px !important;
    width: 38px !important;
    height: 38px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card.preview-job-card.selected::after {
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-art.preview-job-card-art
    > .preview-job-card-inscription.card-inscription {
    left: 7px !important;
    right: 7px !important;
    bottom: 8px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-art
    > .preview-job-card-inscription.card-inscription
    small {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-art
    > .preview-job-card-inscription.card-inscription
    strong {
    font-size: clamp(17px, 5.4vw, 22px) !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card.preview-job-card
    > .preview-job-card-copy.preview-job-card-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "path" "skill" !important;
    min-height: 82px !important;
    gap: 4px !important;
    padding: 8px 7px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-path {
    display: grid !important;
    align-items: start !important;
    gap: 2px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-path small {
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-path strong {
    font-size: clamp(14px, 4.2vw, 18px) !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-copy > em {
    max-width: 100% !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card-tags {
    display: none !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-foot {
    min-height: 66px !important;
    gap: 7px !important;
    padding: 7px 9px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy {
    min-height: 44px !important;
    padding-left: 48px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy::before {
    width: 38px !important;
    height: 38px !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-confirm {
    min-width: 122px !important;
    min-height: 42px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  html body:not(.maintenance-mode)
    > #previewJobDialog
    #previewJobShelf#previewJobShelf
    .preview-job-card.preview-job-card {
    grid-template-rows: minmax(166px, 29dvh) auto !important;
  }

  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-ritual-heading small,
  html body:not(.maintenance-mode) > #previewJobDialog .preview-job-selection-copy small {
    display: none !important;
  }
}