.enhancement-panel {
  --scene-accent: 242 197 92;
  --scene-secondary: 99 198 255;
  --scene-hot: 255 109 54;
  --enhancement-stage-gap: clamp(12px, 1.15vw, 18px);
  --enhancement-stage-left-min: 228px;
  --enhancement-stage-left-width: clamp(228px, 21vw, 316px);
  --enhancement-stage-right-min: 244px;
  --enhancement-stage-right-width: clamp(244px, 22vw, 328px);
  --enhancement-shell-padding: clamp(14px, 1.1vw, 18px);
  --enhancement-shell-radius: clamp(22px, 2vw, 28px);
  --enhancement-reference-grid-gap: clamp(6px, 0.58vw, 8px);
  --enhancement-reference-slot-size: clamp(56px, 4.8vw, 76px);
  --enhancement-reference-icon-size: clamp(32px, 2.9vw, 44px);
  display: grid;
  gap: 18px;
}

.enhancement-panel__before-stage,
.enhancement-panel__after-stage {
  display: grid;
}

.enhancement-panel--equipment-layout {
  --enhancement-stage-right-min: 300px;
  --enhancement-stage-right-width: clamp(300px, 30vw, 448px);
  --enhancement-reference-slot-size: clamp(58px, 4.9vw, 76px);
  --enhancement-reference-icon-size: clamp(34px, 3vw, 44px);
}

.enhancement-panel--gemstone,
.enhancement-stage--gemstone {
  --scene-accent: 122 217 255;
  --scene-secondary: 80 255 194;
  --scene-hot: 255 158 84;
  --enhancement-gemstone-shell-min-height: 772px;
  --enhancement-gemstone-list-min-height: 252px;
  --enhancement-gemstone-list-width: 320px;
}

.enhancement-panel--inheritance,
.enhancement-stage--inheritance {
  --scene-accent: 255 231 152;
  --scene-secondary: 138 190 255;
  --scene-hot: 255 100 74;
}

.enhancement-panel--soul,
.enhancement-stage--soul {
  --scene-accent: 131 226 255;
  --scene-secondary: 255 225 120;
  --scene-hot: 110 164 255;
}

.enhancement-panel--cube,
.enhancement-stage--cube {
  --scene-accent: 237 208 106;
  --scene-secondary: 85 231 255;
  --scene-hot: 122 206 122;
}

.enhancement-panel--pet,
.enhancement-stage--pet {
  --scene-accent: 121 255 235;
  --scene-secondary: 255 210 97;
  --scene-hot: 86 175 255;
}

.enhancement-panel--daevanion,
.enhancement-stage--daevanion {
  --scene-accent: 122 217 255;
  --scene-secondary: 244 211 108;
  --scene-hot: 255 122 155;
}

.enhancement-panel--material,
.enhancement-stage--material {
  --scene-accent: 117 255 202;
  --scene-secondary: 86 191 255;
  --scene-hot: 92 255 160;
}

.enhancement-panel--arcana,
.enhancement-stage--arcana,
.enhancement-panel--arcana-synthesis,
.enhancement-stage--arcana-synthesis {
  --scene-accent: 244 211 108;
  --scene-secondary: 148 190 255;
  --scene-hot: 255 178 76;
}

.enhancement-panel--crafting,
.enhancement-stage--crafting {
  --scene-accent: 115 228 192;
  --scene-secondary: 232 205 118;
  --scene-hot: 93 170 255;
  --enhancement-stage-left-min: 320px;
  --enhancement-stage-left-width: clamp(320px, 26vw, 420px);
  --enhancement-stage-right-min: 280px;
  --enhancement-stage-right-width: clamp(280px, 23vw, 360px);
}

.enhancement-panel__masthead,
.enhancement-nav-shell,
.enhancement-shell-card,
.enhancement-showcase {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(16, 20, 28, 0.96), rgba(7, 10, 16, 0.96)),
    radial-gradient(circle at top, rgba(var(--scene-secondary) / 0.08), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.34);
}

.enhancement-panel__masthead {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 28px;
}

.enhancement-panel__masthead-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.enhancement-panel__masthead-supplement {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.enhancement-panel__masthead-copy strong,
.enhancement-shell-card__header strong,
.enhancement-showcase__meta strong {
  color: var(--text-primary);
}

.enhancement-panel__masthead-copy strong {
  font-size: 1.18rem;
}

.enhancement-panel__masthead-copy p,
.enhancement-shell-card__header p,
.enhancement-focus-card__copy p,
.enhancement-showcase__meta p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.enhancement-panel__eyebrow,
.enhancement-showcase__eyebrow {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.enhancement-panel__masthead-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.enhancement-panel__masthead-note {
  display: grid;
  gap: 4px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  text-align: right;
}

.enhancement-panel__masthead-note p,
.enhancement-panel__masthead-note small {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

.enhancement-panel__masthead-note small {
  color: rgba(255, 255, 255, 0.56);
}

.enhancement-panel__source-link {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
}

.enhancement-panel__source-link {
  text-decoration: none;
}

.enhancement-panel__masthead-tip-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(244, 211, 108, 0.16), rgba(148, 190, 255, 0.1));
  color: rgba(255, 245, 196, 0.96);
  font: inherit;
  cursor: help;
}

.enhancement-panel__masthead-tip-shell:focus-visible {
  outline: 2px solid rgba(var(--scene-accent) / 0.68);
  outline-offset: 2px;
}

.enhancement-panel__masthead-tip-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.enhancement-panel__masthead-tip-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 5;
  display: grid;
  gap: 6px;
  min-width: 400px;
  max-width: min(520px, 82vw);
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(18, 24, 36, 0.98), rgba(10, 13, 20, 0.98)),
    radial-gradient(circle at top, rgba(var(--scene-accent) / 0.12), transparent 55%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.enhancement-panel__masthead-tip-shell:hover .enhancement-panel__masthead-tip-tooltip,
.enhancement-panel__masthead-tip-shell:focus-visible .enhancement-panel__masthead-tip-tooltip,
.enhancement-panel__masthead-tip-shell:focus-within .enhancement-panel__masthead-tip-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.enhancement-panel__masthead-tip-tooltip strong,
.enhancement-panel__masthead-tip-tooltip p {
  margin: 0;
}

.enhancement-panel__masthead-tip-tooltip strong {
  color: rgba(255, 245, 196, 0.96);
  font-size: 0.86rem;
}

.enhancement-panel__masthead-tip-tooltip p {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.55;
}

.enhancement-nav-shell {
  display: grid;
  gap: 12px;
  padding: 10px 14px 14px;
  border-radius: 26px;
}

.enhancement-tabs,
.enhancement-subtabs,
.enhancement-equipment-tools,
.enhancement-mode-row,
.enhancement-exclusion-list,
.enhancement-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.enhancement-equipment-tools {
  display: grid;
  gap: 12px;
}

.enhancement-subtabs-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}

.enhancement-subtabs__notice {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 34px;
  color: rgba(245, 249, 255, 0.68);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.enhancement-nav-shell .pantheon-panel__character-search {
  width: 100%;
  min-width: 0;
}

.enhancement-nav-shell .pantheon-panel__character-search-row {
  grid-template-columns: minmax(110px, 136px) minmax(180px, 240px) auto minmax(0, 1fr);
  align-items: center;
}

.combat-simulator-character-search-accessory {
  display: flex;
  align-items: center;
  min-width: 0;
}

.combat-simulator-character-search-accessory:empty {
  display: none;
}

.combat-simulator-character-search-accessory .enhancement-equipment-job-filter,
.combat-simulator-character-search-accessory .enhancement-equipment-job-filter--inline {
  width: 100%;
  min-width: 0;
}

.combat-simulator-character-search-accessory .enhancement-equipment-job-filter {
  gap: 0;
}

.combat-simulator-masthead-target {
  display: grid;
  gap: 12px;
}

.combat-simulator-masthead-target:empty {
  display: none;
}

.combat-simulator-saved-characters {
  width: 100%;
  min-width: 0;
}

.combat-simulator-saved-characters .character-home-saved-panels {
  width: 100%;
  max-width: none;
}

.combat-simulator-saved-characters .character-home-saved-panel__body {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.planner-workspace-shell--combat-simulator .planner-workspace-shell__main {
  --combat-simulator-stage-gap: clamp(12px, 1.15vw, 18px);
  --combat-simulator-stage-left-min: 228px;
  --combat-simulator-stage-left-width: clamp(228px, 21vw, 316px);
  --combat-simulator-stage-right-min: 244px;
  --combat-simulator-stage-right-width: clamp(244px, 22vw, 328px);
  grid-template-columns:
    minmax(var(--combat-simulator-stage-left-min), var(--combat-simulator-stage-left-width))
    minmax(0, 1fr)
    minmax(var(--combat-simulator-stage-right-min), var(--combat-simulator-stage-right-width));
  column-gap: var(--combat-simulator-stage-gap);
}

.planner-workspace-shell--combat-simulator .planner-workspace-shell__main > * {
  grid-column: 1 / -1;
}

.planner-workspace-shell--combat-simulator .combat-simulator-pet-preset-target {
  grid-column: 1 / -1;
  justify-self: end;
  width: min(100%, clamp(420px, 40vw, 600px));
  min-width: 0;
}

.combat-simulator-pet-preset-target:empty {
  display: none;
}

.daevanion-simulator__masthead {
  align-items: stretch;
}

.daevanion-simulator__masthead .enhancement-panel__masthead-note {
  min-width: min(100%, 340px);
}

.daevanion-simulator__board-frame {
  min-width: 0;
}

.daevanion-simulator__board-frame .character-detail__section-shell {
  border-color: rgba(var(--scene-accent) / 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--scene-accent) / 0.08), transparent 30%),
    linear-gradient(180deg, rgba(17, 22, 31, 0.96), rgba(8, 10, 15, 0.98));
}

.daevanion-simulator__board-frame .character-detail__board-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.daevanion-simulator__empty {
  padding: clamp(18px, 1.4vw, 24px);
  border-radius: 20px;
}

.enhancement-nav-shell .character-search-filter-bar__factions {
  justify-content: flex-start;
}

.enhancement-nav-shell .pantheon-panel__character-search-helper {
  text-align: left;
}

.enhancement-equipment-job-filter,
.enhancement-equipment-selected,
.enhancement-equipment-picker {
  display: grid;
  gap: 10px;
}

.enhancement-equipment-job-filter strong,
.enhancement-equipment-picker__header strong {
  color: var(--text-primary);
  font-size: 0.86rem;
}

.enhancement-equipment-job-filter .enhancement-subtabs {
  gap: 8px;
}

.enhancement-equipment-job-filter__chips {
  gap: 8px;
}

.enhancement-equipment-job-filter--inline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 4px;
}

.enhancement-equipment-job-filter--inline strong {
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.enhancement-equipment-job-filter--inline .enhancement-equipment-job-filter__chips {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  padding-top: 3px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.enhancement-equipment-job-filter--inline .class-filter-chips__chip {
  flex: 0 0 auto;
}

@media (max-width: 1200px) {
  .enhancement-nav-shell .pantheon-panel__character-search-row {
    grid-template-columns: minmax(110px, 136px) minmax(0, 1fr) auto;
  }

  .combat-simulator-character-search-accessory {
    grid-column: 1 / -1;
  }

  .enhancement-equipment-job-filter--inline {
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .enhancement-nav-shell .pantheon-panel__character-search-row {
    grid-template-columns: 1fr;
  }

  .enhancement-equipment-job-filter--inline {
    gap: 10px;
  }

  .enhancement-estimate-strip__header {
    display: grid;
  }

  .enhancement-estimate-strip__actions {
    justify-content: flex-start;
  }

  .enhancement-estimate-strip__badge {
    justify-self: flex-start;
    white-space: normal;
  }

  .enhancement-estimate-strip__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-estimate-strip__metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.enhancement-equipment-picker__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.enhancement-equipment-picker__header span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
}

.enhancement-equipment-picker__title-aside {
  margin-left: auto;
  min-width: 0;
  text-align: right;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.enhancement-equipment-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
  max-height: 480px;
  overflow: auto;
  padding-right: 4px;
}

.enhancement-equipment-selected__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.enhancement-shell-card--equipment-library {
  padding: clamp(14px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px);
}

.enhancement-shell-card--equipment-library-sidebar {
  align-content: start;
  overflow: hidden;
}

.enhancement-shell-card--enhancement-god-cube {
  padding: clamp(14px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px);
}

.enhancement-god-cube {
  display: grid;
  gap: clamp(10px, 1vw, 14px);
}

.enhancement-god-cube__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.enhancement-god-cube__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.enhancement-god-cube__title strong {
  color: var(--text-primary);
  font-size: 0.94rem;
}

.enhancement-god-cube__title span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
  letter-spacing: -0.01em;
}

.enhancement-god-cube__header em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(236, 209, 132, 0.24);
  background: rgba(32, 26, 12, 0.66);
  color: #f4d98a;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.enhancement-god-cube__grid {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: clamp(2px, 0.28vw, 4px);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 2px;
}

.enhancement-god-cube__slot {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: 0;
  overflow: hidden;
  padding: 2px;
  border-radius: clamp(5px, 0.55vw, 8px);
}

.enhancement-god-cube__slot .enhancement-reference-equipment__slot-label {
  display: none;
}

.enhancement-god-cube__slot .enhancement-reference-equipment__slot-visual {
  width: 100%;
  min-height: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.enhancement-god-cube__slot .enhancement-reference-equipment__icon,
.enhancement-god-cube__slot .enhancement-reference-equipment__empty-mark,
.enhancement-god-cube__slot .enhancement-reference-equipment__icon.is-fallback {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  font-size: 0.7rem;
}

.enhancement-god-cube__slot .enhancement-reference-equipment__slot-remove {
  right: 1px;
  top: 1px;
  width: 13px;
  height: 13px;
  font-size: 0.54rem;
}

.enhancement-god-cube__slot .enhancement-reference-equipment__slot-badge--cube {
  right: 1px;
  bottom: 1px;
  max-width: calc(100% - 2px);
  min-width: 13px;
  height: 12px;
  padding-inline: 2px;
  font-size: 0.4rem;
}

.enhancement-god-cube__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.enhancement-god-cube__toggle {
  min-width: 112px;
}

.enhancement-god-cube__controls span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
}

@media (max-width: 1200px) {
  .enhancement-god-cube__grid {
    grid-template-columns: repeat(20, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .enhancement-god-cube__grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .enhancement-god-cube__header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.enhancement-equipment-picker--rail {
  gap: clamp(10px, 1vw, 14px);
}

.enhancement-equipment-picker__rail {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(5px, 0.48vw, 6px);
  padding: 2px 2px 8px;
}

.enhancement-equipment-picker--sidebar {
  min-height: 0;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-picker__header {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.enhancement-panel--wing-enhancement
  .enhancement-equipment-picker--sidebar
  .enhancement-equipment-picker__header {
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.enhancement-panel--wing-enhancement
  .enhancement-equipment-picker--sidebar
  .enhancement-equipment-picker__title-aside {
  max-width: 150px;
  font-size: 0.6rem;
}

.enhancement-equipment-picker--sidebar .enhancement-mode-row {
  gap: 6px;
}

.enhancement-equipment-picker--sidebar .enhancement-chip {
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.1;
}

.wing-enhancement-current-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(12, 16, 24, 0.82);
}

.wing-enhancement-current-card__header,
.wing-enhancement-current-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wing-enhancement-current-card__header strong {
  color: var(--text-primary);
  font-size: 0.78rem;
}

.wing-enhancement-current-card__header span,
.wing-enhancement-current-card__footer span,
.wing-enhancement-current-card__copy span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.66rem;
}

.wing-enhancement-current-card__body {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.wing-enhancement-current-card__comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wing-enhancement-current-card__wing {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wing-enhancement-current-card__thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid var(--item-grade-tone-border, rgba(255, 255, 255, 0.12));
  background-color: var(--item-grade-tone-end, rgba(255, 255, 255, 0.04));
  background-image: var(--item-grade-tone-gradient, none);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 18px color-mix(in srgb, var(--item-grade-tone-glow, transparent) 22%, transparent);
}

.wing-enhancement-current-card__thumb img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.wing-enhancement-current-card__thumb span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  font-weight: 800;
}

.wing-enhancement-current-card__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wing-enhancement-current-card__copy em {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.wing-enhancement-current-card__copy strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 0.74rem;
  line-height: 1.25;
}

.wing-enhancement-current-card__arrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  font-weight: 900;
}

.wing-enhancement-current-card__footer {
  align-items: flex-end;
  flex-wrap: wrap;
}

.wing-enhancement-current-card__footer span {
  flex: 1 1 130px;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.wing-enhancement-current-card__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.wing-enhancement-current-card__action {
  flex: 0 0 auto;
  min-width: 104px;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.68rem;
  white-space: nowrap;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-picker__rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 600px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-card {
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 54px;
  padding: 15px 5px 7px;
  border-radius: 12px;
  text-align: left;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-card__thumb {
  width: 40px;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-card__name {
  font-size: 0.6rem;
  line-height: 1.2;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-card__state {
  top: 5px;
  right: 5px;
  padding: 2px 6px;
  font-size: 0.56rem;
}

.enhancement-equipment-picker--sidebar .enhancement-equipment-card__thumb img {
  width: 70%;
  height: 70%;
}

.enhancement-equipment-card {
  --enhancement-equipment-thumb-fill: rgba(255, 255, 255, 0.04);
  --enhancement-equipment-thumb-border: rgba(255, 255, 255, 0.14);
  --enhancement-equipment-thumb-glow: rgba(255, 255, 255, 0.08);
  position: relative;
  display: grid;
  gap: clamp(6px, 0.58vw, 8px);
  align-content: start;
  min-height: 0;
  padding: clamp(6px, 0.58vw, 8px) clamp(6px, 0.58vw, 8px) clamp(8px, 0.72vw, 10px);
  border-radius: clamp(14px, 1.3vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 17, 24, 0.92);
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.enhancement-equipment-picker__rail .enhancement-equipment-card {
  min-width: 0;
  width: auto;
  gap: clamp(4px, 0.42vw, 6px);
  padding: clamp(5px, 0.48vw, 6px) clamp(5px, 0.48vw, 6px) clamp(7px, 0.62vw, 8px);
  border-radius: clamp(12px, 1.05vw, 14px);
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__grade,
.enhancement-equipment-picker__rail .enhancement-equipment-card__category {
  top: 6px;
  padding: 2px 6px;
  font-size: 0.58rem;
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__grade {
  left: 6px;
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__category {
  right: 6px;
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__thumb {
  border-radius: clamp(10px, 0.92vw, 12px);
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__thumb img {
  width: 66%;
  height: 66%;
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__item-level {
  bottom: 6px;
  padding: 3px 7px;
  font-size: 0.6rem;
}

.enhancement-equipment-picker__rail .enhancement-equipment-card__name {
  font-size: clamp(0.63rem, 0.56rem + 0.18vw, 0.71rem);
  line-height: 1.28;
}

.enhancement-equipment-card:hover,
.enhancement-equipment-card.is-selected {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.enhancement-equipment-card.is-selected {
  border-color: rgba(var(--scene-secondary) / 0.48);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(var(--scene-accent) / 0.22);
}

.enhancement-equipment-card.is-catalog-missing {
  opacity: 0.62;
  filter: grayscale(0.28);
}

.enhancement-equipment-card.is-catalog-missing:hover,
.enhancement-equipment-card.is-catalog-missing.is-selected {
  opacity: 0.86;
  filter: grayscale(0.12);
}

.enhancement-equipment-card--wide {
  grid-template-columns: 94px minmax(0, 1fr) auto;
  gap: clamp(10px, 1vw, 14px);
  align-items: center;
  min-height: 0;
  padding: clamp(12px, 1.15vw, 16px) clamp(14px, 1.3vw, 18px);
  text-align: left;
}

.enhancement-equipment-card--wide .enhancement-equipment-card__thumb {
  width: 94px;
  height: 94px;
}

.enhancement-equipment-card__grade,
.enhancement-equipment-card__category {
  position: absolute;
  top: 8px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(9, 13, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.enhancement-equipment-card__grade {
  left: 8px;
  color: rgba(255, 255, 255, 0.96);
}

.enhancement-equipment-card__category {
  right: 8px;
  color: rgba(255, 255, 255, 0.72);
}

.enhancement-equipment-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 0;
  border-radius: clamp(12px, 1.15vw, 16px);
  background:
    radial-gradient(
      circle at 50% 32%,
      var(--enhancement-equipment-thumb-glow),
      transparent 62%
    ),
    var(--enhancement-equipment-thumb-fill);
  border: 1px solid var(--enhancement-equipment-thumb-border);
  overflow: hidden;
}

.enhancement-equipment-card__thumb img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
}

.enhancement-equipment-card__thumb span {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.enhancement-equipment-card__item-level {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(9, 13, 20, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.enhancement-equipment-card__name {
  color: var(--text-primary);
  line-height: 1.35;
  font-size: clamp(0.68rem, 0.6rem + 0.22vw, 0.77rem);
  word-break: keep-all;
}

.enhancement-equipment-card__state {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(9, 13, 20, 0.66);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.enhancement-equipment-card.item-grade-tone > .enhancement-equipment-card__state {
  position: absolute !important;
  z-index: 2 !important;
}

.enhancement-equipment-card__state.is-owned {
  border-color: rgba(74, 222, 128, 0.34);
  background: rgba(34, 197, 94, 0.13);
  color: #b9f6c9;
}

.enhancement-equipment-card__state.is-missing {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.58);
  color: rgba(203, 213, 225, 0.68);
}

.enhancement-equipment-card__meta {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.74rem;
  line-height: 1.35;
}

.enhancement-equipment-card__summary {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.enhancement-summary-grid {
  display: grid;
  gap: 10px;
}

.enhancement-summary-grid--equipment-log {
  grid-template-columns: minmax(0, 1fr);
}

.enhancement-summary-card-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.enhancement-summary-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.76);
}

.enhancement-summary-card span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
}

.enhancement-summary-card__heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.enhancement-summary-card__heading img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 7px;
  border: 1px solid transparent;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
}

.enhancement-summary-card__heading img.item-grade-media.item-grade-tone {
  background-color: var(--item-grade-tone-end);
  background-image: var(--item-grade-tone-gradient);
  border-color: var(--item-grade-tone-border);
}

.enhancement-summary-card__heading img.is-kinah:not(.item-grade-tone) {
  border-radius: 0;
  border-color: transparent;
  background: transparent;
}

.enhancement-summary-card__value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.enhancement-summary-card__value-row small {
  flex: 0 0 auto;
}

.enhancement-summary-card strong {
  color: #fff;
  font-size: 0.96rem;
  line-height: 1.2;
}

.enhancement-summary-card small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.72rem;
  line-height: 1.2;
}

.enhancement-shell-card--equipment-estimate {
  padding: clamp(14px, 1.15vw, 18px) clamp(16px, 1.3vw, 20px);
  position: relative;
  overflow: hidden;
}

.enhancement-estimate-strip {
  display: grid;
  gap: 14px;
}

.enhancement-estimate-strip__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.enhancement-estimate-strip__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.enhancement-estimate-strip__copy {
  display: grid;
  gap: 4px;
}

.enhancement-estimate-strip__copy strong {
  color: var(--text-primary);
  font-size: 0.98rem;
}

.enhancement-estimate-strip__copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.5;
  font-size: 0.78rem;
}

.enhancement-estimate-strip__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  white-space: nowrap;
}

.enhancement-estimate-strip__stat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(123, 211, 255, 0.38);
  border-radius: 999px;
  background: rgba(88, 170, 224, 0.16);
  color: rgba(221, 244, 255, 0.96);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.enhancement-estimate-strip__stat-button:hover:not(:disabled),
.enhancement-estimate-strip__stat-button:focus-visible:not(:disabled) {
  border-color: rgba(144, 222, 255, 0.72);
  background: rgba(88, 170, 224, 0.28);
  transform: translateY(-1px);
  outline: none;
}

.enhancement-estimate-strip__stat-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.enhancement-estimate-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.enhancement-stat-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 7, 14, 0.72);
  backdrop-filter: blur(8px);
}

.enhancement-stat-dialog {
  width: min(1280px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(14, 18, 28, 0.98);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
}

.enhancement-stat-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.enhancement-stat-dialog__header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.enhancement-stat-dialog__header strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.enhancement-stat-dialog__header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  line-height: 1.45;
}

.enhancement-stat-dialog__close {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.enhancement-stat-dialog__close:hover,
.enhancement-stat-dialog__close:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.enhancement-stat-dialog__body-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

.enhancement-stat-dialog__card-grid {
  grid-column: span 3;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
}

.enhancement-stat-dialog__stat-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.enhancement-stat-dialog__stat-card:hover,
.enhancement-stat-dialog__stat-card.is-selected {
  border-color: rgba(123, 211, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(123, 211, 255, 0.1), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.045);
}

.enhancement-stat-dialog__stat-card:focus-visible {
  border-color: rgba(123, 211, 255, 0.44);
  outline: none;
  box-shadow:
    0 0 0 1px rgba(123, 211, 255, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.28);
}

.enhancement-stat-dialog__stat-card-header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.enhancement-stat-dialog__stat-card-header span {
  color: rgba(123, 211, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
}

.enhancement-stat-dialog__stat-card-header strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-stat-dialog__stat-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.enhancement-stat-dialog__stat-cell {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.enhancement-stat-dialog__stat-cell span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.enhancement-stat-dialog__stat-cell strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-stat-dialog__stat-cell strong.is-current {
  color: var(--text-primary);
}

.enhancement-stat-dialog__stat-cell strong.is-current.is-positive {
  color: #7bd3ff;
}

.enhancement-stat-dialog__stat-cell strong.is-current.is-negative {
  color: #ff9f9f;
}

.enhancement-stat-dialog__stat-cell.is-delta {
  text-align: center;
}

.enhancement-stat-dialog__stat-cell.is-delta strong {
  text-align: center;
}

@media (max-width: 1020px) {
  .enhancement-stat-dialog__body-grid {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .enhancement-stat-dialog__card-grid {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .enhancement-stat-dialog__source-panel {
    grid-column: auto;
    max-height: 360px;
  }
}

.enhancement-stat-dialog__stat-delta {
  font-size: 1rem;
  font-weight: 900;
}

.enhancement-stat-dialog__stat-delta.is-positive {
  color: #7bd3ff;
}

.enhancement-stat-dialog__stat-delta.is-negative {
  color: #ff9f9f;
}

.enhancement-stat-dialog__stat-delta.is-neutral {
  color: rgba(255, 255, 255, 0.58);
}

.enhancement-stat-dialog__source-panel {
  grid-column: span 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(123, 211, 255, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(22, 34, 52, 0.72), rgba(9, 13, 22, 0.72)),
    rgba(9, 13, 22, 0.72);
  color: rgba(239, 248, 255, 0.94);
  font-variant-numeric: tabular-nums;
}

.enhancement-stat-dialog__source-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.enhancement-stat-dialog__source-panel-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.enhancement-stat-dialog__source-panel-head span {
  color: rgba(123, 211, 255, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.enhancement-stat-dialog__source-panel-head strong {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.enhancement-stat-dialog__source-panel-head em {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.enhancement-stat-dialog__source-panel-head em.is-positive {
  color: #7bd3ff;
}

.enhancement-stat-dialog__source-panel-head em.is-negative {
  color: #ff9f9f;
}

.enhancement-stat-dialog__source-panel-head em.is-neutral {
  color: rgba(255, 255, 255, 0.58);
}

.enhancement-stat-dialog__source-tooltip {
  z-index: 10030;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(123, 211, 255, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(22, 34, 52, 0.98), rgba(9, 13, 22, 0.98)),
    rgba(9, 13, 22, 0.98);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(239, 248, 255, 0.94);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: enhancement-stat-tooltip-in 120ms ease-out;
}

@keyframes enhancement-stat-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.enhancement-stat-dialog__source-tooltip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.enhancement-stat-dialog__source-tooltip-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.enhancement-stat-dialog__source-tooltip-head span {
  color: rgba(123, 211, 255, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.enhancement-stat-dialog__source-tooltip-head strong {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.enhancement-stat-dialog__source-tooltip-head em {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.enhancement-stat-dialog__source-tooltip-head em.is-positive {
  color: #7bd3ff;
}

.enhancement-stat-dialog__source-tooltip-head em.is-negative {
  color: #ff9f9f;
}

.enhancement-stat-dialog__source-tooltip-head em.is-neutral {
  color: rgba(255, 255, 255, 0.58);
}

.enhancement-stat-dialog__source-list {
  display: grid;
  gap: 9px;
}

.enhancement-stat-dialog__source-entry {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.enhancement-stat-dialog__source-entry-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.enhancement-stat-dialog__source-meta {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(123, 211, 255, 0.18);
  border-radius: 999px;
  background: rgba(123, 211, 255, 0.09);
  color: rgba(173, 228, 255, 0.9);
  font-size: 0.67rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.enhancement-stat-dialog__source-origin {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.enhancement-stat-dialog__source-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.enhancement-stat-dialog__source-cell {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.enhancement-stat-dialog__source-cell.is-baseline {
  grid-column: 1 / -1;
  justify-items: center;
  text-align: center;
}

.enhancement-stat-dialog__source-cell span {
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.enhancement-stat-dialog__source-cell strong {
  min-width: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.enhancement-stat-dialog__source-cell em {
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-stat-dialog__source-cell.is-delta {
  justify-items: center;
  text-align: center;
}

.enhancement-stat-dialog__source-cell.is-current {
  justify-items: center;
  text-align: center;
}

.enhancement-stat-dialog__source-cell.is-delta strong {
  align-self: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.1;
  white-space: nowrap;
}

.enhancement-stat-dialog__source-cell strong.is-positive,
.enhancement-stat-dialog__source-cell em.is-positive {
  color: #7bd3ff;
}

.enhancement-stat-dialog__source-cell strong.is-negative,
.enhancement-stat-dialog__source-cell em.is-negative {
  color: #ff9f9f;
}

.enhancement-stat-dialog__source-cell strong.is-neutral,
.enhancement-stat-dialog__source-cell em.is-neutral {
  color: rgba(255, 255, 255, 0.58);
}

.enhancement-stat-dialog__source-change-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.enhancement-stat-dialog__source-change-row span,
.enhancement-stat-dialog__source-change-row strong {
  min-width: 0;
}

.enhancement-stat-dialog__source-change-row b {
  color: rgba(123, 211, 255, 0.72);
  font-size: 0.8rem;
  line-height: 1;
}

.enhancement-stat-dialog__source-value-row {
  padding-top: 2px;
}

.enhancement-stat-dialog__source-value {
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}

.enhancement-stat-dialog__source-value em {
  font-style: normal;
}

.enhancement-stat-dialog__source-value.is-positive {
  color: #7bd3ff;
}

.enhancement-stat-dialog__source-value.is-negative {
  color: #ff9f9f;
}

.enhancement-stat-dialog__source-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.enhancement-stat-dialog__empty {
  margin: 0;
  padding: 22px 20px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.82rem;
  line-height: 1.5;
}

.enhancement-estimate-strip__deployment-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: inherit;
  background: rgba(5, 8, 14, 0.58);
  color: rgba(248, 233, 181, 0.92);
  text-align: center;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.enhancement-estimate-strip__panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.82);
}

.enhancement-estimate-strip__panel.is-disabled .enhancement-estimate-strip__metrics {
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}

.enhancement-estimate-strip__panel-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.enhancement-estimate-strip__panel-title {
  color: var(--text-primary);
  font-size: 0.86rem;
}

.enhancement-estimate-strip__metrics-shell {
  position: relative;
  min-width: 0;
  border-radius: 16px;
}

.enhancement-estimate-strip__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.enhancement-estimate-strip__metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.enhancement-estimate-strip__metric-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.enhancement-estimate-strip__metric-value {
  color: #fff;
  font-size: 0.96rem;
  line-height: 1.2;
  word-break: keep-all;
}

.enhancement-estimate-strip__metric-note {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  line-height: 1.35;
}

.enhancement-estimate-strip__metric-note.is-positive {
  color: #8cf8bb;
}

.enhancement-estimate-strip__metric-note.is-negative {
  color: #ff9fa4;
}

.enhancement-estimate-strip__metric-note.is-neutral {
  color: rgba(255, 255, 255, 0.58);
}

.enhancement-equipment-card__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.enhancement-equipment-card__stat {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(9, 13, 20, 0.42);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.enhancement-equipment-card.is-epic {
  --enhancement-equipment-thumb-fill: var(--item-grade-epic-gradient);
  --enhancement-equipment-thumb-border: var(--item-grade-epic-border);
  --enhancement-equipment-thumb-glow: var(--item-grade-epic-glow);
}

.enhancement-equipment-card.is-unique {
  --enhancement-equipment-thumb-fill: var(--item-grade-unique-gradient);
  --enhancement-equipment-thumb-border: var(--item-grade-unique-border);
  --enhancement-equipment-thumb-glow: var(--item-grade-unique-glow);
}

.enhancement-equipment-card.is-legend {
  --enhancement-equipment-thumb-fill: var(--item-grade-legend-gradient);
  --enhancement-equipment-thumb-border: var(--item-grade-legend-border);
  --enhancement-equipment-thumb-glow: var(--item-grade-legend-glow);
}

.enhancement-equipment-card.is-rare {
  --enhancement-equipment-thumb-fill: var(--item-grade-rare-gradient);
  --enhancement-equipment-thumb-border: var(--item-grade-rare-border);
  --enhancement-equipment-thumb-glow: var(--item-grade-rare-glow);
}

.enhancement-equipment-card.is-special {
  --enhancement-equipment-thumb-fill: var(--item-grade-special-gradient);
  --enhancement-equipment-thumb-border: var(--item-grade-special-border);
  --enhancement-equipment-thumb-glow: var(--item-grade-special-glow);
}

.enhancement-equipment-card.is-special .enhancement-equipment-card__name {
  color: var(--item-grade-special-text);
}

.enhancement-equipment-card.is-common {
  --enhancement-equipment-thumb-fill: var(--item-grade-common-gradient);
  --enhancement-equipment-thumb-border: var(--item-grade-common-border);
  --enhancement-equipment-thumb-glow: var(--item-grade-common-glow);
}

.enhancement-equipment-card.is-epic .enhancement-equipment-card__name {
  color: var(--item-grade-epic-text);
}

.enhancement-equipment-card.is-unique .enhancement-equipment-card__name {
  color: var(--item-grade-unique-text);
}

.enhancement-equipment-card.is-legend .enhancement-equipment-card__name {
  color: var(--item-grade-legend-text);
}

.enhancement-equipment-card.is-rare .enhancement-equipment-card__name {
  color: var(--item-grade-rare-text);
}

.enhancement-equipment-card.is-common .enhancement-equipment-card__name {
  color: var(--item-grade-common-text);
}

.enhancement-tab,
.enhancement-chip {
  font: inherit;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.enhancement-tab {
  position: relative;
  padding: 12px 18px 14px;
  color: rgba(255, 255, 255, 0.64);
  background: transparent;
  border: 0;
}

.enhancement-tab::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-secondary) / 0.95), transparent);
  opacity: 0;
  transform: scaleX(0.7);
}

.enhancement-tab:hover,
.enhancement-tab.is-active {
  color: #fff;
}

.enhancement-tab:hover::after,
.enhancement-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.enhancement-chip {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.74);
}

.enhancement-chip:hover,
.enhancement-chip.is-active {
  transform: translateY(-1px);
  border-color: rgba(var(--scene-accent) / 0.46);
  background: linear-gradient(180deg, rgba(var(--scene-accent) / 0.18), rgba(var(--scene-secondary) / 0.08));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  color: #fff;
}

.enhancement-chip--static,
.enhancement-chip--static:hover {
  cursor: default;
}

.enhancement-chip:disabled,
.enhancement-chip.is-disabled {
  cursor: not-allowed;
  transform: none;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.34);
}

.enhancement-chip--skill {
  padding: 8px 12px;
}

.enhancement-chip--skill .arcana-skill-identity {
  color: inherit;
}

.enhancement-stage {
  display: grid;
  grid-template-columns:
    minmax(var(--enhancement-stage-left-min), var(--enhancement-stage-left-width))
    minmax(0, 1fr)
    minmax(var(--enhancement-stage-right-min), var(--enhancement-stage-right-width));
  gap: var(--enhancement-stage-gap);
  align-items: start;
}

.enhancement-stage__left,
.enhancement-stage__center,
.enhancement-stage__right {
  display: grid;
  gap: var(--enhancement-stage-gap);
  align-content: start;
  min-width: 0;
}

.enhancement-panel--soul .enhancement-stage {
  align-items: stretch;
}

.enhancement-panel--equipment-enhancement .enhancement-stage {
  align-items: stretch;
}

.enhancement-panel--crafting .enhancement-stage {
  align-items: stretch;
}

.enhancement-panel--gemstone .enhancement-stage {
  align-items: stretch;
}

.enhancement-panel--pet-understanding .enhancement-stage {
  align-items: stretch;
}

.enhancement-panel--soul .enhancement-stage__left,
.enhancement-panel--soul .enhancement-stage__center,
.enhancement-panel--soul .enhancement-stage__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.enhancement-panel--gemstone .enhancement-stage__left,
.enhancement-panel--gemstone .enhancement-stage__center,
.enhancement-panel--gemstone .enhancement-stage__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.enhancement-panel--equipment-enhancement .enhancement-stage__left,
.enhancement-panel--equipment-enhancement .enhancement-stage__center,
.enhancement-panel--equipment-enhancement .enhancement-stage__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.enhancement-panel--crafting .enhancement-stage__left,
.enhancement-panel--crafting .enhancement-stage__center,
.enhancement-panel--crafting .enhancement-stage__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.enhancement-panel--pet-understanding .enhancement-stage__left,
.enhancement-panel--pet-understanding .enhancement-stage__center,
.enhancement-panel--pet-understanding .enhancement-stage__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.enhancement-panel--soul .enhancement-stage__left > .enhancement-shell-card,
.enhancement-panel--soul .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--soul .enhancement-stage__right > .enhancement-shell-card {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.enhancement-panel--gemstone .enhancement-stage__left > .enhancement-shell-card,
.enhancement-panel--gemstone .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--gemstone .enhancement-stage__right > .enhancement-shell-card {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.enhancement-panel--equipment-enhancement .enhancement-stage__left > .enhancement-shell-card,
.enhancement-panel--equipment-enhancement .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--equipment-enhancement .enhancement-stage__right > .enhancement-shell-card {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.enhancement-panel--crafting .enhancement-stage__left > .enhancement-shell-card,
.enhancement-panel--crafting .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--crafting .enhancement-stage__right > .enhancement-shell-card {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.enhancement-panel--pet-understanding .enhancement-stage__left > .enhancement-shell-card,
.enhancement-panel--pet-understanding .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--pet-understanding .enhancement-stage__right > .enhancement-shell-card {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.enhancement-shell-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: var(--enhancement-shell-padding);
  border-radius: var(--enhancement-shell-radius);
}

.enhancement-shell-card.combat-simulator-shared-estimate {
  margin: clamp(4px, 0.45vw, 8px) clamp(6px, 0.75vw, 14px);
  padding: clamp(20px, 1.6vw, 26px) clamp(22px, 1.9vw, 32px);
  border-radius: clamp(24px, 2vw, 30px);
}

.enhancement-shell-card--guide {
  background:
    linear-gradient(180deg, rgba(20, 24, 34, 0.98), rgba(9, 12, 18, 0.98)),
    radial-gradient(circle at top, rgba(var(--scene-accent) / 0.07), transparent 36%);
}

.enhancement-shell-card--showcase-stack {
  gap: 20px;
}

.enhancement-focus-panel {
  display: grid;
  gap: 16px;
}

.enhancement-focus-panel--embedded {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.enhancement-shell-card--focus {
  background:
    linear-gradient(180deg, rgba(19, 24, 34, 0.98), rgba(8, 11, 18, 0.98)),
    radial-gradient(circle at top left, rgba(var(--scene-secondary) / 0.1), transparent 34%);
}

.enhancement-shell-card--crafting-library,
.enhancement-shell-card--crafting-showcase,
.enhancement-shell-card--crafting-materials {
  min-height: 760px;
}

.enhancement-shell-card--crafting-library,
.enhancement-shell-card--crafting-materials {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
}

.enhancement-shell-card--crafting-showcase {
  gap: 18px;
}

.enhancement-shell-card--crafting-showcase.enhancement-shell-card--equipment-showcase {
  min-height: 760px;
  height: auto;
}

.crafting-workbench__equipment-list,
.crafting-workbench__material-list {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.crafting-workbench__equipment-list {
  padding: 2px 6px 8px 2px;
}

.crafting-workbench__nav-tools {
  display: grid;
  gap: 10px;
}

.crafting-workbench__nav-row.pantheon-panel__character-search-row {
  grid-template-columns: auto minmax(220px, 360px);
  justify-content: flex-start;
}

.crafting-workbench__nav-row .character-search-filter-bar__factions {
  flex-wrap: nowrap;
}

.crafting-workbench__character-field {
  display: grid;
  gap: 8px;
  max-width: 360px;
}

.crafting-workbench__character-label {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.crafting-workbench__character-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(18, 24, 34, 0.96), rgba(10, 14, 22, 0.96)),
    rgba(8, 11, 18, 0.84);
  color: var(--text-primary);
  font: inherit;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.crafting-workbench__character-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.crafting-workbench__character-input:hover,
.crafting-workbench__character-input:focus-visible {
  border-color: rgba(var(--scene-secondary) / 0.42);
  box-shadow: 0 0 0 1px rgba(var(--scene-accent) / 0.16);
  outline: none;
}

.crafting-workbench__equipment-list,
.crafting-workbench__material-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: start;
}

.crafting-workbench__equipment-tile {
  --crafting-thumb-fill: linear-gradient(180deg, rgba(30, 36, 46, 0.96), rgba(16, 20, 28, 0.96));
  --crafting-tile-fill: linear-gradient(180deg, rgba(18, 22, 30, 0.96), rgba(10, 14, 20, 0.96));
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--crafting-tile-fill);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.crafting-workbench__equipment-tile:hover,
.crafting-workbench__equipment-tile.is-selected {
  z-index: 1;
  transform: translateY(-1px);
  border-color: rgba(var(--scene-secondary) / 0.42);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(var(--scene-accent) / 0.18);
}

.crafting-workbench__equipment-tile.is-epic {
  --crafting-thumb-fill: var(--item-grade-epic-gradient);
  --crafting-tile-fill: var(--item-grade-epic-gradient);
  border-color: var(--item-grade-epic-border);
}

.crafting-workbench__equipment-tile.is-unique {
  --crafting-thumb-fill: var(--item-grade-unique-gradient);
  --crafting-tile-fill: var(--item-grade-unique-gradient);
  border-color: var(--item-grade-unique-border);
}

.crafting-workbench__equipment-tile.is-legend {
  --crafting-thumb-fill: var(--item-grade-legend-gradient);
  --crafting-tile-fill: var(--item-grade-legend-gradient);
  border-color: var(--item-grade-legend-border);
}

.crafting-workbench__equipment-tile.is-rare {
  --crafting-thumb-fill: var(--item-grade-rare-gradient);
  --crafting-tile-fill: var(--item-grade-rare-gradient);
  border-color: var(--item-grade-rare-border);
}

.crafting-workbench__equipment-tile.is-special {
  --crafting-thumb-fill: var(--item-grade-special-gradient);
  --crafting-tile-fill: var(--item-grade-special-gradient);
  border-color: var(--item-grade-special-border);
}

.crafting-workbench__equipment-tile.is-common {
  --crafting-thumb-fill: var(--item-grade-common-gradient);
  --crafting-tile-fill: var(--item-grade-common-gradient);
  border-color: var(--item-grade-common-border);
}

.crafting-workbench__equipment-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.12), transparent 58%),
    var(--crafting-thumb-fill);
  overflow: hidden;
}

.crafting-workbench__equipment-thumb img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.32));
}

.crafting-workbench__equipment-thumb span {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.crafting-workbench__equipment-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(8, 11, 18, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
}

.crafting-workbench__equipment-copy {
  gap: 0;
}

.crafting-workbench__equipment-copy strong {
  display: -webkit-box;
  min-height: 2.3em;
  margin: 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.32;
  word-break: keep-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.crafting-workbench__equipment-tile.is-epic .crafting-workbench__equipment-copy strong {
  color: var(--item-grade-epic-text);
}

.crafting-workbench__equipment-tile.is-unique .crafting-workbench__equipment-copy strong {
  color: var(--item-grade-unique-text);
}

.crafting-workbench__equipment-tile.is-legend .crafting-workbench__equipment-copy strong {
  color: var(--item-grade-legend-text);
}

.crafting-workbench__equipment-tile.is-rare .crafting-workbench__equipment-copy strong {
  color: var(--item-grade-rare-text);
}

.crafting-workbench__equipment-tile.is-special .crafting-workbench__equipment-copy strong {
  color: var(--item-grade-special-text);
}

.crafting-workbench__equipment-tile.is-common .crafting-workbench__equipment-copy strong {
  color: var(--item-grade-common-text);
}

.crafting-workbench__action-panel {
  display: grid;
  gap: 16px;
}

.crafting-workbench__showcase {
  position: relative;
  min-height: 100%;
  gap: 10px;
}

.crafting-workbench__result-overlay {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 60;
  display: grid;
  width: min(640px, calc(100vw - 32px));
  place-items: center;
  padding: 0;
  translate: -50% 0;
  pointer-events: none;
  animation: crafting-result-overlay-pop 3000ms ease both;
}

.crafting-workbench__result-overlay-message {
  margin: 0;
  width: max-content;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fa548a;
  font-size: clamp(0.52rem, 0.44rem + 0.28vw, 0.68rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: -0.03em;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.92),
    0 0 14px rgba(250, 84, 138, 0.3);
}

.crafting-workbench__result-overlay-character {
  color: #63c1f8;
}

.crafting-workbench__result-overlay-item {
  color: #f97204;
}

.enhancement-panel--material-conversion .crafting-workbench__showcase {
  gap: 22px;
}

.enhancement-panel--material-conversion {
  --material-conversion-workbench-height: 650px;
}

.enhancement-panel--material-conversion .enhancement-stage__left > .enhancement-shell-card,
.enhancement-panel--material-conversion .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--material-conversion .enhancement-stage__right > .enhancement-shell-card {
  height: var(--material-conversion-workbench-height);
  min-height: var(--material-conversion-workbench-height);
  max-height: var(--material-conversion-workbench-height);
}

.enhancement-panel--material-conversion .enhancement-shell-card--crafting-showcase {
  overflow: hidden;
}

.enhancement-panel--material-conversion .crafting-workbench__equipment-list {
  align-content: start;
  gap: 50px;
  grid-auto-rows: auto;
  max-height: none;
  overflow: auto;
  padding-block: 4px 12px;
}

.enhancement-panel--material-conversion .crafting-workbench__equipment-tile {
  align-self: start;
  height: auto;
  min-height: 0;
}

.material-conversion-workbench__quantity-control {
  display: inline-grid;
  grid-template-columns: 38px 44px minmax(68px, auto) 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(22, 28, 38, 0.92), rgba(10, 14, 22, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(var(--scene-accent) / 0.16), transparent 58%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.22);
}

.material-conversion-workbench__quantity-input {
  min-width: 0;
  width: 100%;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.04em;
}

.material-conversion-workbench__quantity-input:hover,
.material-conversion-workbench__quantity-input:focus-visible {
  border-color: rgba(var(--scene-secondary) / 0.44);
  box-shadow: 0 0 0 1px rgba(var(--scene-accent) / 0.16);
  outline: none;
}

.material-conversion-workbench__quantity-input:disabled {
  opacity: 0.62;
}

.material-conversion-workbench__quantity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.material-conversion-workbench__quantity-button--reset {
  width: 38px;
  height: 36px;
  color: rgba(255, 232, 190, 0.92);
  font-size: 0.96rem;
}

.material-conversion-workbench__quantity-button:hover,
.material-conversion-workbench__quantity-button:focus-visible {
  border-color: rgba(var(--scene-secondary) / 0.44);
  background: rgba(var(--scene-accent) / 0.16);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.material-conversion-workbench__quantity-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.material-conversion-workbench__result-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.material-conversion-workbench__result-card {
  --material-result-fill: linear-gradient(180deg, rgba(28, 36, 46, 0.92), rgba(12, 16, 24, 0.94));
  --material-result-border: rgba(255, 255, 255, 0.12);
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--material-result-border);
  border-radius: 16px;
  background:
    var(--material-result-fill),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 22px rgba(0, 0, 0, 0.22);
}

.material-conversion-workbench__result-card.is-unique {
  --material-result-fill: var(--item-grade-unique-gradient);
  --material-result-border: var(--item-grade-unique-border);
}

.material-conversion-workbench__result-card.is-rare {
  --material-result-fill: var(--item-grade-rare-gradient);
  --material-result-border: var(--item-grade-rare-border);
}

.material-conversion-workbench__result-card.is-special {
  --material-result-fill: var(--item-grade-special-gradient);
  --material-result-border: var(--item-grade-special-border);
}

.material-conversion-workbench__result-card.is-special strong {
  color: var(--item-grade-special-text);
}

.material-conversion-workbench__result-card.is-common {
  --material-result-fill: var(--item-grade-common-gradient);
  --material-result-border: var(--item-grade-common-border);
}

.material-conversion-workbench__result-card.is-legend {
  --material-result-fill: var(--item-grade-legend-gradient);
  --material-result-border: var(--item-grade-legend-border);
}

.material-conversion-workbench__result-card.is-epic {
  --material-result-fill: var(--item-grade-epic-gradient);
  --material-result-border: var(--item-grade-epic-border);
}

.material-conversion-workbench__result-card.is-common strong {
  color: var(--item-grade-common-text);
}

.material-conversion-workbench__result-card.is-rare strong {
  color: var(--item-grade-rare-text);
}

.material-conversion-workbench__result-card.is-legend strong {
  color: var(--item-grade-legend-text);
}

.material-conversion-workbench__result-card.is-unique strong {
  color: var(--item-grade-unique-text);
}

.material-conversion-workbench__result-card.is-epic strong {
  color: var(--item-grade-epic-text);
}

.material-conversion-workbench__result-card--great {
  --material-result-fill: linear-gradient(180deg, rgba(96, 80, 22, 0.9), rgba(36, 26, 8, 0.96));
  --material-result-border: rgba(255, 220, 96, 0.4);
}

.material-conversion-workbench__result-card.material-conversion-workbench__result-card--failure {
  --material-result-fill: linear-gradient(180deg, rgba(120, 26, 28, 0.86), rgba(40, 10, 12, 0.96));
  --material-result-border: rgba(255, 112, 112, 0.34);
  background:
    var(--material-result-fill),
    radial-gradient(circle at 50% 0%, rgba(255, 124, 124, 0.14), transparent 60%) !important;
}

.material-conversion-workbench__result-thumb--failure,
.material-conversion-workbench__result-card.material-conversion-workbench__result-card--failure
  .material-conversion-workbench__result-thumb {
  background-color: rgba(112, 18, 22, 0.92) !important;
  background-image:
    radial-gradient(circle at 50% 28%, rgba(255, 144, 144, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(146, 30, 34, 0.92), rgba(54, 12, 16, 0.98)) !important;
  border-color: rgba(255, 116, 116, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 76, 76, 0.08) !important;
}

.material-conversion-workbench__result-card.material-conversion-workbench__result-card--failure
  strong {
  color: #ffd6d6 !important;
}

.material-conversion-workbench__result-card.material-conversion-workbench__result-card--failure-reward {
  --material-result-fill: linear-gradient(180deg, rgba(92, 52, 22, 0.86), rgba(36, 18, 8, 0.96));
  --material-result-border: rgba(255, 172, 96, 0.32);
}

.material-conversion-workbench__result-thumb {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.material-conversion-workbench__result-thumb img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.34));
}

.material-conversion-workbench__result-thumb span,
.material-conversion-workbench__result-card strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 900;
}

.material-conversion-workbench__result-thumb span {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.material-conversion-workbench__result-card strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crafting-workbench__showcase-meta strong {
  font-size: clamp(0.94rem, 0.82rem + 0.32vw, 1.14rem);
}

.crafting-workbench__showcase .crafting-workbench__showcase-orbital {
  margin-top: 6px;
  justify-self: center;
}

.crafting-workbench__showcase .crafting-workbench__showcase-orbital::before {
  inset: 4%;
}

.crafting-workbench__showcase .crafting-workbench__showcase-orbital::after {
  inset: 10%;
}

.crafting-workbench__showcase
  .crafting-workbench__showcase-orbital
  .enhancement-equipment-showcase__orbital-ring {
  width: 80%;
}

.crafting-workbench__showcase-mark {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 11, 18, 0.88);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
}

.crafting-workbench__showcase .crafting-workbench__showcase-orbital .crafting-workbench__showcase-slot {
  position: absolute;
  right: 4%;
  bottom: 11%;
  z-index: 3;
  width: 68px;
  height: 68px;
  pointer-events: none;
  cursor: default;
}

.crafting-workbench__showcase-slot.is-filled {
  pointer-events: none;
  cursor: default;
}

.crafting-workbench__showcase-slot .enhancement-equipment-showcase__soul-tuning-socket-core span {
  color: rgba(255, 244, 206, 0.9);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.crafting-workbench__showcase-slot .enhancement-equipment-showcase__soul-tuning-socket-cost {
  min-width: 28px;
  padding: 3px 6px 2px;
  font-size: 0.58rem;
  white-space: nowrap;
}

.material-conversion-workbench__success-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: -6px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(22, 28, 38, 0.9), rgba(10, 14, 22, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(var(--scene-accent) / 0.18), transparent 62%);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.crafting-workbench__showcase-costs {
  width: min(100%, 360px);
}

.crafting-workbench__showcase-utility {
  position: relative;
  z-index: 12;
  width: min(100%, 420px);
  margin-top: 0;
  padding-top: 14px;
}

.enhancement-panel--material-conversion .crafting-workbench__showcase-utility {
  padding-top: 24px;
}

.crafting-workbench__showcase-tags {
  justify-content: center;
}

.crafting-workbench__showcase .enhancement-equipment-showcase__rate-hint {
  margin-top: 2px;
  max-width: min(100%, 420px);
  min-height: 2.8rem;
  line-height: 1.45;
}

.crafting-workbench__showcase .enhancement-equipment-showcase__primary-action {
  position: relative;
  z-index: 14;
  width: min(100%, 420px);
}

.crafting-workbench__showcase .enhancement-equipment-showcase__action-helper {
  font-size: 0.78rem;
  line-height: 1.5;
}

.crafting-workbench__status {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.76);
}

.crafting-workbench__status.is-ready {
  border-color: rgba(120, 236, 182, 0.28);
  background:
    linear-gradient(180deg, rgba(120, 236, 182, 0.16), rgba(120, 236, 182, 0.04)),
    rgba(8, 11, 18, 0.8);
}

.crafting-workbench__status.is-running {
  border-color: rgba(132, 220, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(92, 206, 255, 0.18), rgba(92, 206, 255, 0.04)),
    rgba(8, 11, 18, 0.82);
  box-shadow: 0 0 26px rgba(92, 206, 255, 0.08);
}

.crafting-workbench__status.is-success {
  border-color: rgba(255, 223, 134, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 223, 134, 0.2), rgba(255, 223, 134, 0.05)),
    rgba(8, 11, 18, 0.82);
  box-shadow: 0 0 28px rgba(255, 223, 134, 0.08);
}

.crafting-workbench__status.is-reward {
  border-color: rgba(116, 234, 218, 0.3);
  background:
    linear-gradient(180deg, rgba(92, 214, 198, 0.16), rgba(92, 214, 198, 0.04)),
    rgba(8, 11, 18, 0.82);
  box-shadow: 0 0 26px rgba(92, 214, 198, 0.08);
}

.crafting-workbench__status.is-short {
  border-color: rgba(255, 158, 158, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 132, 132, 0.16), rgba(255, 132, 132, 0.04)),
    rgba(8, 11, 18, 0.8);
}

.crafting-workbench__status.is-failure {
  border-color: rgba(255, 126, 126, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 112, 112, 0.18), rgba(255, 112, 112, 0.05)),
    rgba(8, 11, 18, 0.82);
  box-shadow: 0 0 26px rgba(255, 112, 112, 0.08);
}

.crafting-workbench__status strong,
.crafting-workbench__status p,
.crafting-workbench__status-message {
  margin: 0;
}

.crafting-workbench__status strong {
  color: var(--text-primary);
  font-size: 0.96rem;
}

.crafting-workbench__status p,
.crafting-workbench__status-message {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}

.crafting-workbench__action-row {
  display: grid;
  gap: 12px;
}

.crafting-workbench__craft-button {
  min-height: 58px;
  font-size: 0.96rem;
  font-weight: 800;
}

.crafting-workbench__craft-button-shell {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
}

.species-understanding-adjustment-dialog__paste-zone:focus {
  outline: none;
}

.species-understanding-adjustment-dialog__paste-zone:hover,
.species-understanding-adjustment-dialog__paste-zone:focus {
  z-index: 25;
}

.crafting-workbench__craft-button-shell.has-tooltip {
  cursor: not-allowed;
}

.crafting-workbench__craft-button-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 40;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: 8px 12px;
  border: 1px solid rgba(255, 225, 150, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 150, 0.12), transparent 60%),
    rgba(10, 14, 20, 0.96);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 239, 196, 0.96);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.crafting-workbench__craft-button-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255, 225, 150, 0.24);
  border-bottom: 1px solid rgba(255, 225, 150, 0.24);
  background: rgba(10, 14, 20, 0.96);
  transform: translate(-50%, -4px) rotate(45deg);
}

.crafting-workbench__craft-button-shell.has-tooltip:hover .crafting-workbench__craft-button-tooltip,
.crafting-workbench__craft-button-shell.has-tooltip:focus-visible .crafting-workbench__craft-button-tooltip,
.crafting-workbench__craft-button-shell.has-tooltip:focus-within .crafting-workbench__craft-button-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.crafting-workbench__craft-button:disabled {
  cursor: wait;
  filter: saturate(0.88);
}

.crafting-workbench__duel-panel {
  display: grid;
  gap: 14px;
  width: min(100%, 460px);
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--scene-accent) / 0.1), transparent 62%),
    linear-gradient(180deg, rgba(18, 22, 30, 0.94), rgba(10, 14, 20, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.crafting-workbench__duel-item-name {
  display: block;
  justify-self: start;
  width: 100%;
  margin: 0;
  color: rgba(239, 242, 246, 0.98);
  font-size: clamp(1.22rem, 1.02rem + 0.34vw, 1.46rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: left;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.36);
}

.crafting-workbench__duel-item-name.is-epic {
  color: var(--item-grade-epic-text);
}

.crafting-workbench__duel-item-name.is-unique {
  color: var(--item-grade-unique-text);
}

.crafting-workbench__duel-item-name.is-legend {
  color: var(--item-grade-legend-text);
}

.crafting-workbench__duel-item-name.is-rare {
  color: var(--item-grade-rare-text);
}

.crafting-workbench__duel-item-name.is-special {
  color: var(--item-grade-special-text);
}

.crafting-workbench__duel-item-name.is-common {
  color: var(--item-grade-common-text);
}

.crafting-workbench__duel-preview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  --crafting-thumb-fill: var(--item-grade-common-gradient);
}

.crafting-workbench__duel-preview.is-epic {
  --crafting-thumb-fill: var(--item-grade-epic-gradient);
}

.crafting-workbench__duel-preview.is-unique {
  --crafting-thumb-fill: var(--item-grade-unique-gradient);
}

.crafting-workbench__duel-preview.is-legend {
  --crafting-thumb-fill: var(--item-grade-legend-gradient);
}

.crafting-workbench__duel-preview.is-rare {
  --crafting-thumb-fill: var(--item-grade-rare-gradient);
}

.crafting-workbench__duel-preview.is-special {
  --crafting-thumb-fill: var(--item-grade-special-gradient);
}

.crafting-workbench__duel-preview.is-common {
  --crafting-thumb-fill: var(--item-grade-common-gradient);
}

.crafting-workbench__duel-preview-thumb {
  flex: 0 0 auto;
  width: 58px;
  border-radius: 14px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.crafting-workbench__duel-panel.is-running {
  border-color: rgba(124, 214, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(87, 194, 255, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.crafting-workbench__duel-panel.is-success {
  border-color: rgba(255, 223, 134, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(255, 223, 134, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.crafting-workbench__duel-panel.is-failure {
  border-color: rgba(255, 128, 128, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(255, 116, 116, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.crafting-workbench__success-feed {
  display: grid;
  align-content: end;
  gap: 5px;
  width: min(100%, 460px);
  min-height: 168px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(235, 189, 91, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 22, 30, 0.5), rgba(8, 11, 18, 0.74)),
    rgba(8, 11, 18, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.crafting-workbench__success-feed-line {
  margin: 0;
  min-width: 0;
  color: #ebbd5b;
  font-size: clamp(0.7rem, 0.64rem + 0.16vw, 0.82rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-align: left;
  word-break: keep-all;
  animation: crafting-success-feed-line-enter 240ms ease both;
}

.crafting-workbench__success-feed-part.is-system {
  color: #ebbd5b;
}

.crafting-workbench__success-feed-part.is-character {
  color: #63c1f8;
}

.crafting-workbench__success-feed-part.is-item {
  color: #f97204;
}

.crafting-workbench__success-feed-part.is-celebration {
  color: #e086a3;
}

.crafting-workbench__success-feed-part.is-guard {
  color: #f8f3eb;
}

.crafting-workbench__duel-gauge-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.crafting-workbench__duel-gauge {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.crafting-workbench__duel-gauge.is-winning {
  filter: brightness(1.04);
}

.crafting-workbench__duel-gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 24px;
}

.crafting-workbench__duel-gauge-row strong {
  flex: 0 0 34px;
  color: rgba(245, 245, 245, 0.96);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
}

.crafting-workbench__duel-gauge-track {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.58);
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.98), rgba(24, 22, 19, 0.94)),
    rgba(10, 10, 10, 0.98);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 3px rgba(0, 0, 0, 0.32);
}

.crafting-workbench__duel-gauge-fill {
  position: relative;
  display: block;
  min-width: 0;
  height: 100%;
  border-radius: 0;
  transition:
    width 120ms linear,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.crafting-workbench__duel-gauge-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.24) 46%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: none;
}

.crafting-workbench__duel-panel.is-running .crafting-workbench__duel-gauge-fill {
  filter: saturate(1.12) brightness(1.05);
}

.crafting-workbench__duel-panel.is-running .crafting-workbench__duel-gauge-fill::after {
  opacity: 1;
  animation: crafting-gauge-sheen 900ms linear infinite;
}

.crafting-workbench__duel-gauge.is-success .crafting-workbench__duel-gauge-fill {
  background:
    linear-gradient(90deg, rgba(92, 154, 255, 0.98), rgba(73, 128, 255, 0.98)),
    rgba(73, 128, 255, 0.98);
  box-shadow: 0 0 16px rgba(88, 141, 255, 0.18);
}

.crafting-workbench__duel-gauge.is-failure .crafting-workbench__duel-gauge-fill {
  background:
    linear-gradient(90deg, rgba(255, 167, 72, 0.98), rgba(255, 126, 34, 0.98)),
    rgba(255, 126, 34, 0.98);
  box-shadow: 0 0 16px rgba(255, 140, 42, 0.18);
}

.crafting-workbench__duel-gauge.is-success.is-winning .crafting-workbench__duel-gauge-track {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 3px rgba(0, 0, 0, 0.32),
    0 0 12px rgba(88, 141, 255, 0.2);
}

.crafting-workbench__duel-gauge.is-failure.is-winning .crafting-workbench__duel-gauge-track {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    inset 0 -1px 3px rgba(0, 0, 0, 0.32),
    0 0 12px rgba(255, 140, 42, 0.2);
}

.crafting-workbench__summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crafting-workbench__material-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crafting-workbench__material-tile {
  --crafting-thumb-fill: linear-gradient(180deg, rgba(122, 136, 164, 0.34), rgba(28, 34, 48, 0.78));
  cursor: default;
}

.crafting-workbench__material-tile:hover {
  transform: none;
}

.crafting-workbench__material-tile.is-ready {
  border-color: rgba(114, 218, 174, 0.16);
}

.crafting-workbench__material-tile.is-shortage {
  border-color: rgba(255, 156, 110, 0.22);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 156, 110, 0.08);
}

.crafting-workbench__material-copy strong {
  min-height: 0;
  color: rgba(243, 246, 250, 0.96);
  font-size: 0.92rem;
}

.crafting-workbench__material-copy {
  gap: 3px;
}

.crafting-workbench__material-count {
  margin: 0;
  color: rgba(214, 221, 232, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.crafting-workbench__material-tile.is-shortage .crafting-workbench__material-copy strong {
  color: #ffbf9d;
}

.crafting-workbench__material-tile.is-shortage .crafting-workbench__material-count {
  color: rgba(255, 191, 157, 0.82);
}

.material-conversion-workbench__recipe-copy {
  gap: 4px;
}

.material-conversion-workbench__recipe-copy p,
.material-conversion-workbench__recipe-copy small {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
}

.material-conversion-workbench__recipe-copy p {
  font-size: 0.7rem;
}

.material-conversion-workbench__recipe-copy small {
  font-size: 0.64rem;
}

.material-conversion-workbench__panel-stack {
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow: visible;
  align-content: start;
}

.enhancement-panel--material-conversion
  .enhancement-stage__right
  .enhancement-rail-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.material-conversion-workbench__panel-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.material-conversion-workbench__group-header {
  display: grid;
  gap: 4px;
  padding-left: 3px;
}

.material-conversion-workbench__group-header strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.material-conversion-workbench__group-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  line-height: 1.5;
}

.material-conversion-workbench__empty-state {
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(8, 11, 18, 0.76);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
}

.material-conversion-workbench__grade-item {
  --material-conversion-grade-rgb: 132 140 156;
  --material-conversion-grade-text: rgba(243, 246, 250, 0.96);
  border-color: rgba(var(--material-conversion-grade-rgb) / 0.2);
  background:
    linear-gradient(
      180deg,
      rgba(var(--material-conversion-grade-rgb) / 0.12),
      rgba(var(--material-conversion-grade-rgb) / 0.03)
    ),
    rgba(8, 11, 18, 0.82);
}

.material-conversion-workbench__grade-item.is-common {
  --material-conversion-grade-rgb: 195 195 195;
  --material-conversion-grade-text: var(--item-grade-common-text);
  background: var(--item-grade-common-gradient);
  border-color: var(--item-grade-common-border);
}

.material-conversion-workbench__grade-item.is-rare {
  --material-conversion-grade-rgb: 25 224 72;
  --material-conversion-grade-text: var(--item-grade-rare-text);
  background: var(--item-grade-rare-gradient);
  border-color: var(--item-grade-rare-border);
}

.material-conversion-workbench__grade-item.is-legend {
  --material-conversion-grade-rgb: 55 154 255;
  --material-conversion-grade-text: var(--item-grade-legend-text);
  background: var(--item-grade-legend-gradient);
  border-color: var(--item-grade-legend-border);
}

.material-conversion-workbench__grade-item.is-unique {
  --material-conversion-grade-rgb: 255 208 43;
  --material-conversion-grade-text: var(--item-grade-unique-text);
  background: var(--item-grade-unique-gradient);
  border-color: var(--item-grade-unique-border);
}

.material-conversion-workbench__grade-item.is-epic {
  --material-conversion-grade-rgb: 255 108 0;
  --material-conversion-grade-text: var(--item-grade-epic-text);
  background: var(--item-grade-epic-gradient);
  border-color: var(--item-grade-epic-border);
}

.material-conversion-workbench__grade-item.is-special {
  --material-conversion-grade-rgb: 0 255 216;
  --material-conversion-grade-text: var(--item-grade-special-text);
  background: var(--item-grade-special-gradient);
  border-color: var(--item-grade-special-border);
}

.material-conversion-workbench__grade-item.is-special .enhancement-rail-item__thumb {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.2), transparent 44%),
    var(--item-grade-special-gradient);
  border-color: var(--item-grade-special-border);
}

.material-conversion-workbench__grade-item .enhancement-rail-item__thumb {
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(var(--material-conversion-grade-rgb) / 0.24),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(var(--material-conversion-grade-rgb) / 0.14),
      rgba(11, 14, 22, 0.96)
    ),
    rgba(11, 14, 22, 0.96);
  border-color: rgba(var(--material-conversion-grade-rgb) / 0.24);
}

.material-conversion-workbench__grade-item.is-common .enhancement-rail-item__thumb {
  background: var(--item-grade-common-gradient);
  border-color: var(--item-grade-common-border);
}

.material-conversion-workbench__grade-item.is-rare .enhancement-rail-item__thumb {
  background: var(--item-grade-rare-gradient);
  border-color: var(--item-grade-rare-border);
}

.material-conversion-workbench__grade-item.is-legend .enhancement-rail-item__thumb {
  background: var(--item-grade-legend-gradient);
  border-color: var(--item-grade-legend-border);
}

.material-conversion-workbench__grade-item.is-unique .enhancement-rail-item__thumb {
  background: var(--item-grade-unique-gradient);
  border-color: var(--item-grade-unique-border);
}

.material-conversion-workbench__grade-item.is-epic .enhancement-rail-item__thumb {
  background: var(--item-grade-epic-gradient);
  border-color: var(--item-grade-epic-border);
}

.material-conversion-workbench__grade-item.is-special .enhancement-rail-item__thumb {
  background: var(--item-grade-special-gradient);
  border-color: var(--item-grade-special-border);
}

.material-conversion-workbench__grade-item .enhancement-rail-item__copy strong {
  color: var(--material-conversion-grade-text);
}

.material-conversion-workbench__grade-item .enhancement-rail-item__badge {
  background: rgba(var(--material-conversion-grade-rgb) / 0.14);
  border-color: rgba(var(--material-conversion-grade-rgb) / 0.26);
}

.enhancement-shell-card--result {
  background:
    linear-gradient(180deg, rgba(14, 18, 28, 0.98), rgba(8, 11, 18, 0.98)),
    radial-gradient(circle at top right, rgba(var(--scene-accent) / 0.08), transparent 36%);
}

.enhancement-result-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.enhancement-result-tab {
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.enhancement-result-tab.is-active {
  background: linear-gradient(
    135deg,
    rgba(var(--scene-accent) / 0.24),
    rgba(var(--scene-secondary) / 0.14)
  );
  color: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(var(--scene-accent) / 0.24);
}

.enhancement-result-tab-panel {
  display: grid;
  min-height: 0;
}

.enhancement-result-item-info {
  --enhancement-selected-info-card-min-height: 250px;
  display: grid;
  grid-template-rows:
    minmax(var(--enhancement-selected-info-card-min-height), max-content)
    minmax(0, 1fr)
    auto;
  align-content: stretch;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.enhancement-result-item-info__grid {
  display: grid;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--enhancement-selected-info-card-min-height);
}

.enhancement-result-item-info__after-stats {
  display: grid;
  grid-row: 3;
  align-self: start;
  gap: 8px;
  margin-top: 10px;
}

.enhancement-result-item-info .character-detail__gear-card {
  width: 100%;
  min-height: var(--enhancement-selected-info-card-min-height);
  min-width: 0;
}

.enhancement-result-item-info > .enhancement-selected-item-card {
  grid-row: 1;
  min-height: var(--enhancement-selected-info-card-min-height);
}

.enhancement-result-item-info .character-detail__gear-visual {
  display: none;
}

.enhancement-result-item-info .character-detail__gear-media {
  grid-template-columns: minmax(0, 1fr);
}

.enhancement-result-item-info .character-detail__gear-heading {
  align-items: start;
}

.enhancement-result-item-info .character-detail__gear-name-line {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.enhancement-result-item-info .character-detail__gear-exceed-badge--inline {
  flex: 0 0 auto;
}

.enhancement-result-item-info
  .character-detail__gear-card:is(
    .is-epic,
    .is-heroic,
    .is-mythic,
    .is-unique,
    .is-legend,
    .is-rare,
    .is-special,
    .is-common
  ) {
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.enhancement-panel--wing-enhancement
  .enhancement-result-item-info.character-detail
  .character-detail__gear-card.item-grade-tone
  .character-detail__gear-row.is-wing-enhancement-owned-added
  .character-detail__gear-row-label,
.enhancement-panel--wing-enhancement
  .enhancement-result-item-info.character-detail
  .character-detail__gear-card.item-grade-tone
  .character-detail__gear-row.is-wing-enhancement-owned-added
  .character-detail__gear-row-value {
  color: #facc15 !important;
}

.enhancement-panel--wing-enhancement
  .enhancement-result-item-info.character-detail
  .character-detail__gear-card.item-grade-tone
  .character-detail__gear-row.is-wing-owned-effect-disabled
  .character-detail__gear-row-label,
.enhancement-panel--wing-enhancement
  .enhancement-result-item-info.character-detail
  .character-detail__gear-card.item-grade-tone
  .character-detail__gear-row.is-wing-owned-effect-disabled
  .character-detail__gear-row-value {
  color: rgba(203, 213, 225, 0.5) !important;
}

.enhancement-selected-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.enhancement-selected-item-card__visual {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.enhancement-selected-item-card__visual img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.enhancement-selected-item-card__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.enhancement-selected-item-card__copy span,
.enhancement-selected-item-card__copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.78rem;
}

.enhancement-selected-item-card__copy strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-godstone-grade-picker {
  display: grid;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.enhancement-godstone-grade-picker__buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.enhancement-godstone-grade-picker__button {
  display: grid;
  position: relative;
  min-height: 40px;
  place-items: center;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.42);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.enhancement-godstone-grade-picker__button.item-grade-tone {
  border-color: color-mix(in srgb, var(--item-grade-tone-border) 72%, transparent);
  background-color: var(--item-grade-tone-end);
  background-image: none;
  color: var(--item-grade-tone-text);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--item-grade-tone-glow) 20%, transparent);
}

.enhancement-godstone-grade-picker__button:hover,
.enhancement-godstone-grade-picker__button.is-active {
  border-color: var(--item-grade-tone-border, rgba(var(--scene-accent) / 0.58));
  background-color: var(--item-grade-tone-end, rgba(var(--scene-accent) / 0.16));
  background-image: none;
  color: rgba(255, 255, 255, 0.94);
}

.enhancement-godstone-grade-picker__button.item-grade-tone.is-active {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--item-grade-tone-border) 52%, transparent),
    0 8px 18px color-mix(in srgb, var(--item-grade-tone-glow) 24%, transparent);
}

.enhancement-godstone-grade-picker__button:hover {
  transform: translateY(-1px);
}

.enhancement-godstone-grade-picker__button span {
  overflow-wrap: anywhere;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.15;
}

.enhancement-godstone-grade-picker__button small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  line-height: 1.1;
}

.enhancement-godstone-grade-picker__button.is-active small {
  color: rgba(255, 255, 255, 0.72);
}

.enhancement-selected-equipment-potential {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--scene-accent) / 0.18);
  border-radius: 8px;
  background: rgba(var(--scene-accent) / 0.07);
}

.enhancement-selected-equipment-potential__label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.enhancement-selected-equipment-potential__value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.enhancement-selected-equipment-potential__value span {
  overflow: hidden;
  min-width: 0;
  color: rgba(255, 255, 255, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-selected-equipment-potential__value em {
  flex: 0 0 auto;
  color: #7bd3ff;
  font-style: normal;
}

.enhancement-selected-equipment-potential.is-empty {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(10, 14, 24, 0.42);
}

.enhancement-selected-equipment-potential.is-empty
  .enhancement-selected-equipment-potential__value {
  color: rgba(255, 255, 255, 0.52);
}

.enhancement-selected-equipment-potential__ticks {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.enhancement-selected-equipment-potential__tick-button {
  display: grid;
  min-height: 36px;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(10, 14, 24, 0.42);
  color: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.enhancement-selected-equipment-potential__tick-button:hover,
.enhancement-selected-equipment-potential__tick-button.is-active {
  border-color: rgba(var(--scene-accent) / 0.52);
  background: rgba(var(--scene-accent) / 0.16);
  color: rgba(255, 255, 255, 0.94);
}

.enhancement-selected-equipment-potential__tick-button:hover {
  transform: translateY(-1px);
}

.enhancement-selected-equipment-potential__tick-button span {
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.enhancement-selected-equipment-potential__tick-button small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
}

.enhancement-selected-equipment-potential__tick-button.is-active small {
  color: #7bd3ff;
}

.enhancement-selected-equipment-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.enhancement-selected-equipment-summary__item {
  display: grid;
  min-width: 0;
  min-height: 44px;
  place-items: center;
  gap: 3px;
  padding: 6px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.42);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.16;
  text-align: center;
  overflow-wrap: anywhere;
}

.enhancement-selected-equipment-summary__label,
.enhancement-selected-equipment-summary__value {
  display: block;
  min-width: 0;
  max-width: 100%;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

.enhancement-selected-equipment-summary__label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  font-weight: 750;
}

.enhancement-selected-equipment-summary__value {
  color: currentColor;
  font-size: 0.8rem;
  font-weight: 900;
}

.enhancement-selected-equipment-summary__item.is-filled {
  border-color: rgba(var(--scene-accent) / 0.22);
  background: rgba(var(--scene-accent) / 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.enhancement-selected-equipment-summary__item.item-grade-tone {
  border-color: color-mix(in srgb, var(--item-grade-tone-border) 72%, transparent);
  background-color: var(--item-grade-tone-end);
  background-image: var(--item-grade-tone-gradient);
  color: var(--item-grade-tone-text);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--item-grade-tone-glow) 28%, transparent);
}

.enhancement-selected-equipment-summary__item.item-grade-tone
  .enhancement-selected-equipment-summary__label {
  color: color-mix(in srgb, var(--item-grade-tone-text) 72%, rgba(255, 255, 255, 0.58));
}

.enhancement-selected-equipment-summary__item.is-empty {
  color: rgba(255, 255, 255, 0.52);
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result {
  display: flex;
  flex-direction: column;
  min-height: 772px;
  height: 772px;
  box-sizing: border-box;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-result-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.enhancement-panel--equipment-layout
  .enhancement-shell-card--result
  .enhancement-result-tab-panel
  > .enhancement-shell-sections {
  height: 100%;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-shell-sections,
.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-shell-section {
  min-height: 0;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-shell-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-list {
  max-height: none;
  height: 100%;
  min-height: 0;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-item {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-item__thumb {
  width: 44px;
  border-radius: 12px;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-item__thumb span {
  font-size: 0.72rem;
  letter-spacing: -0.03em;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-item__copy {
  gap: 2px;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-item__copy strong {
  display: none;
}

.enhancement-panel--equipment-layout .enhancement-shell-card--result .enhancement-rail-item__copy p {
  font-size: 0.82rem;
  line-height: 1.25;
}

.enhancement-shell-card__header {
  display: grid;
  gap: 6px;
  padding-left: 3px;
}

.enhancement-reference-equipment {
  display: grid;
  gap: clamp(12px, 1vw, 16px);
}

.enhancement-reference-equipment__section {
  display: grid;
  gap: clamp(8px, 0.78vw, 10px);
}

.enhancement-reference-equipment__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.enhancement-reference-equipment__header-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.enhancement-reference-equipment__header strong {
  color: var(--text-primary);
  font-size: 0.94rem;
}

.enhancement-reference-equipment__header span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.enhancement-reference-equipment__control-hint {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.enhancement-reference-equipment__god-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(236, 209, 132, 0.24);
  border-radius: 999px;
  background: rgba(32, 26, 12, 0.52);
  color: rgba(255, 236, 174, 0.84);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.enhancement-reference-equipment__god-toggle:hover,
.enhancement-reference-equipment__god-toggle.is-active {
  transform: translateY(-1px);
  border-color: rgba(236, 209, 132, 0.58);
  background: linear-gradient(180deg, rgba(111, 83, 24, 0.72), rgba(39, 28, 10, 0.84));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 20px rgba(236, 209, 132, 0.16);
  color: #fff4bf;
}

.enhancement-reference-equipment__god-toggle:focus-visible {
  outline: 2px solid rgba(236, 209, 132, 0.64);
  outline-offset: 2px;
}

.enhancement-reference-equipment__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--enhancement-reference-grid-gap);
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__grid--cube {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.enhancement-reference-equipment__slot {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  min-height: var(--enhancement-reference-slot-size);
  padding: clamp(6px, 0.55vw, 8px) clamp(4px, 0.46vw, 6px);
  border-radius: clamp(12px, 1.1vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__slot {
  aspect-ratio: 1 / 1;
  align-content: center;
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--cube .enhancement-reference-equipment__slot {
  width: 100%;
  min-height: var(--enhancement-reference-slot-size);
  aspect-ratio: 1 / 1;
  align-content: center;
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--equipment .enhancement-reference-equipment__slot-visual {
  min-height: calc(var(--enhancement-reference-icon-size) + 4px);
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--equipment .enhancement-reference-equipment__icon,
.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--equipment .enhancement-reference-equipment__empty-mark,
.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--equipment .enhancement-reference-equipment__icon.is-fallback {
  width: var(--enhancement-reference-icon-size);
  height: var(--enhancement-reference-icon-size);
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--cube .enhancement-reference-equipment__slot-visual {
  min-height: calc(var(--enhancement-reference-icon-size) + 4px);
}

.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--cube .enhancement-reference-equipment__icon,
.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--cube .enhancement-reference-equipment__empty-mark,
.enhancement-panel--equipment-layout .enhancement-reference-equipment__section--cube .enhancement-reference-equipment__icon.is-fallback {
  width: var(--enhancement-reference-icon-size);
  height: var(--enhancement-reference-icon-size);
}

.enhancement-reference-equipment__slot.is-filled {
  border-color: rgba(var(--scene-secondary) / 0.28);
  background:
    linear-gradient(180deg, rgba(var(--scene-secondary) / 0.1), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.enhancement-reference-equipment__slot.is-clickable {
  cursor: pointer;
}

.enhancement-reference-equipment__slot.is-disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.45);
}

.enhancement-reference-equipment__slot.is-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--scene-accent) / 0.4);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.enhancement-reference-equipment__slot.is-clickable:focus-visible {
  outline: 2px solid rgba(var(--scene-secondary) / 0.72);
  outline-offset: 2px;
}

.enhancement-reference-equipment__slot.is-active {
  border-color: rgba(236, 209, 132, 0.5);
  background:
    linear-gradient(180deg, rgba(65, 54, 24, 0.96), rgba(28, 23, 12, 0.96)),
    rgba(28, 23, 12, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 191, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(236, 209, 132, 0.14);
}

.enhancement-reference-equipment__slot.is-filled.is-epic {
  border-color: var(--item-grade-epic-border);
  background: var(--item-grade-epic-gradient);
}

.enhancement-reference-equipment__slot.is-filled.is-common {
  border-color: var(--item-grade-common-border);
  background: var(--item-grade-common-gradient);
}

.enhancement-reference-equipment__slot.is-filled.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
}

.enhancement-reference-equipment__slot.is-filled.is-legend {
  border-color: var(--item-grade-legend-border);
  background: var(--item-grade-legend-gradient);
}

.enhancement-reference-equipment__slot.is-filled.is-rare {
  border-color: var(--item-grade-rare-border);
  background: var(--item-grade-rare-gradient);
}

.enhancement-reference-equipment__slot.is-filled.is-special {
  border-color: var(--item-grade-special-border);
  background: var(--item-grade-special-gradient);
}

.enhancement-reference-equipment__slot.is-active.is-filled.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
}

.enhancement-reference-equipment__slot.is-active.is-filled.is-legend {
  border-color: var(--item-grade-legend-border);
  background: var(--item-grade-legend-gradient);
}

.enhancement-reference-equipment__slot.is-active.is-filled.is-rare {
  border-color: var(--item-grade-rare-border);
  background: var(--item-grade-rare-gradient);
}

.enhancement-reference-equipment__slot.is-active.is-filled.is-epic {
  border-color: var(--item-grade-epic-border);
  background: var(--item-grade-epic-gradient);
}

.enhancement-reference-equipment__slot.is-active.is-filled.is-common {
  border-color: var(--item-grade-common-border);
  background: var(--item-grade-common-gradient);
  box-shadow:
    inset 0 0 0 1px rgba(236, 242, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(154, 164, 186, 0.14);
}

.enhancement-reference-equipment__slot.is-active.is-filled.is-special {
  border-color: var(--item-grade-special-border);
  background: var(--item-grade-special-gradient);
}

.enhancement-reference-equipment__slot.is-restorable {
  border-style: dashed;
  border-color: rgba(126, 214, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(15, 25, 35, 0.92), rgba(10, 16, 24, 0.92)),
    rgba(255, 255, 255, 0.03);
}

.enhancement-reference-equipment__slot-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.enhancement-reference-equipment__slot-visual {
  display: grid;
  min-height: calc(var(--enhancement-reference-icon-size) - 2px);
  place-items: center;
}

.enhancement-reference-equipment__icon {
  width: clamp(30px, 2.6vw, 34px);
  height: clamp(30px, 2.6vw, 34px);
  object-fit: contain;
}

.enhancement-reference-equipment__icon.is-fallback,
.enhancement-reference-equipment__empty-mark {
  display: grid;
  width: clamp(30px, 2.6vw, 34px);
  height: clamp(30px, 2.6vw, 34px);
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.8rem;
  font-weight: 700;
}

.enhancement-panel--equipment-layout .enhancement-god-cube__slot.enhancement-reference-equipment__slot {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 0;
  overflow: hidden;
  padding: 2px;
  border-radius: clamp(5px, 0.55vw, 8px);
}

.enhancement-panel--equipment-layout
  .enhancement-god-cube__slot
  .enhancement-reference-equipment__slot-visual {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.enhancement-panel--equipment-layout .enhancement-god-cube__slot .enhancement-reference-equipment__icon,
.enhancement-panel--equipment-layout
  .enhancement-god-cube__slot
  .enhancement-reference-equipment__empty-mark,
.enhancement-panel--equipment-layout
  .enhancement-god-cube__slot
  .enhancement-reference-equipment__icon.is-fallback {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.enhancement-reference-equipment__slot-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: clamp(18px, 1.7vw, 20px);
  height: clamp(16px, 1.55vw, 18px);
  padding: 0 clamp(4px, 0.45vw, 5px);
  border-radius: 999px;
  background: rgba(15, 19, 28, 0.88);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.52rem, 0.46rem + 0.12vw, 0.58rem);
  font-weight: 800;
  line-height: clamp(16px, 1.55vw, 18px);
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.enhancement-reference-equipment__slot-badge--cube {
  max-width: calc(100% - 24px);
  min-width: 0;
  font-size: 0.54rem;
  letter-spacing: -0.01em;
}

.enhancement-reference-equipment__slot-exceed-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: clamp(20px, 1.9vw, 22px);
  height: clamp(20px, 1.9vw, 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.enhancement-reference-equipment__slot-exceed-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(126, 214, 255, 0.52);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(151, 228, 255, 0.34), rgba(48, 105, 142, 0.72)),
    rgba(10, 28, 42, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(232, 249, 255, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.22);
  transform: rotate(45deg);
}

.enhancement-reference-equipment__slot-exceed-badge span {
  position: relative;
  z-index: 1;
  color: #f3fcff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.enhancement-reference-equipment__slot-remove {
  position: absolute;
  right: 5px;
  top: 5px;
  display: grid;
  width: clamp(18px, 1.7vw, 20px);
  height: clamp(18px, 1.7vw, 20px);
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 19, 28, 0.9);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.enhancement-reference-equipment__slot-remove:hover {
  border-color: rgba(var(--scene-hot) / 0.42);
  background: rgba(76, 18, 18, 0.92);
  color: #fff;
}

.enhancement-reference-equipment__slot-restore {
  min-width: 44px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(126, 214, 255, 0.42);
  border-radius: 999px;
  background: rgba(126, 214, 255, 0.16);
  color: rgba(234, 248, 255, 0.96);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.enhancement-reference-equipment__slot-restore:hover {
  background: rgba(126, 214, 255, 0.24);
  border-color: rgba(126, 214, 255, 0.62);
  transform: translateY(-1px);
}

.enhancement-focus-card {
  display: grid;
  grid-template-columns: clamp(84px, 8.4vw, 104px) minmax(0, 1fr);
  gap: clamp(10px, 1vw, 14px);
  align-items: center;
}

.enhancement-focus-card__visual,
.enhancement-showcase__visual {
  position: relative;
  background: conic-gradient(from -90deg, rgba(var(--scene-accent) / 0.9) 0 var(--enhancement-rate), rgba(255, 255, 255, 0.08) var(--enhancement-rate) 100%);
}

.enhancement-focus-card__visual {
  width: clamp(84px, 8.4vw, 104px);
  aspect-ratio: 1 / 1;
  padding: 7px;
  border-radius: 50%;
  box-shadow:
    0 0 28px rgba(var(--scene-secondary) / 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.enhancement-focus-card__visual-inner,
.enhancement-showcase__visual-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--scene-secondary) / 0.16), transparent 40%),
    linear-gradient(180deg, rgba(24, 28, 38, 0.98), rgba(10, 13, 20, 0.98));
}

.enhancement-focus-card__visual-inner {
  border-radius: 50%;
}

.enhancement-focus-card__visual-inner img,
.enhancement-showcase__visual-frame img,
.enhancement-rail-item__thumb img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}

.enhancement-focus-card__visual-inner span,
.enhancement-showcase__visual-frame span,
.enhancement-rail-item__thumb span {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.enhancement-focus-card__copy {
  display: grid;
  gap: 6px;
}

.enhancement-focus-card__copy strong,
.enhancement-focus-card__rate strong {
  color: #fff;
}

.enhancement-focus-card__rate,
.enhancement-showcase__callout {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(var(--scene-secondary) / 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(12, 16, 24, 0.82);
}

.enhancement-focus-card__rate {
  display: grid;
  gap: 4px;
}

.enhancement-focus-card__rate span,
.enhancement-focus-card__rate small {
  color: rgba(255, 255, 255, 0.72);
}

.enhancement-metric-list {
  display: grid;
  gap: 10px;
}

.enhancement-metric-row {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.enhancement-metric-row__copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.enhancement-metric-row__copy span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.83rem;
}

.enhancement-metric-row__copy strong {
  color: #fff;
}

.enhancement-metric-row__meter {
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.enhancement-metric-row__meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--scene-accent) / 0.98), rgba(var(--scene-secondary) / 0.96));
}

.enhancement-field {
  display: grid;
  gap: 6px;
}

.enhancement-field span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
}

.enhancement-field select,
.enhancement-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 8, 14, 0.82);
  color: #fff;
}

.enhancement-field select.enhancement-soul-custom-select {
  font-weight: 900;
}

.enhancement-field select.enhancement-soul-custom-select option {
  font-weight: 800;
}

.enhancement-two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.enhancement-three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.enhancement-stage .button {
  min-height: 44px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.enhancement-stage .button:not(.button--ghost) {
  background: linear-gradient(180deg, rgba(255, 219, 112, 0.98), rgba(194, 134, 34, 0.98));
  color: #16110a;
}

.enhancement-stage .button.button--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.enhancement-showcase {
  position: relative;
  min-height: clamp(620px, 58vw, 760px);
  padding: clamp(22px, 2vw, 28px) clamp(18px, 2.2vw, 30px) clamp(26px, 2.8vw, 36px);
  border-radius: clamp(24px, 2.4vw, 32px);
  overflow: hidden;
  text-align: center;
}

.enhancement-shell-card--equipment-showcase {
  position: relative;
  padding: 16px 18px 16px;
  min-height: 772px;
  height: 772px;
  box-sizing: border-box;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 20%, rgba(56, 198, 255, 0.18), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(255, 196, 80, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(7, 11, 18, 0.98), rgba(3, 6, 12, 0.98));
}

.enhancement-equipment-showcase {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  align-content: start;
}

.enhancement-equipment-showcase__title {
  color: var(--item-grade-unique-text);
  max-width: min(100%, 480px);
  font-size: clamp(0.94rem, 0.76rem + 0.54vw, 1.42rem);
  font-weight: 800;
  line-height: 1.02;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  letter-spacing: -0.03em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.enhancement-equipment-showcase__title.is-epic {
  color: var(--item-grade-epic-text);
}

.enhancement-equipment-showcase__title.is-unique {
  color: var(--item-grade-unique-text);
}

.enhancement-equipment-showcase__title.is-legend {
  color: var(--item-grade-legend-text);
}

.enhancement-equipment-showcase__title.is-rare {
  color: var(--item-grade-rare-text);
}

.enhancement-equipment-showcase__title.is-special {
  color: var(--item-grade-special-text);
}

.enhancement-equipment-showcase__title.is-common {
  color: var(--item-grade-common-text);
}

.enhancement-equipment-showcase__title.is-result-success {
  text-shadow:
    0 0 18px rgba(255, 220, 126, 0.2),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

.enhancement-equipment-showcase__title.is-result-failure {
  color: #ff9f9f;
  text-shadow:
    0 0 16px rgba(255, 118, 118, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

.enhancement-equipment-showcase__title.is-result-destroy {
  color: #ff9c9c;
  text-shadow:
    0 0 22px rgba(255, 109, 109, 0.28),
    0 8px 20px rgba(0, 0, 0, 0.32);
}

.enhancement-equipment-showcase__title-row {
  width: min(100%, 760px);
}

.enhancement-equipment-showcase__title-row--soul {
  position: relative;
  text-align: left;
  box-sizing: border-box;
  padding-right: 0;
}

.enhancement-equipment-showcase__title-row--soul .enhancement-equipment-showcase__title {
  display: block;
  max-width: 100%;
}

.enhancement-equipment-showcase__soul-skill-overlay {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 90;
  width: 100%;
  min-height: 26px;
  margin: 0;
  color: #ebbd5b;
  font-size: clamp(0.92rem, 0.82rem + 0.34vw, 1.16rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow:
    0 0 18px rgba(235, 189, 91, 0.42),
    0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: enhancement-soul-skill-overlay-pop 720ms ease both;
}

@keyframes enhancement-soul-skill-overlay-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  18%,
  84% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0.92;
    transform: translateY(-2px) scale(1);
  }
}

.enhancement-equipment-showcase__soul-badge-list {
  display: grid;
  gap: 8px;
  width: 100%;
  justify-items: center;
}

.character-detail__gear-soul-imprint-shell.enhancement-equipment-showcase__soul-badge-shell {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: fit-content;
  max-width: min(100%, 220px);
  z-index: 4;
  justify-items: center;
}

.character-detail__gear-soul-imprint-shell.enhancement-equipment-showcase__soul-badge-shell:hover,
.character-detail__gear-soul-imprint-shell.enhancement-equipment-showcase__soul-badge-shell:focus-within {
  z-index: 30;
}

.enhancement-equipment-showcase__soul-badge-trigger {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.enhancement-equipment-showcase__soul-badge-trigger:disabled {
  cursor: default;
}

.character-detail__gear-soul-imprint-tooltip.enhancement-equipment-showcase__soul-badge-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, calc(100vw - 32px));
  max-width: none;
  z-index: 20;
}

.character-detail__gear-soul-imprint-tooltip.enhancement-equipment-showcase__soul-badge-tooltip--book-rate {
  width: min(540px, calc(100vw - 32px));
}

.enhancement-equipment-showcase__soul-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(248px, 272px);
  align-items: start;
  gap: 20px;
  width: min(100%, 760px);
  margin-top: 8px;
}

.enhancement-equipment-showcase__soul-visual {
  display: grid;
  align-content: start;
  gap: 14px;
  justify-items: center;
  min-width: 0;
}

.enhancement-equipment-showcase__soul-sidecard {
  display: grid;
  align-self: start;
  width: 100%;
  transform: translateY(-50px);
  padding: 14px;
  border: 1px solid rgba(186, 194, 208, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(44, 49, 58, 0.94), rgba(26, 30, 37, 0.96)),
    rgba(26, 30, 37, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 32px rgba(10, 12, 18, 0.28),
    0 0 24px rgba(124, 136, 158, 0.1);
  box-sizing: border-box;
}

.enhancement-equipment-showcase__orbital-shell {
  position: relative;
  display: grid;
  width: min(100%, 272px);
  aspect-ratio: 1 / 1;
  place-items: center;
}

.enhancement-equipment-showcase__orbital-shell::before {
  content: '';
  position: absolute;
  inset: 4% 5%;
  border-radius: 50%;
  border: 1px solid rgba(94, 203, 255, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(143, 231, 255, 0.08),
    0 0 22px rgba(56, 186, 255, 0.18);
}

.enhancement-equipment-showcase__orbital-shell::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(94, 211, 255, 0.2), transparent 62%),
    radial-gradient(circle at 50% 120%, rgba(255, 221, 115, 0.24), transparent 54%);
  filter: blur(10px);
}

.enhancement-equipment-showcase__orbital-shell.is-result-success {
  animation: enhancement-equipment-result-success 820ms ease;
}

.enhancement-equipment-showcase__orbital-shell.is-result-failure {
  animation: enhancement-equipment-result-failure 480ms ease;
}

.enhancement-equipment-showcase__orbital-shell.is-result-destroy {
  animation: enhancement-equipment-result-destroy 1200ms ease;
}

.enhancement-equipment-showcase__orbital-shell.is-result-success::before {
  border-color: rgba(255, 216, 117, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 186, 0.14),
    0 0 28px rgba(255, 214, 102, 0.2);
}

.enhancement-equipment-showcase__orbital-shell.is-result-failure::before {
  border-color: rgba(255, 122, 122, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 214, 0.1),
    0 0 24px rgba(255, 102, 102, 0.14);
}

.enhancement-equipment-showcase__orbital-shell.is-result-destroy::before {
  border-color: rgba(255, 118, 118, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(255, 208, 208, 0.12),
    0 0 32px rgba(255, 84, 84, 0.22);
}

.enhancement-equipment-showcase__orbital-shell.is-result-success::after {
  background:
    radial-gradient(circle at 50% 38%, rgba(120, 232, 255, 0.28), transparent 52%),
    radial-gradient(circle at 50% 115%, rgba(255, 222, 128, 0.3), transparent 54%);
}

.enhancement-equipment-showcase__orbital-shell.is-result-failure::after {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 150, 150, 0.24), transparent 54%),
    radial-gradient(circle at 50% 112%, rgba(116, 25, 25, 0.24), transparent 56%);
}

.enhancement-equipment-showcase__orbital-shell.is-result-destroy::after {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 122, 122, 0.34), transparent 48%),
    radial-gradient(circle at 50% 112%, rgba(99, 15, 15, 0.28), transparent 56%);
  filter: blur(12px);
}

.enhancement-equipment-showcase__orbital-ring {
  position: relative;
  z-index: 1;
  display: grid;
  width: 80%;
  aspect-ratio: 1 / 1;
  place-items: center;
  border-radius: 999px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.08), transparent 60%),
    conic-gradient(
      from -90deg,
      rgba(40, 180, 255, 0.96),
      rgba(74, 236, 255, 0.8),
      rgba(35, 99, 196, 0.88),
      rgba(40, 180, 255, 0.96)
    );
  box-shadow:
    0 0 0 4px rgba(18, 26, 42, 0.88),
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(69, 196, 255, 0.16);
}

.enhancement-equipment-showcase__orbital-shell.is-result-success .enhancement-equipment-showcase__orbital-ring {
  box-shadow:
    0 0 0 4px rgba(23, 31, 47, 0.88),
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(255, 219, 112, 0.3);
}

.enhancement-equipment-showcase__orbital-shell.is-result-failure .enhancement-equipment-showcase__orbital-ring {
  box-shadow:
    0 0 0 4px rgba(18, 26, 42, 0.88),
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(255, 110, 110, 0.18);
}

.enhancement-equipment-showcase__orbital-shell.is-result-destroy .enhancement-equipment-showcase__orbital-ring {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 202, 202, 0.08), transparent 60%),
    conic-gradient(
      from -90deg,
      rgba(196, 52, 52, 0.96),
      rgba(255, 120, 120, 0.78),
      rgba(81, 14, 14, 0.92),
      rgba(196, 52, 52, 0.96)
    );
  box-shadow:
    0 0 0 4px rgba(35, 15, 18, 0.92),
    0 14px 28px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(255, 96, 96, 0.26);
}

.enhancement-equipment-showcase__attempt-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 14, 22, 0.86);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.enhancement-equipment-showcase__attempt-effect strong {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.enhancement-rune-failure-message {
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.enhancement-equipment-showcase__attempt-effect.is-result-success {
  border-color: rgba(255, 220, 126, 0.44);
  background: rgba(49, 38, 14, 0.84);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(255, 220, 126, 0.12);
}

.enhancement-equipment-showcase__attempt-effect.is-result-success strong {
  color: #ffe28f;
}

.enhancement-equipment-showcase__attempt-effect.is-result-failure {
  border-color: rgba(255, 132, 132, 0.42);
  background: rgba(60, 18, 20, 0.86);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(255, 109, 109, 0.14);
}

.enhancement-equipment-showcase__attempt-effect.is-result-failure strong {
  color: #ffd1d1;
}

.enhancement-equipment-showcase__attempt-effect.is-result-destroy {
  border-color: rgba(255, 126, 126, 0.5);
  background: rgba(58, 15, 18, 0.88);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(255, 109, 109, 0.16);
}

.enhancement-equipment-showcase__attempt-effect.is-result-destroy strong {
  color: #ffd2d2;
}

.enhancement-equipment-showcase__soul-tuning-socket {
  position: absolute;
  right: 10%;
  bottom: 12%;
  z-index: 3;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  padding: 5px;
  border: 2px solid rgba(206, 181, 117, 0.68);
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(47, 50, 58, 0.98), rgba(20, 24, 31, 0.98));
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px rgba(237, 211, 138, 0.14);
  pointer-events: none;
}

.enhancement-equipment-showcase__soul-tuning-socket.is-filled {
  cursor: pointer;
  pointer-events: auto;
}

.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone,
.enhancement-shell-card--soul-imprint-showcase
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone {
  position: absolute;
  overflow: visible;
  border-color: var(--item-grade-tone-border);
  background: var(--item-grade-tone-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-tone-glow);
}

.enhancement-panel--equipment-layout
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone.is-filled {
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84) !important;
}

.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone::before,
.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone::after,
.enhancement-shell-card--soul-imprint-showcase
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone::before,
.enhancement-shell-card--soul-imprint-showcase
  .enhancement-equipment-showcase__orbital-shell
  > .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone::after {
  content: none;
  display: none;
}

.enhancement-shell-card--soul-imprint-showcase
  .enhancement-equipment-showcase__soul-tuning-socket.item-grade-tone
  > .enhancement-equipment-showcase__soul-tuning-socket-cost {
  position: absolute;
}

.enhancement-equipment-showcase__soul-tuning-socket.is-empty {
  border-color: rgba(121, 129, 145, 0.52);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.28),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 12px rgba(138, 146, 164, 0.08);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-common {
  border-color: var(--item-grade-common-border);
  background: var(--item-grade-common-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-common-glow);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-unique-glow);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-legend {
  border-color: var(--item-grade-legend-border);
  background: var(--item-grade-legend-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-legend-glow);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-rare {
  border-color: var(--item-grade-rare-border);
  background: var(--item-grade-rare-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-rare-glow);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-epic {
  border-color: var(--item-grade-epic-border);
  background: var(--item-grade-epic-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-epic-glow);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-special {
  border-color: var(--item-grade-special-border);
  background: var(--item-grade-special-gradient);
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(9, 12, 18, 0.84),
    0 0 18px var(--item-grade-special-glow);
}

.enhancement-equipment-showcase__soul-tuning-socket-core {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(61, 64, 72, 0.98), rgba(26, 29, 36, 0.98));
}

.enhancement-equipment-showcase__soul-tuning-socket.is-unique
  .enhancement-equipment-showcase__soul-tuning-socket-core {
  background: var(--item-grade-unique-gradient);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-legend
  .enhancement-equipment-showcase__soul-tuning-socket-core {
  background: var(--item-grade-legend-gradient);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-rare
  .enhancement-equipment-showcase__soul-tuning-socket-core {
  background: var(--item-grade-rare-gradient);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-epic
  .enhancement-equipment-showcase__soul-tuning-socket-core {
  background: var(--item-grade-epic-gradient);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-special
  .enhancement-equipment-showcase__soul-tuning-socket-core {
  background: var(--item-grade-special-gradient);
}

.enhancement-equipment-showcase__soul-tuning-socket.is-common
  .enhancement-equipment-showcase__soul-tuning-socket-core {
  background: var(--item-grade-common-gradient);
}

.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__soul-tuning-socket.is-filled
  > .enhancement-equipment-showcase__soul-tuning-socket-core,
.enhancement-shell-card--soul-imprint-showcase
  .enhancement-equipment-showcase__soul-tuning-socket.is-filled
  > .enhancement-equipment-showcase__soul-tuning-socket-core {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.enhancement-equipment-showcase__soul-tuning-socket-core img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.enhancement-equipment-showcase__soul-tuning-socket-cost {
  position: absolute;
  right: -4px;
  bottom: -2px;
  z-index: 1;
  min-width: 24px;
  padding: 3px 7px 2px;
  border: 1px solid rgba(255, 231, 170, 0.38);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 23, 10, 0.96), rgba(14, 11, 5, 0.96));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 10px rgba(214, 184, 98, 0.18);
  color: #ffe8ad;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.enhancement-equipment-showcase__orb-core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid rgba(207, 181, 116, 0.82);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12), transparent 58%),
    rgba(36, 28, 12, 0.96);
  box-shadow:
    inset 0 10px 20px rgba(255, 255, 255, 0.06),
    inset 0 -16px 26px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 236, 186, 0.24);
}

.enhancement-equipment-showcase__orb-core.is-unique {
  background: var(--item-grade-unique-gradient);
}

.enhancement-equipment-showcase__orb-core.item-grade-tone:not(.is-empty) {
  border-color: transparent;
}

.enhancement-panel--equipment-layout
  .enhancement-equipment-showcase
  .enhancement-equipment-showcase__orb-core.item-grade-tone:not(.is-empty) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.enhancement-equipment-showcase__orb-core.is-legend {
  background: var(--item-grade-legend-gradient);
}

.enhancement-equipment-showcase__orb-core.is-rare {
  background: var(--item-grade-rare-gradient);
}

.enhancement-equipment-showcase__orb-core.is-epic {
  background: var(--item-grade-epic-gradient);
}

.enhancement-equipment-showcase__orb-core.is-special {
  background: var(--item-grade-special-gradient);
}

.enhancement-equipment-showcase__orb-core.is-common {
  background: var(--item-grade-common-gradient);
}

.enhancement-equipment-showcase__orb-core img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
}

.enhancement-equipment-showcase__orb-core span {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 800;
}

.enhancement-equipment-showcase__diamond-arc {
  position: absolute;
  left: 50%;
  bottom: 13%;
  z-index: 2;
  width: 72%;
  height: 26%;
  transform: translateX(-50%);
}

.enhancement-equipment-showcase__diamond {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(23, 28, 38, 0.96), rgba(8, 11, 18, 0.96)),
    rgba(8, 11, 18, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 6px 12px rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%) rotate(45deg);
}

.enhancement-equipment-showcase__diamond.is-active {
  border-color: rgba(170, 236, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(225, 250, 255, 0.98), rgba(78, 203, 255, 0.9)),
    rgba(78, 203, 255, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 0 18px rgba(109, 221, 255, 0.42);
}

@keyframes enhancement-equipment-result-success {
  0% {
    transform: scale(0.98);
  }

  45% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes enhancement-equipment-result-failure {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(7px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(4px);
  }
}

@keyframes enhancement-equipment-result-destroy {
  0% {
    transform: scale(1);
    filter: saturate(1);
  }

  18% {
    transform: scale(1.05);
    filter: saturate(1.25);
  }

  44% {
    transform: scale(0.96);
    filter: saturate(0.82);
  }

  100% {
    transform: scale(1);
    filter: saturate(1);
  }
}

.enhancement-equipment-showcase__rate-copy {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.enhancement-equipment-showcase__rate-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
}

.enhancement-equipment-showcase__rate-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.enhancement-equipment-showcase__rate-heading strong {
  color: #fff;
  font-size: clamp(1rem, 0.88rem + 0.34vw, 1.28rem);
  line-height: 1.2;
}

.enhancement-equipment-showcase__rate-breakdown {
  color: rgba(104, 233, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 700;
}

.enhancement-equipment-showcase__rate-breakdown-bonus {
  color: rgba(239, 196, 69, 0.98);
}

.enhancement-equipment-showcase__rate-hint {
  margin: -35px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 1.1rem;
  line-height: 1.1rem;
  visibility: hidden;
}

.enhancement-equipment-showcase__rate-hint.is-visible {
  visibility: visible;
}

.enhancement-equipment-showcase__rate-bar-shell {
  display: block;
  width: min(100%, 520px);
}

.enhancement-equipment-showcase__rate-bar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 620px);
}

.enhancement-equipment-showcase__rate-bar-row .enhancement-equipment-showcase__rate-bar-shell {
  flex: 0 1 520px;
  width: min(100%, 520px);
}

.enhancement-equipment-showcase__rate-bar-row--adjustable
  .enhancement-equipment-showcase__rate-bar-shell {
  flex: 1 1 auto;
  width: auto;
}

.enhancement-equipment-showcase__rate-adjust-button {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(239, 196, 69, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(14, 17, 25, 0.92);
  color: #fff2b7;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.enhancement-equipment-showcase__rate-adjust-button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

.enhancement-shell-card--equipment-enhancement-showcase {
  min-height: 836px;
  height: auto;
}

.enhancement-shell-card--soul-imprint-showcase {
  min-height: 0;
  height: auto;
}

.enhancement-shell-card--equipment-enhancement-showcase
  .enhancement-equipment-showcase__rate-bar-shell {
  margin-top: 6px;
}

.enhancement-shell-card--equipment-enhancement-showcase
  .enhancement-equipment-showcase__rate-bar-row {
  margin-top: 6px;
}

.enhancement-shell-card--equipment-enhancement-showcase
  .enhancement-equipment-showcase__rate-bar-row
  .enhancement-equipment-showcase__rate-bar-shell {
  margin-top: 0;
}

.enhancement-shell-card--equipment-enhancement-showcase .enhancement-equipment-showcase__rate-hint {
  margin-top: 8px;
}

.enhancement-shell-card--soul-imprint-showcase .enhancement-equipment-showcase {
  gap: 12px;
}

.enhancement-shell-card--soul-imprint-showcase .enhancement-equipment-showcase__soul-hero {
  margin-top: 16px;
}

.enhancement-shell-card--soul-imprint-showcase .enhancement-equipment-showcase__soul-sidecard {
  transform: none;
}

.enhancement-shell-card--soul-imprint-showcase .enhancement-equipment-showcase__rate-hint {
  margin-top: 6px;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-hero {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: min(100%, 420px);
  margin-top: 6px;
}

.enhancement-shell-card--gemstone-showcase {
  min-height: var(--enhancement-gemstone-shell-min-height);
  height: 100%;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  gap: 12px;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__title-row--soul {
  text-align: center;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-visual {
  width: 100%;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__orbital-shell {
  width: min(100%, 200px);
}

.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__orbital-shell.is-clickable {
  cursor: pointer;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-sidecard--gemstone {
  display: grid;
  align-self: center;
  justify-items: stretch;
  width: min(100%, var(--enhancement-gemstone-list-width));
  min-height: var(--enhancement-gemstone-list-min-height);
  margin-top: 14px;
  transform: none;
  box-sizing: border-box;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-list--gemstone {
  width: 100%;
  min-height: calc(var(--enhancement-gemstone-list-min-height) - 28px);
  justify-items: stretch;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry-list {
  min-height: calc(var(--enhancement-gemstone-list-min-height) - 28px);
  width: 100%;
  justify-items: stretch;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry-shell {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry-head {
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding-inline: 2px;
  box-sizing: border-box;
  text-align: left;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry-main {
  justify-content: flex-start;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry-label {
  text-align: left;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__soul-entry-head span {
  min-width: 52px;
  padding: 2px 10px;
  color: rgba(248, 252, 255, 0.96);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__soul-sidecard--gemstone
  .enhancement-empty--inset {
  display: grid;
  place-items: center;
  min-height: calc(var(--enhancement-gemstone-list-min-height) - 28px);
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__rate-hint {
  margin-top: 0;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__utility {
  width: min(100%, 420px);
  margin-top: auto;
  justify-items: center;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__secondary-actions {
  width: fit-content;
  max-width: 100%;
  justify-content: center;
  margin-inline: auto;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__secondary-actions .button {
  flex: 0 0 auto;
  min-width: 96px;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__auto-roll--gemstone {
  width: fit-content;
  max-width: 100%;
  justify-items: center;
  margin-inline: auto;
}

.enhancement-shell-card--gemstone-showcase
  .enhancement-equipment-showcase__auto-roll--gemstone
  .enhancement-equipment-showcase__action-helper {
  text-align: center;
}

.enhancement-panel--inheritance-transfer .enhancement-stage {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(var(--enhancement-stage-right-min), var(--enhancement-stage-right-width));
  align-items: stretch;
}

.enhancement-panel--inheritance-transfer .enhancement-stage__left:empty {
  display: none;
}

.enhancement-panel--inheritance-transfer .enhancement-stage__center,
.enhancement-panel--inheritance-transfer .enhancement-stage__right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.enhancement-panel--inheritance-transfer .enhancement-stage__center > .enhancement-shell-card,
.enhancement-panel--inheritance-transfer .enhancement-stage__right > .enhancement-shell-card {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.enhancement-shell-card--inheritance-transfer-showcase {
  min-height: 0;
  height: auto;
}

.enhancement-shell-card--inheritance-transfer-showcase
  .enhancement-equipment-showcase--inheritance-transfer {
  --inheritance-slot-size: 150px;
  --inheritance-lane-width: 280px;
  --inheritance-link-width: 148px;
  --inheritance-soul-preview-min-height: 352px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 8px;
}

.enhancement-equipment-showcase__inheritance-slots {
  display: grid;
  grid-template-columns:
    var(--inheritance-lane-width)
    var(--inheritance-link-width)
    var(--inheritance-lane-width);
  gap: 32px;
  align-items: start;
  justify-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  margin-inline: auto;
  align-self: start;
}

.enhancement-equipment-showcase__inheritance-slot {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  width: var(--inheritance-lane-width);
  min-width: 0;
}

.enhancement-equipment-showcase__inheritance-slot-stack {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  width: var(--inheritance-lane-width);
  min-width: 0;
}

.enhancement-equipment-showcase__inheritance-slot.is-interactive {
  cursor: pointer;
}

.enhancement-equipment-showcase__inheritance-slot.is-interactive:focus-visible {
  outline: none;
}

.enhancement-equipment-showcase__inheritance-slot.is-interactive:focus-visible
  .enhancement-equipment-showcase__orbital-shell--inheritance,
.enhancement-equipment-showcase__inheritance-slot.is-interactive:hover
  .enhancement-equipment-showcase__orbital-shell--inheritance {
  filter: brightness(1.04);
}

.enhancement-equipment-showcase__inheritance-slot-title {
  display: block;
  width: max-content;
  max-width: min(240px, 100vw - 32px);
  color: rgba(255, 223, 110, 0.96);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.enhancement-equipment-showcase__inheritance-slot-title.is-epic {
  color: var(--item-grade-epic-text);
}

.enhancement-equipment-showcase__inheritance-slot-title.is-unique {
  color: var(--item-grade-unique-text);
}

.enhancement-equipment-showcase__inheritance-slot-title.is-special {
  color: var(--item-grade-special-text);
}

.enhancement-equipment-showcase__inheritance-slot-title.is-common {
  color: var(--item-grade-common-text);
}

.enhancement-equipment-showcase__inheritance-slot-title.is-rare {
  color: var(--item-grade-rare-text);
}

.enhancement-equipment-showcase__inheritance-slot-title.is-legend {
  color: var(--item-grade-legend-text);
}

.enhancement-equipment-showcase__orbital-shell--inheritance {
  width: var(--inheritance-slot-size);
  height: var(--inheritance-slot-size);
}

.enhancement-equipment-showcase__orbital-shell--inheritance
  .enhancement-equipment-showcase__orb-core {
  overflow: visible;
}

.enhancement-equipment-showcase__orbital-shell--inheritance::before {
  inset: 5%;
}

.enhancement-equipment-showcase__orbital-shell--inheritance::after {
  inset: 10%;
}

.enhancement-equipment-showcase__orbital-shell--inheritance.is-empty::before {
  border-style: dashed;
  border-color: rgba(148, 171, 201, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(174, 191, 214, 0.04),
    0 0 18px rgba(83, 106, 136, 0.12);
}

.enhancement-equipment-showcase__orbital-shell--inheritance.is-empty::after {
  background:
    radial-gradient(circle at 50% 46%, rgba(124, 158, 205, 0.12), transparent 48%),
    radial-gradient(circle at 50% 112%, rgba(74, 90, 116, 0.18), transparent 56%);
  filter: blur(11px);
}

.enhancement-equipment-showcase__orbital-ring--inheritance {
  width: 80%;
}

.enhancement-equipment-showcase__orbital-shell--inheritance
  .enhancement-reference-equipment__slot-badge {
  right: 13px;
  bottom: 13px;
  min-width: 15px;
  height: 13px;
  padding: 0 4px;
  font-size: 0.46rem;
  line-height: 13px;
  z-index: 4;
}

.enhancement-equipment-showcase__orbital-shell--inheritance
  .enhancement-reference-equipment__slot-badge--cube {
  max-width: calc(100% - 20px);
  font-size: 0.48rem;
}

.enhancement-equipment-showcase__orbital-shell--inheritance
  .enhancement-reference-equipment__slot-exceed-badge {
  right: 13px;
  bottom: 13px;
  width: 16px;
  height: 16px;
  z-index: 4;
}

.enhancement-equipment-showcase__orbital-shell--inheritance
  .enhancement-reference-equipment__slot-exceed-badge span {
  font-size: 0.54rem;
}

.enhancement-equipment-showcase__inheritance-slot.is-empty
  .enhancement-equipment-showcase__orbital-ring--inheritance {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.04), transparent 60%),
    conic-gradient(
      from -90deg,
      rgba(74, 102, 142, 0.62),
      rgba(121, 149, 189, 0.44),
      rgba(41, 59, 86, 0.68),
      rgba(74, 102, 142, 0.62)
    );
  box-shadow:
    0 0 0 4px rgba(18, 26, 42, 0.74),
    0 10px 22px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(103, 133, 173, 0.1);
}

.enhancement-equipment-showcase__orb-core.is-empty {
  border-color: rgba(149, 168, 191, 0.44);
  background:
    radial-gradient(circle at 50% 32%, rgba(201, 214, 232, 0.06), transparent 58%),
    linear-gradient(180deg, rgba(34, 41, 54, 0.98), rgba(18, 24, 34, 0.98));
  box-shadow:
    inset 0 10px 20px rgba(255, 255, 255, 0.03),
    inset 0 -16px 26px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(190, 204, 222, 0.1);
}

.enhancement-equipment-showcase__orb-core.is-empty::before {
  content: '';
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  border: 1px dashed rgba(171, 192, 220, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(217, 228, 242, 0.02),
    0 0 12px rgba(111, 139, 181, 0.08);
}

.enhancement-equipment-showcase__inheritance-link {
  display: grid;
  place-items: center;
  width: var(--inheritance-link-width);
  min-height: calc(var(--inheritance-slot-size) + 30px);
}

.enhancement-equipment-showcase__inheritance-link-arrow {
  color: #88e5ff;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  text-shadow:
    0 0 16px rgba(104, 220, 255, 0.24),
    0 0 28px rgba(52, 140, 255, 0.16);
}

.enhancement-equipment-showcase__inheritance-soul-previews {
  display: grid;
  grid-template-columns:
    var(--inheritance-lane-width)
    var(--inheritance-link-width)
    var(--inheritance-lane-width);
  gap: 32px;
  align-items: start;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  min-height: var(--inheritance-soul-preview-min-height);
}

.enhancement-equipment-showcase__inheritance-link-spacer {
  width: var(--inheritance-link-width);
  min-height: 1px;
}

.enhancement-equipment-showcase__inheritance-preview-main {
  display: grid;
  gap: 12px;
  align-content: start;
  width: min(
    100%,
    calc(var(--inheritance-lane-width) * 2 + var(--inheritance-link-width) + 64px)
  );
  margin: 14px auto 0;
  justify-items: center;
}

.enhancement-equipment-showcase__cost-strip--inheritance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 360px);
}

.enhancement-equipment-showcase__soul-sidecard--inheritance {
  transform: none;
  min-height: var(--inheritance-soul-preview-min-height);
  width: var(--inheritance-lane-width);
}

.enhancement-equipment-showcase__soul-sidecard--inheritance-lower {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}

.enhancement-equipment-showcase__soul-sidecard--inheritance
  .enhancement-equipment-showcase__soul-list {
  min-height: calc(var(--inheritance-soul-preview-min-height) - 28px);
  align-content: start;
}

.enhancement-equipment-showcase__soul-sidecard--inheritance
  .enhancement-equipment-showcase__soul-entry-list {
  min-height: 0;
  align-content: start;
}

.enhancement-equipment-showcase__soul-sidecard--inheritance .enhancement-empty--inset {
  display: grid;
  place-items: center;
  min-height: calc(var(--inheritance-soul-preview-min-height) - 28px);
}

.enhancement-equipment-showcase__inheritance-preview-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.enhancement-equipment-showcase__inheritance-preview-meta strong {
  color: #fff;
  font-size: 0.96rem;
  line-height: 1.25;
}

.enhancement-equipment-showcase__inheritance-preview-meta p {
  margin: 4px 0 0;
  color: rgba(216, 223, 236, 0.7);
  font-size: 0.76rem;
  line-height: 1.5;
}

.enhancement-equipment-showcase__inheritance-preview-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.72rem;
  white-space: nowrap;
}

.enhancement-shell-card--inheritance-transfer-showcase .enhancement-equipment-showcase__rate-hint {
  margin-top: 2px;
  min-height: 0;
  line-height: 1.55;
  white-space: pre-line;
}

.enhancement-equipment-showcase__inheritance-status-message {
  margin: -4px 0 2px;
  color: rgba(120, 236, 173, 0.96);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.enhancement-shell-card--inheritance-transfer-showcase .enhancement-equipment-showcase__utility {
  width: min(100%, 468px);
  margin-top: auto;
  padding-top: 16px;
}

.enhancement-shell-card--inheritance-transfer-showcase
  .enhancement-equipment-showcase__secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  gap: 8px;
}

.enhancement-shell-card--inheritance-transfer-showcase
  .enhancement-equipment-showcase__primary-action {
  min-width: 0;
}

.enhancement-shell-card--inheritance-transfer-showcase
  .enhancement-equipment-showcase__secondary-actions .button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.78rem;
  justify-content: center;
  white-space: nowrap;
}

.enhancement-equipment-showcase__rate-bar-track {
  position: relative;
  height: 22px;
  border: 1px solid rgba(190, 160, 88, 0.46);
  background:
    linear-gradient(180deg, rgba(22, 25, 37, 0.98), rgba(12, 14, 22, 0.98)),
    rgba(12, 14, 22, 0.98);
  border-radius: 0;
  overflow: hidden;
}

.enhancement-equipment-showcase__rate-bar-content {
  position: absolute;
  inset: 4px;
  overflow: hidden;
}

.enhancement-equipment-showcase__rate-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: auto;
  border-radius: 0;
  background: rgba(78, 214, 255, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 20px rgba(96, 218, 255, 0.18);
}

.enhancement-equipment-showcase__rate-bar-bonus {
  position: absolute;
  inset: 0 auto 0 auto;
  display: block;
  height: auto;
  border-radius: 0;
  background: rgba(239, 196, 69, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 16px rgba(239, 196, 69, 0.2);
}

.enhancement-shell-card--equipment-showcase .button {
  min-height: 36px;
}

.enhancement-equipment-showcase__cost-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 320px);
}

.enhancement-equipment-showcase__cost-strip--single {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 168px);
}

.enhancement-equipment-showcase__cost-strip--compact {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  width: min(100%, 420px);
}

.enhancement-equipment-showcase__cost-card {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.76);
}

.enhancement-equipment-showcase__cost-card span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.64rem;
}

.enhancement-equipment-showcase__cost-card strong {
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.2;
}

.enhancement-equipment-showcase__utility {
  display: grid;
  gap: 10px;
  width: min(100%, 388px);
  margin-top: -20px;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.enhancement-shell-card--equipment-enhancement-showcase .enhancement-equipment-showcase__utility {
  margin-top: 12px;
  padding-top: 10px;
}

.enhancement-shell-card--soul-imprint-showcase .enhancement-equipment-showcase__utility {
  margin-top: 4px;
  padding-top: 8px;
}

.enhancement-equipment-showcase__utility .enhancement-field span {
  font-size: 0.62rem;
}

.enhancement-equipment-showcase__utility .enhancement-field input {
  padding: 7px 9px;
  border-radius: 11px;
}

.enhancement-equipment-showcase__utility .button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.84rem;
}

.enhancement-equipment-showcase__secondary-actions {
  align-items: start;
  justify-content: stretch;
  width: min(100%, 388px);
  gap: 6px;
}

.enhancement-equipment-showcase__secondary-actions .button {
  flex: 1 1 0;
}

.enhancement-equipment-showcase__primary-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr);
  gap: 8px;
  width: min(100%, 388px);
  align-items: stretch;
}

.enhancement-equipment-showcase__primary-action-row.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.enhancement-equipment-showcase__custom-adjustment {
  display: grid;
  gap: 6px;
  width: min(100%, 388px);
}

.enhancement-equipment-showcase__custom-adjustment--inheritance {
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-items: center;
}

.enhancement-equipment-showcase__custom-adjustment-button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 0.74rem;
  line-height: 1.1;
}

.enhancement-equipment-showcase__custom-adjustment .button.is-active {
  border-color: rgba(var(--scene-accent) / 0.48);
  background:
    linear-gradient(180deg, rgba(var(--scene-accent) / 0.18), rgba(var(--scene-accent) / 0.06)),
    rgba(255, 255, 255, 0.05);
  color: #fff4c4;
}

.enhancement-equipment-showcase__custom-adjustment small {
  color: rgba(217, 224, 238, 0.72);
  font-size: 0.66rem;
  line-height: 1.4;
  text-align: center;
}

.enhancement-equipment-showcase__primary-action {
  display: grid;
  flex: 1 1 0;
  gap: 3px;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.enhancement-equipment-showcase__primary-action-row .enhancement-equipment-showcase__primary-action {
  position: relative;
  z-index: 2;
  width: 100%;
}

.enhancement-equipment-showcase__efficiency-button {
  min-width: 0;
  padding: 0 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.enhancement-equipment-showcase__action-helper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: rgba(217, 224, 238, 0.74);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.enhancement-equipment-showcase__action-helper img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  object-fit: contain;
}

.enhancement-equipment-showcase__action-helper img.is-kinah {
  border-radius: 0;
  background: transparent;
}

.enhancement-equipment-showcase__auto-roll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  width: min(100%, 388px);
}

.enhancement-equipment-showcase__auto-roll .enhancement-field {
  min-width: 0;
}

.enhancement-equipment-showcase__auto-roll .enhancement-field select {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
}

.enhancement-equipment-showcase__auto-roll-button {
  width: auto;
  min-width: 92px;
}

.enhancement-equipment-showcase__auto-roll--gemstone {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.enhancement-equipment-showcase__auto-roll-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.enhancement-equipment-showcase__auto-roll--gemstone .enhancement-equipment-showcase__auto-roll-button,
.enhancement-equipment-showcase__auto-roll--gemstone .enhancement-equipment-showcase__custom-adjust-button {
  width: 100%;
  min-width: 0;
}

.enhancement-equipment-showcase__modifier-controls {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.enhancement-equipment-adjustment-dialog {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(4px);
}

.enhancement-equipment-adjustment-dialog__panel {
  display: grid;
  gap: 16px;
  width: min(100%, 540px);
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(18, 22, 31, 0.98), rgba(8, 11, 18, 0.98)),
    radial-gradient(circle at top, rgba(var(--scene-secondary) / 0.1), transparent 40%);
  background-color: rgba(10, 13, 20, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.42);
}

.enhancement-equipment-adjustment-dialog__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.enhancement-equipment-adjustment-dialog__header strong {
  color: #fff;
  font-size: 1rem;
}

.enhancement-equipment-adjustment-dialog__header p {
  margin: 4px 0 0;
  color: rgba(217, 224, 238, 0.74);
  font-size: 0.76rem;
  line-height: 1.45;
}

.enhancement-custom-image-paste-zone {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(31, 37, 50, 0.82);
  color: rgba(221, 229, 242, 0.78);
  cursor: help;
  font-size: 0.74rem;
  line-height: 1.35;
}

.enhancement-custom-image-paste-zone:focus {
  outline: none;
}

.enhancement-custom-image-paste-zone:hover,
.enhancement-custom-image-paste-zone:focus {
  z-index: 25;
}

.enhancement-custom-image-paste-zone > strong {
  color: rgba(255, 244, 196, 0.94);
  font-size: 0.76rem;
}

.enhancement-custom-image-paste-zone > span {
  min-width: 0;
}

.enhancement-custom-image-paste-zone__preview {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 12;
  display: grid;
  gap: 7px;
  width: min(330px, calc(100vw - 56px));
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 12, 18, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.985);
  transform-origin: top right;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.enhancement-custom-image-paste-zone__preview-label {
  color: rgba(255, 244, 196, 0.94);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.enhancement-custom-image-paste-zone__preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.enhancement-custom-image-paste-zone:hover .enhancement-custom-image-paste-zone__preview,
.enhancement-custom-image-paste-zone:focus .enhancement-custom-image-paste-zone__preview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.enhancement-custom-image-paste-zone.is-success {
  border-color: rgba(109, 226, 122, 0.24);
  color: rgba(186, 242, 198, 0.9);
}

.enhancement-custom-image-paste-zone.is-error {
  border-color: rgba(255, 153, 86, 0.28);
  color: rgba(255, 204, 176, 0.9);
}

.enhancement-custom-image-paste-zone.is-disabled {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(24, 29, 39, 0.7);
  color: rgba(203, 213, 225, 0.66);
  cursor: not-allowed;
}

.enhancement-custom-image-paste-zone.is-disabled > strong {
  color: rgba(226, 232, 240, 0.72);
}

.enhancement-custom-image-paste-zone.is-disabled .enhancement-custom-image-paste-zone__preview {
  display: none;
}

.enhancement-equipment-adjustment-dialog__form {
  display: grid;
  gap: 12px;
}

.enhancement-equipment-adjustment-dialog__entry-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.82);
}

.enhancement-equipment-adjustment-dialog__entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.enhancement-equipment-adjustment-dialog__entry-header strong {
  color: #fff;
  font-size: 0.82rem;
}

.enhancement-equipment-adjustment-dialog__entry-header span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--scene-accent) / 0.18);
  color: rgba(255, 244, 196, 0.94);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.enhancement-equipment-adjustment-dialog__entry-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px;
}

.enhancement-equipment-adjustment-dialog__entry-card--soul-custom {
  gap: 0;
  padding: 10px 12px;
}

.enhancement-equipment-adjustment-dialog__entry-card--soul-custom
  .enhancement-equipment-adjustment-dialog__entry-fields {
  grid-template-columns: max-content minmax(0, 1.35fr) minmax(86px, 0.7fr);
  align-items: center;
  gap: 8px;
}

.enhancement-equipment-adjustment-dialog__entry-inline-label {
  color: rgba(221, 230, 245, 0.82);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.enhancement-equipment-adjustment-dialog__actions {
  justify-content: flex-end;
}

.enhancement-soul-confirm-dialog__panel {
  width: min(100%, 440px);
  border-color: rgba(126, 214, 255, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(126, 214, 255, 0.12), transparent 46%),
    rgba(10, 13, 20, 0.96);
}

.enhancement-soul-confirm-dialog__body {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(126, 214, 255, 0.18);
  background: rgba(12, 31, 43, 0.42);
}

.enhancement-soul-confirm-dialog__body p {
  margin: 0;
  color: rgba(222, 247, 255, 0.92);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

.enhancement-equipment-efficiency-dialog__panel {
  width: min(100%, 760px);
  max-height: min(86vh, 820px);
  overflow: auto;
}

.enhancement-equipment-efficiency-dialog__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.enhancement-equipment-efficiency-dialog__summary article,
.enhancement-equipment-efficiency-dialog__material-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(8, 11, 18, 0.78);
}

.enhancement-equipment-efficiency-dialog__summary span,
.enhancement-equipment-efficiency-dialog__materials header span,
.enhancement-equipment-efficiency-dialog__attempts header span {
  color: rgba(217, 224, 238, 0.68);
  font-size: 0.68rem;
  font-weight: 800;
}

.enhancement-equipment-efficiency-dialog__summary strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.15;
}

.enhancement-equipment-efficiency-dialog__warning {
  margin: -2px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 139, 139, 0.2);
  background: rgba(70, 18, 22, 0.34);
  color: rgba(255, 198, 198, 0.92);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
}

.enhancement-equipment-efficiency-dialog__note {
  margin: -2px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(239, 196, 69, 0.18);
  background: rgba(78, 57, 13, 0.24);
  color: rgba(255, 244, 196, 0.9);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
}

.enhancement-equipment-efficiency-dialog__materials,
.enhancement-equipment-efficiency-dialog__attempts {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.enhancement-equipment-efficiency-dialog__materials header,
.enhancement-equipment-efficiency-dialog__attempts header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.enhancement-equipment-efficiency-dialog__materials header strong,
.enhancement-equipment-efficiency-dialog__attempts header strong {
  color: rgba(255, 244, 196, 0.96);
  font-size: 0.84rem;
}

.enhancement-equipment-efficiency-dialog__material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 8px;
}

.enhancement-equipment-efficiency-dialog__material-grid article {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  text-align: left;
}

.enhancement-equipment-efficiency-dialog__material-grid img {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.enhancement-equipment-efficiency-dialog__material-grid span {
  min-width: 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-equipment-efficiency-dialog__material-grid strong {
  color: #fff;
  font-size: 0.88rem;
}

.enhancement-equipment-efficiency-dialog__materials p,
.enhancement-equipment-efficiency-dialog__attempts p {
  margin: 0;
  color: rgba(217, 224, 238, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

.enhancement-equipment-efficiency-dialog__table {
  display: grid;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  background: rgba(8, 11, 18, 0.72);
}

.enhancement-equipment-efficiency-dialog__table-row {
  display: grid;
  grid-template-columns: 64px 0.72fr minmax(170px, 1.1fr) minmax(190px, 1.28fr) 86px;
  align-items: center;
  gap: 8px;
  min-width: 720px;
  padding: 9px 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.88);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
}

.enhancement-equipment-efficiency-dialog__table-row:first-child {
  border-top: 0;
}

.enhancement-equipment-efficiency-dialog__table-row.is-head {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 244, 196, 0.88);
  font-size: 0.68rem;
}

.enhancement-equipment-efficiency-dialog__table-row.is-current {
  background: rgba(126, 214, 255, 0.06);
}

.enhancement-equipment-efficiency-dialog__table-row.is-recommended {
  border-top-color: rgba(239, 196, 69, 0.22);
  background:
    linear-gradient(180deg, rgba(239, 196, 69, 0.12), rgba(239, 196, 69, 0.04)),
    rgba(8, 11, 18, 0.72);
  color: rgba(255, 255, 255, 0.95);
}

.enhancement-equipment-efficiency-dialog__table-row.is-recommended span:first-child,
.enhancement-equipment-efficiency-dialog__table-row.is-recommended span:last-child {
  color: #fff4c4;
}

.enhancement-equipment-efficiency-dialog__table-row span {
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.enhancement-equipment-efficiency-dialog__table-row span:first-child {
  text-align: center;
}

.enhancement-equipment-efficiency-dialog__table-row span:nth-child(3),
.enhancement-equipment-efficiency-dialog__table-row span:nth-child(4),
.enhancement-equipment-efficiency-dialog__table-row span:last-child {
  display: grid;
  gap: 2px;
  text-align: right;
}

.enhancement-equipment-efficiency-dialog__table-row em {
  display: block;
  color: rgba(217, 224, 238, 0.58);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .enhancement-equipment-showcase__primary-action-row {
    grid-template-columns: 1fr;
  }

  .enhancement-equipment-showcase__efficiency-button {
    min-height: 34px;
  }

  .enhancement-equipment-efficiency-dialog__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enhancement-equipment-efficiency-dialog__materials header,
  .enhancement-equipment-efficiency-dialog__attempts header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .enhancement-equipment-efficiency-dialog__table {
    overflow-x: auto;
  }

  .enhancement-equipment-efficiency-dialog__table-row {
    min-width: 660px;
  }
}

.enhancement-gemstone-auto-dialog__panel {
  width: fit-content;
  min-width: min(100%, 460px);
  max-width: min(100%, 620px);
}

.enhancement-gemstone-custom-dialog__panel {
  width: min(100%, 560px);
}

.enhancement-gemstone-custom-dialog__list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.enhancement-gemstone-custom-dialog__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.82);
}

.enhancement-gemstone-custom-dialog__row > span {
  color: rgba(217, 224, 238, 0.78);
  font-size: 0.74rem;
  font-weight: 900;
}

.enhancement-gemstone-custom-dialog__row select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
}

.enhancement-gemstone-auto-dialog__target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.82);
}

.enhancement-gemstone-auto-dialog__target strong {
  color: #fff4c4;
  font-size: 0.82rem;
}

.enhancement-gemstone-auto-dialog__target-control {
  display: grid;
  gap: 8px;
}

.enhancement-gemstone-auto-dialog__target-control span {
  color: rgba(217, 224, 238, 0.72);
  font-size: 0.7rem;
  font-weight: 700;
}

.enhancement-gemstone-auto-dialog__target-control input[type='range'] {
  width: 100%;
  accent-color: rgb(var(--scene-accent));
}

.enhancement-gemstone-auto-dialog__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.enhancement-gemstone-auto-dialog__tab {
  min-width: 88px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.82);
  color: rgba(217, 224, 238, 0.74);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.enhancement-gemstone-auto-dialog__tab:hover {
  transform: translateY(-1px);
}

.enhancement-gemstone-auto-dialog__tab.is-active {
  color: #fff;
}

.enhancement-gemstone-auto-dialog__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.enhancement-gemstone-auto-dialog__column {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.78);
}

.enhancement-gemstone-auto-dialog__column-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.enhancement-gemstone-auto-dialog__column-header strong {
  color: #fff;
  font-size: 0.86rem;
}

.enhancement-gemstone-auto-dialog__column-header span {
  color: rgba(217, 224, 238, 0.68);
  font-size: 0.68rem;
}

.enhancement-gemstone-auto-dialog__option-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.enhancement-gemstone-auto-dialog__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  transition:
    border-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.enhancement-gemstone-auto-dialog__option.is-gemstone-stage-basic {
  border-color: rgba(108, 207, 128, 0.36);
  background:
    linear-gradient(180deg, rgba(30, 91, 47, 0.18), rgba(15, 38, 20, 0.22)),
    rgba(11, 25, 14, 0.82);
}

.enhancement-gemstone-auto-dialog__option.is-gemstone-stage-advanced {
  border-color: rgba(120, 168, 236, 0.36);
  background:
    linear-gradient(180deg, rgba(39, 71, 120, 0.18), rgba(18, 30, 52, 0.22)),
    rgba(13, 19, 34, 0.82);
}

.enhancement-gemstone-auto-dialog__option.is-gemstone-stage-best {
  border-color: rgba(232, 198, 102, 0.38);
  background:
    linear-gradient(180deg, rgba(122, 97, 34, 0.18), rgba(51, 39, 14, 0.22)),
    rgba(34, 26, 10, 0.82);
}

.enhancement-gemstone-auto-dialog__option.is-selected {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 20px rgba(0, 0, 0, 0.16);
}

.enhancement-gemstone-auto-dialog__option.is-selected.is-gemstone-stage-basic {
  border-color: rgba(108, 207, 128, 0.44);
}

.enhancement-gemstone-auto-dialog__option.is-selected.is-gemstone-stage-advanced {
  border-color: rgba(120, 168, 236, 0.44);
}

.enhancement-gemstone-auto-dialog__option.is-selected.is-gemstone-stage-best {
  border-color: rgba(232, 198, 102, 0.46);
}

.enhancement-gemstone-auto-dialog__option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}

.enhancement-gemstone-auto-dialog__option-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.enhancement-gemstone-auto-dialog__option-check span {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(214, 223, 238, 0.42);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.enhancement-gemstone-auto-dialog__option-check input:checked + span {
  border-color: rgba(238, 244, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(247, 250, 255, 0.92), rgba(201, 213, 255, 0.92)),
    rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 0 0 3px rgba(36, 44, 66, 0.88),
    0 0 12px rgba(214, 223, 255, 0.14);
}

.enhancement-gemstone-auto-dialog__option-check input:disabled + span {
  opacity: 0.34;
}

.enhancement-gemstone-auto-dialog__option-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.enhancement-gemstone-auto-dialog__option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.enhancement-gemstone-auto-dialog__option-head strong {
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.35;
}

.enhancement-gemstone-auto-dialog__option-head span {
  color: rgba(221, 234, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-book-rate-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(104, 233, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(104, 233, 255, 0.08), rgba(104, 233, 255, 0.02)),
    rgba(8, 11, 18, 0.78);
}

.enhancement-equipment-showcase__soul-book-rate-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.enhancement-equipment-showcase__soul-book-rate-header strong {
  color: #fff;
  font-size: 0.78rem;
}

.enhancement-equipment-showcase__soul-book-rate-header span {
  color: rgba(217, 224, 238, 0.68);
  font-size: 0.66rem;
  text-align: right;
}

.enhancement-equipment-showcase__soul-book-rate-list {
  display: grid;
  gap: 8px;
  max-height: 164px;
  overflow: auto;
  padding-right: 4px;
}

.enhancement-equipment-showcase__soul-book-rate-table-shell {
  max-height: 336px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.enhancement-equipment-showcase__soul-book-rate-layout {
  display: grid;
  grid-template-columns: minmax(132px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.enhancement-equipment-showcase__soul-book-rate-option-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 336px;
  overflow: auto;
  padding-right: 3px;
}

.enhancement-equipment-showcase__soul-book-rate-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(221, 234, 255, 0.82);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.enhancement-equipment-showcase__soul-book-rate-option:hover {
  transform: translateY(-1px);
  border-color: rgba(104, 233, 255, 0.24);
  background: rgba(104, 233, 255, 0.07);
}

.enhancement-equipment-showcase__soul-book-rate-option.is-selected {
  border-color: rgba(104, 233, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(104, 233, 255, 0.13), rgba(14, 116, 144, 0.06)),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(104, 233, 255, 0.08);
}

.enhancement-equipment-showcase__soul-book-rate-option strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-book-rate-option span {
  color: rgba(217, 224, 238, 0.66);
  font-size: 0.66rem;
  font-weight: 700;
}

.enhancement-equipment-showcase__soul-badge-tooltip--book-rate
  .enhancement-equipment-showcase__soul-book-rate-panel {
  min-height: 424px;
}

.enhancement-equipment-showcase__soul-book-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.enhancement-equipment-showcase__soul-book-rate-table th,
.enhancement-equipment-showcase__soul-book-rate-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  vertical-align: middle;
  word-break: keep-all;
}

.enhancement-equipment-showcase__soul-book-rate-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(10, 14, 24, 0.96);
  color: rgba(217, 224, 238, 0.8);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.enhancement-equipment-showcase__soul-book-rate-table tbody tr:last-child th,
.enhancement-equipment-showcase__soul-book-rate-table tbody tr:last-child td {
  border-bottom: 0;
}

.enhancement-equipment-showcase__soul-book-rate-table tbody th,
.enhancement-equipment-showcase__soul-book-rate-table tbody td {
  color: rgba(238, 242, 255, 0.92);
}

.enhancement-equipment-showcase__soul-book-rate-row--emphasis > th,
.enhancement-equipment-showcase__soul-book-rate-row--emphasis > td {
  border-top: 2px solid rgba(255, 231, 170, 0.32);
}

.enhancement-equipment-showcase__soul-book-rate-effect {
  min-width: 92px;
  color: #cffafe;
  font-weight: 800;
}

.enhancement-equipment-showcase__soul-book-rate-item {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
}

.enhancement-equipment-showcase__soul-book-rate-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.enhancement-equipment-showcase__soul-book-rate-item-head strong {
  color: #fff;
  font-size: 0.72rem;
}

.enhancement-equipment-showcase__soul-book-rate-item-head span {
  color: rgba(217, 224, 238, 0.72);
  font-size: 0.68rem;
}

.enhancement-equipment-showcase__soul-book-rate-item p {
  margin: 0;
  color: rgba(104, 233, 255, 0.92);
  font-size: 0.7rem;
  line-height: 1.5;
  word-break: keep-all;
}

.enhancement-equipment-showcase__soul-badge-note {
  margin: -4px 0 0;
  color: rgba(217, 224, 238, 0.74);
  font-size: 0.68rem;
  line-height: 1.45;
}

.enhancement-equipment-showcase__soul-book-rate-dialog__panel {
  width: min(100%, 620px);
  max-height: min(82vh, 760px);
}

.enhancement-equipment-showcase__soul-book-rate-dialog__body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.enhancement-equipment-showcase__soul-book-rate-tier {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(14, 116, 144, 0.08));
  color: #cffafe;
}

.enhancement-equipment-showcase__soul-book-rate-current {
  color: rgba(217, 224, 238, 0.78);
  font-size: 0.68rem;
  font-weight: 700;
}

.enhancement-equipment-showcase__soul-book-rate-chip {
  border-color: rgba(34, 211, 238, 0.18);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(12, 74, 110, 0.04));
  color: #cffafe;
}

@media (max-width: 640px) {
  .enhancement-equipment-showcase__soul-book-rate-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-equipment-showcase__soul-book-rate-option-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 148px;
  }
}

.enhancement-equipment-showcase__soul-list {
  display: grid;
  --enhancement-soul-entry-text-start: 44px;
  gap: 12px;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.enhancement-equipment-showcase__soul-list--gemstone {
  --enhancement-soul-entry-text-start: 10px;
}

.enhancement-equipment-showcase__soul-list-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding-left: var(--enhancement-soul-entry-text-start);
  box-sizing: border-box;
}

.character-detail__gear-soul-imprint-shell.enhancement-equipment-showcase__soul-tuning-probability-shell {
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  width: 20px;
  height: 20px;
  max-width: none;
  z-index: 5;
  justify-items: stretch;
}

.character-detail__gear-soul-imprint-shell.enhancement-equipment-showcase__soul-tuning-probability-shell:hover,
.character-detail__gear-soul-imprint-shell.enhancement-equipment-showcase__soul-tuning-probability-shell:focus-within {
  z-index: 32;
}

.enhancement-equipment-showcase__soul-tuning-probability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-color: rgba(236, 206, 123, 0.3);
  border-radius: 999px;
  background: rgba(236, 206, 123, 0.12);
  color: #f7e7ad;
  font-size: 0;
}

.enhancement-equipment-showcase__soul-tuning-probability-badge::before {
  content: '%';
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.character-detail__gear-soul-imprint-tooltip.enhancement-equipment-showcase__soul-tuning-probability-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  transform: none;
  width: min(380px, calc(100vw - 32px));
  max-width: none;
  z-index: 40;
}

.character-detail__gear-soul-imprint-tooltip.enhancement-equipment-showcase__soul-tuning-probability-tooltip
  > p {
  margin: 6px 0 10px;
  color: rgba(217, 224, 238, 0.72);
  font-size: 0.72rem;
  line-height: 1.45;
}

.enhancement-equipment-showcase__soul-tuning-probability-list {
  display: grid;
  gap: 7px;
}

.enhancement-equipment-showcase__soul-tuning-probability-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.enhancement-equipment-showcase__soul-tuning-probability-table th,
.enhancement-equipment-showcase__soul-tuning-probability-table td {
  padding: 6px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(221, 234, 255, 0.86);
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: left;
}

.enhancement-equipment-showcase__soul-tuning-probability-table th {
  color: rgba(247, 241, 198, 0.9);
  font-size: 0.68rem;
  font-weight: 900;
}

.enhancement-equipment-showcase__soul-tuning-probability-table th:first-child,
.enhancement-equipment-showcase__soul-tuning-probability-table td:first-child {
  width: 42px;
}

.enhancement-equipment-showcase__soul-tuning-probability-table th:last-child,
.enhancement-equipment-showcase__soul-tuning-probability-table td:last-child {
  width: 66px;
  text-align: right;
}

.enhancement-equipment-showcase__soul-tuning-probability-table td:nth-child(2) {
  min-width: 0;
}

.enhancement-equipment-showcase__soul-tuning-probability-table td:nth-child(2) span {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-tuning-probability-table td:last-child strong {
  color: rgba(188, 230, 255, 0.96);
  font-size: 0.72rem;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-tuning-probability-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
}

.enhancement-equipment-showcase__soul-tuning-probability-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-tuning-probability-row strong {
  color: rgba(188, 230, 255, 0.96);
  font-size: 0.74rem;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-list-header > strong {
  color: #f7f1c6;
  font-size: 0.92rem;
  font-weight: 800;
}

.enhancement-equipment-showcase__soul-list-summary-value {
  color: rgba(255, 219, 112, 0.92);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.enhancement-equipment-showcase__soul-list-summary-value.is-max {
  color: rgba(243, 229, 184, 0.98);
}

.enhancement-equipment-showcase__soul-list-summary-bar {
  grid-column: 1 / -1;
  width: 100%;
}

.enhancement-equipment-showcase__soul-skill-tier {
  background: linear-gradient(135deg, rgba(87, 96, 112, 0.26), rgba(39, 46, 58, 0.16));
  color: rgba(236, 241, 250, 0.92);
}

.enhancement-equipment-showcase__soul-skill-chip.is-priority-top,
.enhancement-equipment-showcase__soul-entry-label--skill.is-priority-top {
  border-color: rgba(250, 204, 21, 0.32);
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(250, 204, 21, 0.05));
  color: #fef3a6;
}

.enhancement-equipment-showcase__soul-skill-chip.is-priority-mid,
.enhancement-equipment-showcase__soul-entry-label--skill.is-priority-mid {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.04));
  color: #ffedd5;
}

.enhancement-equipment-showcase__soul-skill-chip.is-priority-low,
.enhancement-equipment-showcase__soul-entry-label--skill.is-priority-low {
  border-color: rgba(217, 119, 6, 0.24);
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.14), rgba(217, 119, 6, 0.03));
  color: #fed7aa;
}

.enhancement-equipment-showcase__soul-entry-list {
  display: grid;
  gap: 10px;
}

.enhancement-equipment-showcase__soul-entry-shell {
  position: relative;
  display: grid;
  gap: 0px;
}

.enhancement-equipment-showcase__soul-bind-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(212, 185, 255, 0.58);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(215, 192, 255, 0.96), rgba(177, 144, 243, 0.96)),
    rgba(177, 144, 243, 0.96);
  color: #22172f;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 22px rgba(74, 58, 110, 0.2),
    0 0 18px rgba(202, 174, 255, 0.18);
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.enhancement-equipment-showcase__soul-bind-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 12px 24px rgba(74, 58, 110, 0.24),
    0 0 22px rgba(202, 174, 255, 0.28);
}

.enhancement-equipment-showcase__soul-bind-button:disabled {
  opacity: 0.52;
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 14px rgba(15, 10, 24, 0.2);
}

.enhancement-equipment-showcase__soul-entry {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(32, 36, 44, 0.9);
  text-align: left;
}

.enhancement-equipment-showcase__soul-entry.is-spinning {
  border-color: rgba(120, 205, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(120, 205, 255, 0.12),
    0 14px 28px rgba(10, 24, 40, 0.18);
}

.enhancement-equipment-showcase__soul-entry.is-spinning .enhancement-equipment-showcase__soul-entry-label {
  animation: enhancement-soul-slot-reel 180ms linear infinite;
  transform-origin: center;
}

.enhancement-equipment-showcase__soul-entry.is-skill::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  opacity: 0;
}

.enhancement-equipment-showcase__soul-entry.is-skill.is-priority-top::before,
.enhancement-equipment-showcase__soul-entry.is-skill.is-priority-mid::before,
.enhancement-equipment-showcase__soul-entry.is-skill.is-priority-low::before {
  opacity: 1;
}

.enhancement-equipment-showcase__soul-entry.is-skill.is-priority-top::before {
  background: rgba(250, 204, 21, 0.9);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.22);
}

.enhancement-equipment-showcase__soul-entry.is-skill.is-priority-mid::before {
  background: rgba(245, 158, 11, 0.82);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.18);
}

.enhancement-equipment-showcase__soul-entry.is-skill.is-priority-low::before {
  background: rgba(217, 119, 6, 0.76);
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.16);
}

.enhancement-equipment-showcase__soul-entry.is-added {
  border-color: rgba(165, 115, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(32, 36, 44, 0.9);
  box-shadow: 0 10px 18px rgba(20, 12, 36, 0.12);
}

.enhancement-equipment-showcase__soul-entry.is-soul-imprint-extra {
  border-color: rgba(214, 188, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(142, 118, 194, 0.34), rgba(103, 82, 153, 0.26)),
    rgba(74, 62, 103, 0.9);
  box-shadow:
    0 10px 22px rgba(72, 58, 102, 0.18),
    0 0 0 1px rgba(214, 188, 255, 0.16);
}

.enhancement-equipment-showcase__soul-entry.is-disabled {
  overflow: hidden;
  opacity: 1;
  border-color: rgba(156, 163, 175, 0.22);
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(71, 85, 105, 0.1)),
    rgba(28, 32, 39, 0.82);
  box-shadow: none;
}

.enhancement-equipment-showcase__soul-entry.is-disabled::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  border: 1px dashed rgba(203, 213, 225, 0.18);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.58)),
    rgba(15, 23, 42, 0.34);
  pointer-events: none;
}

.enhancement-equipment-showcase__soul-entry.is-disabled
  .enhancement-equipment-showcase__soul-entry-head {
  opacity: 0.28;
  filter: grayscale(0.8);
}

.enhancement-equipment-showcase__soul-entry-shell.is-disabled
  .enhancement-equipment-showcase__soul-entry-rate {
  opacity: 0.28;
  filter: grayscale(0.8);
}

.enhancement-equipment-showcase__soul-entry-disabled-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: inherit;
  color: rgba(254, 226, 226, 0.98);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 12px rgba(127, 29, 29, 0.72);
  pointer-events: none;
}

.enhancement-equipment-showcase__soul-sidecard.is-fixed-soul-disabled {
  position: relative;
}

.enhancement-equipment-showcase__soul-fixed-overlay {
  position: absolute;
  z-index: 8;
  inset: 14px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.62)),
    rgba(5, 8, 14, 0.58);
  color: rgba(254, 226, 226, 0.98);
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 1px 14px rgba(127, 29, 29, 0.72);
  pointer-events: auto;
}

.enhancement-equipment-showcase__soul-entry.is-placeholder {
  opacity: 0.72;
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-gemstone-stage-basic,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-gemstone-stage-advanced,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-gemstone-stage-best {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 10px rgba(0, 0, 0, 0.12);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-epic,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-heroic,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-mythic,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-unique,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-legend,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-rare,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-special,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-common {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 10px rgba(0, 0, 0, 0.12);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-gemstone-stage-best {
  border-color: rgba(232, 198, 102, 0.54);
  background:
    linear-gradient(180deg, rgba(122, 97, 34, 0.26), rgba(51, 39, 14, 0.4)),
    rgba(34, 26, 10, 0.84);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-gemstone-stage-advanced {
  border-color: rgba(120, 168, 236, 0.54);
  background:
    linear-gradient(180deg, rgba(39, 71, 120, 0.28), rgba(18, 30, 52, 0.4)),
    rgba(13, 19, 34, 0.86);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-gemstone-stage-basic {
  border-color: rgba(108, 207, 128, 0.54);
  background:
    linear-gradient(180deg, rgba(30, 91, 47, 0.24), rgba(15, 38, 20, 0.38)),
    rgba(11, 25, 14, 0.86);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-epic,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-heroic,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-mythic {
  border-color: var(--item-grade-epic-border);
  background: var(--item-grade-epic-gradient);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-legend {
  border-color: var(--item-grade-legend-border);
  background: var(--item-grade-legend-gradient);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-rare {
  border-color: var(--item-grade-rare-border);
  background: var(--item-grade-rare-gradient);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-special {
  border-color: var(--item-grade-special-border);
  background: var(--item-grade-special-gradient);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-special
  .enhancement-equipment-showcase__soul-entry-head strong {
  color: var(--item-grade-special-text);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-common {
  border-color: var(--item-grade-common-border);
  background: var(--item-grade-common-gradient);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-epic
  .enhancement-equipment-showcase__soul-entry-head strong,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-heroic
  .enhancement-equipment-showcase__soul-entry-head strong,
.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-mythic
  .enhancement-equipment-showcase__soul-entry-head strong {
  color: var(--item-grade-epic-text);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-unique
  .enhancement-equipment-showcase__soul-entry-head strong {
  color: var(--item-grade-unique-text);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-legend
  .enhancement-equipment-showcase__soul-entry-head strong {
  color: var(--item-grade-legend-text);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-rare
  .enhancement-equipment-showcase__soul-entry-head strong {
  color: var(--item-grade-rare-text);
}

.enhancement-equipment-showcase__soul-entry.is-gemstone-entry.is-common
  .enhancement-equipment-showcase__soul-entry-head strong {
  color: var(--item-grade-common-text);
}

.enhancement-equipment-showcase__soul-entry-head,
.enhancement-equipment-showcase__soul-entry-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.enhancement-equipment-showcase__soul-entry-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.enhancement-equipment-showcase__gemstone-slot-label {
  color: rgba(217, 224, 238, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.enhancement-equipment-showcase__gemstone-grade-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #f8fafc;
}

.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__gemstone-slot-label,
.enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__gemstone-grade-badge {
  display: none;
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-gemstone-stage-best {
  border-color: rgba(232, 198, 102, 0.54);
  background:
    linear-gradient(180deg, rgba(122, 97, 34, 0.3), rgba(51, 39, 14, 0.46)),
    rgba(34, 26, 10, 0.9);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-gemstone-stage-advanced {
  border-color: rgba(120, 168, 236, 0.54);
  background:
    linear-gradient(180deg, rgba(39, 71, 120, 0.32), rgba(18, 30, 52, 0.46)),
    rgba(13, 19, 34, 0.9);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-gemstone-stage-basic {
  border-color: rgba(108, 207, 128, 0.54);
  background:
    linear-gradient(180deg, rgba(30, 91, 47, 0.28), rgba(15, 38, 20, 0.42)),
    rgba(11, 25, 14, 0.9);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-epic,
.enhancement-equipment-showcase__gemstone-grade-badge.is-heroic,
.enhancement-equipment-showcase__gemstone-grade-badge.is-mythic {
  border-color: var(--item-grade-epic-border);
  background: var(--item-grade-epic-gradient);
  color: var(--item-grade-epic-text);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
  color: var(--item-grade-unique-text);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-legend {
  border-color: var(--item-grade-legend-border);
  background: var(--item-grade-legend-gradient);
  color: var(--item-grade-legend-text);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-rare {
  border-color: var(--item-grade-rare-border);
  background: var(--item-grade-rare-gradient);
  color: var(--item-grade-rare-text);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-special {
  border-color: var(--item-grade-special-border);
  background: var(--item-grade-special-gradient);
  color: var(--item-grade-special-text);
}

.enhancement-equipment-showcase__gemstone-grade-badge.is-common {
  border-color: var(--item-grade-common-border);
  background: var(--item-grade-common-gradient);
  color: var(--item-grade-common-text);
}

.enhancement-equipment-showcase__soul-sidecard--gemstone
  .enhancement-equipment-showcase__soul-entry.is-gemstone-entry.item-grade-tone,
.enhancement-equipment-showcase__soul-sidecard--gemstone
  .enhancement-equipment-showcase__gemstone-grade-badge.item-grade-tone {
  background-color: var(--item-grade-tone-end, rgba(13, 18, 28, 0.92));
  background-image: none;
}

.enhancement-equipment-showcase__soul-entry-head strong {
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
}

.enhancement-equipment-showcase__soul-entry-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 8px;
}

.enhancement-equipment-showcase__soul-entry-label--skill {
  border: 1px solid transparent;
}

.enhancement-equipment-showcase__soul-entry-label.is-soul-rank-s {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.24), rgba(239, 68, 68, 0.08));
  color: #fee2e2;
}

.enhancement-equipment-showcase__soul-entry-label.is-soul-rank-pvp {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(88, 28, 135, 0.12));
  color: #f3e8ff;
}

.enhancement-equipment-showcase__soul-entry-label.is-soul-rank-a {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.24), rgba(250, 204, 21, 0.08));
  color: #fef3a6;
}

.enhancement-equipment-showcase__soul-entry-label.is-soul-rank-b {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.07));
  color: #dbeafe;
}

.enhancement-equipment-showcase__soul-entry-label.is-soul-rank-c {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.06));
  color: #dcfce7;
}

.enhancement-equipment-showcase__soul-entry-label.is-soul-rank-d {
  background: linear-gradient(135deg, rgba(163, 163, 163, 0.22), rgba(163, 163, 163, 0.07));
  color: #f5f5f4;
}

.enhancement-equipment-showcase__soul-entry-head span {
  color: rgba(221, 234, 255, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
}

.enhancement-equipment-showcase__soul-entry.is-soul-imprint-extra .enhancement-equipment-showcase__soul-entry-head span {
  color: rgba(247, 241, 255, 0.98);
}

.enhancement-equipment-showcase__soul-entry-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.22);
  color: rgba(254, 202, 202, 0.96);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-entry-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(214, 223, 238, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.enhancement-equipment-showcase__soul-entry-check:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 238, 248, 0.52);
}

.enhancement-equipment-showcase__soul-entry-check:disabled {
  opacity: 0.34;
  cursor: default;
  transform: none;
  border-color: rgba(214, 223, 238, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.enhancement-equipment-showcase__soul-entry-check span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.enhancement-equipment-showcase__soul-entry-check.is-selected {
  border-color: rgba(214, 188, 255, 0.72);
  background: rgba(214, 188, 255, 0.12);
}

.enhancement-equipment-showcase__soul-entry-check.is-selected span {
  background: rgba(229, 214, 255, 0.98);
  box-shadow: 0 0 10px rgba(214, 188, 255, 0.28);
}

.enhancement-equipment-showcase__soul-entry.is-soul-imprint-extra
  .enhancement-equipment-showcase__soul-entry-check {
  border-color: rgba(230, 214, 255, 0.56);
  background: rgba(255, 255, 255, 0.08);
}

.enhancement-equipment-showcase__soul-entry-rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-inline: 6px;
  padding-left: calc(var(--enhancement-soul-entry-text-start) - 6px);
}

.enhancement-equipment-showcase__soul-entry-rate strong {
  color: rgba(188, 230, 255, 0.96);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.enhancement-equipment-showcase__soul-entry-rate strong.is-max {
  color: rgba(243, 229, 184, 0.94);
}

.enhancement-equipment-showcase__soul-entry-rate strong.is-disabled {
  color: rgba(254, 202, 202, 0.92);
}

.enhancement-equipment-showcase__soul-list-summary-value.is-animating {
  color: rgba(154, 214, 255, 0.98);
  text-shadow: 0 0 12px rgba(124, 200, 255, 0.28);
}

.enhancement-equipment-showcase__soul-entry-rate-track {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(236, 206, 123, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-skill {
  border-color: rgba(124, 200, 255, 0.18);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-bonded {
  border-color: rgba(206, 181, 255, 0.26);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-disabled {
  border-color: rgba(248, 113, 113, 0.18);
  background: rgba(127, 29, 29, 0.12);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-total {
  height: 10px;
  border-color: rgba(236, 206, 123, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.enhancement-equipment-showcase__soul-entry-rate-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(92, 154, 255, 0.82), rgba(154, 214, 255, 0.98));
  box-shadow: 0 0 14px rgba(124, 200, 255, 0.18);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-animating
  .enhancement-equipment-showcase__soul-entry-rate-fill {
  transition: none;
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-skill
  .enhancement-equipment-showcase__soul-entry-rate-fill {
  background:
    linear-gradient(90deg, rgba(92, 154, 255, 0.82), rgba(154, 214, 255, 0.98));
  box-shadow: 0 0 14px rgba(124, 200, 255, 0.18);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-bonded
  .enhancement-equipment-showcase__soul-entry-rate-fill {
  background:
    linear-gradient(90deg, rgba(92, 154, 255, 0.82), rgba(154, 214, 255, 0.98));
  box-shadow: 0 0 14px rgba(124, 200, 255, 0.18);
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-disabled
  .enhancement-equipment-showcase__soul-entry-rate-fill {
  background:
    linear-gradient(90deg, rgba(127, 29, 29, 0.34), rgba(248, 113, 113, 0.52));
  box-shadow: none;
}

.enhancement-equipment-showcase__soul-entry-rate-track.is-max
  .enhancement-equipment-showcase__soul-entry-rate-fill {
  background:
    linear-gradient(90deg, rgba(196, 160, 80, 0.86), rgba(241, 214, 126, 0.98));
  box-shadow: 0 0 14px rgba(241, 214, 126, 0.18);
}

@keyframes enhancement-soul-slot-reel {
  0% {
    opacity: 0.92;
    filter: blur(0.2px);
    transform: translateY(-2px) scaleY(0.96);
  }

  50% {
    opacity: 0.58;
    filter: blur(1.8px);
    transform: translateY(2px) scaleY(1.04);
  }

  100% {
    opacity: 0.92;
    filter: blur(0.2px);
    transform: translateY(-2px) scaleY(0.96);
  }
}

.enhancement-equipment-showcase__soul-entry-meta small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.68rem;
  font-weight: 700;
}

.enhancement-equipment-showcase__soul-entry-meta strong {
  color: rgba(255, 219, 112, 0.92);
  font-size: 0.72rem;
  font-weight: 800;
}

.enhancement-equipment-showcase__soul-entry.is-added .enhancement-equipment-showcase__soul-entry-meta strong,
.enhancement-equipment-showcase__soul-entry.is-soul-imprint-extra
  .enhancement-equipment-showcase__soul-entry-meta
  strong {
  color: rgba(239, 224, 255, 0.96);
}

.enhancement-equipment-showcase__soul-entry-bar {
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.enhancement-equipment-showcase__soul-entry-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 240, 163, 0.98), rgba(231, 193, 93, 0.98));
  box-shadow: 0 0 16px rgba(235, 203, 103, 0.24);
}

.enhancement-showcase.enhancement-showcase--embedded {
  min-height: 0;
  padding: 6px 8px 0;
  border-radius: 24px;
}

.enhancement-showcase.enhancement-showcase--card {
  background: transparent;
}

.enhancement-showcase.enhancement-showcase--card::before,
.enhancement-showcase.enhancement-showcase--card::after {
  content: none;
}

.enhancement-showcase::before,
.enhancement-showcase::after {
  content: '';
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.enhancement-showcase::before {
  left: 16%;
  right: 16%;
  bottom: 30%;
  height: 34%;
  border-radius: 40%;
  background: radial-gradient(circle, rgba(var(--scene-hot) / 0.42), transparent 68%);
  filter: blur(28px);
}

.enhancement-showcase::after {
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 240, 255, 0.8), rgba(115, 158, 255, 0.15) 42%, transparent 74%);
  filter: blur(12px);
}

.enhancement-showcase__visual {
  z-index: 1;
  margin: 14px auto 20px;
}

.enhancement-showcase__visual--ring,
.enhancement-showcase__visual--device {
  width: min(31vw, 360px);
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(var(--scene-secondary) / 0.18);
}

.enhancement-showcase__visual--card {
  width: min(28vw, 320px);
  aspect-ratio: 0.72;
  padding: 10px;
  border-radius: 28px;
  background: transparent;
  box-shadow: 0 0 40px rgba(var(--scene-accent) / 0.18);
}

.enhancement-showcase__visual--card .enhancement-showcase__visual-frame {
  border-radius: 24px;
}

.enhancement-showcase__visual--device .enhancement-showcase__visual-frame {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--scene-secondary) / 0.18), transparent 42%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 8px, rgba(0, 0, 0, 0) 8px 16px),
    linear-gradient(180deg, rgba(24, 28, 38, 0.98), rgba(10, 13, 20, 0.98));
}

.enhancement-showcase__visual-frame,
.enhancement-showcase__visual--device .enhancement-showcase__visual-frame {
  background: transparent;
}

.enhancement-showcase__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--scene-accent) / 0.96), rgba(var(--scene-hot) / 0.78));
  color: #0d1016;
  font-weight: 700;
}

.enhancement-showcase__meta {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.enhancement-showcase__caption {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.enhancement-showcase__meta strong {
  font-size: clamp(1.42rem, 1.1rem + 0.8vw, 2rem);
}

.enhancement-showcase__tag-row,
.enhancement-showcase__resource-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.enhancement-showcase__tag,
.enhancement-showcase__resource {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
}

.enhancement-showcase__resource--skill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.enhancement-showcase__resource--skill small {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.enhancement-showcase__pill-grid,
.enhancement-showcase__orbital-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.enhancement-showcase__pill-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.enhancement-showcase__pill,
.enhancement-showcase__orbit {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.76);
  display: grid;
  gap: 6px;
}

.enhancement-showcase__pill.is-active {
  border-color: rgba(var(--scene-accent) / 0.52);
  box-shadow: 0 0 28px rgba(var(--scene-secondary) / 0.12);
}

.enhancement-showcase__pill span,
.enhancement-showcase__pill small,
.enhancement-showcase__orbit span {
  color: rgba(255, 255, 255, 0.76);
}

.enhancement-showcase__pill strong,
.enhancement-showcase__orbit strong {
  color: #fff;
}

.enhancement-showcase__pill--skill {
  align-content: start;
}

.enhancement-showcase__pill--skill .arcana-skill-identity__text {
  color: #fff;
  font-weight: 600;
}

.enhancement-showcase__callout {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.82);
}

.enhancement-showcase__supplement {
  display: grid;
  gap: 12px;
}

.enhancement-shell-sections {
  display: grid;
  gap: 16px;
}

.enhancement-shell-section {
  display: grid;
  gap: 10px;
}

.enhancement-shell-section__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding-left: 3px;
}

.enhancement-shell-section__header span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.78rem;
}

.enhancement-rail-list {
  display: grid;
  gap: 10px;
  max-height: 248px;
  overflow: auto;
  padding-right: 4px;
}

.enhancement-rail-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

button.enhancement-rail-item {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
}

.enhancement-rail-item.is-clickable {
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.enhancement-rail-item.is-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--scene-accent) / 0.22);
}

.enhancement-rail-item.is-clickable.is-pressed {
  border-color: rgba(var(--scene-accent) / 0.26);
  background: rgba(var(--scene-accent) / 0.08);
}

.enhancement-rail-item.is-gold {
  border-color: rgba(var(--scene-accent) / 0.22);
}

.enhancement-rail-item.is-orange {
  border-color: rgba(255, 166, 77, 0.28);
}

.enhancement-rail-item.is-yellow {
  border-color: rgba(244, 219, 96, 0.28);
}

.enhancement-rail-item.is-blue {
  border-color: rgba(114, 190, 255, 0.28);
}

.enhancement-rail-item.is-green {
  border-color: rgba(116, 224, 132, 0.28);
}

.enhancement-rail-item.is-white {
  border-color: rgba(255, 255, 255, 0.2);
}

.enhancement-rail-item.is-teal,
.enhancement-rail-item.is-violet {
  border-color: rgba(var(--scene-secondary) / 0.18);
}

.enhancement-rail-item__thumb {
  width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--scene-secondary) / 0.18), transparent 42%),
    rgba(11, 14, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.enhancement-rail-item__thumb svg {
  width: 20px;
  height: 20px;
}

.enhancement-rail-item__thumb.is-locked {
  background: rgba(var(--scene-secondary) / 0.14);
  border-color: rgba(var(--scene-secondary) / 0.24);
  color: rgba(244, 249, 255, 0.96);
  box-shadow: 0 0 16px rgba(var(--scene-secondary) / 0.16);
}

.enhancement-rail-item__thumb.is-unlocked {
  color: rgba(255, 255, 255, 0.48);
}

.arcana-skill-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.arcana-skill-identity__thumb {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(11, 14, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.arcana-skill-identity__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arcana-skill-identity__thumb span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.arcana-skill-identity__text {
  min-width: 0;
  color: inherit;
  line-height: 1.35;
}

.arcana-skill-identity--sm {
  gap: 8px;
}

.arcana-skill-identity--sm .arcana-skill-identity__thumb {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.arcana-skill-identity--sm .arcana-skill-identity__text {
  font-size: 0.84rem;
}

.enhancement-rail-item__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.enhancement-rail-item__copy strong {
  color: #fff;
  line-height: 1.35;
}

.enhancement-rail-item__copy p,
.enhancement-rail-item__copy small {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.enhancement-rail-item__badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--scene-accent) / 0.16);
  border: 1px solid rgba(var(--scene-accent) / 0.3);
  color: #fff;
  font-size: 0.76rem;
  white-space: nowrap;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
  gap: 8px;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 11px;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item.is-pressed {
  border-color: rgba(var(--scene-accent) / 0.34);
  background: rgba(var(--scene-accent) / 0.1);
  box-shadow: 0 0 0 1px rgba(var(--scene-accent) / 0.06);
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item__thumb {
  width: 38px;
  border-radius: 12px;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item__copy {
  gap: 4px;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-shell-section__header {
  display: none;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item__copy strong {
  display: none;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item__copy p {
  font-size: 0.92rem;
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item__detail {
  display: grid;
  gap: 2px;
}

.enhancement-panel--pet-understanding
  .enhancement-stage__right
  .species-understanding-option-detail__primary {
  display: block;
  font-size: 0.92rem;
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.enhancement-panel--pet-understanding
  .enhancement-stage__right
  .species-understanding-option-detail__highest {
  display: block;
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}

.enhancement-panel--pet-understanding .species-understanding-result__cost-strip {
  width: 100%;
  margin-bottom: 14px;
}

.enhancement-panel--pet-understanding .species-understanding-result-panel {
  display: grid;
  gap: 16px;
}

.enhancement-panel--pet-understanding .enhancement-panel__masthead-supplement {
  width: min(100%, 980px);
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-soft);
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar__head strong {
  color: var(--text-primary);
  font-size: 0.88rem;
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar__head span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.enhancement-panel--pet-understanding .species-understanding-preset-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.enhancement-panel--pet-understanding .species-understanding-preset-card:hover,
.enhancement-panel--pet-understanding .species-understanding-preset-card:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.enhancement-panel--pet-understanding .species-understanding-preset-card:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 2px;
}

.enhancement-panel--pet-understanding .species-understanding-preset-card.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.enhancement-panel--pet-understanding .species-understanding-preset-card strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}

.enhancement-panel--pet-understanding .species-understanding-preset-card.is-selected strong {
  color: var(--text-primary);
}

.enhancement-panel--pet-understanding .species-understanding-preset-card span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.enhancement-panel--pet-understanding .species-understanding-preset-bar__actions .button {
  flex: 1 1 0;
  min-height: 32px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 219, 112, 0.26);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: none;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.enhancement-panel--pet-understanding
  .species-understanding-preset-bar__actions
  .species-understanding-preset-action--save {
  border-color: rgba(255, 219, 112, 0.32);
  background: rgba(255, 219, 112, 0.88);
  color: #16110a;
}

.enhancement-panel--pet-understanding
  .species-understanding-preset-bar__actions
  .species-understanding-preset-action--load {
  border-color: rgba(94, 218, 225, 0.3);
  background: rgba(94, 218, 225, 0.74);
  color: #061417;
}

.enhancement-panel--pet-understanding
  .species-understanding-preset-bar__actions
  .species-understanding-preset-action--save:hover:not(:disabled) {
  border-color: rgba(255, 219, 112, 0.46);
  background: rgba(255, 219, 112, 0.96);
  color: #16110a;
}

.enhancement-panel--pet-understanding
  .species-understanding-preset-bar__actions
  .species-understanding-preset-action--load:hover:not(:disabled) {
  border-color: rgba(94, 218, 225, 0.44);
  background: rgba(94, 218, 225, 0.86);
  color: #061417;
}

.enhancement-panel--pet-understanding
  .species-understanding-preset-bar__actions
  .species-understanding-preset-action:disabled {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-muted);
  box-shadow: none;
}

.enhancement-panel--pet-understanding .species-understanding-reference-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.enhancement-panel--pet-understanding .species-understanding-reference-actions .button {
  width: 100%;
}

.enhancement-panel--pet-understanding .species-understanding-reference-actions .button.is-active {
  border-color: rgba(var(--scene-accent) / 0.42);
  background:
    linear-gradient(180deg, rgba(var(--scene-accent) / 0.16), rgba(var(--scene-accent) / 0.04)),
    rgba(255, 255, 255, 0.05);
  color: #fff4c4;
}

.enhancement-panel--pet-understanding
  .species-understanding-result__cost-strip
  .enhancement-equipment-showcase__cost-card {
  min-width: 0;
}

.enhancement-panel--pet-understanding .species-understanding-result__cost-card {
  gap: 8px;
}

.enhancement-panel--pet-understanding .species-understanding-result__cost-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.enhancement-panel--pet-understanding .species-understanding-result__cost-card-head > span:last-child {
  min-width: 0;
}

.enhancement-panel--pet-understanding .species-understanding-result__cost-thumb {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
}

.enhancement-panel--pet-understanding
  .species-understanding-result__cost-thumb.item-grade-media.item-grade-tone {
  border: 1px solid var(--item-grade-tone-border);
  border-radius: 8px;
  background-color: var(--item-grade-tone-end);
  background-image: var(--item-grade-tone-gradient);
  box-sizing: border-box;
}

.enhancement-panel--pet-understanding .species-understanding-result__cost-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.enhancement-panel--pet-understanding .enhancement-rail-item.is-orange .enhancement-rail-item__copy p {
  color: rgba(255, 167, 74, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-orange
  .species-understanding-option-detail__primary {
  color: rgba(255, 167, 74, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-orange
  .species-understanding-option-detail__highest {
  color: rgba(255, 167, 74, 0.78);
}

.enhancement-panel--pet-understanding .enhancement-rail-item.is-yellow .enhancement-rail-item__copy p {
  color: rgba(247, 225, 93, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-yellow
  .species-understanding-option-detail__primary {
  color: rgba(247, 225, 93, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-yellow
  .species-understanding-option-detail__highest {
  color: rgba(247, 225, 93, 0.78);
}

.enhancement-panel--pet-understanding .enhancement-rail-item.is-blue .enhancement-rail-item__copy p {
  color: rgba(110, 192, 255, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-blue
  .species-understanding-option-detail__primary {
  color: rgba(110, 192, 255, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-blue
  .species-understanding-option-detail__highest {
  color: rgba(110, 192, 255, 0.78);
}

.enhancement-panel--pet-understanding .enhancement-rail-item.is-green .enhancement-rail-item__copy p {
  color: rgba(109, 226, 122, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-green
  .species-understanding-option-detail__primary {
  color: rgba(109, 226, 122, 0.98);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-green
  .species-understanding-option-detail__highest {
  color: rgba(109, 226, 122, 0.78);
}

.enhancement-panel--pet-understanding .enhancement-rail-item.is-white .enhancement-rail-item__copy p {
  color: rgba(248, 249, 252, 0.96);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-white
  .species-understanding-option-detail__primary {
  color: rgba(248, 249, 252, 0.96);
}

.enhancement-panel--pet-understanding
  .enhancement-rail-item.is-white
  .species-understanding-option-detail__highest {
  color: rgba(248, 249, 252, 0.76);
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item.is-unique-highlight {
  border-color: rgba(255, 214, 122, 0.3);
  background-image: linear-gradient(180deg, rgba(255, 214, 122, 0.14), rgba(255, 214, 122, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 122, 0.08),
    0 0 18px rgba(255, 214, 122, 0.08);
}

.enhancement-panel--pet-understanding .enhancement-stage__right .enhancement-rail-item.is-heroic-highlight {
  border-color: rgba(255, 153, 86, 0.3);
  background-image: linear-gradient(180deg, rgba(255, 153, 86, 0.16), rgba(255, 153, 86, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(255, 153, 86, 0.08),
    0 0 18px rgba(255, 153, 86, 0.08);
}

.enhancement-panel--pet-understanding
  .enhancement-stage__right
  .enhancement-rail-item.is-unique-highlight.is-heroic-highlight {
  border-color: rgba(255, 204, 124, 0.34);
  background-image: linear-gradient(180deg, rgba(255, 214, 122, 0.14), rgba(255, 153, 86, 0.08));
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 122, 0.08),
    0 0 20px rgba(255, 168, 92, 0.1);
}

.species-understanding-auto-dialog__panel,
.species-understanding-adjustment-dialog__panel {
  width: min(100%, 1120px);
  border-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(24, 29, 40, 0.99), rgba(18, 22, 31, 0.99));
  background-color: rgba(18, 22, 31, 0.99);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.species-understanding-auto-dialog__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(38, 45, 61, 0.88);
}

.species-understanding-auto-dialog__summary strong {
  color: #fff;
  font-size: 0.84rem;
}

.species-understanding-auto-dialog__summary span {
  color: rgba(216, 223, 236, 0.72);
  font-size: 0.74rem;
  text-align: right;
}

.species-understanding-auto-dialog__warning {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 122, 122, 0.22);
  background: linear-gradient(180deg, rgba(255, 122, 122, 0.12), rgba(255, 122, 122, 0.06));
  color: rgba(255, 198, 198, 0.94);
  font-size: 0.76rem;
  line-height: 1.45;
}

.species-understanding-auto-dialog__form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.species-understanding-auto-dialog__slot {
  gap: 10px;
  padding: 12px;
}

.species-understanding-auto-dialog__slot,
.species-understanding-adjustment-dialog__slot {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(34, 40, 54, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.species-understanding-auto-dialog__slot .enhancement-field {
  gap: 6px;
}

.species-understanding-auto-dialog__slot .enhancement-field > span {
  color: rgba(216, 223, 236, 0.74);
  font-size: 0.68rem;
  font-weight: 700;
}

.species-understanding-auto-dialog__slot select {
  min-height: 38px;
  font-size: 0.76rem;
}

.species-understanding-auto-dialog__current {
  margin: 0;
  color: rgba(214, 222, 236, 0.72);
  font-size: 0.74rem;
  line-height: 1.35;
}

.species-understanding-adjustment-dialog__form {
  grid-template-columns: 1fr;
  gap: 12px;
}

.species-understanding-adjustment-dialog__panel {
  width: min(100%, 620px);
}

.species-understanding-adjustment-dialog__panel:focus {
  outline: none;
}

.species-understanding-adjustment-dialog__paste-zone {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(31, 37, 50, 0.82);
  color: rgba(221, 229, 242, 0.78);
  cursor: help;
  font-size: 0.74rem;
  line-height: 1.35;
}

.species-understanding-adjustment-dialog__paste-zone strong {
  color: rgba(255, 244, 196, 0.94);
  font-size: 0.76rem;
}

.species-understanding-adjustment-dialog__paste-zone span {
  min-width: 0;
}

.species-understanding-adjustment-dialog__paste-preview {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 12;
  display: grid;
  gap: 7px;
  width: min(330px, calc(100vw - 56px));
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 12, 18, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.985);
  transform-origin: top right;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.species-understanding-adjustment-dialog__paste-preview-label {
  color: rgba(255, 244, 196, 0.94);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.species-understanding-adjustment-dialog__paste-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.species-understanding-adjustment-dialog__paste-zone:hover
  .species-understanding-adjustment-dialog__paste-preview,
.species-understanding-adjustment-dialog__paste-zone:focus
  .species-understanding-adjustment-dialog__paste-preview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.species-understanding-adjustment-dialog__paste-zone.is-processing {
  border-color: rgba(110, 192, 255, 0.24);
  color: rgba(190, 221, 255, 0.88);
}

.species-understanding-adjustment-dialog__paste-zone.is-success {
  border-color: rgba(109, 226, 122, 0.24);
  color: rgba(186, 242, 198, 0.9);
}

.species-understanding-adjustment-dialog__paste-zone.is-error {
  border-color: rgba(255, 153, 86, 0.28);
  color: rgba(255, 204, 176, 0.9);
}

.species-understanding-adjustment-dialog__slot {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.species-understanding-adjustment-dialog__slot .enhancement-equipment-adjustment-dialog__entry-header {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.species-understanding-auto-dialog__slot .enhancement-equipment-adjustment-dialog__entry-header {
  justify-content: flex-start;
}

.species-understanding-adjustment-dialog__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(86px, 0.7fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: center;
}

.species-understanding-adjustment-dialog__fields .enhancement-field {
  min-width: 0;
  gap: 0;
}

.species-understanding-adjustment-dialog__fields select {
  min-height: 38px;
  font-size: 0.76rem;
}

.species-understanding-auto-dialog__slot select,
.species-understanding-adjustment-dialog__fields select {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(26, 31, 43, 0.96);
  box-shadow: none;
}

@media (max-width: 720px) {
  .species-understanding-adjustment-dialog__paste-zone {
    grid-template-columns: 1fr;
  }

  .species-understanding-adjustment-dialog__slot {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .species-understanding-adjustment-dialog__fields {
    grid-template-columns: 1fr;
  }
}

.species-understanding-probability-dialog__panel {
  width: min(100%, 760px);
}

.species-understanding-probability-tabs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.species-understanding-probability-tab {
  appearance: none;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(222, 229, 242, 0.72);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.species-understanding-probability-tab:hover {
  border-color: rgba(var(--scene-accent) / 0.24);
  color: rgba(255, 255, 255, 0.94);
  transform: translateY(-1px);
}

.species-understanding-probability-tab.is-active {
  border-color: rgba(var(--scene-accent) / 0.42);
  background:
    linear-gradient(180deg, rgba(var(--scene-accent) / 0.16), rgba(var(--scene-accent) / 0.04)),
    rgba(255, 255, 255, 0.05);
  color: #fff4c4;
  box-shadow: inset 0 0 0 1px rgba(var(--scene-accent) / 0.08);
}

.species-understanding-probability-slot {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.84);
  max-height: min(68vh, 780px);
  overflow: auto;
  padding-right: 10px;
}

.species-understanding-probability-slot__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.species-understanding-probability-slot__header strong {
  color: #fff;
  font-size: 0.86rem;
}

.species-understanding-probability-slot__header span {
  color: rgba(216, 223, 237, 0.64);
  font-size: 0.74rem;
}

.species-understanding-probability-slot__list {
  display: grid;
  gap: 10px;
}

.species-understanding-probability-entry {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.species-understanding-probability-entry.is-unique-highlight {
  border-color: rgba(255, 214, 122, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 214, 122, 0.14), rgba(255, 214, 122, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 122, 0.08);
}

.species-understanding-probability-entry.is-heroic-highlight {
  border-color: rgba(255, 153, 86, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 153, 86, 0.16), rgba(255, 153, 86, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 153, 86, 0.1);
}

.species-understanding-probability-entry.is-unique-highlight.is-heroic-highlight {
  border-color: rgba(255, 204, 124, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 214, 122, 0.14), rgba(255, 153, 86, 0.08)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 122, 0.08),
    inset 0 0 24px rgba(255, 153, 86, 0.08);
}

.species-understanding-probability-entry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.species-understanding-probability-entry__header strong {
  color: #fff;
  font-size: 0.82rem;
}

.species-understanding-probability-entry__highlight {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 214, 122, 0.16);
  border: 1px solid rgba(255, 214, 122, 0.28);
  color: rgba(255, 239, 194, 0.98);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.species-understanding-probability-entry__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.species-understanding-grade-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  line-height: 1.25;
  white-space: nowrap;
}

.species-understanding-grade-chip em {
  font-style: normal;
  opacity: 0.72;
}

.species-understanding-grade-chip.is-orange {
  border-color: rgba(255, 166, 77, 0.28);
  color: rgba(255, 167, 74, 0.98);
}

.species-understanding-grade-chip.is-yellow {
  border-color: rgba(244, 219, 96, 0.28);
  color: rgba(247, 225, 93, 0.98);
}

.species-understanding-grade-chip.is-blue {
  border-color: rgba(114, 190, 255, 0.28);
  color: rgba(110, 192, 255, 0.98);
}

.species-understanding-grade-chip.is-green {
  border-color: rgba(116, 224, 132, 0.34);
  color: rgba(109, 226, 122, 0.98);
  background: rgba(116, 224, 132, 0.08);
}

.species-understanding-grade-chip.is-white {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(248, 249, 252, 0.96);
}

.enhancement-empty--inset {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

@media (max-width: 960px) {
  .enhancement-panel--pet-understanding .species-understanding-reference-actions {
    grid-template-columns: 1fr;
  }

  .species-understanding-auto-dialog__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .species-understanding-auto-dialog__summary {
    display: grid;
    justify-items: start;
  }

  .species-understanding-auto-dialog__summary span {
    text-align: left;
  }

  .species-understanding-auto-dialog__form,
  .species-understanding-adjustment-dialog__form {
    grid-template-columns: 1fr;
  }

  .species-understanding-probability-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.species-understanding-shell {
  --species-shell-accent-rgb: 104 180 255;
  --species-shell-secondary-rgb: 72 120 224;
  --species-shell-panel-rgb: 104 180 255;
  --species-shell-surface-rgb: 18 33 66;
  --species-shell-frame-rgb: 24 40 78;
  --species-shell-core-top-rgb: 20 56 102;
  --species-shell-core-bottom-rgb: 8 20 42;
}

.species-understanding-shell--wisdom {
  --species-shell-accent-rgb: 104 180 255;
  --species-shell-secondary-rgb: 72 120 224;
  --species-shell-panel-rgb: 104 180 255;
  --species-shell-surface-rgb: 18 33 66;
  --species-shell-frame-rgb: 24 40 78;
  --species-shell-core-top-rgb: 20 56 102;
  --species-shell-core-bottom-rgb: 8 20 42;
}

.species-understanding-shell--wild {
  --species-shell-accent-rgb: 255 104 94;
  --species-shell-secondary-rgb: 200 58 54;
  --species-shell-panel-rgb: 255 104 94;
  --species-shell-surface-rgb: 66 20 24;
  --species-shell-frame-rgb: 88 28 34;
  --species-shell-core-top-rgb: 96 26 30;
  --species-shell-core-bottom-rgb: 34 9 12;
}

.species-understanding-shell--nature {
  --species-shell-accent-rgb: 98 220 126;
  --species-shell-secondary-rgb: 46 142 82;
  --species-shell-panel-rgb: 98 220 126;
  --species-shell-surface-rgb: 14 46 28;
  --species-shell-frame-rgb: 18 62 36;
  --species-shell-core-top-rgb: 23 76 47;
  --species-shell-core-bottom-rgb: 9 30 18;
}

.species-understanding-shell--transform {
  --species-shell-accent-rgb: 242 208 88;
  --species-shell-secondary-rgb: 185 138 30;
  --species-shell-panel-rgb: 242 208 88;
  --species-shell-surface-rgb: 66 52 14;
  --species-shell-frame-rgb: 88 70 18;
  --species-shell-core-top-rgb: 90 70 22;
  --species-shell-core-bottom-rgb: 31 23 7;
}

.species-understanding-shell--special {
  --species-shell-accent-rgb: 110 204 255;
  --species-shell-secondary-rgb: 255 148 204;
  --species-shell-panel-rgb: 160 212 255;
  --species-shell-surface-rgb: 26 28 40;
  --species-shell-frame-rgb: 34 37 52;
  --species-shell-core-top-rgb: 46 52 98;
  --species-shell-core-bottom-rgb: 16 20 44;
}

.enhancement-shell-card--species-board {
  min-height: 0;
  height: auto;
  padding: clamp(22px, 1.8vw, 30px);
  border: 1px solid rgba(var(--species-shell-accent-rgb) / 0.18);
  border-radius: 30px;
  background: rgb(var(--species-shell-surface-rgb) / 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 48px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(var(--species-shell-accent-rgb) / 0.04);
}

.species-understanding-shell--special.enhancement-shell-card--species-board {
  background: linear-gradient(
    135deg,
    rgba(99, 196, 255, 0.28),
    rgba(132, 134, 255, 0.28),
    rgba(255, 132, 204, 0.28),
    rgba(255, 210, 96, 0.28),
    rgba(99, 232, 184, 0.28)
  );
}

.species-understanding-showcase {
  gap: 24px;
}

.species-understanding-showcase__title-row {
  display: grid;
  gap: 8px;
  width: min(100%, 1120px);
  justify-items: center;
}

.species-understanding-showcase__eyebrow {
  color: rgba(232, 214, 134, 0.88);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(238, 206, 92, 0.12);
}

.species-understanding-showcase__title {
  max-width: 100%;
  text-align: center;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.species-understanding-showcase__helper {
  margin: 0;
  max-width: min(100%, 720px);
  color: rgba(213, 221, 236, 0.62);
  font-size: 0.74rem;
  line-height: 1.6;
  text-align: center;
}

.species-understanding-showcase__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(296px, 332px);
  align-items: start;
  gap: clamp(20px, 2vw, 28px);
  width: min(100%, 1120px);
}

.species-understanding-showcase__visual {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 34px);
  align-items: center;
  min-width: 0;
  padding: 10px 2px 4px;
}

.species-understanding-board__selector {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.species-understanding-board__section-header {
  display: grid;
  gap: 2px;
  justify-items: start;
  text-align: left;
}

.species-understanding-board__section-header strong {
  color: rgba(242, 247, 255, 0.84);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.species-understanding-board__section-header span {
  color: rgba(201, 210, 226, 0.48);
  font-size: 0.64rem;
}

.species-understanding-selector {
  display: grid;
  gap: 18px;
}

.species-understanding-selector__button {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.species-understanding-selector__button:hover:not(:disabled),
.species-understanding-selector__button.is-selected {
  transform: translateY(-2px);
  filter: saturate(1.05);
}

.species-understanding-selector__button:disabled {
  cursor: default;
  opacity: 0.72;
}

.species-understanding-selector__board-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 8.2vw, 112px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.species-understanding-selector__board-shell .species-understanding-board-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.species-understanding-selector__board-shell .species-understanding-board-shell__frame {
  width: 100%;
  height: 100%;
}

.species-understanding-selector__board-shell .species-understanding-board {
  width: 82%;
  --species-stone-radius: clamp(-27px, -2.4vw, -32px);
  --species-stone-radius-hover: clamp(-27px, -2.4vw, -32px);
}

.species-understanding-selector__board-shell .species-understanding-board__ring--inner {
  inset: 10%;
  border: 1px solid rgba(var(--species-shell-accent-rgb) / 0.42);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.18), transparent 32%),
    radial-gradient(circle at 50% 52%, rgba(var(--species-shell-accent-rgb) / 0.18), transparent 60%),
    linear-gradient(
      180deg,
      rgba(var(--species-shell-core-top-rgb) / 0.98),
      rgba(var(--species-shell-core-bottom-rgb) / 0.98)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(12, 16, 24, 0.3),
    inset 0 0 20px rgba(var(--species-shell-accent-rgb) / 0.16),
    0 10px 18px rgba(0, 0, 0, 0.24);
}

.species-understanding-selector__board-shell .species-understanding-board__core {
  z-index: 4;
  width: clamp(38px, 3vw, 44px);
}

.species-understanding-selector__board-shell .species-understanding-board__crest {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.2vw, 34px);
  height: clamp(28px, 2.2vw, 34px);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(128, 138, 152, 0.98), rgba(54, 64, 80, 0.98));
  border: 1px solid rgba(235, 241, 248, 0.18);
  color: rgba(244, 250, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(10, 14, 20, 0.48);
}

.species-understanding-selector__board-shell .species-understanding-board__crest svg {
  display: block;
  width: 62%;
  height: 62%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.32));
}

.species-understanding-selector__board-shell .species-understanding-selector__stone {
  width: clamp(8px, 0.74vw, 10px);
  min-height: clamp(8px, 0.74vw, 10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(10, 13, 20, 0.34),
    0 0 0 1px rgba(var(--species-stone-rgb) / 0.16),
    0 0 8px rgba(var(--species-stone-rgb) / 0.14),
    0 6px 10px rgba(0, 0, 0, 0.24);
}

.species-understanding-selector__button:hover:not(:disabled) .species-understanding-selector__board-shell,
.species-understanding-selector__button.is-selected .species-understanding-selector__board-shell {
  filter: saturate(1.08) brightness(1.04);
}

.species-understanding-selector__button:hover:not(:disabled)
  .species-understanding-selector__board-shell
  .species-understanding-board__ring--inner,
.species-understanding-selector__button.is-selected
  .species-understanding-selector__board-shell
  .species-understanding-board__ring--inner {
  border-color: rgba(var(--species-shell-accent-rgb) / 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(12, 16, 24, 0.34),
    inset 0 0 20px rgba(var(--species-shell-accent-rgb) / 0.16),
    0 0 18px rgba(var(--species-shell-accent-rgb) / 0.12),
    0 10px 18px rgba(0, 0, 0, 0.24);
}

.species-understanding-selector__copy {
  color: rgba(242, 247, 255, 0.8);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.species-understanding-showcase__orbital-column {
  display: grid;
  gap: 18px;
  min-width: 0;
  justify-items: center;
}

.species-understanding-showcase__orbital-shell {
  width: min(100%, 560px);
}

.species-understanding-showcase__orbital-shell::before {
  inset: 1% 1%;
  border-color: rgba(120, 172, 214, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(223, 236, 255, 0.04),
    0 0 24px rgba(90, 175, 255, 0.08);
}

.species-understanding-showcase__orbital-shell::after {
  inset: 10%;
  background:
    radial-gradient(circle at 48% 46%, rgb(var(--species-center-accent) / 0.14), transparent 46%),
    radial-gradient(circle at 48% 90%, rgba(240, 196, 88, 0.12), transparent 42%);
  filter: blur(20px);
}

.species-understanding-showcase__orbital-shell.is-epic::before {
  border-color: rgba(255, 156, 67, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 234, 208, 0.06),
    0 0 24px rgba(255, 156, 67, 0.14);
}

.species-understanding-showcase__orbital-shell.is-unique::before {
  border-color: rgba(241, 218, 102, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 194, 0.06),
    0 0 24px rgba(241, 218, 102, 0.16);
}

.species-understanding-showcase__orbital-shell.is-special::before {
  border-color: rgba(118, 221, 255, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(202, 244, 255, 0.06),
    0 0 24px rgba(118, 221, 255, 0.14);
}

.species-understanding-showcase__orbital-ring {
  position: relative;
  width: 88%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}

.species-understanding-showcase__arc {
  position: absolute;
  border-style: solid;
  border-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.species-understanding-showcase__arc::before,
.species-understanding-showcase__arc::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(234, 226, 203, 0.88);
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 8px rgba(255, 216, 107, 0.16));
}

.species-understanding-showcase__arc--north {
  inset: -3% 16% 34% 26%;
  border-width: 7px;
  border-top-color: rgba(225, 221, 210, 0.88);
  border-right-color: rgba(142, 147, 156, 0.88);
  transform: rotate(10deg);
}

.species-understanding-showcase__arc--north::before {
  top: -8px;
  right: 12%;
}

.species-understanding-showcase__arc--north::after {
  top: 40%;
  left: -6px;
}

.species-understanding-showcase__arc--south {
  inset: 30% 12% -1% 22%;
  border-width: 7px;
  border-right-color: rgba(225, 221, 210, 0.88);
  border-bottom-color: rgba(142, 147, 156, 0.88);
  transform: rotate(8deg);
}

.species-understanding-showcase__arc--south::before {
  right: 6%;
  bottom: 10%;
}

.species-understanding-showcase__arc--south::after {
  left: 14%;
  bottom: -9px;
}

.species-understanding-showcase__arc--east {
  inset: 24% -4% 18% 56%;
  border-width: 7px;
  border-top-color: rgba(142, 147, 156, 0.88);
  border-right-color: rgba(225, 221, 210, 0.88);
  border-bottom-color: rgba(142, 147, 156, 0.88);
  transform: rotate(-6deg);
}

.species-understanding-showcase__arc--east::before {
  top: 44%;
  right: -10px;
}

.species-understanding-showcase__arc--east::after {
  bottom: 24%;
  right: 10%;
}

.species-understanding-showcase__ring-track {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 63%, rgba(255, 255, 255, 0.12) 63% 63.8%, transparent 63.8%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.08) 0deg 5deg,
      transparent 5deg 18deg,
      rgba(255, 228, 158, 0.08) 18deg 22deg,
      transparent 22deg 40deg
    );
  filter: drop-shadow(0 0 16px rgba(255, 215, 116, 0.08));
  pointer-events: none;
}

.species-understanding-showcase__ring-track--inner {
  inset: 20%;
  opacity: 0.52;
}

.species-understanding-showcase__orbital-shell.is-rolling
  .species-understanding-showcase__ring-track--inner {
  animation: species-understanding-wheel-rotate 3.6s linear infinite;
}

.species-understanding-showcase__orb-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 7px;
  width: 58%;
  aspect-ratio: 1 / 1;
  border-width: 3px;
  border-color: rgba(223, 214, 194, 0.72);
  background:
    radial-gradient(circle at 50% 34%, rgb(var(--species-center-accent) / 0.18), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(210, 236, 233, 0.06), transparent 66%),
    linear-gradient(180deg, rgba(19, 66, 71, 0.98), rgba(7, 24, 31, 0.98));
  box-shadow:
    inset 0 0 0 7px rgba(13, 16, 22, 0.52),
    inset 0 0 0 13px rgba(217, 226, 228, 0.06),
    0 0 0 10px rgba(198, 202, 208, 0.2),
    0 0 0 16px rgba(72, 81, 95, 0.34),
    0 34px 42px rgba(0, 0, 0, 0.32);
  text-align: center;
  overflow: visible;
}

.species-understanding-showcase__orb-core::before,
.species-understanding-showcase__orb-core::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 22%;
  border-top: 1px solid rgba(215, 228, 255, 0.18);
  border-bottom: 1px solid rgba(215, 228, 255, 0.08);
  opacity: 0.56;
}

.species-understanding-showcase__orb-core::before {
  left: -12%;
  border-left: 1px solid rgba(215, 228, 255, 0.16);
  border-radius: 999px 0 0 999px;
  transform: translateY(-50%) rotate(-18deg);
}

.species-understanding-showcase__orb-core::after {
  right: -14%;
  border-right: 1px solid rgba(215, 228, 255, 0.16);
  border-radius: 0 999px 999px 0;
  transform: translateY(-50%) rotate(18deg);
}

.species-understanding-showcase__crest {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(120, 129, 140, 0.96), rgba(50, 60, 74, 0.98));
  border: 1px solid rgba(236, 242, 255, 0.18);
  color: rgba(246, 251, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 2px rgba(24, 30, 39, 0.62);
}

.species-understanding-showcase__crest svg {
  width: 38px;
  height: 38px;
}

.species-understanding-showcase__orb-core small {
  color: rgba(232, 238, 245, 0.62);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.species-understanding-showcase__orb-core strong {
  color: #fff;
  font-size: clamp(1.42rem, 1.04rem + 0.88vw, 2.08rem);
  line-height: 1.05;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
}

.species-understanding-showcase__orb-level {
  color: rgba(243, 219, 132, 0.92);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.species-understanding-showcase__attempt-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 115, 0.24);
  background: rgba(7, 10, 16, 0.9);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(255, 221, 115, 0.14);
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  backdrop-filter: blur(6px);
}

.species-understanding-showcase__attempt-effect strong {
  color: #fff1b6;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.species-understanding-showcase__attempt-effect.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.species-understanding-showcase__board-copy {
  display: grid;
  gap: 10px;
  width: min(100%, 520px);
  justify-items: center;
}

.species-understanding-showcase__board-hint {
  margin: 0;
  color: rgba(213, 221, 236, 0.62);
  font-size: 0.71rem;
  line-height: 1.58;
  text-align: center;
}

.species-understanding-showcase__sidecard {
  gap: 16px;
  width: 100%;
  transform: none;
  padding: 18px;
  border-color: rgba(194, 203, 220, 0.14);
  background:
    linear-gradient(180deg, rgba(22, 26, 34, 0.98), rgba(13, 15, 22, 0.98)),
    rgba(13, 15, 22, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 36px rgba(0, 0, 0, 0.28);
}

.species-understanding-showcase__sidecard-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.species-understanding-showcase__sidecard-header > div {
  display: grid;
  gap: 3px;
  text-align: left;
}

.species-understanding-showcase__sidecard-header strong {
  color: #fff;
  font-size: 1rem;
}

.species-understanding-showcase__sidecard-header p {
  margin: 0;
  color: rgba(211, 219, 234, 0.54);
  font-size: 0.72rem;
}

.species-understanding-showcase__status {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(244, 248, 255, 0.78);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.species-understanding-showcase__status.is-rolling {
  border-color: rgba(255, 220, 126, 0.22);
  background: linear-gradient(180deg, rgba(76, 168, 226, 0.12), rgba(255, 208, 112, 0.08));
  color: #fff5cf;
}

.species-understanding-showcase__summary-strip {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.species-understanding-showcase__summary-strip .enhancement-equipment-showcase__cost-card {
  min-height: 78px;
  align-content: start;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(5, 8, 14, 0.88);
  border-color: rgba(255, 255, 255, 0.06);
}

.species-understanding-showcase__summary-strip .enhancement-equipment-showcase__cost-card strong {
  font-size: 0.8rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.species-understanding-showcase__utility {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.species-understanding-showcase__side-metrics {
  display: grid;
  gap: 8px;
}

.species-understanding-showcase__side-metric {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    rgba(6, 9, 15, 0.88);
  text-align: left;
}

.species-understanding-showcase__side-metric span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
}

.species-understanding-showcase__side-metric strong {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.3;
}

.species-understanding-showcase__actions {
  width: 100%;
  gap: 8px;
}

.species-understanding-showcase__actions .button {
  flex: 1 1 0;
  min-height: 56px;
  border-radius: 22px;
  font-size: 0.86rem;
  font-weight: 900;
}

.species-understanding-showcase__utility-copy {
  margin: 0;
  color: rgba(211, 219, 234, 0.58);
  font-size: 0.71rem;
  line-height: 1.6;
}

.species-understanding-showcase__lower {
  display: grid;
  gap: 14px;
  width: min(100%, 1120px);
}

.species-understanding-stone {
  --species-grade-rgb: 216 216 216;
  --species-stone-gradient: var(--item-grade-common-gradient);
  --species-stone-border-color: var(--item-grade-common-border);
}

.species-understanding-result-card,
.species-understanding-grade-strip__item {
  --species-grade-rgb: 142 155 173;
  --species-stone-rgb: 92 104 122;
}

.species-understanding-stone.is-grade-common {
  --species-grade-rgb: 216 216 216;
  --species-stone-gradient: var(--item-grade-common-gradient);
  --species-stone-border-color: var(--item-grade-common-border);
}

.species-understanding-result-card.is-grade-common,
.species-understanding-grade-strip__item.is-grade-common {
  --species-grade-rgb: 142 155 173;
  --species-stone-rgb: 108 118 132;
}

.species-understanding-stone.is-grade-rare {
  --species-grade-rgb: 24 224 72;
  --species-stone-gradient: var(--item-grade-rare-gradient);
  --species-stone-border-color: var(--item-grade-rare-border);
}

.species-understanding-result-card.is-grade-rare,
.species-understanding-grade-strip__item.is-grade-rare {
  --species-grade-rgb: 88 216 124;
  --species-stone-rgb: 44 142 64;
}

.species-understanding-stone.is-grade-legend {
  --species-grade-rgb: 53 168 255;
  --species-stone-gradient: var(--item-grade-legend-gradient);
  --species-stone-border-color: var(--item-grade-legend-border);
}

.species-understanding-result-card.is-grade-legend,
.species-understanding-grade-strip__item.is-grade-legend {
  --species-grade-rgb: 96 210 255;
  --species-stone-rgb: 34 112 188;
}

.species-understanding-stone.is-grade-unique {
  --species-grade-rgb: 255 228 90;
  --species-stone-gradient: var(--item-grade-unique-gradient);
  --species-stone-border-color: var(--item-grade-unique-border);
}

.species-understanding-result-card.is-grade-unique,
.species-understanding-grade-strip__item.is-grade-unique {
  --species-grade-rgb: 241 218 102;
  --species-stone-rgb: 178 146 28;
}

.species-understanding-stone.is-grade-epic {
  --species-grade-rgb: 255 122 0;
  --species-stone-gradient: var(--item-grade-epic-gradient);
  --species-stone-border-color: var(--item-grade-epic-border);
}

.species-understanding-result-card.is-grade-epic,
.species-understanding-grade-strip__item.is-grade-epic {
  --species-grade-rgb: 255 154 67;
  --species-stone-rgb: 188 92 18;
}

.species-understanding-stone.is-grade-unknown {
  --species-grade-rgb: 216 216 216;
  --species-stone-gradient: var(--item-grade-common-gradient);
  --species-stone-border-color: var(--item-grade-common-border);
}

.species-understanding-result-card.is-grade-unknown,
.species-understanding-grade-strip__item.is-grade-unknown {
  --species-grade-rgb: 124 141 163;
  --species-stone-rgb: 88 100 118;
}

.species-understanding-stone {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: clamp(42px, 3.5vw, 52px);
  min-height: clamp(42px, 3.5vw, 52px);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--species-stone-border-color);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 46%),
    var(--species-stone-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(10, 13, 20, 0.22),
    0 0 0 1px rgba(var(--species-grade-rgb) / 0.14),
    0 0 18px rgba(var(--species-grade-rgb) / 0.2),
    0 14px 20px rgba(0, 0, 0, 0.28);
  transform:
    translate(-50%, -50%)
    rotate(var(--species-stone-angle))
    translateY(clamp(-178px, -14vw, -206px))
    rotate(calc(-1 * var(--species-stone-angle)));
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    background 180ms ease;
}

.species-understanding-stone:hover {
  transform:
    translate(-50%, -50%)
    rotate(var(--species-stone-angle))
    translateY(clamp(-184px, -14.6vw, -210px))
    rotate(calc(-1 * var(--species-stone-angle)));
}

.species-understanding-stone.is-rolling {
  animation: species-understanding-stone-roll 220ms linear infinite;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(220, 228, 239, 0.92), rgba(110, 125, 150, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 0 0 3px rgba(16, 21, 29, 0.2),
    0 0 0 2px rgba(186, 214, 255, 0.18),
    0 0 28px rgba(108, 198, 255, 0.24),
    0 20px 28px rgba(0, 0, 0, 0.28);
}

.species-understanding-grade-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.species-understanding-grade-strip__item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--species-grade-rgb) / 0.14);
  background:
    linear-gradient(180deg, rgba(var(--species-grade-rgb) / 0.12), rgba(var(--species-grade-rgb) / 0.03)),
    rgba(7, 10, 16, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 24px rgba(0, 0, 0, 0.14);
}

.species-understanding-grade-strip__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--species-grade-rgb) / 0.96);
  box-shadow: 0 0 12px rgba(var(--species-grade-rgb) / 0.28);
}

.species-understanding-grade-strip__item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.species-understanding-grade-strip__item strong {
  color: #fff;
  font-size: 0.76rem;
}

.species-understanding-grade-strip__item small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
}

.species-understanding-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.species-understanding-result-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(var(--species-grade-rgb) / 0.16);
  background:
    linear-gradient(180deg, rgba(var(--species-grade-rgb) / 0.11), rgba(var(--species-grade-rgb) / 0.03)),
    rgba(7, 10, 16, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 24px rgba(0, 0, 0, 0.16);
}

.species-understanding-result-card.is-rolling {
  border-color: rgba(123, 214, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(123, 214, 255, 0.1), rgba(255, 219, 112, 0.04)),
    rgba(7, 10, 16, 0.92);
}

.species-understanding-result-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.species-understanding-result-card__header strong {
  color: #fff;
  font-size: 0.8rem;
}

.species-understanding-result-card__header span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.66rem;
  font-weight: 700;
}

.species-understanding-result-card p,
.species-understanding-result-card small {
  margin: 0;
}

.species-understanding-result-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  line-height: 1.38;
  word-break: keep-all;
}

.species-understanding-result-card small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
  line-height: 1.35;
}

.species-understanding-showcase__stage {
  display: grid;
  gap: 24px;
  width: min(100%, 920px);
}

.species-understanding-board-shell {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.species-understanding-board-shell__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 430px);
  padding: 0;
  border-radius: 999px;
  background: transparent;
}

.species-understanding-shell--special .species-understanding-board-shell__frame {
  background: transparent;
}

.species-understanding-board-shell__frame::before {
  content: none;
}

.species-understanding-board {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  --species-stone-radius: clamp(-118px, -9.2vw, -130px);
  --species-stone-radius-hover: clamp(-122px, -9.6vw, -134px);
}

.species-understanding-board__ring,
.species-understanding-board__tick-field {
  position: absolute;
  border-radius: 50%;
}

.species-understanding-board__ring--outer {
  inset: 0;
  border: 10px solid rgba(196, 198, 202, 0.68);
  box-shadow:
    inset 0 0 0 2px rgba(249, 248, 243, 0.22),
    inset 0 0 0 14px rgba(56, 60, 72, 0.36),
    0 22px 34px rgba(0, 0, 0, 0.28);
}

.species-understanding-board__ring--middle {
  inset: 9%;
  border: 14px solid rgba(194, 196, 198, 0.18);
  box-shadow:
    inset 0 0 0 2px rgba(244, 238, 222, 0.16),
    inset 0 0 0 12px rgba(58, 65, 80, 0.42);
}

.species-understanding-board__ring--inner {
  inset: 10%;
  border: 1px solid rgba(var(--species-shell-accent-rgb) / 0.34);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.14), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(var(--species-shell-accent-rgb) / 0.18), transparent 58%),
    linear-gradient(
      180deg,
      rgba(var(--species-shell-core-top-rgb) / 0.98),
      rgba(var(--species-shell-core-bottom-rgb) / 0.98)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(12, 16, 24, 0.34),
    inset 0 0 34px rgba(var(--species-shell-accent-rgb) / 0.12),
    0 18px 32px rgba(0, 0, 0, 0.28);
}

.species-understanding-board__tick-field {
  inset: 13%;
  background:
    radial-gradient(circle, transparent 61%, rgba(255, 255, 255, 0.07) 61% 62.2%, transparent 62.2%),
    repeating-conic-gradient(
      from -90deg,
      rgba(255, 255, 255, 0.12) 0deg 3deg,
      transparent 3deg 18deg,
      rgba(242, 206, 98, 0.08) 18deg 21deg,
      transparent 21deg 40deg
    );
  opacity: 0.72;
}

.species-understanding-board-shell.is-epic .species-understanding-board__ring--inner {
  border-color: rgba(255, 154, 67, 0.42);
}

.species-understanding-board-shell.is-unique .species-understanding-board__ring--inner {
  border-color: rgba(241, 218, 102, 0.44);
}

.species-understanding-board-shell.is-special .species-understanding-board__ring--inner {
  border-color: rgba(160, 212, 255, 0.4);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(
      140deg,
      rgba(46, 52, 98, 0.98),
      rgba(34, 90, 132, 0.94),
      rgba(84, 46, 128, 0.92),
      rgba(116, 72, 44, 0.9),
      rgba(40, 110, 88, 0.92)
    );
}

.species-understanding-board__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(8, 11, 18, 0.96), rgba(18, 24, 36, 0.98));
  border: 1px solid rgba(231, 237, 246, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(6, 10, 16, 0.54),
    0 12px 24px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%);
}

.species-understanding-board__crest {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(119, 127, 140, 0.96), rgba(49, 58, 72, 0.98));
  border: 1px solid rgba(231, 237, 246, 0.16);
  color: rgba(244, 250, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 2px rgba(10, 14, 20, 0.52);
}

.species-understanding-board__crest svg {
  width: 32px;
  height: 32px;
}

.species-understanding-board__core small {
  color: rgba(233, 239, 247, 0.62);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.species-understanding-board__core strong {
  color: #fff;
  font-size: clamp(1.22rem, 1rem + 0.56vw, 1.66rem);
  line-height: 1.04;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.species-understanding-board__level {
  color: rgba(245, 217, 122, 0.94);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.species-understanding-board-shell__status {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.species-understanding-board-shell__status p {
  margin: 0;
  max-width: 460px;
  color: rgba(214, 222, 237, 0.62);
  font-size: 0.74rem;
  line-height: 1.55;
  text-align: center;
}

.species-understanding-cost-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.species-understanding-cost-inline__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.species-understanding-cost-inline__divider {
  color: rgba(214, 222, 237, 0.42);
}

.species-understanding-cost-inline__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
}

.species-understanding-cost-inline__thumb.item-grade-media.item-grade-tone {
  border: 1px solid var(--item-grade-tone-border);
  border-radius: 6px;
  background-color: var(--item-grade-tone-end);
  background-image: var(--item-grade-tone-gradient);
  box-sizing: border-box;
}

.species-understanding-cost-inline__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.species-understanding-board-shell__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 820px);
}

.species-understanding-board-shell__metric {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(var(--species-shell-panel-rgb) / 0.14);
  background: rgb(var(--species-shell-frame-rgb) / 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 24px rgba(0, 0, 0, 0.16);
}

.species-understanding-board-shell__metric span {
  color: rgba(214, 222, 237, 0.56);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.species-understanding-board-shell__metric strong {
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.3;
}

.species-understanding-board-shell__metric small {
  color: rgba(214, 222, 237, 0.58);
  font-size: 0.7rem;
  line-height: 1.5;
}

.species-understanding-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: min(100%, 720px);
  margin-inline: auto;
}

.species-understanding-console__panel {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(var(--species-shell-panel-rgb) / 0.16);
  background: rgb(var(--species-shell-frame-rgb) / 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 32px rgba(0, 0, 0, 0.22);
}

.species-understanding-shell--special .species-understanding-console__panel,
.species-understanding-shell--special .species-understanding-board-shell__metric,
.species-understanding-shell--special .species-understanding-console__summary-card {
  background: linear-gradient(
    135deg,
    rgba(99, 196, 255, 0.16),
    rgba(132, 134, 255, 0.16),
    rgba(255, 132, 204, 0.16),
    rgba(255, 210, 96, 0.16),
    rgba(99, 232, 184, 0.16)
  );
}

.species-understanding-shell--special .species-understanding-board__ring--inner {
  border-color: rgba(160, 212, 255, 0.38);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(
      135deg,
      rgba(99, 196, 255, 0.3),
      rgba(132, 134, 255, 0.3),
      rgba(255, 132, 204, 0.3),
      rgba(255, 210, 96, 0.3),
      rgba(99, 232, 184, 0.3)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(12, 16, 24, 0.34),
    inset 0 0 34px rgba(160, 212, 255, 0.14),
    0 18px 32px rgba(0, 0, 0, 0.28);
}

.species-understanding-console__header {
  display: grid;
  gap: 4px;
}

.species-understanding-console__header strong {
  color: #fff;
  font-size: 0.94rem;
}

.species-understanding-console__header span {
  color: rgba(214, 222, 237, 0.58);
  font-size: 0.72rem;
}

.species-understanding-selector--inline {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.species-understanding-selector--result {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.species-understanding-selector--inline .species-understanding-selector__button {
  width: 100%;
}

.species-understanding-selector--result .species-understanding-selector__button {
  width: 100%;
  gap: 0;
  place-items: center;
}

.species-understanding-selector--result .species-understanding-selector__board-shell {
  width: 100%;
  max-width: 88px;
}

.species-understanding-console__summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.species-understanding-console__summary-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--species-shell-panel-rgb) / 0.12);
  background: rgb(var(--species-shell-frame-rgb) / 0.34);
}

.species-understanding-console__summary-card span {
  color: rgba(214, 222, 237, 0.56);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.species-understanding-console__summary-card strong {
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.species-understanding-console__control-grid {
  display: grid;
  gap: 14px;
}

.species-understanding-console__fixed-level {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 8, 14, 0.82);
  color: #fff;
  font-weight: 700;
}

.species-understanding-console__actions {
  width: 100%;
  gap: 10px;
}

.species-understanding-console__actions .button {
  flex: 1 1 0;
  min-height: 54px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 900;
}

.species-understanding-stone {
  width: clamp(42px, 3.8vw, 54px);
  min-height: clamp(42px, 3.8vw, 54px);
  padding: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--species-stone-angle))
    translateY(var(--species-stone-radius))
    rotate(calc(-1 * var(--species-stone-angle)));
}

.species-understanding-stone:hover {
  transform:
    translate(-50%, -50%)
    rotate(var(--species-stone-angle))
    translateY(var(--species-stone-radius-hover))
    rotate(calc(-1 * var(--species-stone-angle)));
}

@keyframes species-understanding-wheel-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes species-understanding-stone-roll {
  0% {
    filter: saturate(0.9) blur(0);
    transform:
      translate(-50%, -50%)
      rotate(var(--species-stone-angle))
      translateY(var(--species-stone-radius))
      rotate(calc(-1 * var(--species-stone-angle)))
      scale(0.98);
  }

  50% {
    filter: saturate(1.2) blur(1.1px);
    transform:
      translate(-50%, -50%)
      rotate(var(--species-stone-angle))
      translateY(var(--species-stone-radius))
      rotate(calc(-1 * var(--species-stone-angle)))
      scale(1.04);
  }

  100% {
    filter: saturate(0.9) blur(0);
    transform:
      translate(-50%, -50%)
      rotate(var(--species-stone-angle))
      translateY(var(--species-stone-radius))
      rotate(calc(-1 * var(--species-stone-angle)))
      scale(0.98);
  }
}

@media (max-width: 1280px) {
  .enhancement-panel {
    --enhancement-stage-left-min: 214px;
    --enhancement-stage-right-min: 224px;
  }

  .enhancement-panel--gemstone,
  .enhancement-stage--gemstone {
    --enhancement-gemstone-shell-min-height: 720px;
    --enhancement-gemstone-list-min-height: 244px;
  }

  .enhancement-panel--equipment-layout {
    --enhancement-stage-right-min: 284px;
  }

  .enhancement-panel--crafting {
    --enhancement-stage-left-min: 288px;
    --enhancement-stage-right-min: 260px;
  }

  .enhancement-panel--equipment-layout .enhancement-shell-card--result,
  .enhancement-shell-card--equipment-showcase {
    height: auto;
  }

  .enhancement-showcase {
    min-height: clamp(560px, 60vw, 680px);
  }

  .species-understanding-showcase__hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  }

  .species-understanding-board-shell__frame {
    width: min(100%, 390px);
  }

  .species-understanding-board {
    width: min(100%, 330px);
    --species-stone-radius: -108px;
    --species-stone-radius-hover: -112px;
  }

  .species-understanding-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .planner-workspace-shell--combat-simulator .planner-workspace-shell__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .planner-workspace-shell--combat-simulator .combat-simulator-pet-preset-target {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .enhancement-panel--gemstone,
  .enhancement-stage--gemstone {
    --enhancement-gemstone-shell-min-height: 680px;
    --enhancement-gemstone-list-min-height: 228px;
  }

  .enhancement-stage {
    grid-template-columns: 1fr;
  }

  .enhancement-stage__center {
    order: -1;
  }

  .enhancement-panel--equipment-layout .enhancement-stage__left {
    order: -2;
  }

  .enhancement-showcase {
    min-height: 560px;
  }

  .enhancement-equipment-showcase__soul-hero {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 440px);
  }

  .enhancement-equipment-showcase__soul-sidecard {
    transform: none;
  }

  .enhancement-equipment-picker__rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .enhancement-shell-card--crafting-library,
  .enhancement-shell-card--crafting-showcase,
  .enhancement-shell-card--crafting-materials {
    min-height: 0;
  }

  .enhancement-panel--material-conversion .enhancement-stage__left > .enhancement-shell-card,
  .enhancement-panel--material-conversion .enhancement-stage__center > .enhancement-shell-card,
  .enhancement-panel--material-conversion .enhancement-stage__right > .enhancement-shell-card {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .crafting-workbench__equipment-list,
  .crafting-workbench__material-list {
    max-height: none;
  }

  .crafting-workbench__equipment-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .species-understanding-showcase__hero,
  .species-understanding-showcase__visual {
    grid-template-columns: 1fr;
  }

  .species-understanding-board-shell__metrics,
  .species-understanding-console,
  .species-understanding-console__summary-grid {
    grid-template-columns: 1fr;
  }

  .species-understanding-board {
    width: min(100%, 310px);
    --species-stone-radius: -102px;
    --species-stone-radius-hover: -106px;
  }

  .species-understanding-selector--inline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .species-understanding-selector--result {
    grid-template-columns: minmax(0, 1fr);
  }

  .species-understanding-selector:not(.species-understanding-selector--inline):not(.species-understanding-selector--result) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .species-understanding-board__selector {
    justify-items: center;
  }

  .species-understanding-board__section-header {
    width: 100%;
    justify-items: center;
    text-align: center;
  }

  .species-understanding-showcase__orbital-shell {
    width: min(100%, 456px);
  }

  .species-understanding-showcase__summary-strip,
  .species-understanding-grade-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .enhancement-panel--gemstone,
  .enhancement-stage--gemstone {
    --enhancement-gemstone-shell-min-height: 620px;
    --enhancement-gemstone-list-min-height: 208px;
  }

  .enhancement-panel__masthead {
    display: grid;
  }

  .enhancement-panel__masthead-meta {
    justify-content: flex-start;
  }

  .enhancement-panel--pet-understanding .species-understanding-preset-bar__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-panel--pet-understanding .species-understanding-preset-bar__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .enhancement-two-up,
  .enhancement-three-up,
  .enhancement-showcase__pill-grid {
    grid-template-columns: 1fr;
  }

  .enhancement-showcase {
    min-height: 480px;
    padding: 22px 18px 26px;
  }

  .enhancement-showcase__visual--ring,
  .enhancement-showcase__visual--device,
  .enhancement-showcase__visual--card {
    width: min(72vw, 300px);
  }

  .enhancement-equipment-picker__header {
    display: grid;
  }

  .enhancement-shell-card--equipment-library {
    padding-inline: 16px;
  }

  .crafting-workbench__summary-grid,
  .crafting-workbench__material-summary {
    grid-template-columns: 1fr;
  }

  .crafting-workbench__showcase-costs,
  .crafting-workbench__showcase-utility,
  .crafting-workbench__showcase .enhancement-equipment-showcase__primary-action,
  .crafting-workbench__duel-panel {
    width: 100%;
  }

  .crafting-workbench__showcase .crafting-workbench__showcase-orbital .crafting-workbench__showcase-slot {
    right: 4%;
    bottom: 12%;
    width: 58px;
    height: 58px;
  }

  .crafting-workbench__character-field {
    max-width: none;
  }

  .crafting-workbench__nav-row.pantheon-panel__character-search-row {
    grid-template-columns: 1fr;
  }

  .crafting-workbench__nav-row .character-search-filter-bar__factions {
    flex-wrap: wrap;
  }

  .crafting-workbench__equipment-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-panel--material-conversion .crafting-workbench__equipment-list {
    gap: 5px;
  }

  .crafting-workbench__material-list .enhancement-rail-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .enhancement-equipment-card--wide {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .enhancement-equipment-card--wide .enhancement-equipment-card__thumb {
    width: min(100%, 120px);
  }

  .enhancement-equipment-card__stats {
    justify-content: flex-start;
  }

  .enhancement-equipment-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enhancement-equipment-picker__rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .enhancement-summary-grid--equipment-log {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-shell-card--equipment-showcase {
    padding-inline: 16px;
  }

  .enhancement-equipment-adjustment-dialog__form {
    grid-template-columns: 1fr;
  }

  .enhancement-custom-image-paste-zone {
    grid-template-columns: 1fr;
  }

  .enhancement-equipment-adjustment-dialog__entry-fields {
    grid-template-columns: 1fr;
  }

  .enhancement-gemstone-auto-dialog__panel {
    width: min(100%, 560px);
  }

  .enhancement-gemstone-auto-dialog__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .enhancement-equipment-showcase__title {
    font-size: 1.26rem;
  }

  .enhancement-equipment-showcase__soul-hero {
    gap: 14px;
    width: 100%;
  }

  .enhancement-equipment-showcase__orbital-shell {
    width: min(100%, 248px);
  }

  .enhancement-shell-card--gemstone-showcase .enhancement-equipment-showcase__orbital-shell {
    width: min(100%, 176px);
  }

  .enhancement-equipment-showcase__soul-tuning-socket {
    width: 58px;
    height: 58px;
    right: 8%;
    bottom: 11%;
  }

  .enhancement-equipment-showcase__diamond {
    width: 22px;
    height: 22px;
  }

  .enhancement-equipment-showcase__rate-bar-shell {
    gap: 10px;
  }

  .species-understanding-showcase__title-row,
  .species-understanding-showcase__hero,
  .species-understanding-showcase__lower {
    width: 100%;
  }

  .species-understanding-showcase__helper {
    font-size: 0.74rem;
  }

  .species-understanding-showcase__sidecard-header {
    display: grid;
  }

  .species-understanding-showcase__summary-strip {
    grid-template-columns: 1fr;
  }

  .species-understanding-showcase__actions {
    display: grid;
  }

  .species-understanding-selector__button {
    gap: 6px;
  }

  .species-understanding-selector--result {
    grid-template-columns: minmax(0, 1fr);
  }

  .species-understanding-selector__board-shell {
    width: 92px;
  }

  .species-understanding-selector__board-shell .species-understanding-board {
    width: 82%;
    --species-stone-radius: -26px;
    --species-stone-radius-hover: -26px;
  }

  .species-understanding-selector__board-shell .species-understanding-selector__stone {
    width: 8px;
    min-height: 8px;
  }

  .species-understanding-selector__copy {
    font-size: 0.64rem;
  }

  .species-understanding-grade-strip {
    grid-template-columns: 1fr;
  }

  .species-understanding-board-shell__frame {
    width: min(100%, 290px);
    padding: 0;
  }

  .species-understanding-board {
    width: min(100%, 250px);
    --species-stone-radius: -82px;
    --species-stone-radius-hover: -86px;
  }

  .species-understanding-board__core {
    width: 30%;
  }

  .species-understanding-board__crest {
    width: 62px;
    height: 62px;
  }

  .species-understanding-stone {
    width: 38px;
    min-height: 38px;
  }

  .species-understanding-stone.is-rolling {
    animation-name: species-understanding-stone-roll-mobile;
  }

  .species-understanding-result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .enhancement-equipment-showcase__inheritance-slots {
    --inheritance-lane-width: 240px;
    --inheritance-link-width: 112px;
  }

  .enhancement-equipment-showcase__inheritance-soul-previews {
    grid-template-columns:
      var(--inheritance-lane-width)
      var(--inheritance-link-width)
      var(--inheritance-lane-width);
  }

  .enhancement-equipment-showcase__inheritance-slots {
    grid-template-columns:
      var(--inheritance-lane-width)
      var(--inheritance-link-width)
      var(--inheritance-lane-width);
    gap: 22px;
    justify-content: center;
  }

  .enhancement-equipment-showcase__inheritance-link {
    min-height: calc(var(--inheritance-slot-size) + 26px);
  }
}

@media (max-width: 720px) {
  .enhancement-shell-card--inheritance-transfer-showcase {
    min-height: 0;
  }

  .enhancement-equipment-showcase__inheritance-slots {
    --inheritance-lane-width: min(100%, 280px);
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .enhancement-equipment-showcase__inheritance-soul-previews {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .enhancement-equipment-showcase__inheritance-slot {
    gap: 8px;
  }

  .enhancement-equipment-showcase__inheritance-link {
    min-height: 56px;
    width: 100%;
  }

  .enhancement-equipment-showcase__inheritance-link-arrow {
    transform: rotate(90deg);
  }

  .enhancement-equipment-showcase__inheritance-link-spacer {
    display: none;
  }

  .enhancement-equipment-showcase__cost-strip--inheritance {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .enhancement-shell-card--inheritance-transfer-showcase .enhancement-equipment-showcase__utility {
    width: 100%;
  }

  .enhancement-shell-card--inheritance-transfer-showcase
    .enhancement-equipment-showcase__secondary-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .enhancement-panel {
    --enhancement-reference-slot-size: clamp(50px, 12vw, 64px);
    --enhancement-reference-icon-size: clamp(28px, 7.8vw, 36px);
  }

  .enhancement-equipment-picker__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crafting-workbench__equipment-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes crafting-result-overlay-pop {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }

  7%,
  86% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.98) translateY(-8px);
  }
}

@keyframes crafting-success-feed-line-enter {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes crafting-gauge-sheen {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(160%);
  }
}

@keyframes species-understanding-stone-roll-mobile {
  0% {
    filter: saturate(0.9) blur(0);
    transform:
      translate(-50%, -50%)
      rotate(var(--species-stone-angle))
      translateY(var(--species-stone-radius))
      rotate(calc(-1 * var(--species-stone-angle)))
      scale(0.98);
  }

  50% {
    filter: saturate(1.2) blur(1px);
    transform:
      translate(-50%, -50%)
      rotate(var(--species-stone-angle))
      translateY(var(--species-stone-radius))
      rotate(calc(-1 * var(--species-stone-angle)))
      scale(1.04);
  }

  100% {
    filter: saturate(0.9) blur(0);
    transform:
      translate(-50%, -50%)
      rotate(var(--species-stone-angle))
      translateY(var(--species-stone-radius))
      rotate(calc(-1 * var(--species-stone-angle)))
      scale(0.98);
  }
}

.enhancement-panel--arcana-catalog .enhancement-stage {
  grid-template-columns: minmax(0, 1fr);
}

.enhancement-panel--arcana-catalog .enhancement-stage__left,
.enhancement-panel--arcana-catalog .enhancement-stage__right {
  display: none;
}

.enhancement-panel--arcana-catalog .enhancement-stage__center {
  max-width: none;
}

.enhancement-panel--arcana-catalog .enhancement-rail-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.enhancement-panel--arcana-synthesis .enhancement-stage__right .enhancement-rail-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.enhancement-panel--arcana-synthesis .enhancement-stage__right .enhancement-rail-item {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.enhancement-panel--arcana-synthesis .enhancement-stage__right .enhancement-rail-item__thumb {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(11, 14, 22, 0.96);
  box-shadow: none;
}

.enhancement-panel--arcana-synthesis .enhancement-stage__right .enhancement-rail-item__badge {
  border-color: rgba(125, 211, 252, 0.38);
  background: rgba(14, 165, 233, 0.14);
  color: #e0f7ff;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.12);
}

.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item.is-priority-top {
  border-color: rgba(250, 204, 21, 0.72);
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.14), rgba(250, 204, 21, 0.04)),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.08);
}

.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item.is-priority-mid,
.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item.is-priority-low {
  border-color: rgba(245, 158, 11, 0.56);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.035)),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.07);
}

.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item.is-priority-top
  .enhancement-rail-item__thumb {
  border-color: rgba(250, 204, 21, 0.5);
}

.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item.is-priority-mid
  .enhancement-rail-item__thumb,
.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item.is-priority-low
  .enhancement-rail-item__thumb {
  border-color: rgba(245, 158, 11, 0.42);
}

.enhancement-panel.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-shell-card__header
  strong,
.enhancement-panel.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-shell-section__header
  strong,
.enhancement-panel.enhancement-panel--arcana-synthesis
  .enhancement-stage__right
  .enhancement-rail-item__copy
  strong {
  color: #fff;
  text-shadow: none;
}

.arcana-catalog-summary {
  gap: 14px;
}

.arcana-catalog-summary__callout {
  margin: 0;
}

.arcana-catalog-summary__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.arcana-catalog-target {
  align-items: start;
}

.arcana-catalog-target__copy {
  gap: 10px;
}

.arcana-catalog-target__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.arcana-catalog-target__level {
  display: grid;
  gap: 4px;
  min-width: 92px;
}

.arcana-catalog-target__level span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  text-align: right;
}

.arcana-catalog-target__level input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 11, 18, 0.9);
  color: #fff;
}

.arcana-catalog-target__slots {
  display: grid;
  gap: 8px;
}

.arcana-catalog-target__slot {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.arcana-catalog-target__slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.arcana-catalog-target__slot-head strong {
  color: #fff;
  font-size: 0.76rem;
}

.arcana-catalog-target__slot-head span {
  color: rgba(221, 234, 255, 0.82);
  font-size: 0.7rem;
  font-weight: 700;
}

.arcana-catalog-target__slot small {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
}

.arcana-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.arcana-catalog-grid__section {
  min-width: 0;
}

.enhancement-arcana-skill-planner {
  gap: 18px;
}

.enhancement-arcana-skill-planner__callout {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  color: rgba(226, 236, 255, 0.82);
  font-size: 0.76rem;
  line-height: 1.55;
}

.enhancement-arcana-skill-planner__callout-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__callout-emphasis {
  color: rgba(255, 224, 138, 0.98);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.enhancement-arcana-skill-planner__target-total {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 40px;
  padding: 0 18px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(115, 220, 255, 0.22);
  background: rgba(10, 15, 25, 0.42);
  color: rgba(228, 242, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.enhancement-arcana-synthesis__variant-field {
  gap: 10px;
}

.enhancement-arcana-synthesis__variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.enhancement-arcana-synthesis__variant-chip {
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  white-space: nowrap;
}

.enhancement-arcana-synthesis__showcase-action {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 18px;
}

.enhancement-arcana-synthesis__roll-button {
  min-width: 132px;
}

.enhancement-arcana-synthesis__button-row {
  display: grid;
  grid-template-columns: minmax(94px, auto) minmax(132px, auto) minmax(94px, auto);
  justify-content: center;
  gap: 8px;
  width: min(100%, 390px);
}

.enhancement-arcana-enhancement__button-row {
  grid-template-columns: minmax(104px, auto) minmax(132px, auto) minmax(94px, auto);
  width: min(100%, 460px);
}

.enhancement-arcana-enhancement__level-up-message {
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.11);
  color: #dff7ff;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.06);
}

.enhancement-arcana-synthesis__side-button {
  min-width: 94px;
  padding-inline: 12px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(8, 11, 18, 0.74);
}

.enhancement-arcana-synthesis__reset-button {
  color: rgba(255, 210, 210, 0.9);
}

.enhancement-arcana-synthesis__auto-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 6, 12, 0.58);
  backdrop-filter: blur(6px);
}

.enhancement-arcana-synthesis__auto-dialog {
  display: grid;
  gap: 14px;
  width: min(92vw, 620px);
  max-height: min(86vh, 760px);
  padding: 18px;
  border: 1px solid rgba(var(--scene-accent) / 0.28);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(16, 20, 28, 0.98), rgba(7, 10, 16, 0.98)),
    radial-gradient(circle at top, rgba(var(--scene-secondary) / 0.08), transparent 38%);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.enhancement-arcana-synthesis__skill-picker-dialog {
  width: min(92vw, 520px);
}

.enhancement-arcana-enhancement__custom-dialog {
  gap: 12px;
  width: min(94vw, 900px);
  max-height: none;
  padding: 16px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--enhancement-shell-radius);
}

.enhancement-arcana-synthesis__auto-header,
.enhancement-arcana-synthesis__auto-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.enhancement-arcana-enhancement__custom-dialog .enhancement-arcana-synthesis__auto-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.enhancement-arcana-enhancement__custom-dialog .enhancement-arcana-synthesis__auto-actions {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.enhancement-arcana-synthesis__auto-header strong {
  display: block;
  color: #fff;
  font-size: 1rem;
}

.enhancement-arcana-enhancement__custom-dialog .enhancement-arcana-synthesis__auto-header strong {
  font-size: 0.96rem;
}

.enhancement-arcana-synthesis__auto-header p,
.enhancement-arcana-synthesis__auto-status {
  margin: 4px 0 0;
  color: rgba(238, 244, 255, 0.68);
  font-size: 0.8rem;
  line-height: 1.45;
}

.enhancement-arcana-synthesis__auto-close {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 244, 255, 0.82);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.enhancement-arcana-synthesis__auto-options,
.enhancement-arcana-synthesis__auto-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(238, 244, 255, 0.76);
  font-size: 0.82rem;
  font-weight: 800;
}

.enhancement-arcana-synthesis__auto-selected span,
.enhancement-arcana-synthesis__auto-balance-note {
  color: rgba(238, 244, 255, 0.54);
  font-size: 0.72rem;
  font-weight: 700;
}

.enhancement-arcana-synthesis__auto-count-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.enhancement-arcana-synthesis__auto-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
}

.enhancement-arcana-synthesis__auto-skill {
  position: relative;
  justify-content: start;
  min-width: 0;
}

.enhancement-arcana-synthesis__auto-order {
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--scene-accent) / 0.9);
  color: #05070c;
  font-size: 0.72rem;
  font-weight: 900;
}

.enhancement-arcana-synthesis__auto-status {
  min-height: 1.2em;
  text-align: center;
}

.enhancement-arcana-enhancement__custom-summary {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.enhancement-arcana-enhancement__custom-summary > span {
  color: rgba(238, 244, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.enhancement-arcana-enhancement__custom-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(56vh, 430px);
  overflow: auto;
}

.enhancement-arcana-enhancement__custom-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.enhancement-arcana-enhancement__custom-skill {
  position: relative;
  justify-content: start;
  min-width: 0;
  padding: 7px 9px;
}

.enhancement-arcana-enhancement__custom-skill:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.enhancement-arcana-enhancement__custom-slot {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(86px, 0.65fr);
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.enhancement-arcana-enhancement__custom-slot-skill {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.enhancement-arcana-enhancement__custom-slot-skill > span,
.enhancement-arcana-enhancement__custom-slot-skill > strong {
  overflow: hidden;
  color: rgba(235, 241, 255, 0.64);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-arcana-enhancement__custom-slot .enhancement-field {
  gap: 6px;
}

.enhancement-arcana-enhancement__custom-summary input,
.enhancement-arcana-enhancement__custom-slot input,
.enhancement-arcana-enhancement__custom-slot select {
  min-height: 36px;
}

.enhancement-arcana-synthesis__cost-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 360px);
}

.enhancement-arcana-synthesis__cost-note {
  color: rgba(238, 244, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.enhancement-arcana-synthesis__cost-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.enhancement-arcana-synthesis__cost-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(8, 11, 18, 0.62);
}

.enhancement-arcana-synthesis__cost-thumb {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.enhancement-arcana-synthesis__cost-thumb img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.enhancement-arcana-synthesis__cost-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: left;
}

.enhancement-arcana-synthesis__cost-copy small {
  overflow: hidden;
  color: rgba(235, 241, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-arcana-synthesis__cost-copy strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-panel--arcana-synthesis .enhancement-arcana-synthesis__cost-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(8, 11, 18, 0.62);
  box-shadow: none;
}

.enhancement-panel--arcana-synthesis .enhancement-arcana-synthesis__cost-thumb {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__cost-thumb.item-grade-media.item-grade-tone {
  border-color: var(--item-grade-tone-border);
  background-color: var(--item-grade-tone-end);
  background-image: var(--item-grade-tone-gradient);
}

.enhancement-panel.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__cost-copy
  strong {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: none;
}

.enhancement-panel--arcana-synthesis {
  --arcana-synthesis-grade-rgb: 255 208 43;
  --arcana-synthesis-grade-text: var(--item-grade-unique-text);
}

.enhancement-panel--arcana-synthesis.is-legend {
  --arcana-synthesis-grade-rgb: 55 154 255;
  --arcana-synthesis-grade-text: var(--item-grade-legend-text);
}

.enhancement-panel--arcana-synthesis.is-rare {
  --arcana-synthesis-grade-rgb: 25 224 72;
  --arcana-synthesis-grade-text: var(--item-grade-rare-text);
}

.enhancement-panel--arcana-synthesis.is-unique {
  --arcana-synthesis-grade-rgb: 255 208 43;
  --arcana-synthesis-grade-text: var(--item-grade-unique-text);
}

.enhancement-panel--arcana-synthesis .enhancement-showcase {
  overflow: visible;
  min-height: clamp(540px, 48vw, 640px);
  padding-bottom: 41px;
}

.enhancement-arcana-synthesis__showcase-title.enhancement-equipment-showcase__title {
  position: relative;
  z-index: 1;
  display: block;
  justify-self: center;
  width: min(100%, 360px);
  margin: 0 auto -2px;
  text-align: center;
}

.enhancement-stage--arcana-synthesis .enhancement-exclusion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.enhancement-stage--arcana-synthesis .enhancement-exclusion-list .enhancement-chip--skill {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  padding: 7px 10px;
}

.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill
  .arcana-skill-identity {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}

.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill
  .arcana-skill-identity__text {
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill.is-priority-top {
  border-color: rgba(250, 204, 21, 0.62);
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.1), rgba(250, 204, 21, 0.03)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.16);
}

.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill.is-priority-mid,
.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill.is-priority-low {
  border-color: rgba(245, 158, 11, 0.46);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.14);
}

.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill.is-priority-top:hover,
.enhancement-stage--arcana-synthesis
  .enhancement-exclusion-list
  .enhancement-chip--skill.is-priority-top.is-active {
  border-color: rgba(250, 204, 21, 0.82);
}

.enhancement-stage--arcana-synthesis .enhancement-exclusion-list .enhancement-chip--skill.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}

.enhancement-panel--arcana-synthesis .enhancement-chip--skill.is-priority-top,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-top {
  border-color: rgba(250, 204, 21, 0.62);
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.1), rgba(250, 204, 21, 0.03)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.18),
    0 10px 20px rgba(0, 0, 0, 0.16);
}

.enhancement-panel--arcana-synthesis .enhancement-chip--skill.is-priority-mid,
.enhancement-panel--arcana-synthesis .enhancement-chip--skill.is-priority-low,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-mid,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-low {
  border-color: rgba(245, 158, 11, 0.46);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.14);
}

.enhancement-panel--arcana-synthesis .enhancement-chip--skill.is-priority-top:hover,
.enhancement-panel--arcana-synthesis .enhancement-chip--skill.is-priority-top.is-active,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-top:hover,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-top[aria-expanded='true'] {
  border-color: rgba(250, 204, 21, 0.82);
}

.enhancement-stage--arcana-synthesis .enhancement-showcase__visual--card {
  --arcana-synthesis-image-width: min(15vw, 166px);
  --arcana-synthesis-image-height: min(21vw, 232px);
  width: calc(var(--arcana-synthesis-image-width) + 14px);
  height: calc(var(--arcana-synthesis-image-height) + 14px);
  aspect-ratio: auto;
  padding: 7px;
  border: 1px solid rgba(var(--arcana-synthesis-grade-rgb) / 0.58);
  border-radius: 20px;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(var(--arcana-synthesis-grade-rgb) / 0.16),
    0 18px 42px rgba(var(--arcana-synthesis-grade-rgb) / 0.14),
    0 24px 46px rgba(0, 0, 0, 0.22);
  margin-bottom: 4px;
}

.enhancement-stage--arcana-synthesis
  .enhancement-showcase__visual--card
  .enhancement-showcase__visual-frame {
  overflow: hidden;
  border-color: rgba(var(--arcana-synthesis-grade-rgb) / 0.82);
  border-radius: 15px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 22px rgba(var(--arcana-synthesis-grade-rgb) / 0.08),
    0 18px 42px rgba(0, 0, 0, 0.18);
}

.enhancement-stage--arcana-synthesis
  .enhancement-showcase__visual--card
  .enhancement-showcase__visual-frame
  img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.enhancement-arcana-synthesis__equipment-arc {
  position: relative;
  z-index: 1;
  width: min(92%, 430px);
  height: 118px;
  margin: -50px auto 16px;
}

.enhancement-arcana-synthesis__equipment-arc::before {
  content: none;
}

.enhancement-arcana-synthesis__preset-panel {
  position: relative;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(96%, 560px);
  margin: -8px auto 14px;
}

.enhancement-arcana-synthesis__preset-table {
  display: grid;
  gap: 7px;
}

.enhancement-arcana-synthesis__preset-head,
.enhancement-arcana-synthesis__preset-row {
  display: grid;
  grid-template-columns: minmax(60px, 0.68fr) minmax(128px, 1.24fr) minmax(118px, 1.18fr);
  gap: 8px;
  align-items: start;
}

.enhancement-arcana-synthesis__preset-head span {
  color: rgba(235, 241, 255, 0.56);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
}

.enhancement-arcana-synthesis__preset-head {
  align-items: center;
}

.enhancement-arcana-synthesis__preset-row {
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.enhancement-arcana-synthesis__preset-row.is-active {
  border-color: rgba(var(--scene-accent) / 0.2);
  background: rgba(var(--scene-accent) / 0.06);
}

.enhancement-arcana-synthesis__preset-row.is-disabled {
  opacity: 0.5;
}

.enhancement-arcana-enhancement__preset-head,
.enhancement-arcana-enhancement__preset-row {
  grid-template-columns: minmax(72px, 0.72fr) minmax(168px, 1.8fr);
}

.enhancement-arcana-synthesis__grade-cell {
  position: relative;
  z-index: 45;
  min-width: 0;
}

.enhancement-arcana-synthesis__grade-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 100;
  display: grid;
  gap: 6px;
  min-width: 100%;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(7, 10, 16, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%);
}

.enhancement-arcana-synthesis__grade-menu .enhancement-arcana-synthesis__grade-chip {
  min-width: 100%;
}

.enhancement-arcana-synthesis__grade-chip.is-locked::before,
.enhancement-arcana-synthesis__main-effect-line::before {
  content: '🔒';
  margin-right: 5px;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.82;
}

.enhancement-arcana-synthesis__grade-chip,
.enhancement-arcana-synthesis__main-effect-chip,
.enhancement-arcana-synthesis__additional-disabled,
.enhancement-arcana-synthesis__additional-button {
  width: 100%;
  min-width: 0;
}

.enhancement-arcana-synthesis__additional-slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  gap: 6px;
  min-width: 0;
}

.enhancement-arcana-synthesis__additional-slot {
  flex: 1 1 0;
  min-width: 0;
}

.enhancement-arcana-synthesis__main-effect-chip,
.enhancement-arcana-synthesis__additional-button,
.enhancement-arcana-synthesis__additional-clear,
.enhancement-arcana-synthesis__additional-disabled {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 11, 18, 0.74);
  color: rgba(238, 244, 255, 0.82);
  font: inherit;
}

.enhancement-arcana-synthesis__main-effect-chip {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

.enhancement-arcana-synthesis__main-effect-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(var(--scene-accent) / 0.56);
  border-radius: 999px;
  background: rgba(8, 11, 18, 0.74);
  color: #fff;
}

.enhancement-arcana-synthesis__main-effect-chip.is-active {
  color: #fff;
}

.enhancement-arcana-synthesis__main-effect-chip.is-missing {
  color: rgba(255, 184, 184, 0.86);
}

.enhancement-arcana-synthesis__main-effect-chip.is-missing
  .enhancement-arcana-synthesis__main-effect-line {
  border-color: rgba(248, 113, 113, 0.28);
  color: rgba(255, 184, 184, 0.86);
}

.enhancement-arcana-synthesis__grade-chip:disabled,
.enhancement-arcana-synthesis__main-effect-chip:disabled,
.enhancement-arcana-synthesis__additional-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.enhancement-arcana-synthesis__additional-slots {
  justify-content: stretch;
}

.enhancement-arcana-synthesis__additional-slot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.enhancement-arcana-synthesis__additional-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border-radius: 999px;
  color: rgba(238, 244, 255, 0.54);
  font-size: 0.78rem;
  font-weight: 900;
}

.enhancement-arcana-synthesis__additional-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 36px;
  padding: 0 9px;
  border-radius: 14px;
  cursor: pointer;
}

.enhancement-arcana-synthesis__additional-button:hover,
.enhancement-arcana-synthesis__additional-button[aria-expanded='true'],
.enhancement-arcana-synthesis__additional-slot.is-filled .enhancement-arcana-synthesis__additional-button {
  border-color: rgba(var(--scene-accent) / 0.48);
  color: #fff;
}

.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-top,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-top:hover,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-top[aria-expanded='true'],
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-slot.is-filled
  .enhancement-arcana-synthesis__additional-button.is-priority-top {
  border-color: rgba(250, 204, 21, 0.82);
}

.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-mid,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-button.is-priority-low,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-slot.is-filled
  .enhancement-arcana-synthesis__additional-button.is-priority-mid,
.enhancement-panel--arcana-synthesis
  .enhancement-arcana-synthesis__additional-slot.is-filled
  .enhancement-arcana-synthesis__additional-button.is-priority-low {
  border-color: rgba(245, 158, 11, 0.62);
}

.enhancement-arcana-synthesis__additional-button .arcana-skill-identity {
  min-width: 0;
}

.enhancement-arcana-synthesis__additional-plus {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
}

.enhancement-arcana-synthesis__additional-clear {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.enhancement-arcana-synthesis__additional-clear:hover {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fff;
}

.enhancement-arcana-synthesis__skill-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(56vh, 420px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(var(--scene-accent) / 0.18);
  border-radius: 18px;
  background: rgba(6, 9, 15, 0.82);
}

.enhancement-arcana-synthesis__skill-picker .enhancement-chip--skill {
  min-width: 0;
  justify-content: start;
}

.enhancement-arcana-synthesis__skill-picker-empty {
  grid-column: 1 / -1;
  padding: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  text-align: center;
}

.enhancement-arcana-synthesis__equipment-node {
  position: absolute;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.86);
  color: rgba(235, 241, 255, 0.82);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.enhancement-arcana-synthesis__equipment-icon {
  font-size: 1.18rem;
  line-height: 1;
}

.enhancement-arcana-synthesis__equipment-node:nth-child(1) {
  left: 10%;
  top: 12px;
}

.enhancement-arcana-synthesis__equipment-node:nth-child(2) {
  left: 23%;
  top: 62px;
}

.enhancement-arcana-synthesis__equipment-node:nth-child(3) {
  left: 40%;
  top: 96px;
}

.enhancement-arcana-synthesis__equipment-node:nth-child(4) {
  left: 60%;
  top: 96px;
}

.enhancement-arcana-synthesis__equipment-node:nth-child(5) {
  left: 77%;
  top: 62px;
}

.enhancement-arcana-synthesis__equipment-node:nth-child(6) {
  left: 90%;
  top: 12px;
}

.enhancement-arcana-synthesis__equipment-node:hover,
.enhancement-arcana-synthesis__equipment-node.is-active {
  transform: translate(-50%, -52%);
  border-color: rgba(var(--scene-accent) / 0.52);
  background:
    linear-gradient(180deg, rgba(var(--scene-accent) / 0.26), rgba(var(--scene-secondary) / 0.1)),
    rgba(8, 11, 18, 0.92);
  color: #fff;
}

.enhancement-arcana-synthesis__equipment-node:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: translate(-50%, -50%);
}

.enhancement-arcana-synthesis__grade-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px auto 16px;
}

.enhancement-arcana-synthesis__grade-chip {
  --arcana-grade-chip-rgb: 208 177 86;
  min-width: 52px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(var(--arcana-grade-chip-rgb) / 0.28);
  border-radius: 999px;
  background: rgba(8, 11, 18, 0.82);
  color: rgba(240, 245, 255, 0.76);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
}

.enhancement-arcana-synthesis__grade-chip.is-legend {
  --arcana-grade-chip-rgb: 55 154 255;
}

.enhancement-arcana-synthesis__grade-chip.is-rare {
  --arcana-grade-chip-rgb: 25 224 72;
}

.enhancement-arcana-synthesis__grade-chip.is-unique {
  --arcana-grade-chip-rgb: 255 208 43;
}

.enhancement-arcana-synthesis__grade-chip.is-active {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(8, 11, 18, 0.84);
  color: rgba(240, 245, 255, 0.9);
}

.enhancement-arcana-synthesis__grade-chip.is-preview-only:not(.is-active) {
  opacity: 0.58;
}

.enhancement-arcana-skill-planner__chip {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 112px;
  padding: 16px 14px;
  justify-items: center;
  text-align: center;
}

.enhancement-arcana-skill-planner .character-detail__skill-grid {
  gap: 18px;
  align-items: stretch;
}

.enhancement-arcana-skill-planner__chip[data-arcana-source-tooltip]::after,
.enhancement-arcana-skill-planner__card-skill[data-arcana-source-tooltip]::after {
  content: attr(data-arcana-source-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  padding: 9px 11px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(19, 28, 43, 0.98), rgba(8, 12, 20, 0.98)),
    rgba(8, 12, 20, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 28px rgba(0, 0, 0, 0.34);
  color: rgba(238, 247, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
}

.enhancement-arcana-skill-planner__chip[data-arcana-source-tooltip]:hover::after,
.enhancement-arcana-skill-planner__chip[data-arcana-source-tooltip]:focus-within::after,
.enhancement-arcana-skill-planner__card-skill[data-arcana-source-tooltip]:hover::after,
.enhancement-arcana-skill-planner__card-skill[data-arcana-source-tooltip]:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.enhancement-arcana-skill-planner__chip:not(.is-priority-top):not(.is-priority-mid):not(.is-priority-low) {
  border-color: transparent;
}

.enhancement-arcana-skill-planner__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__chip-layout {
  display: grid;
  grid-template-columns: 54px max-content;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 9px;
  align-items: start;
  justify-content: center;
  min-width: 0;
}

.enhancement-arcana-skill-planner__media-column {
  display: grid;
  justify-items: center;
  gap: 18px;
  flex: 0 0 54px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__chip .character-detail__skill-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  width: 54px;
  height: 54px;
  max-width: 54px;
  max-height: 54px;
  aspect-ratio: 1 / 1;
  align-self: start;
  flex: 0 0 auto;
}

.enhancement-arcana-skill-planner__chip .character-detail__skill-icon {
  border-radius: 14px;
}

.enhancement-arcana-skill-planner__chip .character-detail__skill-level {
  right: 4px;
  bottom: 4px;
  min-height: 16px;
  padding: 1px 5px;
  font-size: 0.58rem;
}

.enhancement-arcana-skill-planner__current-level {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  align-self: center;
  display: block;
  width: 100%;
  color: rgba(224, 235, 255, 0.68);
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.enhancement-arcana-skill-planner__chip-body {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__title {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__title .character-detail__skill-name {
  font-size: 0.96rem;
  line-height: 1.18;
}

.enhancement-arcana-skill-planner__title small {
  color: rgba(224, 235, 255, 0.64);
  font-size: 0.62rem;
  line-height: 1.25;
}

.enhancement-arcana-skill-planner__level-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__level-row span {
  width: fit-content;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(224, 235, 255, 0.7);
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.enhancement-arcana-skill-planner__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.enhancement-arcana-skill-planner__stat {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__stat.is-target {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.enhancement-arcana-skill-planner__stat dt {
  color: rgba(224, 235, 255, 0.58);
  padding-top: 7px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

.enhancement-arcana-skill-planner__stat dd {
  margin: 0;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.enhancement-arcana-skill-planner__target {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: max-content;
}

.enhancement-arcana-skill-planner__target-stepper {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  display: grid;
  grid-template-columns: 24px 38px 24px;
  gap: 7px;
  align-items: center;
  width: max-content;
}

.enhancement-arcana-skill-planner__target-stepper button {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 9px;
  background: rgba(8, 11, 18, 0.82);
  color: rgba(224, 241, 255, 0.86);
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

.enhancement-arcana-skill-planner__target-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.enhancement-arcana-skill-planner__target-stepper input {
  width: 38px;
  box-sizing: border-box;
  min-height: 28px;
  padding: 4px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 11, 18, 0.9);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.enhancement-arcana-skill-planner__target-stepper input::-webkit-outer-spin-button,
.enhancement-arcana-skill-planner__target-stepper input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.enhancement-arcana-skill-planner__target-max {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  align-self: center;
  color: rgba(224, 235, 255, 0.64);
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.enhancement-arcana-skill-planner__target small {
  color: rgba(224, 235, 255, 0.58);
  font-size: 0.6rem;
  line-height: 1.25;
}

.enhancement-arcana-skill-planner__actions {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.enhancement-arcana-skill-planner__action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.enhancement-arcana-skill-planner__card-lock,
.enhancement-arcana-skill-planner__priority-preset,
.enhancement-arcana-skill-planner__reset {
  min-width: 120px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(123, 210, 255, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(71, 143, 186, 0.24), rgba(30, 68, 94, 0.3)),
    rgba(8, 11, 18, 0.92);
  color: #eaf7ff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.enhancement-arcana-skill-planner__card-lock {
  min-width: 120px;
  border-color: rgba(123, 210, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.2), rgba(14, 116, 144, 0.16)),
    rgba(8, 11, 18, 0.9);
  color: rgba(232, 249, 255, 0.94);
}

.enhancement-arcana-skill-planner__card-lock.is-active {
  border-color: rgba(125, 211, 252, 0.42);
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0.06)),
    rgba(8, 11, 18, 0.82);
  color: #e0f7ff;
}

.enhancement-arcana-skill-planner__priority-preset {
  min-width: 148px;
  border-color: rgba(250, 204, 21, 0.34);
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.18), rgba(146, 64, 14, 0.12)),
    rgba(8, 11, 18, 0.88);
  color: rgba(255, 247, 214, 0.94);
}

.enhancement-arcana-skill-planner__reset {
  min-width: 120px;
  border-color: rgba(245, 158, 11, 0.26);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(120, 53, 15, 0.12)),
    rgba(8, 11, 18, 0.86);
  color: rgba(255, 237, 213, 0.9);
}

.enhancement-arcana-skill-planner__card-lock:disabled,
.enhancement-arcana-skill-planner__priority-preset:disabled,
.enhancement-arcana-skill-planner__reset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.enhancement-arcana-skill-planner__result {
  display: grid;
  gap: 12px;
}

.enhancement-arcana-skill-planner__result-head {
  min-width: 0;
}

.enhancement-arcana-skill-planner__result-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: rgba(228, 237, 255, 0.74);
  font-size: 0.76rem;
  line-height: 1.5;
}

.enhancement-arcana-skill-planner__result-note > span {
  flex: 1 1 auto;
  min-width: 0;
}

.enhancement-arcana-skill-planner__change-hint {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: rgba(224, 247, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.enhancement-arcana-skill-planner__constraint-note {
  flex: 0 1 auto;
  padding: 5px 9px;
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.18);
  color: rgba(254, 202, 202, 0.94);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.enhancement-arcana-skill-planner__card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.enhancement-arcana-skill-planner__set-effects {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.enhancement-arcana-skill-planner__set-effects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.enhancement-arcana-skill-planner__set-effects-head strong {
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
}

.enhancement-arcana-skill-planner__set-effects-head span {
  color: rgba(225, 236, 255, 0.6);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.enhancement-arcana-skill-planner__set-effect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.enhancement-arcana-skill-planner__set-effect-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__set-effect {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(10, 15, 25, 0.56);
}

.enhancement-arcana-skill-planner__set-effect strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.74rem;
  line-height: 1.35;
}

.enhancement-arcana-skill-planner__set-effect span {
  color: rgba(225, 236, 255, 0.72);
  font-size: 0.7rem;
  line-height: 1.45;
}

.enhancement-arcana-skill-planner__card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
}

.enhancement-arcana-skill-planner__card.is-fixed {
  border-color: rgba(125, 211, 252, 0.52);
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0.04)),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.08);
}

.enhancement-arcana-skill-planner__lock-dialog {
  width: min(94vw, 1120px);
}

.enhancement-arcana-skill-planner__lock-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(14, 165, 233, 0.08);
}

.enhancement-arcana-skill-planner__lock-summary strong {
  color: #e0f7ff;
  font-size: 0.82rem;
}

.enhancement-arcana-skill-planner__lock-summary span {
  color: rgba(228, 240, 255, 0.68);
  font-size: 0.74rem;
}

.enhancement-arcana-skill-planner__lock-grid {
  max-height: min(62vh, 680px);
  overflow: auto;
  padding-right: 4px;
}

.enhancement-arcana-skill-planner__lock-card {
  width: 100%;
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.enhancement-arcana-skill-planner__lock-card:hover:not(:disabled) {
  border-color: rgba(125, 211, 252, 0.3);
  transform: translateY(-1px);
}

.enhancement-arcana-skill-planner__lock-card:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.enhancement-arcana-skill-planner__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__card-head-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.enhancement-arcana-skill-planner__card-head-button:disabled {
  cursor: default;
}

.enhancement-arcana-skill-planner__card.is-changeable
  .enhancement-arcana-skill-planner__card-head-button {
  cursor: pointer;
}

.enhancement-arcana-skill-planner__card.is-changeable
  .enhancement-arcana-skill-planner__card-head-button:hover
  .enhancement-arcana-skill-planner__card-copy strong,
.enhancement-arcana-skill-planner__card.is-changeable
  .enhancement-arcana-skill-planner__card-head-button:focus-visible
  .enhancement-arcana-skill-planner__card-copy strong {
  color: #bdeeff;
}

.enhancement-arcana-skill-planner__card-head-button:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.55);
  outline-offset: 4px;
  border-radius: 14px;
}

.enhancement-arcana-skill-planner__variant-menu {
  position: absolute;
  top: 86px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.enhancement-arcana-skill-planner__variant-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(232, 240, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.enhancement-arcana-skill-planner__variant-option:hover,
.enhancement-arcana-skill-planner__variant-option:focus-visible,
.enhancement-arcana-skill-planner__variant-option.is-active {
  border-color: rgba(125, 211, 252, 0.34);
  background: rgba(14, 165, 233, 0.13);
  color: #f4fbff;
  outline: none;
}

.enhancement-arcana-skill-planner__variant-thumb {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.enhancement-arcana-skill-planner__variant-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.enhancement-arcana-skill-planner__card-visual {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(6, 9, 16, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.enhancement-arcana-skill-planner__card-visual img,
.enhancement-arcana-skill-planner__card-skill-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.enhancement-arcana-skill-planner__card-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
}

.enhancement-arcana-skill-planner__card-level {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(4, 8, 15, 0.88);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
}

.enhancement-arcana-skill-planner__card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__card-copy strong {
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.4;
}

.enhancement-arcana-skill-planner__card-copy small {
  color: rgba(225, 236, 255, 0.62);
  font-size: 0.68rem;
  line-height: 1.45;
}

.enhancement-arcana-skill-planner__lock-badge {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 240, 255, 0.7);
  font-size: 0.66rem;
  font-weight: 800;
}

.enhancement-arcana-skill-planner__card.is-fixed
  .enhancement-arcana-skill-planner__lock-badge {
  border-color: rgba(125, 211, 252, 0.36);
  background: rgba(14, 165, 233, 0.14);
  color: #dff7ff;
}

.enhancement-arcana-skill-planner__card-skills {
  display: grid;
  gap: 8px;
}

.enhancement-arcana-skill-planner__card-skill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(10, 15, 25, 0.56);
}

.enhancement-arcana-skill-planner__card-skill.is-targeted {
  box-shadow: inset 0 0 0 1px rgba(115, 220, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(67, 158, 188, 0.2), rgba(14, 43, 54, 0.18)),
    rgba(10, 15, 25, 0.66);
}

.enhancement-arcana-skill-planner__card-skill.is-target-mismatch {
  box-shadow: inset 0 0 0 1px rgba(255, 114, 114, 0.36);
  background:
    linear-gradient(180deg, rgba(178, 58, 58, 0.28), rgba(63, 16, 19, 0.22)),
    rgba(20, 9, 12, 0.72);
}

.enhancement-arcana-skill-planner__card-skill.is-empty {
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(228, 240, 255, 0.5);
}

.enhancement-arcana-skill-planner__card-skill-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.enhancement-arcana-skill-planner__card-skill-copy span {
  color: #fff;
  font-size: 0.74rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.enhancement-arcana-skill-planner__card-skill strong {
  color: rgba(228, 240, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.enhancement-arcana-skill-planner__card-skill-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(6, 9, 16, 0.92);
}

.enhancement-arcana-skill-planner__card-skill-icon.is-empty {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1200px) {
  .arcana-catalog-summary__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .arcana-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enhancement-arcana-skill-planner__card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .arcana-catalog-target__header {
    display: grid;
  }

  .enhancement-stage--arcana-synthesis .enhancement-exclusion-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .arcana-catalog-target__level {
    min-width: 0;
  }

  .arcana-catalog-target__level span {
    text-align: left;
  }

  .arcana-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-arcana-skill-planner__head {
    align-items: start;
  }

  .enhancement-arcana-skill-planner__callout {
    display: grid;
    justify-items: start;
  }

  .enhancement-stage--arcana-synthesis .enhancement-showcase__visual--card {
    --arcana-synthesis-image-width: min(43vw, 166px);
    --arcana-synthesis-image-height: min(60vw, 232px);
  }

  .enhancement-arcana-synthesis__equipment-arc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    height: auto;
    margin: 8px auto 16px;
  }

  .enhancement-arcana-synthesis__equipment-arc::before {
    display: none;
  }

  .enhancement-arcana-synthesis__equipment-node,
  .enhancement-arcana-synthesis__equipment-node:nth-child(n) {
    position: static;
    justify-self: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    transform: none;
  }

  .enhancement-arcana-synthesis__equipment-node:hover,
  .enhancement-arcana-synthesis__equipment-node.is-active,
  .enhancement-arcana-synthesis__equipment-node:disabled {
    transform: none;
  }

  .enhancement-arcana-synthesis__preset-panel {
    width: 100%;
    margin: 4px auto 14px;
  }

  .enhancement-arcana-synthesis__preset-head,
  .enhancement-arcana-synthesis__preset-row {
    grid-template-columns: minmax(48px, 0.56fr) minmax(104px, 1.18fr) minmax(86px, 1fr);
    gap: 6px;
  }

  .enhancement-arcana-synthesis__preset-head span {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }

  .enhancement-arcana-enhancement__preset-head,
  .enhancement-arcana-enhancement__preset-row {
    grid-template-columns: minmax(48px, 0.62fr) minmax(128px, 1.38fr);
  }

  .enhancement-arcana-synthesis__skill-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-arcana-skill-planner__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-arcana-skill-planner__card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-arcana-skill-planner__set-effect-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-arcana-enhancement__custom-summary,
  .enhancement-arcana-enhancement__custom-skill-grid,
  .enhancement-arcana-enhancement__custom-slots,
  .enhancement-arcana-enhancement__custom-slot {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .enhancement-shell-card--equipment-estimate {
    padding: 14px;
  }

  .enhancement-shell-card.combat-simulator-shared-estimate {
    margin: 2px;
    padding: 16px;
    border-radius: 20px;
  }

  .enhancement-estimate-strip__header {
    display: grid;
  }

  .enhancement-estimate-strip__actions {
    justify-content: flex-start;
  }

  .enhancement-estimate-strip__badge {
    justify-self: flex-start;
    max-width: 100%;
    white-space: normal;
  }

  .enhancement-estimate-strip__grid,
  .enhancement-estimate-strip__metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-estimate-strip__panel {
    padding: 14px;
    border-radius: 18px;
  }

  .enhancement-estimate-strip__metric {
    min-width: 0;
    padding: 10px 12px;
  }

  .enhancement-stat-dialog-backdrop {
    align-items: stretch;
    padding: 12px;
  }

  .enhancement-stat-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  .enhancement-stat-dialog__header {
    padding: 16px;
  }

  .enhancement-stat-dialog__body-grid {
    padding: 12px;
  }

  .enhancement-stat-dialog__card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-stat-dialog__source-panel {
    max-height: none;
  }

  .enhancement-stat-dialog__stat-card {
    padding: 13px;
  }

  .enhancement-subtabs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .enhancement-tabs,
  .enhancement-subtabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 0;
    overflow: visible;
    overscroll-behavior-x: auto;
    scroll-snap-type: none;
  }

  .enhancement-subtabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .enhancement-subtabs__notice {
    grid-column: 1 / -1;
    justify-content: center;
    justify-self: stretch;
    min-height: 0;
    text-align: center;
    white-space: normal;
  }

  .enhancement-gemstone-auto-dialog__tabs,
  .species-understanding-probability-tabs,
  .enhancement-equipment-job-filter--inline .enhancement-equipment-job-filter__chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 0;
    overflow: visible;
    overscroll-behavior-x: auto;
    scroll-snap-type: none;
  }

  .enhancement-gemstone-auto-dialog__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .enhancement-equipment-job-filter--inline .enhancement-equipment-job-filter__chips {
    padding: 3px 0 4px;
  }

  .enhancement-tab,
  .enhancement-subtabs > .enhancement-chip {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .enhancement-gemstone-auto-dialog__tab,
  .species-understanding-probability-tab,
  .enhancement-equipment-job-filter--inline .class-filter-chips__chip {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    flex: initial !important;
  }

  .enhancement-panel--arcana,
  .enhancement-panel--arcana-catalog,
  .enhancement-panel--arcana-synthesis,
  .enhancement-stage--arcana,
  .enhancement-stage--arcana-synthesis,
  .enhancement-panel--arcana .enhancement-stage__center,
  .enhancement-panel--arcana-catalog .enhancement-stage__center,
  .enhancement-panel--arcana-synthesis .enhancement-stage__center {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .enhancement-panel--arcana-synthesis .enhancement-showcase {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding-inline: 12px;
  }

  .enhancement-arcana-synthesis__button-row,
  .enhancement-arcana-enhancement__button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
  }

  .enhancement-arcana-synthesis__roll-button,
  .enhancement-arcana-synthesis__side-button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    white-space: normal;
    word-break: keep-all;
  }

  .enhancement-arcana-synthesis__variant-chip,
  .enhancement-arcana-synthesis__grade-chip,
  .enhancement-arcana-synthesis__main-effect-line,
  .enhancement-arcana-synthesis__additional-button,
  .enhancement-arcana-synthesis__additional-disabled {
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
  }

  .enhancement-arcana-synthesis__preset-panel,
  .enhancement-arcana-synthesis__cost-panel {
    width: 100%;
    max-width: 100%;
  }

  .enhancement-arcana-synthesis__preset-head,
  .enhancement-arcana-synthesis__preset-row {
    grid-template-columns: minmax(42px, 0.5fr) minmax(0, 1.12fr) minmax(0, 1fr);
  }

  .enhancement-arcana-enhancement__preset-head,
  .enhancement-arcana-enhancement__preset-row {
    grid-template-columns: minmax(42px, 0.55fr) minmax(0, 1fr);
  }

  .enhancement-arcana-synthesis__skill-picker,
  .enhancement-arcana-synthesis__auto-skill-grid,
  .enhancement-arcana-enhancement__custom-summary,
  .enhancement-arcana-enhancement__custom-skill-grid,
  .enhancement-arcana-enhancement__custom-slots,
  .enhancement-arcana-enhancement__custom-slot,
  .enhancement-arcana-synthesis__cost-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .enhancement-arcana-synthesis__auto-backdrop {
    box-sizing: border-box;
    padding: 10px;
  }

  .enhancement-arcana-synthesis__auto-dialog,
  .enhancement-arcana-synthesis__skill-picker-dialog,
  .enhancement-arcana-enhancement__custom-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    padding: 14px;
    border-radius: 18px;
  }

  .enhancement-arcana-synthesis__auto-header,
  .enhancement-arcana-synthesis__auto-actions,
  .enhancement-arcana-synthesis__auto-options,
  .enhancement-arcana-synthesis__auto-selected {
    align-items: stretch;
    flex-direction: column;
  }

  .enhancement-arcana-skill-planner .character-detail__skill-grid,
  .enhancement-arcana-skill-planner .character-detail__skill-grid.is-active-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .enhancement-arcana-skill-planner__chip {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    justify-items: stretch;
    overflow: visible;
    padding: 12px;
  }

  .enhancement-arcana-skill-planner__chip-layout {
    grid-template-columns: minmax(42px, 48px) minmax(0, 1fr);
    column-gap: 10px;
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
  }

  .enhancement-arcana-skill-planner__chip .character-detail__skill-media {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
  }

  .enhancement-arcana-skill-planner__title,
  .enhancement-arcana-skill-planner__target-stepper,
  .enhancement-arcana-skill-planner__target-max {
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }

  .enhancement-arcana-skill-planner__title .character-detail__skill-name,
  .enhancement-arcana-skill-planner__target-max,
  .enhancement-arcana-skill-planner__current-level {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .enhancement-arcana-skill-planner__target-stepper {
    grid-template-columns: minmax(24px, 1fr) minmax(34px, 42px) minmax(24px, 1fr);
    gap: 5px;
    width: 100%;
  }

  .enhancement-arcana-skill-planner__target-stepper button,
  .enhancement-arcana-skill-planner__target-stepper input {
    width: 100%;
  }

  .arcana-catalog-target__header,
  .arcana-catalog-target__slot-head,
  .enhancement-arcana-skill-planner__head,
  .enhancement-arcana-skill-planner__card-head,
  .enhancement-arcana-skill-planner__card-skill {
    align-items: stretch;
    flex-direction: column;
  }

  .enhancement-arcana-skill-planner__target-total {
    white-space: normal;
  }
}

@media (max-width: 359px) {
  .enhancement-tab,
  .enhancement-subtabs > .enhancement-chip {
    max-width: 100%;
  }

  .enhancement-gemstone-auto-dialog__tab,
  .species-understanding-probability-tab,
  .enhancement-equipment-job-filter--inline .class-filter-chips__chip {
    max-width: 100%;
  }
}

.box-opening-panel {
  --scene-accent: 237 208 106;
  --scene-secondary: 85 231 255;
  --scene-hot: 122 206 122;
  --enhancement-reference-grid-gap: clamp(5px, 0.55vw, 7px);
  --enhancement-reference-slot-size: clamp(46px, 3.9vw, 62px);
  --enhancement-reference-icon-size: clamp(26px, 2.45vw, 34px);
  --box-opening-inventory-slot-size: clamp(34px, 2.9vw, 48px);
  --box-opening-inventory-icon-size: clamp(20px, 1.8vw, 27px);
  --box-opening-inventory-item-icon-size: clamp(28px, 2.45vw, 39px);
  --box-opening-inventory-grid-gap: clamp(3px, 0.38vw, 5px);
}

.box-opening-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(340px, 1.08fr) max-content;
  gap: clamp(14px, 1.3vw, 20px);
  align-items: start;
}

.box-opening-selector,
.box-opening-boxes {
  display: grid;
  gap: clamp(14px, 1.25vw, 18px);
  align-content: start;
  width: 100%;
}

.box-opening-selected-box {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(43, 38, 24, 0.72), rgba(10, 13, 18, 0.82)),
    rgba(10, 13, 18, 0.82);
}

.box-opening-selected-box__visual {
  display: grid;
  place-items: center;
  width: min(180px, 72%);
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  border: 1px solid rgba(237, 208, 106, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 236, 170, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(12, 15, 21, 0.86);
}

.box-opening-selected-box__visual img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.36));
}

.box-opening-selected-box strong {
  color: var(--text-primary);
  font-size: clamp(1.05rem, 0.98rem + 0.22vw, 1.2rem);
  line-height: 1.25;
  text-align: center;
}

.box-opening-open-count {
  display: grid;
  grid-template-columns: 42px minmax(70px, 86px) 42px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(8, 11, 18, 0.72);
}

.box-opening-open-count__button,
.box-opening-open-count__input {
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
}

.box-opening-open-count__button {
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: rgba(255, 231, 151, 0.92);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.box-opening-open-count__button:disabled,
.box-opening-open-count__input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.box-opening-open-count__button:not(:disabled):hover {
  border-color: rgba(255, 229, 134, 0.42);
  background: rgba(255, 216, 104, 0.1);
}

.box-opening-open-count__input {
  width: 100%;
  padding: 0 10px;
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 900;
  text-align: center;
}

.box-opening-open-count__input:focus {
  border-color: rgba(255, 229, 134, 0.54);
  outline: 2px solid rgba(255, 229, 134, 0.22);
  outline-offset: 2px;
}

.box-opening-box-list {
  display: grid;
  gap: 10px;
}

.box-opening-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px;
}

.box-opening-actions .button {
  min-width: 0;
  min-height: 46px;
  padding-inline: 12px;
}

.box-opening-actions .button.box-opening-primary-action {
  background: linear-gradient(180deg, rgba(255, 219, 112, 0.98), rgba(194, 134, 34, 0.98));
  color: #16110a;
}

.box-opening-target {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.box-opening-target__trigger {
  flex: 1 1 160px;
  min-height: 42px;
  border-radius: 12px;
}

.box-opening-target__selected {
  min-width: 0;
  flex: 999 1 180px;
  overflow: hidden;
  color: rgba(255, 244, 182, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-limit-notice {
  margin: -2px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 189, 89, 0.2);
  border-radius: 12px;
  background: rgba(255, 176, 58, 0.08);
  color: rgba(255, 230, 178, 0.9);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.box-opening-last-rewards {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
      rgba(8, 11, 18, 0.74);
}

.box-opening-last-rewards__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.box-opening-last-rewards__head strong {
  color: var(--text-primary);
  font-size: 0.86rem;
}

.box-opening-last-rewards__head span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 235, 171, 0.74);
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-last-rewards__list {
  display: grid;
  gap: 6px;
}

.box-opening-last-rewards__list span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-box-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.box-opening-box-card:hover,
.box-opening-box-card.is-selected {
  transform: translateY(-1px);
  border-color: rgba(var(--scene-accent) / 0.46);
  background:
    linear-gradient(180deg, rgba(var(--scene-accent) / 0.1), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
}

.box-opening-box-card:focus-visible {
  outline: 2px solid rgba(var(--scene-secondary) / 0.68);
  outline-offset: 2px;
}

.box-opening-box-card__thumb {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(9, 13, 20, 0.72);
}

.box-opening-box-card__thumb img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.box-opening-box-card.is-unique .box-opening-box-card__copy strong {
  color: var(--item-grade-unique-text);
}

.box-opening-box-card.is-epic .box-opening-box-card__copy strong {
  color: var(--item-grade-epic-text);
}

.box-opening-box-card__thumb.is-unique,
.box-opening-selected-box__visual.is-unique {
  --box-opening-cube-fill:
    linear-gradient(135deg, rgba(255, 255, 230, 0.95) 0%, rgba(255, 225, 96, 0.92) 38%, rgba(193, 125, 0, 0.96) 100%);
  --box-opening-cube-border: rgba(255, 233, 121, 0.78);
  --box-opening-cube-front-tint: rgba(255, 245, 171, 0.2);
  --box-opening-cube-top-tint: rgba(255, 255, 220, 0.42);
  --box-opening-cube-side-tint: rgba(131, 78, 0, 0.38);
  --box-opening-cube-bottom-tint: rgba(84, 48, 0, 0.48);
}

.box-opening-box-card__thumb.is-epic,
.box-opening-selected-box__visual.is-epic {
  --box-opening-cube-fill:
    linear-gradient(135deg, rgba(255, 229, 174, 0.92) 0%, rgba(255, 115, 32, 0.92) 42%, rgba(118, 26, 12, 0.96) 100%);
  --box-opening-cube-border: rgba(255, 130, 50, 0.72);
  --box-opening-cube-front-tint: rgba(255, 177, 82, 0.2);
  --box-opening-cube-top-tint: rgba(255, 206, 122, 0.35);
  --box-opening-cube-side-tint: rgba(88, 14, 7, 0.42);
  --box-opening-cube-bottom-tint: rgba(54, 8, 4, 0.52);
}

.box-opening-box-card__thumb.is-unique,
.box-opening-box-card__thumb.is-epic,
.box-opening-selected-box__visual.is-unique,
.box-opening-selected-box__visual.is-epic {
  border-color: var(--box-opening-cube-border);
  background: rgba(9, 13, 20, 0.82);
  box-shadow: none;
}

.box-opening-box-card__thumb.is-image.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
  box-shadow: none;
}

.box-opening-selected-box__visual.is-image.is-unique {
  border-color: var(--item-grade-unique-border);
  background: var(--item-grade-unique-gradient);
  box-shadow: none;
}

.box-opening-box-card__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.box-opening-box-card__copy strong,
.box-opening-box-card__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-box-card__copy strong {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.2;
}

.box-opening-box-card__copy small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  line-height: 1.25;
}

.box-opening-inventory {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  justify-self: start;
  gap: clamp(10px, 0.9vw, 14px);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.box-opening-inventory__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-inline: 2px;
}

.box-opening-inventory__heading {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.box-opening-inventory__heading span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.box-opening-inventory__reset {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.74rem;
  line-height: 1;
  white-space: nowrap;
}

.box-opening-inventory__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.box-opening-extraction {
  position: relative;
  display: inline-flex;
}

.box-opening-extraction__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 8px;
  width: 210px;
  padding: 10px;
  border: 1px solid rgba(255, 229, 134, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(34, 39, 52, 0.98), rgba(14, 18, 27, 0.98)),
    rgba(14, 18, 27, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}

.box-opening-extraction__grades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.box-opening-extraction__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
}

.box-opening-extraction__option input {
  accent-color: rgb(237, 194, 81);
}

.box-opening-extraction__option.is-all {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 244, 182, 0.95);
}

.box-opening-extraction__option.is-common span {
  color: var(--item-grade-common-text);
}

.box-opening-extraction__option.is-rare span {
  color: var(--item-grade-rare-text);
}

.box-opening-extraction__option.is-legend span {
  color: var(--item-grade-legend-text);
}

.box-opening-extraction__option.is-unique span {
  color: var(--item-grade-unique-text);
}

.box-opening-extraction__option.is-epic span {
  color: var(--item-grade-epic-text);
}

.box-opening-extraction__submit {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.74rem;
  line-height: 1;
}

.box-opening-extraction__panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
}

.box-opening-inventory__selected-item {
  min-width: 0;
  max-width: clamp(120px, 13vw, 220px);
  overflow: hidden;
  color: rgba(255, 244, 182, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(214, 179, 82, 0.2);
  white-space: nowrap;
}

.box-opening-inventory__grid {
  grid-template-columns: repeat(10, var(--box-opening-inventory-slot-size));
  grid-auto-rows: var(--box-opening-inventory-slot-size);
  column-gap: var(--box-opening-inventory-grid-gap);
  row-gap: clamp(6px, 0.55vw, 8px);
  justify-content: start;
  align-content: start;
  max-height: none;
  min-height: 0;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  padding: 2px;
}

.box-opening-inventory__slot {
  width: var(--box-opening-inventory-slot-size);
  height: var(--box-opening-inventory-slot-size);
  aspect-ratio: 1 / 1;
  align-content: center;
  min-height: 0;
  padding: clamp(4px, 0.42vw, 6px);
  border-radius: clamp(8px, 0.75vw, 11px);
}

.box-opening-inventory__slot.is-filled {
  cursor: pointer;
}

.box-opening-inventory__slot.is-filled.item-grade-tone {
  border-color: var(--item-grade-tone-border);
  background: var(--item-grade-tone-gradient);
}

.box-opening-inventory__slot.is-selected {
  outline: 2px solid rgba(255, 232, 122, 0.74);
  outline-offset: 1px;
}

.box-opening-inventory__slot .enhancement-reference-equipment__slot-visual {
  min-height: calc(var(--box-opening-inventory-item-icon-size) + 2px);
}

.box-opening-inventory__slot .enhancement-reference-equipment__empty-mark {
  width: var(--box-opening-inventory-icon-size);
  height: var(--box-opening-inventory-icon-size);
}

.box-opening-inventory__slot .enhancement-reference-equipment__icon {
  width: var(--box-opening-inventory-item-icon-size);
  height: var(--box-opening-inventory-item-icon-size);
}

.box-opening-inventory__slot .enhancement-reference-equipment__slot-badge {
  max-width: calc(100% - 8px);
  overflow: hidden;
  padding-inline: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-inventory__resize {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  font-size: 0.82rem;
}

.box-opening-target-dialog {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  background: rgba(2, 6, 12, 0.68);
}

.box-opening-target-dialog__panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  width: min(720px, 100%);
  max-height: min(720px, 88vh);
  padding: clamp(16px, 2vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(18, 22, 31, 0.98), rgba(7, 10, 16, 0.98)),
    rgba(8, 11, 18, 0.96);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}

.box-opening-target-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.box-opening-target-dialog__header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.box-opening-target-dialog__header strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.box-opening-target-dialog__header span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-target-dialog__close {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.box-opening-target-dialog__search {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
}

.box-opening-target-dialog__search:focus {
  border-color: rgba(255, 229, 134, 0.48);
  outline: 2px solid rgba(255, 229, 134, 0.2);
  outline-offset: 2px;
}

.box-opening-target-dialog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  gap: 9px;
  min-height: 0;
  max-height: min(520px, calc(88vh - 148px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}

.box-opening-target-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.box-opening-target-option:hover {
  border-color: rgba(255, 229, 134, 0.34);
  background: rgba(255, 219, 118, 0.08);
}

.box-opening-target-option__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(5, 7, 12, 0.62);
}

.box-opening-target-option__icon.item-grade-tone {
  border: 0;
  background-color: var(--item-grade-tone-end);
  background-image: var(--item-grade-tone-gradient);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: none;
}

.box-opening-target-option__image {
  position: relative;
  z-index: 1;
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.box-opening-target-option__icon span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.68rem;
  font-weight: 800;
}

.box-opening-target-option__name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-opening-target-dialog__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 1180px) {
  .box-opening-workbench {
    grid-template-columns: minmax(240px, 0.92fr) minmax(320px, 1.08fr);
  }

  .box-opening-panel {
    --box-opening-inventory-slot-size: clamp(33px, 3.8vw, 44px);
    --box-opening-inventory-icon-size: clamp(19px, 2.25vw, 25px);
    --box-opening-inventory-item-icon-size: clamp(27px, 3.35vw, 36px);
  }

  .box-opening-inventory {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .box-opening-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .box-opening-selected-box {
    grid-template-columns: 126px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
  }

  .box-opening-selected-box__visual {
    width: 126px;
    border-radius: 18px;
  }

  .box-opening-selected-box strong {
    text-align: left;
  }

}

@media (max-width: 520px) {
  .box-opening-selected-box {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .box-opening-selected-box__visual {
    width: 104px;
  }

  .box-opening-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .box-opening-target-dialog__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .box-opening-inventory__reset {
    width: 100%;
  }

  .box-opening-box-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .box-opening-box-card__thumb {
    width: 48px;
    height: 48px;
  }

  .box-opening-panel {
    --box-opening-inventory-slot-size: clamp(26px, calc((100vw - 76px) / 10), 32px);
    --box-opening-inventory-icon-size: clamp(16px, calc((100vw - 76px) / 16), 20px);
    --box-opening-inventory-item-icon-size: clamp(21px, calc((100vw - 76px) / 12.25), 26px);
    --box-opening-inventory-grid-gap: 3px;
  }

  .box-opening-inventory__grid {
    grid-template-columns: repeat(10, var(--box-opening-inventory-slot-size));
    grid-auto-rows: var(--box-opening-inventory-slot-size);
  }

  .box-opening-inventory__slot {
    width: var(--box-opening-inventory-slot-size);
    height: var(--box-opening-inventory-slot-size);
  }
}