/*
 * Full-site visual integration layer.
 *
 * The calculator logic and its DOM remain in the original application.  This
 * file only gives that DOM the approved porcelain workbench geometry and
 * keeps the centre column independently scrollable.  It is deliberately
 * loaded after styles.css because the legacy stylesheet contains historical
 * responsive overrides with !important declarations.
 */

:root {
  color-scheme: light !important;
  --ui-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --ink: #554839;
  --ink-soft: #806b54;
  --ink-faint: #9b866c;
  --warm-line: rgba(151, 136, 117, .24);
}

html,
body {
  width: 100% !important;
  min-width: 320px !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #e5e7e8 url("assets/porcelain-mineral-background-v1.webp") center / cover no-repeat !important;
  color: var(--ink) !important;
  font-family: var(--ui-font) !important;
}

body {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

button,
input,
select,
output {
  font-family: var(--ui-font) !important;
}

.tool-header {
  position: absolute !important;
  z-index: 30 !important;
  top: 16px !important;
  right: 16px !important;
  left: 16px !important;
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--warm-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: 0 1px rgba(255, 255, 255, .82) !important;
  backdrop-filter: none !important;
}

.tool-title { align-items: center !important; gap: 7px !important; }
.tool-title .site-logo {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .tool-title { gap: 5px !important; }
  .tool-title .site-logo { flex-basis: 30px; width: 30px; height: 30px; }
}
.tool-title h1 {
  color: #5a4937 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}
.tool-title span { color: #9b866c !important; font-size: 10px !important; }
.tool-header nav { gap: 6px !important; }
.tool-header nav button {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(145, 116, 79, .28) !important;
  border-radius: 3px !important;
  background: rgba(255, 252, 244, .3) !important;
  color: #806b54 !important;
  font-size: 10px !important;
}

.workspace {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Fixed side rails and the independent centre viewport. */
.hero-panel {
  position: absolute !important;
  z-index: 5 !important;
  top: 64px !important;
  left: 16px !important;
  width: 112px !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  padding: 14px 9px 15px !important;
  overflow: hidden !important;
  background: url("assets/porcelain-hero-rail-direct-ground-v4-clean-edge.webp") center / 100% 100% no-repeat !important;
}

.hero-list-heading { margin-top: 0 !important; }
.hero-list-heading h3 { color: #352c25 !important; font-size: 13px !important; line-height: 16px !important; }
.hero-list-heading span { color: #987856 !important; font-size: 10px !important; }
.hero-panel .hero-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: calc(100vh - 150px) !important;
  margin-top: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(145, 113, 77, .42) transparent !important;
}
.hero-option {
  display: flex !important;
  width: 94px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 3px 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #806b54 !important;
  text-align: left !important;
}
.hero-option:hover { background: rgba(150, 126, 96, .06) !important; color: #493d2e !important; }
.hero-option.selected { background: rgba(150, 126, 96, .075) !important; color: #493d2e !important; }
.hero-option img {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border: 1px solid rgba(164, 125, 79, .42) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.hero-option.selected img { box-shadow: 0 0 0 2px rgba(159, 119, 67, .33) !important; }
.hero-option span { width: 44px !important; font-size: 11px !important; line-height: 15px !important; text-align: left !important; }

.build-panel {
  position: absolute !important;
  z-index: 4 !important;
  top: 64px !important;
  left: 136px !important;
  width: min(824px, calc(100vw - 616px)) !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(145, 113, 77, .62) rgba(255, 255, 255, .18) !important;
  background: transparent !important;
  overscroll-behavior: contain !important;
}
.build-panel::-webkit-scrollbar { width: 7px !important; }
.build-panel::-webkit-scrollbar-track { background: rgba(255, 255, 255, .16) !important; }
.build-panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(145, 113, 77, .62) !important;
  background-clip: padding-box !important;
}
.build-column,
.build-column-loadout {
  position: relative !important;
  display: block !important;
  width: min(800px, calc(100% - 24px)) !important;
  height: 1408px !important;
  min-height: 1408px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* All central modules are positioned on their original approved sheets. */
.build-column > .loadout-block,
.build-column > .skill-rank-panel,
.build-column > .target-block {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.build-column > .hero-context-block {
  top: 0 !important;
  height: 128px !important;
  padding: 12px 18px !important;
  background: url("assets/porcelain-hero-context-no-tabs.webp") center / 100% 100% no-repeat !important;
}
.build-column > .equipment-block {
  top: 144px !important;
  height: 520px !important;
  padding: 0 !important;
  background: url("assets/porcelain-build-panel-direct-ground-v6-continuous-clean.webp") center / 100% 100% no-repeat !important;
}
.build-column > .rune-block {
  top: 144px !important;
  height: 520px !important;
  padding: 0 !important;
  z-index: 7 !important;
  pointer-events: none !important;
}
.build-column > .build-skill-rank {
  top: 144px !important;
  height: 520px !important;
  padding: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}
.build-column > .result-stats {
  top: 680px !important;
  height: 200px !important;
  padding: 13px 18px 12px !important;
  background: url("assets/porcelain-result-panel-direct-ground-v6-top-panel-no-seams.webp") center / 100% 100% no-repeat !important;
}
.build-column > .combat-block {
  top: 896px !important;
  height: 280px !important;
  padding: 18px 74px !important;
  background: url("assets/combat-state-baseplate.webp") center / 100% 100% no-repeat !important;
}
.build-column > .target-block {
  top: 1192px !important;
  height: 200px !important;
  padding: 20px 28px !important;
  background: url("assets/porcelain-result-panel-direct-ground-v6-top-panel-no-seams.webp") center / 100% 100% no-repeat !important;
}

/* Hero context: the existing controls remain real inputs/buttons. */
.hero-context-block .selected-hero {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  height: 68px !important;
  min-height: 68px !important;
}
.hero-context-block .selected-hero img {
  width: 68px !important;
  height: 68px !important;
  border: 1px solid rgba(164, 125, 79, .62) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(75, 62, 48, .18), inset 0 0 0 2px rgba(255, 255, 255, .56) !important;
}
.hero-context-block .selected-hero h2 { color: #493d2e !important; font-size: 20px !important; font-weight: 600 !important; letter-spacing: .05em !important; }
.hero-context-block .selected-hero p { color: #806b54 !important; font-size: 11px !important; }
.hero-context-block .selected-hero button,
.build-column > .equipment-block header button,
.build-column > .rune-block header button {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(131, 105, 78, .34) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #806b54 !important;
  font-size: 10px !important;
}
.hero-context-block .level-row {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: calc(100% - 240px) !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.hero-context-block .level-row label { color: #806b54 !important; font-size: 11px !important; }
.hero-context-block .level-row label output { color: #493d2e !important; font-size: 15px !important; }
.hero-context-block .level-row input[type="range"] { width: 100% !important; height: 14px !important; margin: 4px 0 0 !important; accent-color: #9d7a43 !important; }
.hero-context-block .hero-boost-row {
  position: absolute !important;
  right: 18px !important;
  bottom: 12px !important;
  left: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  height: 27px !important;
  padding: 0 !important;
  border: 0 !important;
}
.hero-context-block .boost-caption strong,
.hero-context-block .boost-control > span { color: #806b54 !important; font-size: 10px !important; }
.hero-context-block .boost-controls-row { gap: 14px !important; }
.hero-context-block .boost-control { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.hero-context-block .boost-select-fit { width: 68px !important; }
.hero-context-block .boost-aura-pair .boost-select-fit:first-child { width: 62px !important; }
.hero-context-block .boost-aura-pair .boost-select-fit:last-child { width: 56px !important; }
.hero-context-block .boost-current {
  height: 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(131, 105, 78, .35) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5a4630 !important;
  font-size: 11px !important;
}

/* Equipment cards retain the approved wave, icons and glass hover treatment. */
.equipment-block > header {
  position: absolute !important;
  z-index: 10 !important;
  top: 10px !important;
  right: 22px !important;
  left: 22px !important;
  display: flex !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.equipment-block > header > div { display: flex !important; align-items: baseline !important; gap: 7px !important; }
.equipment-block > header h2 { color: #6e5a45 !important; font-size: 12px !important; font-weight: 600 !important; }
.equipment-block > header span { color: #987856 !important; font-size: 10px !important; }
.equipment-block .equipped-row {
  position: absolute !important;
  top: 28px !important;
  right: 20px !important;
  left: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 4px !important;
  height: 224px !important;
  margin: 0 !important;
}
.equipment-slot {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.equipment-main {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 18px 104px 23px 18px !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  height: 166px !important;
  min-height: 0 !important;
  padding: 12px 5px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #514536 !important;
}
.equipment-main > span { position: relative !important; z-index: 4 !important; color: #72604c !important; font: 11px/16px Georgia, serif !important; }
.equipment-main img { position: relative !important; z-index: 2 !important; width: 82px !important; height: 82px !important; border: 0 !important; border-radius: 50% !important; object-fit: contain !important; filter: drop-shadow(0 3px 3px rgba(77,61,40,.26)) !important; }
.equipment-main b { position: relative !important; z-index: 2 !important; display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; width: 100% !important; overflow: hidden !important; color: #493d2e !important; font-size: 12px !important; font-weight: 650 !important; line-height: 20px !important; white-space: nowrap !important; }
.equipment-main b em { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-style: normal !important; }
.equipment-main b small { flex: 0 0 auto !important; color: #987856 !important; font: 11px/16px Georgia, serif !important; }
.equipment-remove {
  position: absolute !important;
  z-index: 12 !important;
  top: 5px !important;
  right: 2px !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 252, 244, .72) !important;
  color: #9c7953 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
.equipment-slot:hover .equipment-remove,
.equipment-remove:focus-visible { opacity: 1 !important; }
.equipment-slot > .item-passive-toggle,
.equipment-slot > .item-passive-auto,
.equipment-slot > .item-proc-control {
  position: absolute !important;
  z-index: 11 !important;
  right: 2px !important;
  bottom: 0 !important;
  left: 2px !important;
  display: flex !important;
  width: auto !important;
  min-height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: rgba(255, 252, 244, .7) !important;
  color: #806b54 !important;
  font-size: 9px !important;
  opacity: .72 !important;
}
.equipment-slot:hover > .item-passive-toggle,
.equipment-slot > .item-passive-toggle:focus-visible,
.equipment-slot:hover > .item-passive-auto,
.equipment-slot:hover > .item-proc-control { opacity: 1 !important; }
.item-passive-toggle.active { background: rgba(224, 184, 139, .28) !important; color: #6f512d !important; }

/* Runes and skill ranks are transparent content layers over the build sheet. */
.rune-block > header { position: absolute !important; top: 248px !important; right: 26px !important; display: flex !important; height: 24px !important; border: 0 !important; }
.rune-block > header h2 { color: #6e5a45 !important; font-size: 12px !important; }
.rune-block > header button { pointer-events: auto !important; }
.rune-summary {
  position: absolute !important;
  top: 252px !important;
  right: 26px !important;
  left: 26px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  height: 184px !important;
  margin: 0 !important;
}
.rune-summary .stat-summary { position: absolute !important; top: 82px !important; left: 0 !important; width: 38% !important; color: #806b54 !important; font-size: 10px !important; line-height: 15px !important; }
.rune-summary-row { display: flex !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.rune-summary-row > span { display: inline-flex !important; align-items: center !important; gap: 5px !important; width: 34px !important; color: #6e5a45 !important; font-size: 11px !important; }
.rune-summary-row > span i { width: 7px !important; height: 7px !important; border: 1px solid rgba(116,92,67,.28) !important; border-radius: 50% !important; }
.rune-summary-row.rune-red > span i { background: #b77d73 !important; }
.rune-summary-row.rune-blue > span i { background: #7897a7 !important; }
.rune-summary-row.rune-green > span i { background: #8d9c6b !important; }
.rune-picks { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-content: flex-start !important; }
.rune-picks > span { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.rune-picks img { width: 18px !important; height: 18px !important; object-fit: contain !important; }
.rune-picks b { color: #584735 !important; font-size: 11px !important; font-weight: 600 !important; }
.build-skill-rank .stats-heading { display: none !important; }
.build-skill-rank #skillRankControls {
  position: absolute !important;
  top: 450px !important;
  right: 26px !important;
  left: 26px !important;
  display: flex !important;
  height: 70px !important;
  align-items: center !important;
  justify-content: space-around !important;
  pointer-events: auto !important;
}
.skill-rank-row { display: flex !important; align-items: center !important; gap: 4px !important; border: 0 !important; background: transparent !important; color: #675541 !important; font-size: 11px !important; }
.skill-rank-row strong { font-weight: 600 !important; }
.skill-rank-row button,
.skill-rank-row output { display: grid !important; width: 24px !important; height: 24px !important; place-items: center !important; border: 1px solid rgba(133,108,77,.32) !important; border-radius: 3px !important; background: rgba(255,255,255,.36) !important; color: #816b50 !important; }
.skill-rank-row small { color: #aa967d !important; font-size: 9px !important; }

/* Total attributes use the lower result sheet and keep all original fields. */
.result-stats > header { display: flex !important; height: 27px !important; margin: 0 !important; padding: 0 2px 8px !important; border: 0 !important; }
.result-stats > header h2 { color: #5a4937 !important; font-size: 14px !important; letter-spacing: .04em !important; }
.result-stats > header span { color: #85735e !important; font-size: 10px !important; }
.result-stats .compact-stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 44px !important;
  gap: 0 !important;
  height: 158px !important;
  margin: 7px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.result-stats .compact-stats > div { display: grid !important; min-width: 0 !important; min-height: 44px !important; align-content: center !important; justify-items: center !important; padding: 3px 5px !important; border-right: 1px solid rgba(145, 116, 79, .15) !important; border-bottom: 1px solid rgba(145, 116, 79, .12) !important; background: transparent !important; }
.result-stats .compact-stats > div:nth-child(5n) { border-right: 0 !important; }
.result-stats .compact-stats dt { color: #806b54 !important; font-size: 10px !important; }
.result-stats .compact-stats dd { color: #352c25 !important; font-size: 16px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums !important; }

/* Battle status and target configuration keep their original input semantics. */
.combat-block > header { display: flex !important; min-height: 28px !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; }
.combat-block > header h2 { color: #554839 !important; font-size: 14px !important; letter-spacing: 0 !important; }
.combat-block > header span { color: #85735e !important; font-size: 10px !important; }
.combat-state-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; margin: 0 !important; overflow: visible !important; }
.combat-state-toggle,
.combat-choice,
.combat-counter {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 54px !important;
  align-content: center !important;
  gap: 2px 14px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(255, 253, 248, .48) !important;
  color: #6c5944 !important;
  text-align: left !important;
}
.combat-state-toggle:hover,
.combat-choice:hover,
.combat-counter:hover { background: rgba(119, 101, 80, .06) !important; }
.combat-state-toggle.active,
.combat-choice.active,
.combat-counter.active { background: rgba(247, 225, 196, .38) !important; }
.combat-state-toggle i { display: none !important; }
.combat-state-toggle > span,
.combat-counter strong { color: #5b4935 !important; font-size: 12px !important; }
.combat-state-toggle > small,
.combat-counter p,
.combat-choice p { grid-column: 1 / -1 !important; color: #806b54 !important; font-size: 10px !important; }
.combat-state-toggle > b { color: #875f35 !important; font-size: 10px !important; font-weight: 600 !important; }
.choice-segments button,
.inline-counter button { border: 0 !important; border-radius: 4px !important; background: rgba(104,91,75,.06) !important; color: #806b54 !important; }
.target-block > header { display: flex !important; height: 27px !important; margin: 0 !important; padding: 0 2px 8px !important; border: 0 !important; }
.target-block > header h2 { color: #5a4937 !important; font-size: 14px !important; letter-spacing: .04em !important; }
.target-block > header span { color: #85735e !important; font-size: 10px !important; }
.target-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin-top: 14px !important; }
.target-grid label { display: grid !important; min-width: 0 !important; gap: 5px !important; }
.target-grid label > span { color: #806b54 !important; font-size: 11px !important; }
.target-grid input {
  width: 100% !important;
  height: 31px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  outline: 0 !important;
  background: rgba(106,94,78,.055) !important;
  color: #5a4630 !important;
  font-size: 13px !important;
  text-align: left !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
.target-grid input:focus { outline: 1px solid rgba(133,110,80,.45) !important; outline-offset: 2px !important; background: rgba(255,255,255,.45) !important; }
.target-grid input::-webkit-inner-spin-button,
.target-grid input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.target-grid .duration-control { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; gap: 18px !important; }
.duration-segments { display: grid !important; grid-template-columns: repeat(4, 76px) !important; gap: 8px !important; }
.duration-segments button { height: 28px !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: #7c7060 !important; font-size: 11px !important; }
.duration-segments button:hover { background: rgba(106,94,78,.055) !important; }
.duration-segments button.active { background: rgba(155,125,87,.13) !important; color: #574734 !important; font-weight: 600 !important; }

/* Result rail: one coherent 460px sheet per section. */
.result-panel {
  position: absolute !important;
  z-index: 6 !important;
  top: 64px !important;
  right: 16px !important;
  left: auto !important;
  width: min(460px, calc(100vw - 964px)) !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
}
.output-summary,
.result-panel > .skill-block,
.result-panel > .right-calculation-details {
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/porcelain-result-panel-direct-ground-v6-top-panel-no-seams.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.output-summary { top: 0 !important; height: 340px !important; padding: 20px 18px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 34px 78px 112px 70px !important; }
.output-summary .result-header { grid-column: 1 / -1 !important; display: flex !important; min-height: 0 !important; height: 34px !important; padding: 0 0 8px !important; border: 0 !important; }
.result-header h2 { color: #5a4937 !important; font-size: 15px !important; }
.result-header span { color: #85735e !important; font-size: 10px !important; }
.summary-identity { grid-column: 1 !important; grid-row: 2 !important; display: flex !important; align-items: center !important; gap: 9px !important; min-width: 0 !important; padding: 0 10px 0 0 !important; border: 0 !important; }
.summary-identity img { width: 48px !important; height: 48px !important; border: 1px solid rgba(164, 125, 79, .42) !important; border-radius: 50% !important; object-fit: cover !important; }
.summary-identity > div { display: grid !important; min-width: 0 !important; gap: 2px !important; }
.summary-identity span { color: #85735e !important; font-size: 10px !important; }
.summary-identity strong { color: #493d2e !important; font-size: 15px !important; font-weight: 650 !important; }
.summary-identity small { overflow: hidden !important; color: #9b866c !important; font-size: 9px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.output-summary > .dps-result { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; padding: 0 0 0 12px !important; border: 0 !important; }
.dps-result > span { color: #806b54 !important; font-size: 10px !important; }
.dps-result strong { color: #2b829e !important; font-size: 32px !important; line-height: 1 !important; }
.dps-result small { color: #9b866c !important; font-size: 9px !important; }
.output-summary > .damage-bars { grid-column: 1 / -1 !important; grid-row: 3 !important; display: grid !important; align-content: center !important; gap: 7px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; }
.damage-bars section { display: grid !important; gap: 6px !important; padding: 0 !important; border: 0 !important; }
.damage-bars section > header { display: flex !important; justify-content: space-between !important; color: #806b54 !important; font-size: 10px !important; }
.damage-bars section > div { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) 52px !important; align-items: center !important; gap: 7px !important; color: #806b54 !important; font-size: 9px !important; }
.damage-bars i { height: 7px !important; overflow: hidden !important; border: 1px solid rgba(145,116,79,.18) !important; border-radius: 4px !important; background: rgba(106,94,78,.07) !important; }
.damage-bars i b { display: block !important; height: 100% !important; border-radius: inherit !important; }
.damage-bars b.physical { background: #7d9eb0 !important; }
.damage-bars b.magic { background: #b28d9f !important; }
.damage-bars b.true { background: #b79967 !important; }
.damage-bars strong { color: #493d2e !important; font-size: 10px !important; text-align: right !important; }
.output-summary > .summary-total { grid-column: 1 !important; grid-row: 4 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; padding: 0 !important; border: 0 !important; }
.summary-total span,
.summary-total small { color: #806b54 !important; font-size: 10px !important; }
.summary-total strong { color: #b87332 !important; font-size: 23px !important; line-height: 1 !important; }
.output-summary > .result-metrics { grid-column: 2 !important; grid-row: 4 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.result-metrics > div { display: grid !important; align-content: center !important; min-width: 0 !important; padding: 0 5px !important; border: 0 !important; }
.result-metrics span { color: #806b54 !important; font-size: 9px !important; }
.result-metrics strong { color: #493d2e !important; font-size: 14px !important; }
.result-panel > .skill-block { top: 356px !important; height: 280px !important; padding: 18px !important; }
.skill-block > header { display: flex !important; min-height: 28px !important; margin: 0 0 8px !important; padding: 0 0 8px !important; border: 0 !important; }
.skill-block > header h2 { color: #5a4937 !important; font-size: 14px !important; }
.skill-block > header span { color: #85735e !important; font-size: 10px !important; }
.skill-state-list { display: grid !important; gap: 6px !important; }
.skill-state-row { min-height: 59px !important; padding: 7px 9px !important; border: 0 !important; background: rgba(255,253,248,.3) !important; }
.empty-skill-state { display: grid !important; min-height: 59px !important; place-items: center !important; margin: 0 !important; color: #85735e !important; font-size: 11px !important; }
.result-panel > .right-calculation-details { top: 652px !important; height: 228px !important; padding: 14px 18px !important; }
.right-calculation-details > header { display: flex !important; height: 28px !important; margin: 0 !important; padding: 0 0 8px !important; border: 0 !important; }
.right-calculation-details > header h3 { color: #5a4937 !important; font-size: 14px !important; }
.right-calculation-details > header span { color: #85735e !important; font-size: 10px !important; }
#calculationBreakdown { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: repeat(3, 48px) !important; gap: 0 !important; border: 0 !important; background: transparent !important; }
#calculationBreakdown article { min-height: 48px !important; padding: 7px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(145,116,79,.12) !important; background: transparent !important; }
#calculationBreakdown article > div { display: flex !important; justify-content: space-between !important; gap: 10px !important; background: transparent !important; }
#calculationBreakdown article strong { color: #6e5a45 !important; font-size: 11px !important; }
#calculationBreakdown article b { color: #493d2e !important; font-size: 11px !important; }
#calculationBreakdown article p { overflow: hidden !important; margin-top: 3px !important; color: #85735e !important; font-size: 9px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.result-panel .target-block,
.result-panel .model-warning { display: none !important; }

/* Keep the 1440px composition, while retaining a no-page-scroll compact mode
 * for the existing 1294×912 regression viewport. */
@media (max-width: 1000px) {
  html, body { overflow: auto !important; }
  .workspace { min-width: 1000px !important; width: 1000px !important; }
}

/* Total-stats board · pass 1 of 2: remove the visible table-grid heaviness
 * while keeping every live field and the approved five-column content fit. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .result-stats > header span {
    display: none !important;
  }
  html body .build-column-loadout > .result-stats .compact-stats > div {
    border-right-color: transparent !important;
    border-bottom-color: rgba(145, 116, 79, .08) !important;
  }
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(5n) {
    border-right: 0 !important;
  }
  html body .build-column-loadout > .result-stats .compact-stats dt {
    color: #806b54 !important;
    font-family: var(--font-ui) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
  }
  html body .build-column-loadout > .result-stats .compact-stats dd {
    color: #493d2e !important;
    font-family: var(--font-ui) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }
}

/* Results board alignment pass: the right plate is a result surface, so the
 * duplicated page title and hero identity stay out of this grid.  Hero
 * information remains available in the central hero plate; the result board
 * keeps only the live calculation hierarchy shown by the source sample. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    grid-template-rows: 116px 46px 146px !important;
    align-content: start !important;
  }

  html body .output-summary .result-header,
  html body .output-summary > .summary-identity {
    display: none !important;
  }

  html body .output-summary > .dps-result {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  html body .output-summary > .summary-total {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: auto !important;
  }

  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    height: auto !important;
    margin-top: 8px !important;
  }
}

/* Right result plate: keep the original live hierarchy intact.  The source
 * board uses the existing title/hero rail, then the DPS and damage rows, with
 * the window total and metrics in the lower band.  This is an inner-plate
 * correction only; the sheet, width, data and surrounding layout stay fixed. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    padding: 20px 18px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 34px 78px 112px 70px !important;
    align-content: start !important;
  }

  html body .output-summary .result-header {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: 34px !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: 0 0 8px !important;
  }

  html body .output-summary > .summary-identity {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
  }

  html body .output-summary > .summary-identity img {
    display: block !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  html body .output-summary > .summary-identity > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  html body .output-summary > .dps-result {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: right !important;
  }

  html body .output-summary > .dps-result > span,
  html body .output-summary > .dps-result strong,
  html body .output-summary > .dps-result small {
    align-self: flex-end !important;
  }

  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }

  html body .output-summary > .summary-total {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  html body .output-summary > .summary-total > small {
    display: block !important;
  }

  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body .output-summary > .result-metrics > div {
    height: 70px !important;
    align-content: center !important;
    padding: 0 5px !important;
    text-align: center !important;
  }

  html body .output-summary > .result-metrics > div + div {
    border-left: 1px solid rgba(157, 123, 79, .13) !important;
  }
}

/* Detail polish candidate: typography and control layers only.  The approved
 * plates, their geometry, and the equipment artwork remain untouched. */
@media (min-width: 1001px) {
  /* Hero context: match the reference's quiet square portrait and clear
   * three-zone hierarchy instead of stacking controls into the title row. */
  html body .hero-context-block .selected-hero {
    position: relative !important;
    grid-template-columns: 68px 118px !important;
    gap: 12px !important;
  }
  html body .hero-context-block .selected-hero img {
    border-radius: 3px !important;
    box-shadow: 0 2px 5px rgba(75, 62, 48, .14), inset 0 0 0 1px rgba(255, 255, 255, .58) !important;
  }
  html body .hero-context-block .selected-hero button {
    position: absolute !important;
    left: 80px !important;
    bottom: 0 !important;
    width: 58px !important;
    justify-content: center !important;
    padding: 0 !important;
    border-bottom-color: rgba(131, 105, 78, .28) !important;
    color: #987856 !important;
  }
  html body .hero-context-block .selected-hero h2 {
    line-height: 24px !important;
  }
  html body .hero-context-block .selected-hero p {
    line-height: 14px !important;
  }
  html body .hero-context-block .level-row {
    display: block !important;
    right: 18px !important;
    left: 225px !important;
    width: auto !important;
  }
  html body .hero-context-block .level-row label {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 18px !important;
  }
  html body .hero-context-block .level-row label > span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
  html body .hero-context-block .level-row label output {
    position: absolute !important;
    top: -4px !important;
    right: 0 !important;
    width: auto !important;
  }
  html body .hero-context-block .level-row input[type="range"] {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
  html body .hero-context-block .hero-boost-row {
    right: 18px !important;
    left: 225px !important;
  }
  html body .hero-context-block .boost-caption { display: none !important; }
  html body .hero-context-block .boost-controls-secondary {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
  }
  html body .hero-context-block .boost-control {
    min-width: 0 !important;
    gap: 8px !important;
  }
  html body .hero-context-block .boost-control > span { white-space: nowrap !important; }
  html body .hero-context-block .boost-select-fit { width: 76px !important; }
  html body .hero-context-block .boost-aura-control { width: 100% !important; }
  html body .hero-context-block .boost-aura-pair {
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  html body .hero-context-block .boost-aura-pair .boost-select-fit:first-child,
  html body .hero-context-block .boost-aura-pair .boost-select-fit:last-child {
    width: auto !important;
    flex: 1 1 0 !important;
  }

  /* Equipment: restore the reference's image-to-caption ratio and give the
   * name and price their own quiet lines. */
  html body .build-column-loadout > .equipment-block .equipment-slot {
    height: 180px !important;
    min-height: 180px !important;
  }
  html body .build-column-loadout > .equipment-block .equipment-main {
    grid-template-rows: 18px 80px 48px 20px !important;
    height: 166px !important;
    min-height: 166px !important;
    padding: 0 5px !important;
    align-content: start !important;
  }
  html body .build-column-loadout > .equipment-block .equipment-main img {
    width: 80px !important;
    height: 80px !important;
  }
  html body .build-column-loadout > .equipment-block .equipment-main b {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 1px !important;
    width: 100% !important;
    height: 48px !important;
    margin-top: 0 !important;
    line-height: 19px !important;
    text-align: center !important;
  }
  html body .build-column-loadout > .equipment-block .equipment-main b em { max-width: 100% !important; }
  html body .build-column-loadout > .equipment-block .equipment-main b small {
    justify-self: center !important;
    line-height: 17px !important;
  }
  html body .build-column-loadout > .equipment-block .item-passive-toggle,
  html body .build-column-loadout > .equipment-block .item-passive-auto,
  html body .build-column-loadout > .equipment-block .item-proc-control {
    right: 4px !important;
    top: auto !important;
    bottom: 2px !important;
    left: 4px !important;
    min-height: 20px !important;
    border-top: 1px solid rgba(145, 116, 79, .12) !important;
    background: rgba(255, 252, 244, .42) !important;
    font-size: 9px !important;
  }

  /* Runes: keep all three columns, but turn each into a small editorial list
   * rather than a single dashboard summary line. */
  html body .build-column-loadout > .rune-block .rune-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 18px !important;
  }
  html body .build-column-loadout > .rune-block .rune-summary-row {
    display: grid !important;
    grid-template-rows: 24px minmax(0, 1fr) !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .build-column-loadout > .rune-block .rune-summary-row > span {
    width: auto !important;
    height: 24px !important;
    color: #6e5a45 !important;
    font-size: 11px !important;
  }
  html body .build-column-loadout > .rune-block .rune-picks {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-content: start !important;
    min-height: 0 !important;
  }
  html body .build-column-loadout > .rune-block .rune-picks > span {
    min-height: 22px !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    color: #584735 !important;
    font-size: 11px !important;
  }
  html body .build-column-loadout > .rune-block .rune-picks img {
    width: 18px !important;
    height: 18px !important;
  }
  html body .build-column-loadout > .rune-block .rune-summary .stat-summary {
    top: auto !important;
    bottom: 4px !important;
    left: 0 !important;
    width: 100% !important;
    height: 17px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #927d65 !important;
    font-size: 10px !important;
    line-height: 15px !important;
    text-align: center !important;
  }

  /* Skill ranks: keep the live +/- controls, but remove the rigid form-grid
   * look and let each rank read like a small circular marker. */
  html body .build-column-loadout > .build-skill-rank .skill-rank-row {
    gap: 5px !important;
    color: #675541 !important;
  }
  html body .build-column-loadout > .build-skill-rank .skill-rank-row button,
  html body .build-column-loadout > .build-skill-rank .skill-rank-row output {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
  }
  html body .build-column-loadout > .build-skill-rank .skill-rank-row output {
    border-color: rgba(133, 108, 77, .22) !important;
    background: rgba(255, 255, 255, .22) !important;
    color: #765f43 !important;
  }
  html body .build-column-loadout > .build-skill-rank .skill-rank-row small {
    color: #a28d74 !important;
  }

  /* Total attributes: slightly less numerical weight, with the same fields
   * and the same lower-sheet geometry. */
  html body .build-column-loadout > .result-stats .compact-stats dd {
    font-family: Georgia, "Microsoft YaHei", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }
  html body .build-column-loadout > .result-stats .compact-stats dt {
    font-size: 10px !important;
    letter-spacing: .02em !important;
  }

  /* Battle state: use the standalone panel's fine border, warm wash and left
   * state rail; avoid large opaque rounded cards. */
  html body .build-column-loadout > .combat-block .combat-state-toggle,
  html body .build-column-loadout > .combat-block .combat-choice,
  html body .build-column-loadout > .combat-block .combat-counter {
    position: relative !important;
    border: 1px solid rgba(145, 116, 82, .18) !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, rgba(255, 253, 248, .58), rgba(247, 235, 216, .24) 50%, rgba(255, 253, 248, .46)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .7), inset 0 -1px rgba(136, 105, 72, .05), 0 2px 5px rgba(103, 78, 53, .04) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle::before,
  html body .build-column-loadout > .combat-block .combat-choice::before,
  html body .build-column-loadout > .combat-block .combat-counter::before {
    position: absolute !important;
    top: 14% !important;
    bottom: 14% !important;
    left: 0 !important;
    width: 2px !important;
    content: "" !important;
    background: rgba(161, 126, 87, .22) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle.active,
  html body .build-column-loadout > .combat-block .combat-choice.active,
  html body .build-column-loadout > .combat-block .combat-counter.active {
    border-color: rgba(169, 123, 74, .32) !important;
    background: linear-gradient(90deg, rgba(250, 235, 215, .58), rgba(232, 199, 158, .28) 52%, rgba(255, 252, 244, .48)) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle.active::before,
  html body .build-column-loadout > .combat-block .combat-choice.active::before,
  html body .build-column-loadout > .combat-block .combat-counter.active::before {
    width: 3px !important;
    background: #c08c54 !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle:hover,
  html body .build-column-loadout > .combat-block .combat-choice:hover,
  html body .build-column-loadout > .combat-block .combat-counter:hover {
    background: linear-gradient(90deg, rgba(255, 252, 244, .72), rgba(242, 222, 194, .34), rgba(255, 252, 244, .55)) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle > span i { display: inline-block !important; }
  html body .build-column-loadout > .combat-block .combat-state-toggle > span i {
    width: 7px !important;
    height: 7px !important;
    margin-right: 6px !important;
    border: 1px solid rgba(132, 104, 73, .42) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .36) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle.active > span i { background: #bd8c58 !important; }
  html body .build-column-loadout > .combat-block .combat-state-toggle > small,
  html body .build-column-loadout > .combat-block .combat-choice p,
  html body .build-column-loadout > .combat-block .combat-counter p { color: #806b54 !important; }

  /* Target inputs: keep the editable controls, but use the reference's
   * nearly-flat paper field and a single warm baseline instead of grey pills. */
  html body .build-column-loadout > .target-block .target-grid input {
    height: 31px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(138, 112, 78, .38) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(255, 252, 245, .52), rgba(255, 247, 233, .22)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .58) !important;
    color: #5a4630 !important;
    font-family: Georgia, "Microsoft YaHei", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  html body .build-column-loadout > .target-block .target-grid input:focus {
    outline: 0 !important;
    box-shadow: inset 0 -2px rgba(176, 128, 78, .58) !important;
  }
  html body .build-column-loadout > .target-block .duration-control {
    border-top: 1px solid rgba(140, 115, 85, .16) !important;
    padding-top: 1px !important;
  }
  html body .build-column-loadout > .target-block .duration-segments button {
    height: 28px !important;
    border: 1px solid rgba(145, 116, 79, .24) !important;
    border-radius: 2px !important;
    background: rgba(255, 252, 244, .22) !important;
    color: #8e7456 !important;
    font-family: Georgia, "Microsoft YaHei", sans-serif !important;
  }
  html body .build-column-loadout > .target-block .duration-segments button.active {
    border-color: rgba(163, 117, 74, .52) !important;
    background: rgba(224, 184, 139, .24) !important;
    color: #6f512d !important;
  }

  /* Results: quieten the single dominant number without changing its value or
   * the surrounding calculation hierarchy. */
  html body .result-panel .dps-result strong {
    color: #a45950 !important;
    font-family: Georgia, "Microsoft YaHei", sans-serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
  }
  html body .result-panel .summary-total strong {
    font-family: Georgia, "Microsoft YaHei", sans-serif !important;
    font-weight: 600 !important;
  }
}
@media (min-width: 1001px) and (max-height: 900px) {
  .hero-panel,
  .build-panel,
  .result-panel { height: calc(100vh - 80px) !important; }
  .output-summary { height: 292px !important; grid-template-rows: 30px 64px 92px 58px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
  .result-panel > .skill-block { top: 304px !important; height: 236px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .result-panel > .right-calculation-details { top: 552px !important; height: calc(100vh - 632px) !important; padding-top: 12px !important; }
  .result-panel > .right-calculation-details #calculationBreakdown { grid-template-rows: repeat(3, 42px) !important; }
  .result-panel > .right-calculation-details #calculationBreakdown article { min-height: 42px !important; padding: 5px 0 !important; }
}

/* Historical rules use html body prefixes; mirror that specificity for the
 * geometry declarations above so the sheets cannot be flex/grid-shrunk. */
html body .build-panel {
  display: block !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html body .workspace::before { display: none !important; content: none !important; }
html body .result-panel {
  display: block !important;
  height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html body .build-column,
html body .build-column-loadout {
  display: block !important;
  flex: 0 0 auto !important;
  width: min(800px, calc(100% - 24px)) !important;
  height: 1408px !important;
  min-height: 1408px !important;
}
html body .build-column > .hero-context-block { top: 0 !important; height: 128px !important; min-height: 128px !important; }
html body .build-column > .equipment-block { top: 144px !important; height: 520px !important; min-height: 520px !important; }
html body .build-column > .rune-block { top: 144px !important; height: 520px !important; min-height: 520px !important; margin: 0 !important; }
html body .build-column > .build-skill-rank { top: 144px !important; height: 520px !important; min-height: 520px !important; margin: 0 !important; }
html body .build-column > .result-stats { top: 680px !important; height: 200px !important; min-height: 200px !important; }
html body .build-column > .combat-block { top: 896px !important; height: 280px !important; min-height: 280px !important; }
html body .build-column > .target-block { top: 1192px !important; height: 200px !important; min-height: 200px !important; }
html body .result-panel > .output-summary { top: 0 !important; height: 340px !important; min-height: 340px !important; }
html body .result-panel > .skill-block { top: 356px !important; height: 280px !important; min-height: 280px !important; }
html body .result-panel > .right-calculation-details { top: 652px !important; height: 228px !important; min-height: 228px !important; }
html,
html body { overflow: hidden !important; }
html body .workspace { width: 100% !important; min-width: 0 !important; }
html body .result-panel { width: 460px !important; right: 16px !important; left: auto !important; }
html body .build-column > .equipment-block > header { height: 24px !important; min-height: 24px !important; }
html body .build-column > .equipment-block .equipped-row { top: 28px !important; height: 224px !important; min-height: 224px !important; flex: 0 0 224px !important; }
html body .build-column > .equipment-block .item-passive-toggle,
html body .build-column > .equipment-block .item-passive-auto,
html body .build-column > .equipment-block .item-proc-control { display: flex !important; }
html body .build-column > .rune-block .rune-summary { top: 252px !important; height: 184px !important; min-height: 184px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: 1fr !important; }
html body .build-column > .rune-block .rune-summary-row { grid-column: auto !important; grid-row: 1 !important; }
html body .build-column > .build-skill-rank #skillRankControls { top: 450px !important; height: 70px !important; min-height: 70px !important; }
html body .build-column > .rune-block .rune-summary-row { height: 54px !important; min-height: 54px !important; align-self: start !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .build-column > .combat-block .combat-state-grid { grid-auto-rows: minmax(54px, auto) !important; grid-template-rows: none !important; }
html body .build-column > .combat-block .combat-state-toggle,
html body .build-column > .combat-block .combat-choice,
html body .build-column > .combat-block .combat-counter { height: auto !important; min-height: 54px !important; grid-template-rows: none !important; }
html body .output-summary .result-header { grid-column: 1 / -1 !important; grid-row: 1 !important; width: auto !important; }
html body .result-panel > .output-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 34px 78px 112px 70px !important; }
html body .output-summary > .summary-identity { grid-column: 1 !important; grid-row: 2 !important; width: auto !important; }
html body .output-summary > .dps-result { position: static !important; grid-column: 2 !important; grid-row: 2 !important; width: auto !important; }
html body .output-summary > .damage-bars { grid-column: 1 / -1 !important; grid-row: 3 !important; width: auto !important; }
html body .output-summary > .summary-total { grid-column: 1 !important; grid-row: 4 !important; width: auto !important; }
html body .output-summary > .result-metrics { grid-column: 2 !important; grid-row: 4 !important; width: auto !important; }
html body .hero-context-block .selected-hero button { display: inline-flex !important; }

/* Compact, single-column mobile fallback.  The desktop workbench remains the
 * visual reference; on a phone the same live controls are allowed to flow
 * vertically so no horizontal page scroll is introduced. */
@media (max-width: 1000px) {
  html,
  html body {
    width: 100% !important;
    min-width: 320px !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html body .tool-header {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    background: rgba(247, 250, 252, .94) !important;
  }
  html body .workspace {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
  }
  html body .hero-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    background: rgba(247, 250, 252, .72) !important;
  }
  html body .hero-panel .hero-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .hero-panel .hero-option {
    width: auto !important;
    min-height: 42px !important;
    height: 42px !important;
    flex: none !important;
    justify-content: flex-start !important;
  }
  html body .build-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }
  html body .build-column,
  html body .build-column-loadout {
    width: 100% !important;
    height: 1408px !important;
    min-height: 1408px !important;
    margin: 0 !important;
  }
  html body .build-column > .hero-context-block,
  html body .build-column > .equipment-block,
  html body .build-column > .rune-block,
  html body .build-column > .build-skill-rank,
  html body .build-column > .result-stats,
  html body .build-column > .combat-block,
  html body .build-column > .target-block {
    width: 100% !important;
  }
  html body .result-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }
  html body .result-panel > .output-summary,
  html body .result-panel > .skill-block,
  html body .result-panel > .right-calculation-details {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }
  html body .result-panel > .output-summary { height: 340px !important; min-height: 340px !important; }
  html body .result-panel > .skill-block { height: 220px !important; min-height: 220px !important; }
  html body .result-panel > .right-calculation-details { height: 228px !important; min-height: 228px !important; }
}

/* Feedback refinement: quieter type and flatter controls inside the existing
 * plates.  Geometry, artwork and interaction semantics stay unchanged. */
:root { --ui-font: var(--font-ui) !important; }

html body .hero-context-block .selected-hero button {
  z-index: 4 !important;
  bottom: -17px !important;
  height: 20px !important;
  min-height: 20px !important;
  line-height: 14px !important;
  background: rgba(255, 253, 248, .16) !important;
  color: #806b54 !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle,
html body .build-column-loadout > .combat-block .combat-choice,
html body .build-column-loadout > .combat-block .combat-counter {
  border: 1px solid rgba(145, 116, 82, .24) !important;
  border-radius: 2px !important;
  background: rgba(255, 253, 248, .64) !important;
  box-shadow: none !important;
  transition: background 140ms ease, border-color 140ms ease !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle:hover,
html body .build-column-loadout > .combat-block .combat-choice:hover,
html body .build-column-loadout > .combat-block .combat-counter:hover {
  border-color: rgba(145, 116, 82, .32) !important;
  background: rgba(255, 252, 244, .78) !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle.active,
html body .build-column-loadout > .combat-block .combat-choice.active,
html body .build-column-loadout > .combat-block .combat-counter.active {
  border-color: rgba(169, 123, 74, .38) !important;
  background: rgba(250, 236, 218, .72) !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle::before,
html body .build-column-loadout > .combat-block .combat-choice::before,
html body .build-column-loadout > .combat-block .combat-counter::before {
  top: 8% !important;
  bottom: 8% !important;
  width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle.active::before,
html body .build-column-loadout > .combat-block .combat-choice.active::before,
html body .build-column-loadout > .combat-block .combat-counter.active::before {
  width: 4px !important;
  background: #bd8c58 !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle > span i {
  width: 6px !important;
  height: 6px !important;
  margin-right: 6px !important;
  border-color: rgba(132, 104, 73, .46) !important;
  background: transparent !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle.active > span i {
  border-color: #bd8c58 !important;
  background: #bd8c58 !important;
}

html body .build-column-loadout > .combat-block .choice-segments button,
html body .build-column-loadout > .combat-block .inline-counter button {
  border: 0 !important;
  border-bottom: 1px solid rgba(145, 116, 79, .22) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .build-column-loadout > .target-block .target-grid input {
  border: 0 !important;
  border-bottom: 1px solid rgba(138, 112, 78, .42) !important;
  border-radius: 0 !important;
  background: rgba(255, 253, 248, .48) !important;
  box-shadow: none !important;
  color: #5a4630 !important;
  font-family: var(--font-numeric) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  appearance: auto !important;
  -moz-appearance: auto !important;
}

html body .build-column-loadout > .target-block .target-grid input:focus {
  outline: 0 !important;
  box-shadow: inset 0 -2px rgba(176, 128, 78, .58) !important;
}

html body .build-column-loadout > .target-block .target-grid input::-webkit-inner-spin-button,
html body .build-column-loadout > .target-block .target-grid input::-webkit-outer-spin-button {
  -webkit-appearance: auto !important;
  opacity: .58 !important;
  margin: 0 !important;
}

html body .build-column-loadout > .target-block .duration-control {
  border-top-color: rgba(140, 115, 85, .12) !important;
}

html body .build-column-loadout > .target-block .duration-segments button {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Target detail candidate: keep the real number inputs, but reuse the
 * sample's quiet filled shells instead of the browser spinner/underline
 * treatment.  This is an interior treatment only; values and controls stay
 * data-driven and editable. */
html body .build-column-loadout > .target-block .target-grid input {
  height: 31px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(106, 94, 78, .055) !important;
  box-shadow: none !important;
  color: #5a4630 !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

html body .build-column-loadout > .target-block .target-grid input:focus {
  outline: 1px solid rgba(133, 110, 80, .45) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, .45) !important;
}

html body .build-column-loadout > .target-block .target-grid input::-webkit-inner-spin-button,
html body .build-column-loadout > .target-block .target-grid input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

html body .build-column-loadout > .target-block .duration-control {
  border-top-color: transparent !important;
}

html body .build-column-loadout > .target-block .duration-segments button {
  height: 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #7c7060 !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
}

html body .build-column-loadout > .target-block .duration-segments button:hover {
  background: rgba(106, 94, 78, .055) !important;
}

html body .build-column-loadout > .target-block .duration-segments button.active {
  border-color: transparent !important;
  background: rgba(155, 125, 87, .13) !important;
  color: #574734 !important;
  font-weight: 600 !important;
}

html body .build-column-loadout > .result-stats .compact-stats dd,
html body .result-panel .dps-result strong,
html body .result-panel .summary-total strong,
html body .result-panel .result-metrics strong,
html body .result-panel #calculationBreakdown article b {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Results plate candidate: keep every live result, but follow the reference
 * rhythm inside the existing sheet.  The identity sits in the top rail; the
 * DPS owns the left side of the upper result grid, the window total and
 * metrics share the right side, and the damage composition gets its own
 * bottom band.  No values or semantics are changed. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important;
    grid-template-rows: 30px 96px 44px 138px !important;
    padding: 16px 18px !important;
    row-gap: 0 !important;
    align-content: start !important;
  }

  html body .output-summary .result-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: 30px !important;
    align-items: center !important;
    padding: 0 0 2px !important;
  }

  html body .output-summary .result-header > div {
    display: flex !important;
    width: 100% !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body .output-summary > .summary-identity {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: 30px !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    padding: 0 0 2px 10px !important;
    border: 0 !important;
  }

  html body .output-summary > .summary-identity img {
    display: none !important;
  }

  html body .output-summary > .summary-identity > div {
    gap: 1px !important;
  }

  html body .output-summary > .summary-identity span {
    font-size: 8px !important;
    line-height: 11px !important;
  }

  html body .output-summary > .summary-identity strong {
    font-size: 13px !important;
    line-height: 15px !important;
  }

  html body .output-summary > .summary-identity small {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  html body .output-summary > .dps-result {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 18px 0 4px !important;
    margin: 0 !important;
    border-right: 1px solid rgba(157, 123, 79, .22) !important;
    text-align: center !important;
  }

  html body .result-panel .dps-result strong {
    color: #2e7892 !important;
    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -.045em !important;
  }

  html body .output-summary > .summary-total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 4px 0 16px !important;
    text-align: center !important;
  }

  html body .result-panel .summary-total strong {
    color: #bc6739 !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    border-top: 1px solid rgba(157, 123, 79, .16) !important;
    background: transparent !important;
  }

  html body .output-summary > .result-metrics > div {
    align-content: center !important;
    height: 44px !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  html body .output-summary > .result-metrics strong {
    font-size: 14px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body .output-summary > .result-metrics > div + div {
    border-left: 1px solid rgba(157, 123, 79, .13) !important;
  }

  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-content: start !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(157, 123, 79, .22) !important;
  }

  html body .output-summary > .damage-bars section {
    gap: 6px !important;
  }

  html body .output-summary > .damage-bars section > header {
    height: 18px !important;
    align-items: center !important;
  }

  html body .output-summary > .damage-bars section > div {
    grid-template-columns: 66px minmax(0, 1fr) 52px !important;
    gap: 8px !important;
    min-height: 20px !important;
  }
}

@media (max-width: 1000px) {
  html body .build-column-loadout > .target-block .duration-control {
    gap: 8px !important;
  }
  html body .build-column-loadout > .target-block .duration-control > span:first-child {
    flex: 0 0 48px !important;
    white-space: nowrap !important;
  }
  html body .build-column-loadout > .target-block .duration-segments {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body .build-column-loadout > .target-block .duration-segments button {
    min-width: 0 !important;
    padding: 0 2px !important;
  }
}

/* Wide desktop adaptation: keep the 1440px composition as the reference,
 * then let the centre and result rails share any extra desktop width.  This
 * prevents the fixed 824px/460px rails from leaving a hollow strip between
 * them on 1600px–1920px browser windows while preserving the same order,
 * spacing rhythm, and source plates. */
@media (min-width: 1441px) and (max-width: 1920px) {
  html body .build-panel {
    width: calc(40vw + 248px) !important;
  }

  html body .build-column,
  html body .build-column-loadout {
    width: calc(100% - 24px) !important;
  }

  html body .result-panel {
    width: calc(60vw - 404px) !important;
  }
}

/* Keep very wide monitors on a centered 1920px workbench instead of scaling
 * the approved sheets beyond the range they were designed for. */
@media (min-width: 1921px) {
  html body .workspace {
    right: auto !important;
    left: 50% !important;
    width: 1920px !important;
    transform: translateX(-50%) !important;
  }

  html body .build-panel {
    width: 1016px !important;
  }

  html body .build-column,
  html body .build-column-loadout {
    width: 992px !important;
  }

  html body .result-panel {
    width: 748px !important;
  }
}

/* Candidate panel alignment: match the sample HeroContext composition while
 * keeping the live calculator controls and copy unchanged. */
html body .build-column > .hero-context-block {
  padding: 0 !important;
}

html body .build-column > .hero-context-block .selected-hero {
  position: absolute !important;
  top: 12px !important;
  left: 14px !important;
  width: 190px !important;
  height: 104px !important;
  min-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 20px 0 0 !important;
  border-right: 1px solid rgba(157, 123, 79, .26) !important;
  box-sizing: border-box !important;
}

html body .build-column > .hero-context-block .selected-hero img {
  flex: 0 0 68px !important;
  width: 68px !important;
  height: 68px !important;
}

html body .build-column > .hero-context-block .selected-hero > div {
  min-width: 0 !important;
  flex: 0 0 70px !important;
  width: 70px !important;
  height: 68px !important;
  line-height: 1.1 !important;
}

html body .build-column > .hero-context-block .selected-hero img {
  border-radius: 50% !important;
}

html body .build-column > .hero-context-block .selected-hero h2 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 22px !important;
  letter-spacing: .08em !important;
}

html body .build-column > .hero-context-block .selected-hero p {
  margin: 7px 0 10px !important;
  font-size: 11px !important;
  line-height: 12.1px !important;
  letter-spacing: .12em !important;
}

html body .build-column > .hero-context-block #heroDetailsBtn {
  position: absolute !important;
  top: 70.5px !important;
  left: 82px !important;
  right: auto !important;
  bottom: auto !important;
  width: 70px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  line-height: 12.1px !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
}

html body .build-column > .hero-context-block .level-row {
  top: 12px !important;
  right: 18px !important;
  width: calc(100% - 240px) !important;
  height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html body .build-column > .hero-context-block .level-row label {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: 100% !important;
  line-height: 19px !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"] {
  position: static !important;
  width: 100% !important;
  flex: 0 0 14px !important;
  margin: 4px 0 0 !important;
}

html body .build-column > .hero-context-block .hero-boost-row {
  top: 64px !important;
  right: 18px !important;
  bottom: auto !important;
  left: 18px !important;
  height: 52px !important;
  align-items: center !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary {
  align-items: center !important;
  width: 100% !important;
}

/* Final hero-context candidate alignment: the sample reserves a quiet
 * identity rail on the left, then starts both control rows on the same
 * inset.  Keep the sheet dimensions untouched and only reposition content
 * inside the existing plate. */
html body .build-column > .hero-context-block .level-row {
  left: 204px !important;
  right: 18px !important;
  width: auto !important;
  padding-left: 22px !important;
  box-sizing: border-box !important;
}

html body .build-column > .hero-context-block .level-row label {
  position: absolute !important;
  top: 3.5px !important;
  right: 0 !important;
  left: 22px !important;
  width: auto !important;
  height: 19px !important;
}

html body .build-column > .hero-context-block .level-row label > span {
  position: static !important;
}

html body .build-column > .hero-context-block .level-row label output {
  top: -4px !important;
  right: 0 !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"] {
  position: absolute !important;
  top: 26.5px !important;
  right: 0 !important;
  bottom: auto !important;
  left: 22px !important;
  width: auto !important;
  margin: 0 !important;
}

html body .build-column > .hero-context-block .hero-boost-row {
  left: 204px !important;
  right: 18px !important;
  width: auto !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary {
  width: calc(100% - 22px) !important;
  margin-left: 22px !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  column-gap: 20px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control:first-child {
  justify-content: flex-end !important;
  padding-right: 10px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-aura-control {
  padding-left: 10px !important;
  border-left: 1px solid rgba(157, 123, 79, .18) !important;
}

html body .build-column > .hero-context-block .hero-boost-row {
  padding-top: 6px !important;
  box-sizing: border-box !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary,
html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control {
  height: 23px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control {
  gap: 12px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control > span {
  font-size: 10px !important;
  line-height: 13px !important;
  letter-spacing: .06em !important;
}

/* Final result-board correction: preserve the original live title, hero
 * identity, damage rows, and lower total/metrics band. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    padding: 20px 18px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 34px 78px 112px 70px !important;
    align-content: start !important;
  }
  html body .output-summary .result-header {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: 34px !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: 0 0 8px !important;
  }
  html body .output-summary > .summary-identity {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
  }
  html body .output-summary > .summary-identity img {
    display: block !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  html body .output-summary > .summary-identity > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }
  html body .output-summary > .dps-result {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: right !important;
  }
  html body .output-summary > .dps-result > span,
  html body .output-summary > .dps-result strong,
  html body .output-summary > .dps-result small { align-self: flex-end !important; }
  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  html body .output-summary > .summary-total {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  html body .output-summary > .summary-total > small { display: block !important; }
  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body .output-summary > .result-metrics > div {
    height: 70px !important;
    align-content: center !important;
    padding: 0 5px !important;
    text-align: center !important;
  }
  html body .output-summary > .result-metrics > div + div {
    border-left: 1px solid rgba(157, 123, 79, .13) !important;
  }
}

/* Results v7 final precedence: this follows the historical overrides above. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    padding: 14px 18px 13px !important;
    grid-template-rows: 116px 46px 151px !important;
  }
  html body .output-summary > .dps-result {
    padding: 1px 22px 0 4px !important;
    gap: 0 !important;
  }
  html body .output-summary > .dps-result > span {
    color: rgba(102, 87, 72, .72) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    line-height: 15px !important;
  }
  html body .output-summary > .dps-result strong {
    margin-top: 3px !important;
    text-shadow: 0 1px rgba(255, 255, 255, .7) !important;
  }
  html body .output-summary > .dps-result small {
    margin-top: 7px !important;
    color: rgba(102, 87, 72, .58) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .09em !important;
    line-height: normal !important;
  }
  html body .output-summary > .summary-total {
    padding: 5px 4px 0 20px !important;
    gap: 0 !important;
  }
  html body .output-summary > .summary-total > span {
    color: rgba(102, 87, 72, .72) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    line-height: 15px !important;
  }
  html body .output-summary > .summary-total strong {
    margin-top: 3px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px rgba(255, 255, 255, .7) !important;
  }
  html body .output-summary > .summary-total small { display: none !important; }
  html body .output-summary > .result-metrics { padding: 0 !important; }
  html body .output-summary > .result-metrics > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 8px !important;
  }
  html body .output-summary > .result-metrics span {
    color: rgba(102, 87, 72, .62) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    line-height: 13px !important;
  }
  html body .output-summary > .result-metrics strong { margin-top: 3px !important; }
  html body .output-summary > .result-metrics > div:nth-child(2) strong {
    letter-spacing: -.02em !important;
  }
  html body .output-summary > .damage-bars { margin-top: 10px !important; padding: 8px 0 0 !important; }
  html body .output-summary > .damage-bars section { gap: 8px !important; }
  html body .output-summary > .damage-bars section > header {
    height: 18px !important;
    margin-bottom: 2px !important;
    align-items: center !important;
    color: rgba(83, 68, 54, .76) !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }
  html body .output-summary > .damage-bars .damage-breakdown-legend {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: rgba(102, 87, 72, .5) !important;
    font-size: 8px !important;
    letter-spacing: .03em !important;
  }
  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-swatch {
    display: inline-block !important;
    flex: 0 0 6px !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }
  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-physical { background: #5a8da3 !important; }
  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-magic { background: #c58b55 !important; }
  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-true { background: #a96563 !important; }
  html body .output-summary > .damage-bars section > div {
    grid-template-columns: 66px minmax(0, 1fr) 61px !important;
    gap: 10px !important;
    min-height: 22px !important;
  }
  html body .output-summary > .damage-bars .damage-source-label { letter-spacing: .05em !important; }
  html body .output-summary > .damage-bars .damage-source-total { font-size: 12px !important; font-weight: 600 !important; }
}

/* Results v7: finish the source board's inner rhythm.  The live renderer now
 * exposes the same existing damage-breakdown heading/legend structure as the
 * visual sample; these rules only place that layer inside the unchanged sheet. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    padding: 14px 18px 13px !important;
    grid-template-rows: 116px 46px 151px !important;
  }

  html body .output-summary > .dps-result {
    padding: 1px 22px 0 4px !important;
  }

  html body .output-summary > .summary-total {
    padding: 5px 4px 0 20px !important;
  }

  html body .output-summary > .result-metrics {
    padding: 0 !important;
  }

  html body .output-summary > .result-metrics > div {
    padding: 0 8px !important;
  }

  html body .output-summary > .damage-bars {
    margin-top: 10px !important;
    padding: 8px 0 0 !important;
  }

  html body .output-summary > .damage-bars section {
    gap: 8px !important;
  }

  html body .output-summary > .damage-bars section > header {
    height: 18px !important;
    margin-bottom: 2px !important;
    align-items: center !important;
    color: rgba(83, 68, 54, .76) !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }

  html body .output-summary > .damage-bars .damage-breakdown-legend {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: rgba(102, 87, 72, .5) !important;
    font-size: 8px !important;
    letter-spacing: .03em !important;
  }

  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-swatch {
    display: inline-block !important;
    flex: 0 0 6px !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-physical {
    background: #5a8da3 !important;
  }

  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-magic {
    background: #c58b55 !important;
  }

  html body .output-summary > .damage-bars .damage-breakdown-legend .legend-true {
    background: #a96563 !important;
  }

  html body .output-summary > .damage-bars section > div {
    grid-template-columns: 66px minmax(0, 1fr) 61px !important;
    gap: 10px !important;
    min-height: 22px !important;
  }

  html body .output-summary > .damage-bars .damage-source-label {
    letter-spacing: .05em !important;
  }

  html body .output-summary > .damage-bars .damage-source-total {
    font-size: 12px !important;
    font-weight: 600 !important;
  }
}

/* Final result-plate alignment override. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    grid-template-rows: 116px 46px 151px !important;
    align-content: start !important;
  }
  html body .output-summary .result-header,
  html body .output-summary > .summary-identity {
    display: none !important;
  }
  html body .output-summary > .dps-result {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }
  html body .output-summary > .summary-total {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: auto !important;
  }
  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    height: auto !important;
    margin-top: 10px !important;
  }
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control:first-child .boost-select-fit {
  width: 84px !important;
  height: 23px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary .boost-current {
  height: 23px !important;
  min-height: 23px !important;
  font-size: 11px !important;
  line-height: 17px !important;
}

html body #selectedHeroName {
  font-size: 20px !important;
  line-height: 22px !important;
  letter-spacing: .08em !important;
}

html body .build-column > .hero-context-block .selected-hero h2,
html body .build-column > .hero-context-block .selected-hero p,
html body .build-column > .hero-context-block #heroDetailsBtn,
html body .build-column > .hero-context-block .boost-control > span,
html body .build-column > .hero-context-block .boost-current {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-aura-control > span {
  width: 42.40625px !important;
  min-width: 0 !important;
  flex: 0 0 42.40625px !important;
  letter-spacing: -.08em !important;
}

html body .build-column > .hero-context-block .boost-aura-pair {
  flex: 1 1 0% !important;
  gap: 10px !important;
}

html body .build-column > .hero-context-block #supportAuraOptions,
html body .build-column > .hero-context-block #supportAuraTierOptions {
  flex: 0 0 auto !important;
}

html body .build-column > .hero-context-block #supportAuraOptions,
html body .build-column > .hero-context-block #supportAuraOptions .boost-select-fit {
  width: 82px !important;
}

html body .build-column > .hero-context-block #supportAuraTierOptions,
html body .build-column > .hero-context-block #supportAuraTierOptions .boost-select-fit {
  width: 60px !important;
}

/* Hero detail candidate: use the existing sample range treatment.  Keep the
 * native 14px hit area, but make the visible rail a quiet 3px line with the
 * same real progress value and hollow thumb as the source component. */
html body .build-column > .hero-context-block .level-row input[type="range"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 14px !important;
  background: transparent !important;
  accent-color: transparent !important;
  cursor: pointer !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(to right, rgba(147, 110, 63, .74) 0 var(--level-progress), rgba(127, 105, 84, .2) var(--level-progress) 100%) !important;
  box-shadow: 0 1px rgba(255, 255, 255, .72) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-webkit-slider-thumb {
  width: 10px !important;
  height: 10px !important;
  margin-top: -3.5px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(132, 96, 53, .76) !important;
  border-radius: 50% !important;
  background: #f6f1e9 !important;
  box-shadow: 0 1px 2px rgba(68, 52, 39, .24) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-moz-range-track {
  height: 3px !important;
  border-radius: 3px !important;
  background: rgba(127, 105, 84, .2) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-moz-range-progress {
  height: 3px !important;
  border-radius: 3px !important;
  background: rgba(147, 110, 63, .74) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-moz-range-thumb {
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(132, 96, 53, .76) !important;
  border-radius: 50% !important;
  background: #f6f1e9 !important;
}

/* The base stylesheet has a higher-specificity numeric type scale for live
 * values.  The source HeroContext uses the quieter 15px UI value here, so
 * explicitly restore that existing sample treatment for this slot. */
html body .build-column > .hero-context-block .level-row label output {
  top: 0 !important;
  color: rgba(59, 47, 38, .92) !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: .06em !important;
}

/* Hero rail refinement: the wider identity rail leaves the existing boost
 * controls more room than they need on the right. Keep the board and its
 * control rows in the same tracks, but let the live selectors occupy a
 * shorter, quieter footprint. The narrower desktop range gets a compact
 * variant so the final tier remains inside the porcelain edge at 1294px. */
html body .build-column > .hero-context-block .boost-controls-secondary {
  min-width: 0 !important;
  width: calc(100% - 22px) !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  column-gap: 12px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control {
  min-width: 0 !important;
  gap: 8px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control > span {
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control:first-child .boost-select-fit {
  width: 72px !important;
}

html body .build-column > .hero-context-block .boost-controls-secondary > .boost-aura-control > span {
  width: 42.4px !important;
  flex-basis: 42.4px !important;
}

html body .build-column > .hero-context-block .boost-aura-pair {
  gap: 8px !important;
}

html body .build-column > .hero-context-block #supportAuraOptions,
html body .build-column > .hero-context-block #supportAuraOptions .boost-select-fit {
  width: 68px !important;
}

html body .build-column > .hero-context-block #supportAuraTierOptions,
html body .build-column > .hero-context-block #supportAuraTierOptions .boost-select-fit {
  width: 52px !important;
}

@media (min-width: 1001px) and (max-width: 1366px) {
  html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control {
    gap: 6px !important;
  }

  html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control > span {
    font-size: 9px !important;
  }

  html body .build-column > .hero-context-block .boost-controls-secondary > .boost-control:first-child .boost-select-fit {
    width: 60px !important;
  }

  html body .build-column > .hero-context-block .boost-controls-secondary > .boost-aura-control > span {
    width: 35px !important;
    flex-basis: 35px !important;
  }

  html body .build-column > .hero-context-block .boost-aura-pair {
    gap: 6px !important;
  }

  html body .build-column > .hero-context-block #supportAuraOptions,
  html body .build-column > .hero-context-block #supportAuraOptions .boost-select-fit {
    width: 60px !important;
  }

  html body .build-column > .hero-context-block #supportAuraTierOptions,
  html body .build-column > .hero-context-block #supportAuraTierOptions .boost-select-fit {
    width: 50px !important;
  }
}

/* Result plate order must remain the original live order. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    padding: 20px 18px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 34px 78px 112px 70px !important;
    align-content: start !important;
  }
  html body .output-summary .result-header {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: 34px !important;
    min-height: 0 !important;
  }
  html body .output-summary > .summary-identity {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
  }
  html body .output-summary > .summary-identity img {
    display: block !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }
  html body .output-summary > .summary-identity > div { display: grid !important; min-width: 0 !important; gap: 2px !important; }
  html body .output-summary > .dps-result {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: right !important;
  }
  html body .output-summary > .dps-result > span,
  html body .output-summary > .dps-result strong,
  html body .output-summary > .dps-result small { align-self: flex-end !important; }
  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  html body .output-summary > .summary-total {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  html body .output-summary > .summary-total > small { display: block !important; }
  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 4 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body .output-summary > .result-metrics > div {
    height: 70px !important;
    align-content: center !important;
    padding: 0 5px !important;
    text-align: center !important;
  }
  html body .output-summary > .result-metrics > div + div { border-left: 1px solid rgba(157, 123, 79, .13) !important; }
}

/* The right plate must not repeat the central Houyi portrait.  Keep the
 * existing text hierarchy for this pass and remove only the duplicated image. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary > .summary-identity img {
    display: none !important;
  }
  html body .result-panel > .output-summary > .summary-identity {
    gap: 0 !important;
    padding-right: 0 !important;
  }
}

/* Final compact result hierarchy: the central hero plate owns hero identity;
 * the right plate keeps only live result values and their source breakdown. */
@media (min-width: 1001px) {
  html body .result-panel > .output-summary {
    padding: 14px 18px 13px !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important;
    grid-template-rows: 116px 46px 151px !important;
    align-content: start !important;
  }
  html body .output-summary .result-header,
  html body .output-summary > .summary-identity {
    display: none !important;
  }
  html body .output-summary > .dps-result {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 22px 0 4px !important;
    align-items: center !important;
    text-align: center !important;
    border-right: 1px solid rgba(157, 123, 79, .22) !important;
  }
  html body .output-summary > .dps-result > span,
  html body .output-summary > .dps-result strong,
  html body .output-summary > .dps-result small { align-self: center !important; }
  html body .output-summary > .summary-total {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 5px 4px 0 20px !important;
    text-align: center !important;
  }
  html body .output-summary > .summary-total > small { display: none !important; }
  html body .output-summary > .result-metrics {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 0 !important;
    border-top: 1px solid rgba(157, 123, 79, .16) !important;
    align-items: center !important;
  }
  html body .output-summary > .result-metrics > div {
    height: 46px !important;
    align-content: center !important;
    padding: 0 4px !important;
    text-align: center !important;
  }
  html body .output-summary > .result-metrics > div + div {
    border-left: 1px solid rgba(157, 123, 79, .13) !important;
  }
  html body .output-summary > .damage-bars {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: auto !important;
    height: auto !important;
    align-content: start !important;
    margin-top: 10px !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(157, 123, 79, .22) !important;
  }
}

/* Results typography correction v11: the previous pass over-scaled the live
 * numbers.  Match the source's middle scale and baseline rhythm without
 * changing values, semantics, the plate or the no-avatar rule. */
@media (min-width: 1001px) {
  html body .result-panel .dps-result strong {
    font-size: 44px !important;
    line-height: 44px !important;
    letter-spacing: .02em !important;
    margin-top: 0 !important;
  }
  html body .result-panel .dps-result small {
    margin-top: 3px !important;
  }
  html body .result-panel .summary-total {
    padding-top: 1px !important;
  }
  html body .result-panel .summary-total strong {
    font-size: 32px !important;
    line-height: 32px !important;
    letter-spacing: .02em !important;
  }
  html body .result-panel .result-metrics span {
    font-size: 9px !important;
  }
  html body .result-panel .result-metrics strong {
    font-family: var(--font-ui) !important;
    color: #62574f !important;
    font-size: 14px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums !important;
  }
  html body .result-panel .result-metrics > div { transform: translateY(-1px) !important; }
  html body .output-summary > .damage-bars section > header { letter-spacing: .05em !important; }
}

/* Total-stats board · pass 1 of 2 (final cascade position). */
@media (min-width: 1001px) {
  html body .build-column-loadout > .result-stats > header span { display: none !important; }
  html body .build-column-loadout > .result-stats .compact-stats > div { border-right-color: transparent !important; border-bottom-color: rgba(145, 116, 79, .08) !important; }
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(5n) { border-right: 0 !important; }
  html body .build-column-loadout > .result-stats .compact-stats dt { color: #806b54 !important; font-family: var(--font-ui) !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: .01em !important; }
  html body .build-column-loadout > .result-stats .compact-stats dd { color: #493d2e !important; font-family: var(--font-ui) !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: .01em !important; }
  html body .build-column-loadout > .result-stats #heroStats > div { border-right-color: transparent !important; }
}

/* Total-stats board · pass 2 of 2 (fit all 14 live fields inside the fixed sheet). */
@media (min-width: 1001px) {
  html body .build-column-loadout > .result-stats .compact-stats {
    height: 150px !important;
    grid-template-rows: repeat(3, 50px) !important;
    grid-auto-rows: 50px !important;
  }
html body .build-column-loadout > .result-stats .compact-stats > div {
    min-height: 50px !important;
  }
}

/* Combat-state board · pass 1 of 2: use the sample's quiet paper rows rather
 * than stacked bordered cards; all state controls and semantics stay live. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .combat-block {
    padding: 18px 74px 18px 88px !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-grid {
    gap: 0 !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle,
  html body .build-column-loadout > .combat-block .combat-choice,
  html body .build-column-loadout > .combat-block .combat-counter {
    min-height: 54px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(145, 116, 82, .16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle:first-child,
  html body .build-column-loadout > .combat-block .combat-choice:first-child,
  html body .build-column-loadout > .combat-block .combat-counter:first-child {
    border-top: 1px solid rgba(145, 116, 82, .12) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle:hover,
  html body .build-column-loadout > .combat-block .combat-choice:hover,
  html body .build-column-loadout > .combat-block .combat-counter:hover {
    border-color: rgba(145, 116, 82, .16) !important;
    background: rgba(255, 252, 244, .20) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle.active,
  html body .build-column-loadout > .combat-block .combat-choice.active,
  html body .build-column-loadout > .combat-block .combat-counter.active {
    background: transparent !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle::before,
  html body .build-column-loadout > .combat-block .combat-choice::before,
  html body .build-column-loadout > .combat-block .combat-counter::before {
    display: none !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle:focus-visible,
  html body .build-column-loadout > .combat-block .combat-choice button:focus-visible,
  html body .build-column-loadout > .combat-block .combat-counter button:focus-visible {
    outline: 2px solid rgba(167, 123, 77, .55) !important;
    outline-offset: 2px !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle > b {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #806b54 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle > b::after {
    width: 30px !important;
    height: 16px !important;
    border: 1px solid rgba(145, 116, 82, .28) !important;
    border-radius: 9px !important;
    background: radial-gradient(circle at 7px 50%, rgba(255, 255, 255, .96) 0 5px, transparent 5.5px), rgba(236, 231, 224, .74) !important;
    box-sizing: border-box !important;
    content: "" !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .54) !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle.active > b {
    color: #875f35 !important;
  }
  html body .build-column-loadout > .combat-block .combat-state-toggle.active > b::after {
    border-color: rgba(176, 128, 78, .42) !important;
    background: radial-gradient(circle at calc(100% - 7px) 50%, rgba(255, 255, 255, .96) 0 5px, transparent 5.5px), #d4aa76 !important;
  }
}

/* Calculation-details board · pass 1 of 2: let the two numeric checks read as
 * a compact pair, then keep the live combat state on its own quieter rail.
 * The articles remain generated from the real calculation model; this only
 * changes their in-board rhythm and removes the stacked-card impression. */
@media (min-width: 1001px) {
  html body .result-panel > .right-calculation-details #calculationBreakdown {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 26px !important;
    row-gap: 0 !important;
    align-content: stretch !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px 0 8px !important;
    border-bottom-color: rgba(145, 116, 79, .08) !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article:nth-child(3) {
    grid-column: 1 / -1 !important;
    border-bottom-color: transparent !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article > div {
    align-items: baseline !important;
    gap: 8px !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article strong {
    min-width: 0 !important;
    color: #725f4d !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article b {
    flex: 0 0 auto !important;
    color: #453b32 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article p {
    margin-top: 5px !important;
    color: #8a7969 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
}

/* Skill-damage board · pass 1 of 2: the empty state is live text, not a
 * placeholder card. Keep the existing message and sheet geometry, but let it
 * sit directly on the same paper surface as populated skill rows. */
@media (min-width: 1001px) {
  html body .result-panel > .skill-block .empty-skill-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 59px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #85735e !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
    text-align: center !important;
  }
}

/* Board shadow restoration: the pre-integration prototype lifted the ceramic
 * sheets with asset-level drop shadows.  The integrated page uses the same
 * assets as CSS backgrounds, so restore that outer contact lift on the sheet
 * elements only; interior rows, controls and equipment artwork stay flat. */
@media (min-width: 1001px) {
  html body .hero-panel,
  html body .build-column > .result-stats,
  html body .build-column > .target-block,
  html body .result-panel > .skill-block,
  html body .result-panel > .right-calculation-details {
    filter:
      drop-shadow(0 3px 3px rgba(83, 75, 64, .18))
      drop-shadow(0 7px 7px rgba(83, 75, 64, .07)) !important;
  }

  html body .build-column > .hero-context-block,
  html body .build-column > .equipment-block {
    filter:
      drop-shadow(0 4px 4px rgba(83, 75, 64, .44))
      drop-shadow(0 10px 10px rgba(83, 75, 64, .17)) !important;
  }

  /* The results sheet had a slightly clearer lift in the source prototype. */
  html body .result-panel > .output-summary {
    filter:
      drop-shadow(0 3px 3px rgba(83, 75, 64, .40))
      drop-shadow(0 8px 8px rgba(83, 75, 64, .14)) !important;
  }
}

/* Calculation-details clipping fix: the legacy sheet forces each description
 * paragraph to 48px, but the live two-column grid allocates only the space
 * available inside the existing 228px plate. */
@media (min-width: 1001px) {
  html body .result-panel > .right-calculation-details #calculationBreakdown article p {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Short desktop viewports keep the approved result stack unchanged, but make
 * the complete right rail reachable instead of clipping its lower sheets. */
@media (min-width: 1001px) and (max-height: 900px) {
  html body .result-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }
}

/* Modal unification: keep the existing grids, real assets and inspector
 * placement, but bring the selection surfaces into the same warm porcelain
 * language as the home page. */
:root {
  --modal-paper: #fbfaf6;
  --modal-paper-soft: #f4f0e8;
  --modal-paper-inset: #eee9df;
  --modal-ink: #493d2e;
  --modal-muted: #806b54;
  --modal-faint: #a08f7b;
  --modal-line: rgba(145, 116, 79, .24);
  --modal-line-soft: rgba(145, 116, 79, .14);
  --modal-gold: #a77b3e;
  --modal-gold-soft: rgba(167, 123, 62, .12);
}

html body dialog,
html body dialog .dialog-shell {
  color: var(--modal-ink) !important;
  font-family: var(--ui-font) !important;
}

html body dialog {
  border: 1px solid var(--modal-line) !important;
  border-radius: 8px !important;
  background: var(--modal-paper) !important;
  box-shadow:
    0 18px 48px rgba(75, 62, 48, .18),
    0 3px 10px rgba(75, 62, 48, .10) !important;
}

html body dialog::backdrop {
  background: rgba(73, 61, 46, .22) !important;
  backdrop-filter: blur(4px) !important;
}

html body dialog .dialog-shell {
  padding: 14px !important;
}

html body dialog .dialog-header {
  min-height: 38px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--modal-line) !important;
}

html body dialog .dialog-header h2 {
  color: var(--modal-ink) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 21px !important;
}

html body dialog .dialog-header span {
  color: var(--modal-muted) !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

html body dialog .close-button {
  min-height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid var(--modal-line) !important;
  border-radius: 4px !important;
  background: var(--modal-paper-soft) !important;
  color: var(--modal-ink) !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

html body dialog .close-button:hover,
html body dialog .close-button:focus-visible {
  border-color: rgba(167, 123, 62, .55) !important;
  background: var(--modal-gold-soft) !important;
  color: var(--modal-ink) !important;
}

html body .selection-dialog .dialog-toolbar {
  gap: 10px !important;
  padding: 10px 0 !important;
}

html body .selection-dialog .search-control {
  color: var(--modal-muted) !important;
  font-size: 11px !important;
}

html body .selection-dialog .search-control input {
  height: 30px !important;
  border: 1px solid var(--modal-line) !important;
  border-radius: 4px !important;
  background: var(--modal-paper-inset) !important;
  color: var(--modal-ink) !important;
  font-size: 11px !important;
}

html body .selection-dialog .search-control input::placeholder {
  color: var(--modal-faint) !important;
}

html body .selection-dialog .filter-tabs,
html body .selection-dialog .rune-type-tabs {
  gap: 5px !important;
}

html body .selection-dialog .filter-tabs button,
html body .selection-dialog .rune-type-tabs button {
  border: 1px solid var(--modal-line) !important;
  border-radius: 4px !important;
  background: var(--modal-paper-soft) !important;
  color: var(--modal-muted) !important;
  font-size: 12px !important;
}

html body .selection-dialog .filter-tabs button:hover,
html body .selection-dialog .rune-type-tabs button:hover,
html body .selection-dialog .filter-tabs button.selected,
html body .selection-dialog .rune-type-tabs button.selected {
  border-color: rgba(167, 123, 62, .62) !important;
  background: var(--modal-gold-soft) !important;
  color: var(--modal-ink) !important;
}

html body .selection-dialog .rune-type-tabs button.selected,
html body .selection-dialog .rune-type-tabs .rune-red.selected,
html body .selection-dialog .rune-type-tabs .rune-blue.selected,
html body .selection-dialog .rune-type-tabs .rune-green.selected {
  color: var(--modal-ink) !important;
}

html body .selection-dialog .item-browser {
  gap: 10px !important;
}

html body .selection-dialog .item-grid {
  gap: 5px !important;
}

html body .selection-dialog .item-card-wrap {
  grid-template-rows: 66px 26px !important;
  gap: 2px !important;
}

html body .selection-dialog .item-card,
html body .selection-dialog .rune-row {
  border: 1px solid var(--modal-line) !important;
  border-radius: 4px !important;
  background: var(--modal-paper-soft) !important;
  color: var(--modal-ink) !important;
}

html body .selection-dialog .item-card:hover,
html body .selection-dialog .item-card.inspected,
html body .selection-dialog .rune-row:hover {
  border-color: rgba(167, 123, 62, .42) !important;
  background: #f7f1e6 !important;
}

html body .selection-dialog .item-card.selected,
html body .selection-dialog .rune-row.active {
  border-color: rgba(167, 123, 62, .72) !important;
  background: #f8eedc !important;
}

html body .selection-dialog .item-card strong,
html body .selection-dialog .rune-row h3 {
  color: var(--modal-ink) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body .selection-dialog .item-card small,
html body .selection-dialog .rune-row p {
  color: var(--modal-muted) !important;
  font-size: 10px !important;
}

html body .selection-dialog .item-card > b {
  color: var(--modal-muted) !important;
  font-size: 10px !important;
}

html body .selection-dialog .item-card.selected > b {
  color: var(--modal-gold) !important;
}

html body .selection-dialog .item-card-status {
  border-color: rgba(167, 123, 62, .72) !important;
  background: #f2e4c9 !important;
}

html body .selection-dialog .item-card-status > b {
  color: var(--modal-gold) !important;
  font-size: 9px !important;
}

html body .selection-dialog .item-card-quantity button,
html body .selection-dialog .rune-counter button {
  border: 1px solid var(--modal-line) !important;
  border-radius: 3px !important;
  background: var(--modal-paper) !important;
  color: var(--modal-ink) !important;
  font-size: 11px !important;
}

html body .selection-dialog .item-card-quantity button:hover,
html body .selection-dialog .rune-counter button:hover {
  border-color: rgba(167, 123, 62, .55) !important;
  background: var(--modal-gold-soft) !important;
}

html body .selection-dialog .item-card-quantity output,
html body .selection-dialog .rune-counter output,
html body .selection-dialog .rune-type-tabs b {
  color: var(--modal-ink) !important;
}

html body .selection-dialog .item-inspector {
  padding: 12px !important;
  border: 1px solid var(--modal-line) !important;
  border-radius: 5px !important;
  background: var(--modal-paper-inset) !important;
  color: var(--modal-ink) !important;
}

html body .selection-dialog .item-inspector section {
  border-bottom-color: var(--modal-line) !important;
}

html body .selection-dialog .item-inspector h3,
html body .selection-dialog .item-inspector strong {
  color: var(--modal-ink) !important;
}

html body .selection-dialog .item-inspector span,
html body .selection-dialog .item-inspector small,
html body .selection-dialog .item-inspector p {
  color: var(--modal-muted) !important;
}

html body .selection-dialog .item-inspector .detail-passive-note,
html body .selection-dialog .item-inspector .coverage-note {
  border-color: var(--modal-line) !important;
  background: var(--modal-paper) !important;
  color: var(--modal-muted) !important;
}

html body .selection-dialog .item-inspector .item-impact strong {
  color: var(--modal-gold) !important;
}

/* Typography pass 2: one quiet UI family for the workbench.  The previous
 * cascade mixed the site's sans family with Georgia/condensed fallbacks, which
 * made small labels and live numbers feel like separate generated widgets.
 * Keep every board, control, value and interaction in place; only tune the
 * type face, optical weight, contrast and line rhythm inside them. */
:root {
  --font-ui: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif !important;
  --font-numeric: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif !important;
  --ui-font: var(--font-ui) !important;
}

html body,
html body button,
html body input,
html body select,
html body output {
  font-family: var(--font-ui) !important;
}

html body {
  line-height: 1.45 !important;
}

html body .tool-title h1,
html body .hero-list-heading h3,
html body .result-header h2,
html body .skill-block > header h2,
html body .right-calculation-details > header h3,
html body .result-stats > header h2,
html body .target-block > header h2,
html body .combat-block > header h2 {
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
}

html body .build-column > .hero-context-block .selected-hero h2 {
  font-family: var(--font-ui) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: .02em !important;
}

html body .build-column > .hero-context-block .selected-hero p,
html body .build-column > .hero-context-block #heroDetailsBtn {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 15px !important;
  letter-spacing: .02em !important;
}

html body .build-column > .equipment-block .equipment-main > span,
html body .build-column > .equipment-block .equipment-main b,
html body .build-column > .equipment-block .equipment-main b small {
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
}

html body .build-column > .equipment-block .equipment-main > span {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}

html body .build-column > .equipment-block .equipment-main b {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 19px !important;
}

html body .build-column > .equipment-block .equipment-main b small {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 17px !important;
}

html body .build-column > .rune-block .rune-summary-row > span,
html body .build-column > .rune-block .rune-picks > span,
html body .build-column > .build-skill-rank .skill-rank-row,
html body .build-column > .combat-block .combat-state-toggle > b,
html body .build-column > .combat-block .combat-choice,
html body .build-column > .combat-block .combat-counter {
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
}

html body .build-column-loadout > .result-stats .compact-stats dt {
  color: #796957 !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
}

html body .build-column-loadout > .result-stats .compact-stats dd {
  color: #493d34 !important;
  font-family: var(--font-numeric) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 23px !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

html body .result-panel .dps-result > span,
html body .result-panel .summary-total > span,
html body .result-panel .result-metrics span,
html body .result-panel > .output-summary > .damage-bars section > header,
html body .result-panel > .right-calculation-details > header span {
  font-family: var(--font-ui) !important;
  color: #756452 !important;
  font-weight: 400 !important;
  letter-spacing: .03em !important;
  line-height: 14px !important;
}

html body .result-panel .dps-result > span,
html body .result-panel .summary-total > span {
  font-size: 10px !important;
}

html body .result-panel .result-metrics span,
html body .result-panel > .output-summary > .damage-bars section > header {
  font-size: 10px !important;
}

html body .result-panel .dps-result strong,
html body .result-panel .summary-total strong,
html body .result-panel .result-metrics strong,
html body .result-panel > .output-summary > .damage-bars .damage-source-total,
html body #calculationBreakdown article b {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
}

html body .result-panel .dps-result strong {
  font-size: 42px !important;
  font-weight: 650 !important;
  line-height: 44px !important;
}

html body .result-panel .summary-total strong {
  font-size: 31px !important;
  font-weight: 650 !important;
  line-height: 32px !important;
}

html body .result-panel .result-metrics strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 17px !important;
}

html body .result-panel > .output-summary > .damage-bars .damage-source-label,
html body .result-panel > .output-summary > .damage-bars .damage-source-total {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  line-height: 16px !important;
}

html body #calculationBreakdown article strong {
  font-family: var(--font-ui) !important;
  color: #756452 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
}

html body #calculationBreakdown article b {
  color: #493d34 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 15px !important;
}

html body #calculationBreakdown article p {
  font-family: var(--font-ui) !important;
  color: #897968 !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
}

html body dialog,
html body dialog button,
html body dialog input,
html body dialog output {
  font-family: var(--font-ui) !important;
}

/* Inscription layout candidate: keep the existing board and data, but give
 * the three live rune summaries a clear internal reading order. */
html body .build-column > .rune-block > header {
  top: 248px !important;
  right: 26px !important;
  left: 26px !important;
  width: auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 6px !important;
}

html body .build-column > .rune-block .rune-summary {
  top: 252px !important;
  right: 26px !important;
  left: 26px !important;
  height: 142px !important;
  min-height: 142px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 18px !important;
}

html body .build-column > .rune-block .rune-summary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 24px minmax(0, 1fr) !important;
  height: 104px !important;
  min-height: 104px !important;
  align-content: start !important;
  align-self: start !important;
  padding: 0 !important;
}

html body .build-column > .rune-block .rune-summary-row > span {
  width: auto !important;
  height: 24px !important;
  gap: 6px !important;
  align-items: center !important;
  color: #6e5a45 !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

html body .build-column > .rune-block .rune-picks {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  align-content: start !important;
  min-height: 0 !important;
}

html body .build-column > .rune-block .rune-picks > span {
  min-height: 24px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  color: #584735 !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

html body .build-column > .rune-block .rune-picks img {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

html body .build-column > .rune-block .rune-summary .stat-summary {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 17px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Board padding candidate: align the lower central sheets to the target
 * sheet's 28px content axis without changing any board geometry. */
html body .build-column > .result-stats {
  padding-right: 28px !important;
  padding-left: 28px !important;
}

html body .build-column > .combat-block {
  padding-right: 28px !important;
  padding-left: 28px !important;
}

/* Right result auxiliary info: keep all existing calculation rows inside the
 * visible result rail at the regular desktop viewport height. */
@media (min-width: 1001px) and (min-height: 901px) {
  html body .result-panel > .right-calculation-details {
    top: 652px !important;
    height: 180px !important;
    min-height: 180px !important;
    padding: 12px 18px 9px !important;
  }

  html body .result-panel > .right-calculation-details > header {
    height: 28px !important;
    min-height: 28px !important;
    padding-bottom: 8px !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown {
    grid-template-rows: repeat(2, 62px) !important;
    height: 124px !important;
    min-height: 124px !important;
    overflow: visible !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article {
    min-height: 62px !important;
    padding: 4px 0 !important;
  }
}

/* Small controls candidate: quiet, shared control tokens without moving any
 * board, module or live data.  These controls are intentionally restrained so
 * the porcelain sheets remain the visual focus. */
html body #resetBtn,
html body .build-column > .hero-context-block #heroDetailsBtn,
html body .build-column > .equipment-block > header button,
html body .build-column > .rune-block > header button {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease !important;
}

html body #resetBtn {
  line-height: 14px !important;
  letter-spacing: .03em !important;
}

html body #resetBtn:hover,
html body #resetBtn:focus-visible {
  border-color: rgba(145, 116, 79, .46) !important;
  background: rgba(255, 252, 244, .54) !important;
  color: #6b5236 !important;
}

html body .build-column > .hero-context-block #heroDetailsBtn {
  line-height: 12px !important;
  letter-spacing: .03em !important;
  border-bottom-color: rgba(131, 105, 78, .34) !important;
}

html body .build-column > .hero-context-block #heroDetailsBtn:hover,
html body .build-column > .hero-context-block #heroDetailsBtn:focus-visible,
html body .build-column > .equipment-block > header button:hover,
html body .build-column > .equipment-block > header button:focus-visible,
html body .build-column > .rune-block > header button:hover,
html body .build-column > .rune-block > header button:focus-visible {
  border-bottom-color: rgba(131, 105, 78, .56) !important;
  background: rgba(255, 252, 244, .22) !important;
  color: #6b5236 !important;
}

html body .build-column > .equipment-block > header button,
html body .build-column > .rune-block > header button {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 7px !important;
  line-height: 14px !important;
  border-bottom-color: rgba(131, 105, 78, .30) !important;
}

html body .build-column > .equipment-block .item-passive-toggle,
html body .build-column > .equipment-block .item-passive-auto,
html body .build-column > .equipment-block .item-proc-control {
  height: 20px !important;
  min-height: 20px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(145, 116, 79, .18) !important;
  border-radius: 2px !important;
  background: rgba(255, 252, 244, .48) !important;
  color: #766550 !important;
  font-size: 9px !important;
  line-height: 12px !important;
  opacity: .82 !important;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease, opacity .14s ease !important;
}

html body .build-column > .equipment-block .item-passive-toggle:hover,
html body .build-column > .equipment-block .item-passive-toggle:focus-visible,
html body .build-column > .equipment-block .item-passive-auto:hover,
html body .build-column > .equipment-block .item-passive-auto:focus-visible,
html body .build-column > .equipment-block .item-proc-control:hover,
html body .build-column > .equipment-block .item-proc-control:focus-visible {
  border-color: rgba(145, 116, 79, .36) !important;
  background: rgba(255, 252, 244, .72) !important;
  color: #6b5236 !important;
  opacity: 1 !important;
}

html body .build-column > .equipment-block .item-passive-toggle.active {
  border-color: rgba(176, 128, 78, .40) !important;
  background: rgba(224, 184, 139, .25) !important;
  color: #6f512d !important;
  opacity: 1 !important;
}

html body .build-column > .build-skill-rank .skill-rank-row button,
html body .build-column > .build-skill-rank .skill-rank-row output {
  box-sizing: border-box !important;
  border-color: rgba(133, 108, 77, .28) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease, opacity .14s ease !important;
}

html body .build-column > .build-skill-rank .skill-rank-row button:hover,
html body .build-column > .build-skill-rank .skill-rank-row button:focus-visible {
  border-color: rgba(133, 108, 77, .48) !important;
  background: rgba(255, 252, 244, .54) !important;
  color: #6b5236 !important;
}

html body .build-column > .build-skill-rank .skill-rank-row output {
  border-color: rgba(133, 108, 77, .24) !important;
  background: rgba(255, 255, 255, .24) !important;
}

html body .build-column > .target-block .target-grid input {
  box-sizing: border-box !important;
  border: 1px solid rgba(145, 116, 79, .12) !important;
  line-height: 18px !important;
}

html body .build-column > .target-block .target-grid input:focus {
  border-color: rgba(133, 110, 80, .32) !important;
}

html body .build-column > .target-block .duration-segments button {
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease !important;
}

html body .build-column > .target-block .duration-segments button.active {
  border-color: rgba(155, 125, 87, .24) !important;
  background: rgba(155, 125, 87, .12) !important;
}

html body .build-column > .target-block .duration-segments button:focus-visible {
  outline: 1px solid rgba(133, 110, 80, .45) !important;
  outline-offset: 2px !important;
}

/* Results auxiliary pass: the live empty skill state has no fabricated rows;
 * let its existing message occupy an intentional quiet center in the fixed
 * paper plate instead of hugging the header. */
@media (min-width: 1001px) {
  html body .result-panel > .skill-block .empty-skill-state {
    min-height: 160px !important;
    padding: 0 18px !important;
  }
}


/* Typography scale candidate · item 2: increase the everyday reading scale
 * one step inside the existing plates. These declarations change only type
 * metrics and contrast; board geometry, line boxes and live content remain
 * owned by the preceding layout rules. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .equipment-block > header h2,
  html body .build-column-loadout > .rune-block > header h2,
  html body .build-column-loadout > .result-stats > header h2,
  html body .build-column-loadout > .combat-block > header h2,
  html body .build-column-loadout > .target-block > header h2,
  html body .result-panel > .skill-block > header h2,
  html body .result-panel > .right-calculation-details > header h3 {
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 650 !important;
  }

  html body .build-column-loadout > .equipment-block > header span,
  html body .build-column-loadout > .target-block > header span,
  html body .build-column-loadout > .combat-block > header span,
  html body .result-panel > .skill-block > header span,
  html body .result-panel > .right-calculation-details > header span,
  html body .build-column-loadout > .result-stats > header span {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  html body .build-column-loadout > .equipment-block .equipment-main > span,
  html body .build-column-loadout > .equipment-block .equipment-main b,
  html body .build-column-loadout > .rune-block .rune-summary-row > span,
  html body .build-column-loadout > .rune-block .rune-picks > span,
  html body .build-column-loadout > .build-skill-rank .skill-rank-row,
  html body .build-column-loadout > .combat-block .combat-state-toggle > b,
  html body .build-column-loadout > .target-block .target-grid label > span,
  html body .build-column-loadout > .equipment-block > header button,
  html body .build-column-loadout > .rune-block > header button {
    font-size: 12px !important;
    line-height: 17px !important;
  }

  html body .build-column-loadout > .equipment-block .equipment-main b small,
  html body .build-column-loadout > .rune-block .rune-summary .stat-summary,
  html body .build-column-loadout > .build-skill-rank .skill-rank-row small,
  html body .build-column-loadout > .combat-block .combat-choice p,
  html body .build-column-loadout > .combat-block .combat-counter p,
  html body .result-panel > .output-summary > .damage-bars section > header,
  html body .result-panel > .right-calculation-details #calculationBreakdown article p {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  html body .build-column-loadout > .result-stats .compact-stats dt {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  html body .build-column-loadout > .result-stats .compact-stats dd {
    font-size: 18px !important;
    line-height: 21px !important;
    font-weight: 650 !important;
  }

  html body .result-panel > .output-summary > .damage-bars section > div {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  html body .result-panel > .output-summary > .damage-bars .damage-source-total,
  html body .result-panel .result-metrics span {
    font-size: 11px !important;
  }

  html body .result-panel > .output-summary > .damage-bars strong,
  html body .result-panel .result-metrics strong {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  html body #calculationBreakdown article strong {
    font-size: 11px !important;
    line-height: 15px !important;
  }

  html body #calculationBreakdown article b {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article p {
    line-height: 14px !important;
  }

  /* The third live detail is a status sentence rather than a numeric pair.
   * Release the legacy 48px child box so its existing sentence stays inside
   * the fixed paper plate instead of being clipped at the lower edge. */
  html body .result-panel > .right-calculation-details #calculationBreakdown article:nth-child(3) > div {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Typography scale candidate · item 2 final detail: make the narrow hero
 * index and the calculation labels readable at the same quiet scale as the
 * central plates. These are type-only refinements; the rail, rows and live
 * calculation content remain unchanged. */
@media (min-width: 1001px) {
  html body .hero-panel .hero-option span {
    color: #6f5d4c !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article strong {
    color: #756452 !important;
    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 15px !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article b {
    color: #493d34 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
  }

  /* Inscription detail pass: keep existing rune names and counts on the
   * warm ink scale instead of the legacy cool blue-gray fallback. */
  html body .build-column-loadout > .rune-block .rune-picks b {
    color: #66513d !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 18px !important;
  }

  /* Lower-board detail pass: keep the live status subtitles readable without
   * changing the independent combat sheet or the target sheet geometry. */
  html body .build-column-loadout > .combat-block > header span,
  html body .build-column-loadout > .target-block > header span {
    color: #756452 !important;
    font-size: 11px !important;
    line-height: 16px !important;
  }

  /* Calculation detail rhythm: the legacy child row reserves 48px even
   * though each live detail is a compact title/value line plus one sentence.
   * Release that stale height for all three existing rows so descriptions
   * stay inside their allocated grid tracks instead of spilling into the
   * next row. The board, rows and live copy remain unchanged. */
  html body .result-panel > .right-calculation-details #calculationBreakdown article {
    padding: 7px 0 !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article > div {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Typography hierarchy pass: lift only the remaining visibly undersized
   * labels and prices. Core DPS/window totals and all board geometry stay at
   * their established emphasis. */
  html body .build-column-loadout > .equipment-block .equipment-main b em {
    color: #493d2e !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 17px !important;
  }

  html body .build-column-loadout > .equipment-block .equipment-main b small {
    color: #8f704c !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  html body .build-column-loadout > .equipment-block .item-passive-toggle,
  html body .build-column-loadout > .equipment-block .item-passive-toggle > span,
  html body .build-column-loadout > .equipment-block .item-passive-toggle > b {
    font-size: 10px !important;
    line-height: 13px !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary .stat-summary {
    color: #806b54 !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  html body .build-column-loadout > .result-stats .compact-stats dt {
    color: #806b54 !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  html body .result-panel .dps-result > span,
  html body .result-panel .summary-total small,
  html body .result-panel > .output-summary > .damage-bars section > header > span:first-child,
  html body .result-panel > .output-summary > .damage-bars section > div > span {
    color: #806b54 !important;
    font-size: 11px !important;
    line-height: 16px !important;
  }

  html body .result-panel > .output-summary > .damage-bars .damage-breakdown-legend {
    color: rgba(102, 87, 72, .66) !important;
    font-size: 9px !important;
    line-height: 15px !important;
  }

  html body .build-column-loadout > .target-block .duration-segments button {
    font-size: 12px !important;
    line-height: 12px !important;
  }
}

/* Inscription layout pass · item 3: the live data intentionally contains one
 * real rune row per colour. Keep each column's heading and row together at
 * the top of its existing track instead of vertically centring the lone row
 * into a large artificial gap. The summary baseline and skill strip remain
 * fixed in their existing positions. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .rune-block .rune-summary-row {
    align-items: start !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks {
    align-self: start !important;
  }
}

/* Small-control pass · item 6: keep different control purposes, but let the
 * rectangular controls share one quiet ink/edge/fill language. Circular
 * skill rank buttons remain circular because their affordance is distinct. */
@media (min-width: 1001px) {
  html body #resetBtn,
  html body .build-column > .hero-context-block #heroDetailsBtn,
  html body .build-column > .equipment-block .item-passive-toggle,
  html body .build-column > .target-block .target-grid input,
  html body .build-column > .target-block .duration-segments button {
    color: #705b45 !important;
    border-color: rgba(145, 116, 79, .24) !important;
    border-radius: 3px !important;
  }

  html body #resetBtn,
  html body .build-column > .equipment-block .item-passive-toggle,
  html body .build-column > .target-block .target-grid input {
    background: rgba(255, 252, 244, .38) !important;
  }

  html body .build-column > .hero-context-block #heroDetailsBtn {
    background: rgba(255, 252, 244, .16) !important;
  }

  html body .build-column > .target-block .duration-segments button {
    background: rgba(255, 252, 244, .18) !important;
  }

  html body #resetBtn:hover,
  html body #resetBtn:focus-visible,
  html body .build-column > .hero-context-block #heroDetailsBtn:hover,
  html body .build-column > .hero-context-block #heroDetailsBtn:focus-visible,
  html body .build-column > .equipment-block .item-passive-toggle:hover,
  html body .build-column > .equipment-block .item-passive-toggle:focus-visible,
  html body .build-column > .target-block .target-grid input:focus,
  html body .build-column > .target-block .duration-segments button:hover,
  html body .build-column > .target-block .duration-segments button:focus-visible {
    color: #604a32 !important;
    border-color: rgba(145, 116, 79, .42) !important;
    background: rgba(255, 252, 244, .62) !important;
  }

  html body .build-column > .target-block .duration-segments button.active {
    color: #604a32 !important;
    border-color: rgba(155, 125, 87, .34) !important;
    background: rgba(224, 184, 139, .22) !important;
  }
}

/* Equipment modal card rhythm · item 1: every tile owns one fixed-height
 * surface. The selected-state quantity stepper sits inside that surface at
 * the bottom instead of becoming a second, floating strip; unselected tiles
 * therefore keep the same outline, baseline and row spacing. */
html body .selection-dialog .item-card-wrap {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  height: 92px !important;
  min-height: 92px !important;
  padding: 0 !important;
  border: 1px solid var(--modal-line) !important;
  border-radius: 4px !important;
  background: var(--modal-paper-soft) !important;
  overflow: hidden !important;
}

html body .selection-dialog .item-card-wrap:not(.selected)::after {
  display: none !important;
  content: none !important;
}

html body .selection-dialog .item-card-wrap:hover,
html body .selection-dialog .item-card-wrap:focus-within {
  border-color: rgba(167, 123, 62, .42) !important;
  background: #f7f1e6 !important;
}

html body .selection-dialog .item-card,
html body .selection-dialog .item-card.selected,
html body .selection-dialog .item-card:hover,
html body .selection-dialog .item-card.inspected {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 92px !important;
  min-height: 0 !important;
  padding: 7px 7px 27px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
}

html body .selection-dialog .item-card-status {
  position: absolute !important;
  z-index: 2 !important;
  inset: auto 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border: 0 !important;
  border-top: 1px solid var(--modal-line-soft) !important;
  border-radius: 0 !important;
  background: rgba(242, 228, 201, .42) !important;
  pointer-events: none !important;
}

html body .selection-dialog .item-card-status > b {
  margin-right: auto !important;
  font-size: 9px !important;
  line-height: 14px !important;
}

html body .selection-dialog .item-card-quantity {
  width: auto !important;
  min-height: 18px !important;
  gap: 4px !important;
  pointer-events: auto !important;
}

html body .selection-dialog .item-card-quantity button {
  width: 20px !important;
  height: 18px !important;
  line-height: 16px !important;
}

html body .selection-dialog .item-inspector .inspector-identity {
  border-bottom-color: var(--modal-line) !important;
}

/* Rune board weight · item 2: strengthen only the existing live rune rows so
 * the three columns read as content, not as placeholder labels. The summary
 * line moves slightly closer to those rows; the wave, board and skill strip
 * remain in their existing tracks. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .rune-block .rune-picks > span {
    gap: 9px !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks img {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks b {
    color: #594635 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 19px !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary .stat-summary {
    bottom: 8px !important;
  }
}

/* Total-attribute hierarchy · item 3: keep the existing grid and values, but
 * let output-driving stats carry the first scan while defensive/support
 * values stay at the regular weight. Zero values recede without introducing
 * a new colour accent. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .result-stats .compact-stats dd {
    font-weight: 500 !important;
  }

  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(2) dd,
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(6) dd,
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(7) dd,
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(8) dd,
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(10) dd {
    font-weight: 650 !important;
  }

  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(3) dd,
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(11) dd,
  html body .build-column-loadout > .result-stats .compact-stats > div:nth-child(12) dd {
    color: #9b8977 !important;
    font-weight: 450 !important;
  }
}

/* Rune dialog controls · item 4: make the frequent count action read as one
 * stepper while leaving the two boundary actions quiet and text-like. The
 * existing data attributes and event delegation remain unchanged. */
html body .selection-dialog .rune-counter {
  display: grid !important;
  grid-template-columns: auto 24px 28px 24px auto !important;
  align-items: center !important;
  column-gap: 0 !important;
}

html body .selection-dialog .rune-counter button[data-rune-zero],
html body .selection-dialog .rune-counter button[data-rune-max] {
  height: 24px !important;
  padding: 0 6px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--modal-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

html body .selection-dialog .rune-counter button[data-rune-zero]:hover,
html body .selection-dialog .rune-counter button[data-rune-zero]:focus-visible,
html body .selection-dialog .rune-counter button[data-rune-max]:hover,
html body .selection-dialog .rune-counter button[data-rune-max]:focus-visible {
  border-color: transparent !important;
  background: var(--modal-gold-soft) !important;
  color: var(--modal-ink) !important;
}

html body .selection-dialog .rune-counter button[data-rune-minus],
html body .selection-dialog .rune-counter button[data-rune-plus] {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: var(--modal-paper) !important;
}

html body .selection-dialog .rune-counter button[data-rune-minus] {
  border-right-width: 0 !important;
  border-radius: 3px 0 0 3px !important;
}

html body .selection-dialog .rune-counter button[data-rune-plus] {
  border-left-width: 0 !important;
  border-radius: 0 3px 3px 0 !important;
}

html body .selection-dialog .rune-counter output {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 28px !important;
  height: 24px !important;
  border-top: 1px solid var(--modal-line) !important;
  border-bottom: 1px solid var(--modal-line) !important;
  background: var(--modal-paper) !important;
  color: var(--modal-ink) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Neutral porcelain temperature pass · user-reported visual drift.
 * The supplied reference reads as white/neutral porcelain; the previous
 * candidate accumulated a yellow cast from paper tokens and warm control
 * washes.  Keep geometry, assets, shadows and the approved equipment artwork
 * intact while cooling only the surrounding text, paper and control surfaces. */
:root {
  --ink: #50565a;
  --ink-soft: #778186;
  --ink-faint: #9aa3a7;
  --warm-line: rgba(127, 139, 144, .22);
  --modal-paper: #f8fafb;
  --modal-paper-soft: #f0f3f4;
  --modal-paper-inset: #e9edef;
  --modal-ink: #4d5559;
  --modal-muted: #747e83;
  --modal-faint: #9ba4a8;
  --modal-line: rgba(126, 139, 145, .24);
  --modal-line-soft: rgba(126, 139, 145, .14);
  --modal-gold-soft: rgba(167, 123, 62, .09);
}

html body {
  color: #50565a !important;
}

/* Shared headings and labels outside the frozen equipment artwork. */
html body .tool-title h1,
html body .hero-list-heading h3,
html body .hero-context-block .selected-hero h2,
html body .rune-block > header h2,
html body .result-stats > header h2,
html body .combat-block > header h2,
html body .target-block > header h2,
html body .result-header h2,
html body .skill-block > header h2,
html body .right-calculation-details > header h3 {
  color: #4d5559 !important;
}

html body .tool-title span,
html body .hero-list-heading span,
html body .hero-context-block .selected-hero p,
html body .rune-block > header span,
html body .result-stats > header span,
html body .combat-block > header span,
html body .target-block > header span,
html body .result-header span,
html body .skill-block > header span,
html body .right-calculation-details > header span,
html body .result-panel .damage-bars section > header,
html body .result-panel .damage-bars section > div {
  color: #778186 !important;
}

/* Battle state and target controls: neutral translucent washes retain the
 * original low-contrast paper treatment without the yellow gradient. */
html body .build-column-loadout > .combat-block .combat-state-toggle,
html body .build-column-loadout > .combat-block .combat-choice,
html body .build-column-loadout > .combat-block .combat-counter {
  border-color: rgba(126, 139, 145, .20) !important;
  background: linear-gradient(90deg, rgba(250, 252, 253, .68), rgba(235, 241, 243, .26) 50%, rgba(250, 252, 253, .56)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .76), inset 0 -1px rgba(113, 129, 136, .05), 0 2px 5px rgba(83, 98, 105, .035) !important;
}

html body .build-column-loadout > .combat-block .combat-state-toggle.active,
html body .build-column-loadout > .combat-block .combat-choice.active,
html body .build-column-loadout > .combat-block .combat-counter.active {
  border-color: rgba(139, 153, 158, .32) !important;
  background: linear-gradient(90deg, rgba(234, 241, 243, .72), rgba(211, 225, 229, .38) 52%, rgba(248, 251, 252, .54)) !important;
}

html body .build-column-loadout > .target-block .target-grid input {
  border-bottom-color: rgba(126, 139, 145, .34) !important;
  background: linear-gradient(180deg, rgba(249, 251, 252, .66), rgba(237, 242, 243, .28)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72) !important;
  color: #50585c !important;
}

html body .build-column-loadout > .target-block .duration-segments button {
  border-color: rgba(126, 139, 145, .22) !important;
  background: rgba(248, 251, 252, .34) !important;
  color: #788288 !important;
}

html body .build-column-loadout > .target-block .duration-segments button.active {
  border-color: rgba(139, 153, 158, .40) !important;
  background: rgba(211, 225, 229, .32) !important;
  color: #566167 !important;
}

/* The result rail keeps its blue/orange metrics; only neutral labels and
 * dividers are cooled to match the reference paper. */
html body .result-panel .summary-identity span,
html body .result-panel .summary-identity small,
html body .result-panel .dps-result > span,
html body .result-panel .dps-result small,
html body .result-panel .result-metrics span,
html body .result-panel .result-metrics strong,
html body .result-panel .summary-total small,
html body .result-panel .damage-bars strong,
html body .result-panel #calculationBreakdown article strong,
html body .result-panel #calculationBreakdown article b,
html body .result-panel #calculationBreakdown article p {
  color: #737d82 !important;
}

html body .result-panel .result-metrics strong,
html body .result-panel #calculationBreakdown article b {
  color: #515a5e !important;
}

html body .result-panel .compact-stats > div {
  border-right-color: rgba(126, 139, 145, .14) !important;
  border-bottom-color: rgba(126, 139, 145, .12) !important;
}

/* Selection dialogs inherit the same neutral paper temperature; gold remains
 * reserved for selected/focus affordances. */
html body dialog {
  box-shadow: 0 18px 48px rgba(65, 78, 84, .16), 0 3px 10px rgba(65, 78, 84, .08) !important;
}

html body dialog::backdrop {
  background: rgba(61, 74, 80, .20) !important;
}

html body .selection-dialog .item-card-wrap:hover,
html body .selection-dialog .item-card-wrap:focus-within,
html body .selection-dialog .item-card:hover,
html body .selection-dialog .item-card.inspected,
html body .selection-dialog .rune-row:hover {
  background: #f3f6f7 !important;
}

html body .selection-dialog .item-card.selected,
html body .selection-dialog .rune-row.active {
  background: #eef3f4 !important;
}

html body .selection-dialog .item-card-status {
  background: rgba(225, 234, 236, .48) !important;
}

/* Match the specificity of the earlier desktop typography layer so the
 * temperature correction reaches labels that carry their own warm tokens. */
@media (min-width: 1001px) {
  html body .build-column-loadout > .rune-block > header h2,
  html body .build-column-loadout > .result-stats > header h2,
  html body .build-column-loadout > .combat-block > header h2,
  html body .result-panel > .skill-block > header h2,
  html body .result-panel > .right-calculation-details > header h3 {
    color: #4d5559 !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary .stat-summary,
  html body .build-column-loadout > .result-stats .compact-stats dt,
  html body .result-panel .dps-result > span,
  html body .result-panel .summary-total small,
  html body .result-panel > .output-summary > .damage-bars section > header > span:first-child,
  html body .result-panel > .output-summary > .damage-bars section > div > span {
    color: #778186 !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article strong {
    color: #737d82 !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article b {
    color: #515a5e !important;
  }

  html body .result-panel > .right-calculation-details #calculationBreakdown article p {
    color: #7d878b !important;
  }

  html body .build-column-loadout > .combat-block .combat-state-toggle > small,
  html body .build-column-loadout > .combat-block .combat-choice p,
  html body .build-column-loadout > .combat-block .combat-counter p {
    color: #778186 !important;
  }

  html body .build-column-loadout > .target-block > header span,
  html body .build-column-loadout > .combat-block > header span {
    color: #778186 !important;
  }
}

/* Local state surfaces · Sun Quan empty/skill states. The historical base
 * sheet still supplies dark fallback tokens for these two live elements;
 * rebind only their surfaces here so the porcelain result rail stays neutral.
 * No content, dimensions or input semantics change. */
html body .build-column-loadout .empty-combat-state,
html body .result-panel .empty-combat-state {
  box-sizing: border-box !important;
  border: 1px dashed rgba(126, 139, 145, .24) !important;
  border-radius: 4px !important;
  background: rgba(248, 250, 251, .72) !important;
  color: #7a858a !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7) !important;
}

html body .result-panel .skill-number-input input {
  box-sizing: border-box !important;
  border: 1px solid rgba(126, 139, 145, .32) !important;
  border-radius: 3px !important;
  background: rgba(248, 250, 251, .84) !important;
  color: #50585c !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72) !important;
}

html body .build-column > .equipment-block .equipment-remove {
  display: grid !important;
  place-items: center !important;
  opacity: .86 !important;
  background: rgba(248, 250, 251, .82) !important;
  border: 1px solid rgba(126, 139, 145, .28) !important;
  color: #68757b !important;
  font-size: 13px !important;
  line-height: 15px !important;
  box-shadow: 0 1px 3px rgba(70, 83, 90, .12) !important;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease !important;
}

html body .build-column > .equipment-block .equipment-remove:hover,
html body .build-column > .equipment-block .equipment-remove:focus-visible {
  opacity: 1 !important;
  background: #ffffff !important;
  color: #4f5b60 !important;
}

/* Hero emphasis, scoped to the existing hero plate only. The original poster
 * is used as a low-opacity, left-side wash behind the portrait; the fade ends
 * before the level rail so the right side of the plate remains untouched. */
html body .build-column > .hero-context-block {
  position: relative !important;
  overflow: hidden !important;
  --hero-poster: url("assets/posters/169.webp");
  --hero-accent: #b38a52;
  --hero-accent-wash: rgba(179, 138, 82, .30);
  --hero-accent-line: rgba(151, 111, 61, .68);
  --hero-accent-ink: #76552f;
}

html body .build-column > .hero-context-block::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 6px !important;
  left: 6px !important;
  width: 321px !important;
  height: 116px !important;
  pointer-events: none !important;
  content: "" !important;
  background-image: linear-gradient(90deg, var(--hero-accent-wash), rgba(255, 255, 255, .10)), var(--hero-poster) !important;
  background-repeat: no-repeat !important;
  background-size: auto 158px !important;
  background-position: calc(100% + 42px) center !important;
  opacity: .25 !important;
  filter: saturate(.72) brightness(1.08) contrast(.94) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .96) 42%, rgba(0, 0, 0, .50) 72%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .96) 42%, rgba(0, 0, 0, .50) 72%, transparent 100%) !important;
}

html body .build-column > .hero-context-block > .selected-hero,
html body .build-column > .hero-context-block > .level-row,
html body .build-column > .hero-context-block > .hero-boost-row {
  position: absolute !important;
  z-index: 2 !important;
}

html body .build-column > .hero-context-block .selected-hero {
  grid-template-columns: 80px 118px !important;
  column-gap: 11px !important;
}

html body .build-column > .hero-context-block .selected-hero img {
  flex-basis: 80px !important;
  width: 80px !important;
  height: 80px !important;
  border-color: var(--hero-accent-line) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .68), 0 2px 6px rgba(61, 74, 80, .12) !important;
}

html body #selectedHeroName {
  font-size: 24px !important;
  line-height: 28px !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
  color: var(--hero-accent-ink) !important;
}

html body .build-column > .hero-context-block .selected-hero p {
  font-size: 11px !important;
  line-height: 14px !important;
}

/* Hero-specific rail cue: keep the existing level rail geometry, but let its
 * filled segment and thumb echo the current hero accent.  This is intentionally
 * limited to the hero plate; the neutral remainder and all neighboring boards
 * stay unchanged. */
html body .build-column > .hero-context-block .level-row input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--hero-accent-line) 0 var(--level-progress), rgba(127, 105, 84, .2) var(--level-progress) 100%) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-webkit-slider-thumb {
  border-color: var(--hero-accent-line) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-moz-range-progress {
  background: var(--hero-accent-line) !important;
}

html body .build-column > .hero-context-block .level-row input[type="range"]::-moz-range-thumb {
  border-color: var(--hero-accent-line) !important;
}

/* Hero identity refinement: give the existing name/title column enough room
 * for long hero names while shortening only the right-side control half of
 * this 800px plate.  The board, level rail height and outer three-column
 * layout remain unchanged. */
html body .build-column > .hero-context-block::before {
  opacity: .36 !important;
  filter: saturate(.95) brightness(1.07) contrast(.98) !important;
}

html body #selectedHeroName {
  color: #303438 !important;
}

@media (min-width: 1001px) {
  html body .build-column > .hero-context-block .selected-hero {
    width: 310px !important;
    gap: 9px !important;
    padding-right: 10px !important;
  }

  html body .build-column > .hero-context-block .selected-hero img {
    flex-basis: 76px !important;
    width: 76px !important;
    height: 76px !important;
  }

  html body .build-column > .hero-context-block .selected-hero > div {
    flex: 0 0 205px !important;
    width: 205px !important;
  }

  html body .build-column > .hero-context-block .level-row,
  html body .build-column > .hero-context-block .hero-boost-row {
    left: 325px !important;
  }
}

/* Identity micro-alignment: nudge the portrait and copy together without
 * moving the established divider, then share one left edge for the hero name,
 * title and details action. */
@media (min-width: 1001px) {
  html body .build-column > .hero-context-block .selected-hero {
    padding-left: 4px !important;
  }

  html body .build-column > .hero-context-block #heroDetailsBtn {
    left: 89px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* Keep the real corner metalwork above the poster wash.  The poster remains
 * continuous through the identity rail, while its four clipped corners leave
 * the perimeter asset's diagonal brackets fully opaque. */
html body .build-column > .hero-context-block::before {
  clip-path: polygon(
    0 10px,
    10px 0,
    100% 0,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  ) !important;
}

/* Corner repair: redraw the original perimeter metal through a cleaned,
 * antialiased local mask above the dynamic poster wash. Transparent areas
 * remain transparent, so the poster pattern stays visible around the trim. */
html body .build-column > .hero-context-block::after {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  content: "" !important;
  background: url("assets/hero-context-corner-metal-overlay-right-edge-fix.png") center / 100% 100% no-repeat !important;
}

/* Hero plate micro-alignment: close the two opposing gaps by a few pixels.
 * The portrait/name group moves inward from the left; the level rail keeps
 * its width but shifts inward from the right.  No sheet, divider, or control
 * row geometry changes. */
@media (min-width: 1001px) {
  html body .build-column > .hero-context-block .selected-hero {
    left: 22px !important;
  }

  html body .build-column > .hero-context-block .level-row {
    left: 317px !important;
    right: 26px !important;
  }
}

@font-face {
  font-family: "Teko";
  src: url("assets/fonts/Teko-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Result emphasis pass: retain the approved geometry and content order. */
@media (min-width: 1001px) {
  html body .result-panel .dps-result strong {
    margin-top: 2px !important;
    color: #df5727 !important;
    font-family: "Teko", "Barlow Condensed", "Arial Narrow", sans-serif !important;
    font-size: 52px !important;
    font-weight: 600 !important;
    line-height: 50px !important;
    letter-spacing: .005em !important;
    text-shadow: 0 1px rgba(255, 255, 255, .82), 0 3px 10px rgba(223, 87, 39, .16) !important;
  }

  html body .result-panel .dps-result > span {
    color: #9a593d !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: .09em !important;
  }

  html body .result-panel .dps-result small {
    margin-top: 2px !important;
    font-size: 9px !important;
    letter-spacing: .04em !important;
  }

  html body .result-panel .summary-total strong {
    margin-top: 4px !important;
    color: #0086b3 !important;
    font-family: "Teko", "Barlow Condensed", "Arial Narrow", sans-serif !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    letter-spacing: .01em !important;
    text-shadow: 0 1px rgba(255, 255, 255, .80), 0 3px 9px rgba(0, 134, 179, .18) !important;
  }

  html body .result-panel .summary-total > span {
    color: #39778a !important;
  }

  html body .result-panel .result-metrics span {
    font-size: 8px !important;
    font-weight: 450 !important;
    letter-spacing: .035em !important;
  }

  html body .result-panel .result-metrics strong {
    margin-top: 2px !important;
    font-size: 13px !important;
    font-weight: 550 !important;
    line-height: 16px !important;
  }

  html body .result-panel > .output-summary > .damage-bars i {
    height: 9px !important;
  }
}

@media (max-width: 1000px) {
  html body .result-panel .dps-result strong { color: #df5727 !important; }
  html body .result-panel .dps-result > span { color: #9a593d !important; }
  html body .result-panel .summary-total strong { color: #0086b3 !important; }
  html body .result-panel .summary-total > span { color: #39778a !important; }
}

/* Real rune art has generous transparent padding: a 36px image box shows the
 * jewel itself at roughly 25px. Keep the three existing tracks and bare sheet. */
@media (min-width: 1001px) {
  html body .build-column > .rune-block .rune-summary {
    height: 156px !important;
    min-height: 156px !important;
  }

  html body .build-column > .rune-block .rune-summary-row {
    height: 132px !important;
    min-height: 132px !important;
    grid-template-rows: 18px minmax(0, 1fr) !important;
    row-gap: 2px !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary-row > span {
    height: 18px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  html body .build-column-loadout > .rune-block .rune-red > span { color: #985f5b !important; }
  html body .build-column-loadout > .rune-block .rune-blue > span { color: #5c7e92 !important; }
  html body .build-column-loadout > .rune-block .rune-green > span { color: #687e5c !important; }

  html body .build-column-loadout > .rune-block .rune-picks {
    max-height: 112px !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    scrollbar-width: thin !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks > span {
    display: grid !important;
    grid-template-columns: 36px max-content max-content !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 36px !important;
    gap: 8px !important;
    padding-right: 2px !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks img {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    flex: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 2px rgba(63, 56, 49, .18)) !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks .rune-name {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #454b4d !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .build-column-loadout > .rune-block .rune-picks .rune-count {
    color: #798389 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary .stat-summary {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 18px !important;
    bottom: 2px !important;
    margin: 0 !important;
    color: #69757a !important;
    line-height: 16px !important;
  }

  html body .build-column-loadout > .rune-block .stat-summary > b {
    flex: 0 0 auto !important;
    color: #4d5559 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  html body .build-column-loadout > .rune-block .stat-summary > span {
    min-width: 0 !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary:not(:has(.rune-picks > span:nth-child(2))) .stat-summary {
    bottom: 50px !important;
  }

  html body .build-column-loadout > .rune-block .rune-summary:has(.rune-picks > span:nth-child(2)):not(:has(.rune-picks > span:nth-child(3))) .stat-summary {
    bottom: 36px !important;
  }
}

/* Short, event-driven feedback. The live combat rows are recreated on each
 * render, so a transient wash on the new row communicates the state change
 * without altering the settled palette or the approved board geometry. */
:root {
  --feedback-duration: 190ms;
  --feedback-ease: cubic-bezier(.2, .7, .2, 1);
}

html body .build-column-loadout > .combat-block .combat-feedback,
html body .build-column-loadout > .combat-block .choice-segments button.combat-feedback {
  position: relative !important;
}

html body .build-column-loadout > .combat-block .combat-feedback::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(225, 242, 247, .18);
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: combat-wash var(--feedback-duration) var(--feedback-ease) backwards;
}

html body .build-column-loadout > .combat-block .combat-feedback.active::after {
  background: rgba(88, 159, 181, .15);
}

@keyframes combat-wash {
  from { opacity: 1; }
  to { opacity: 0; }
}

html body dialog[open] {
  animation: dialog-enter var(--feedback-duration) var(--feedback-ease) backwards;
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html body dialog[open] { animation: none; }
  html body .build-column-loadout > .combat-block .combat-feedback::after { animation: none; content: none; }
}

@media (forced-colors: active) {
  html body .build-column-loadout > .combat-block .combat-feedback::after { content: none; }
}

/* Numeric change feedback stays inside each existing result cell. It does not
 * reserve layout space or alter the settled value hierarchy. */
html body .result-panel .dps-result,
html body .result-panel .summary-total {
  position: relative !important;
}

html body .result-panel .dps-result > .result-delta,
html body .result-panel .summary-total > .result-delta {
  position: absolute !important;
  z-index: 2;
  top: 5px;
  right: 7px;
  color: #087b9f !important;
  font-family: "Teko", "Arial Narrow", sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em !important;
  line-height: 20px !important;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px rgba(255, 255, 255, .9);
  white-space: nowrap;
  animation: result-delta-float 850ms ease-out backwards;
}

html body .result-panel .dps-result > .result-delta.loss,
html body .result-panel .summary-total > .result-delta.loss { color: #bf4a3b !important; }

@keyframes result-delta-float {
  0% { opacity: 0; transform: translateY(4px); }
  18% { opacity: 1; transform: translateY(0); }
  68% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  html body .result-panel .dps-result > .result-delta,
  html body .result-panel .summary-total > .result-delta { animation: none; opacity: 1; }
}

@media (forced-colors: active) {
  html body .result-panel .dps-result > .result-delta,
  html body .result-panel .summary-total > .result-delta { color: CanvasText !important; text-shadow: none; }
}

html body .build-column-loadout > .result-stats #heroStats dd {
  font-variant-numeric: tabular-nums !important;
}

/* Selection dialogs: keep the fixed grid and hit areas, but let the artwork
 * and labels lead instead of drawing every cell as a bordered card. */
html body .selection-dialog .item-card-wrap {
  border-color: transparent !important;
  background: transparent !important;
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

html body .selection-dialog .item-card-wrap:not(.selected):hover,
html body .selection-dialog .item-card-wrap:not(.selected):focus-within {
  border-color: rgba(126, 151, 159, .16) !important;
  background: #edf3f5 !important;
}

html body .selection-dialog .item-card-wrap.selected {
  border-color: rgba(132, 155, 162, .36) !important;
  background: #edf3f4 !important;
}

html body .selection-dialog .item-card-wrap.selected:hover,
html body .selection-dialog .item-card-wrap.selected:focus-within {
  border-color: rgba(120, 149, 158, .56) !important;
  background: #e8f0f2 !important;
}

html body .selection-dialog .item-card-wrap:not(.selected) .item-card {
  padding-bottom: 7px !important;
}

html body .selection-dialog .item-card:not(.selected) > b {
  color: var(--modal-muted) !important;
  opacity: .42 !important;
  transition: opacity 160ms ease !important;
}

html body .selection-dialog .item-card:not(.selected):hover > b,
html body .selection-dialog .item-card:not(.selected):focus-visible > b {
  opacity: .9 !important;
}

html body .selection-dialog .item-card:focus-visible,
html body .selection-dialog .rune-counter button:focus-visible {
  outline: 2px solid #7198a5 !important;
  outline-offset: -2px !important;
}

html body .selection-dialog .item-card-status {
  border-top-color: rgba(131, 157, 165, .20) !important;
  background: rgba(218, 231, 234, .45) !important;
}

html body .selection-dialog .item-inspector {
  padding: 4px 8px 4px 18px !important;
  border: 0 !important;
  border-left: 1px solid var(--modal-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .selection-dialog .item-inspector .inspector-identity {
  padding-bottom: 14px !important;
  border-bottom-color: var(--modal-line-soft) !important;
}

html body .selection-dialog .item-inspector section {
  padding: 13px 0 3px !important;
  border-bottom: 0 !important;
}

html body .selection-dialog .item-inspector section + section {
  padding-top: 16px !important;
}

html body .selection-dialog .item-inspector .detail-passive-note,
html body .selection-dialog .item-inspector .coverage-note {
  margin-top: 15px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .selection-dialog .rune-row {
  border-color: transparent !important;
  background: transparent !important;
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

html body .selection-dialog .rune-row:hover,
html body .selection-dialog .rune-row:focus-within {
  border-color: rgba(126, 151, 159, .16) !important;
  background: #edf3f5 !important;
}

html body .selection-dialog .rune-row.active {
  border-color: rgba(143, 160, 165, .36) !important;
  background: #eef3f4 !important;
}

html body .selection-dialog .rune-row.active:hover,
html body .selection-dialog .rune-row.active:focus-within {
  border-color: rgba(132, 154, 162, .52) !important;
  background: #eaf1f3 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .selection-dialog .item-card-wrap,
  html body .selection-dialog .item-card:not(.selected) > b,
html body .selection-dialog .rune-row {
transition: none !important;
}
}


/* Dialog controls: text identifies categories, circular actions change
 * quantities, and only the final action receives a solid button surface. */
html body .selection-dialog .rune-type-tabs {
  gap: 12px !important;
}
html body .selection-dialog .rune-type-tabs button {
  position: relative !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #69747a !important;
  font-size: 13px !important;
}
html body .selection-dialog .rune-type-tabs button:hover,
html body .selection-dialog .rune-type-tabs button.selected {
  border: 0 !important;
  background: transparent !important;
  color: #39474d !important;
}
html body .selection-dialog .rune-type-tabs button b {
  color: #88949a !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
html body .selection-dialog .rune-type-tabs button::after {
  position: absolute !important;
  bottom: 2px !important;
  left: calc(50% - 13px) !important;
  width: 26px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: transparent !important;
  content: '' !important;
}
html body .selection-dialog .rune-type-tabs .rune-red.selected::after { background: #b7635d !important; }
html body .selection-dialog .rune-type-tabs .rune-blue.selected::after { background: #5d8eaf !important; }
html body .selection-dialog .rune-type-tabs .rune-green.selected::after { background: #6e9a79 !important; }
html body .selection-dialog .rune-type-tabs button:focus-visible,
html body .selection-dialog .filter-tabs button:focus-visible {
  outline: 2px solid #7198a5 !important;
  outline-offset: -2px !important;
}

html body .selection-dialog .filter-tabs {
  gap: 4px !important;
  align-items: center !important;
}
html body .selection-dialog .filter-tabs button {
  position: relative !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #6e797e !important;
}
html body .selection-dialog .filter-tabs button:hover,
html body .selection-dialog .filter-tabs button.selected {
  border: 0 !important;
  background: transparent !important;
  color: #3d5058 !important;
}
html body .selection-dialog .filter-tabs button.selected::after {
  position: absolute !important;
  bottom: 1px !important;
  left: 8px !important;
  right: 8px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #7d9aa5 !important;
  content: '' !important;
}
html body .selection-dialog .search-control input {
  border-radius: 7px !important;
  background: #f8fafb !important;
}

html body .selection-dialog .item-card-wrap.selected {
  border-color: transparent !important;
  background: transparent !important;
}
html body .selection-dialog .item-card.selected {
  background: transparent !important;
}
html body .selection-dialog .item-card-wrap.selected:hover,
html body .selection-dialog .item-card-wrap.selected:focus-within {
  border-color: rgba(126, 151, 159, .16) !important;
  background: #edf3f5 !important;
}
html body .selection-dialog .item-card-wrap.selected:hover .item-card,
html body .selection-dialog .item-card-wrap.selected:focus-within .item-card {
  background: transparent !important;
}
html body .selection-dialog .item-card,
html body .selection-dialog .item-card-wrap:not(.selected) .item-card {
  position: relative !important;
  padding-bottom: 27px !important;
}
html body .selection-dialog .item-card strong { font-size: 13px !important; }
html body .selection-dialog .item-card small { font-size: 11px !important; }
html body .selection-dialog .item-card-selected-mark {
  position: absolute !important;
  top: 6px !important;
  right: 7px !important;
  display: grid !important;
  place-items: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #668f94 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body .selection-dialog .item-card-action {
  position: absolute !important;
  z-index: 2 !important;
  right: 7px !important;
  bottom: 5px !important;
  display: flex !important;
  align-items: center !important;
  height: 24px !important;
  pointer-events: none !important;
}
html body .selection-dialog .item-card-action > span {
  color: #899398 !important;
  font-size: 10px !important;
  opacity: .6 !important;
}
html body .selection-dialog .item-card-wrap:hover .item-card-action > span,
html body .selection-dialog .item-card-wrap:focus-within .item-card-action > span { opacity: 1 !important; }
html body .selection-dialog .item-card-action .item-card-quantity {
  min-height: 22px !important;
  gap: 4px !important;
  pointer-events: auto !important;
}
html body .selection-dialog .item-card-action .item-card-quantity button {
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(124, 144, 151, .34) !important;
  border-radius: 50% !important;
  background: #f8fafb !important;
  line-height: 20px !important;
}
html body .selection-dialog .item-card-action .item-card-quantity output {
  min-width: 18px !important;
  color: #476f78 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html body .selection-dialog .item-card-action .item-card-quantity button:focus-visible {
  outline: 2px solid #7198a5 !important;
  outline-offset: 2px !important;
}

html body #itemsDialog .dialog-header .close-button,
html body #runesDialog .dialog-header .close-button {
  min-width: 66px !important;
  min-height: 32px !important;
  border: 1px solid #477185 !important;
  border-radius: 7px !important;
  background: #477185 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
html body #itemsDialog .dialog-header .close-button:hover,
html body #runesDialog .dialog-header .close-button:hover {
  border-color: #345c70 !important;
  background: #345c70 !important;
  color: #fff !important;
}
html body #itemsDialog .dialog-header .close-button:focus-visible,
html body #runesDialog .dialog-header .close-button:focus-visible {
  outline: 2px solid #294b60 !important;
  outline-offset: 2px !important;
}

@media (forced-colors: active) {
  html body .selection-dialog .rune-type-tabs button.selected,
  html body .selection-dialog .filter-tabs button.selected,
  html body .selection-dialog .item-card-wrap.selected { outline: 1px solid Highlight !important; }
  html body .selection-dialog .rune-art.selected::after { background: Highlight !important; }
  html body .selection-dialog .item-card-selected-mark { background: Highlight !important; color: HighlightText !important; }
}

/* The rune name/attributes and the five controls form one horizontal unit.
 * Each column uses the same control start, with no enclosing stepper frame. */
html body .selection-dialog .rune-row,
html body .selection-dialog .rune-row.active {
  grid-template-columns: 50px minmax(0, 198px) 160px !important;
  justify-content: start !important;
  column-gap: 9px !important;
  border-color: transparent !important;
  background: transparent !important;
}
html body .selection-dialog .rune-row:hover,
html body .selection-dialog .rune-row:focus-within,
html body .selection-dialog .rune-row.active:hover,
html body .selection-dialog .rune-row.active:focus-within {
  border-color: transparent !important;
  background: rgba(126, 151, 159, .055) !important;
}
html body .selection-dialog .rune-art {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
}
html body .selection-dialog .rune-art img { display: block !important; }
html body .selection-dialog .rune-art.selected::after {
  position: absolute !important;
  right: 1px !important;
  bottom: 2px !important;
  width: 7px !important;
  height: 7px !important;
  border: 2px solid var(--modal-paper) !important;
  border-radius: 50% !important;
  background: #a75c4f !important;
  content: '' !important;
}
html body .selection-dialog .rune-copy { min-width: 0 !important; }
html body .selection-dialog .rune-copy h3 {
  color: #3f4447 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 19px !important;
}
html body .selection-dialog .rune-copy p {
  margin-top: 2px !important;
  color: #697176 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
html body .selection-dialog .rune-inline-counter {
  display: grid !important;
  width: 160px !important;
  grid-template-columns: 24px 32px 28px 32px 24px !important;
  align-items: center !important;
  column-gap: 5px !important;
  justify-self: start !important;
}
html body .selection-dialog .rune-inline-counter button[data-rune-zero],
html body .selection-dialog .rune-inline-counter button[data-rune-max] {
  position: relative !important;
  width: 24px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #87949a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -.16em !important;
}
html body .selection-dialog .rune-inline-counter button[data-rune-minus],
html body .selection-dialog .rune-inline-counter button[data-rune-plus] {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(124, 144, 151, .34) !important;
  border-radius: 50% !important;
  background: #f8fafb !important;
  color: #52636a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
}
html body .selection-dialog .rune-inline-counter output {
  display: block !important;
  width: 28px !important;
  height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f4c43 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}
html body .selection-dialog .rune-inline-counter button[data-rune-zero]:hover,
html body .selection-dialog .rune-inline-counter button[data-rune-max]:hover {
  background: transparent !important;
  color: #96594f !important;
}
html body .selection-dialog .rune-inline-counter button[data-hint]::after {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  bottom: calc(100% + 4px) !important;
  padding: 3px 6px !important;
  border: 1px solid var(--modal-line) !important;
  border-radius: 4px !important;
  background: var(--modal-paper) !important;
  color: var(--modal-ink) !important;
  content: attr(data-hint) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}
html body .selection-dialog .rune-inline-counter button[data-hint]:hover::after,
html body .selection-dialog .rune-inline-counter button[data-hint]:focus-visible::after {
  opacity: 1 !important;
}
html body .selection-dialog .rune-inline-counter button:disabled,
html body .selection-dialog .item-card-quantity button:disabled {
  opacity: .32 !important;
  cursor: not-allowed !important;
}
html body .selection-dialog .rune-inline-counter button:disabled:hover,
html body .selection-dialog .item-card-quantity button:disabled:hover {
  border-color: rgba(124, 144, 151, .34) !important;
  background: #f8fafb !important;
  color: #52636a !important;
}
html body .selection-dialog .rune-inline-counter button[data-hint]:disabled:hover {
  border: 0 !important;
  background: transparent !important;
  color: #87949a !important;
}
html body .selection-dialog .rune-inline-counter button:focus-visible {
  outline: 2px solid #7198a5 !important;
  outline-offset: 2px !important;
}

/* Equipment uses the same circle/number language below its price, at the
 * same position before and after selection. The marker stays by the name. */
html body .selection-dialog .item-card-name {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 4px !important;
}
html body .selection-dialog .item-card-name strong { min-width: 0 !important; }
html body .selection-dialog .item-card-selected-mark {
  position: static !important;
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 13px !important;
  font-size: 9px !important;
}
html body .selection-dialog .item-card-action {
  right: auto !important;
  left: 60px !important;
  bottom: 5px !important;
  height: 24px !important;
}
html body .selection-dialog .item-card-action > span {
  display: flex !important;
  align-items: center !important;
  height: 24px !important;
}
html body .selection-dialog .item-card-action .item-card-quantity button {
  width: 24px !important;
  height: 24px !important;
  line-height: 22px !important;
}
html body .selection-dialog .item-card-action .item-card-quantity output {
  min-width: 20px !important;
  font-variant-numeric: tabular-nums !important;
}

@media (pointer: coarse) {
  html body .selection-dialog .rune-row,
  html body .selection-dialog .rune-row.active {
    grid-template-columns: 50px minmax(0, 170px) 224px !important;
    min-height: 84px !important;
  }
  html body .selection-dialog .rune-inline-counter {
    width: 224px !important;
    grid-template-columns: 44px 44px 28px 44px 44px !important;
  }
  html body .selection-dialog .rune-inline-counter button[data-rune-zero],
  html body .selection-dialog .rune-inline-counter button[data-rune-minus],
  html body .selection-dialog .rune-inline-counter button[data-rune-plus],
  html body .selection-dialog .rune-inline-counter button[data-rune-max] {
    width: 44px !important;
    height: 44px !important;
  }
  html body .selection-dialog .rune-inline-counter output { height: 44px !important; line-height: 44px !important; }
}
@media (max-width: 560px) {
  html body .selection-dialog .rune-row,
  html body .selection-dialog .rune-row.active {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    min-height: 104px !important;
    row-gap: 4px !important;
  }
  html body .selection-dialog .rune-inline-counter {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* Dialog feedback: hovering a quantity button must not turn its parent into
 * a card. Keep selection on the check/dot and focus on the focused control. */
html body .selection-dialog .item-card-wrap,
html body .selection-dialog .item-card-wrap.selected,
html body .selection-dialog .item-card-wrap:hover,
html body .selection-dialog .item-card-wrap.selected:hover,
html body .selection-dialog .item-card-wrap:focus-within,
html body .selection-dialog .item-card-wrap.selected:focus-within,
html body .selection-dialog .rune-row,
html body .selection-dialog .rune-row.active,
html body .selection-dialog .rune-row:hover,
html body .selection-dialog .rune-row.active:hover,
html body .selection-dialog .rune-row:focus-within,
html body .selection-dialog .rune-row.active:focus-within {
  border-color: transparent !important;
  background: transparent !important;
}

@media (hover: hover) {
  html body .selection-dialog .item-card-wrap:hover:not(:has(.item-card-quantity button:hover)),
  html body .selection-dialog .rune-row:hover:not(:has(.rune-counter button:hover)) {
    background: rgba(91, 98, 101, .025) !important;
  }
  html body .selection-dialog .item-card-wrap:hover:not(:has(.item-card-quantity button:hover)) .item-card-name strong,
  html body .selection-dialog .rune-row:hover:not(:has(.rune-counter button:hover)) .rune-copy h3 {
    color: #293337 !important;
  }
}

html body .selection-dialog .item-card:hover,
html body .selection-dialog .item-card.inspected,
html body .selection-dialog .item-card.selected:hover,
html body .selection-dialog .item-card-wrap.selected:hover .item-card,
html body .selection-dialog .item-card-wrap.selected:focus-within .item-card {
  border-color: transparent !important;
  background: transparent !important;
}

html body .selection-dialog .item-card:focus-visible {
  outline: 2px solid #7198a5 !important;
  outline-offset: -2px !important;
}

html body .selection-dialog .rune-inline-counter {
  grid-template-columns: 28px 32px 28px 32px 28px !important;
  column-gap: 3px !important;
}
html body .selection-dialog .rune-inline-counter button[data-rune-zero],
html body .selection-dialog .rune-inline-counter button[data-rune-max] {
  width: 28px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
html body .selection-dialog .rune-row:not(.active) .rune-inline-counter output {
  color: #899397 !important;
  font-weight: 500 !important;
}
html body .selection-dialog .rune-row.rune-red.active .rune-inline-counter output { color: #a7534b !important; }
html body .selection-dialog .rune-row.rune-blue.active .rune-inline-counter output { color: #537f9d !important; }
html body .selection-dialog .rune-row.rune-green.active .rune-inline-counter output { color: #618469 !important; }

@media (pointer: coarse) {
  html body .selection-dialog .rune-inline-counter {
    grid-template-columns: 44px 44px 28px 44px 44px !important;
    column-gap: 5px !important;
  }
}

@media (forced-colors: active) {
  html body .selection-dialog .item-card-wrap.selected,
  html body .selection-dialog .rune-row.active {
    outline: 1px solid Highlight !important;
    outline-offset: -1px !important;
  }
}

/* Compact equipment rows and clearer, asset-matched rune feedback. */
html body #itemsDialog .dialog-header,
html body #runesDialog .dialog-header {
  min-height: 32px !important;
  padding-bottom: 9px !important;
}

html body #itemsDialog .item-card-wrap {
  height: 80px !important;
  min-height: 80px !important;
}
html body #itemsDialog .item-card,
html body #itemsDialog .item-card.selected,
html body #itemsDialog .item-card:hover,
html body #itemsDialog .item-card.inspected,
html body #itemsDialog .item-card-wrap:not(.selected) .item-card {
  height: 80px !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 7px 36px 7px 7px !important;
}
html body #itemsDialog .item-card-action {
  top: 4px !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  width: 26px !important;
  height: 72px !important;
}
html body #itemsDialog .item-card-quantity {
  display: grid !important;
  width: 26px !important;
  min-height: 0 !important;
  grid-template-rows: 23px 18px 23px !important;
  justify-items: center !important;
  gap: 4px !important;
}
html body #itemsDialog .item-card-quantity button {
  width: 20px !important;
  height: 20px !important;
  line-height: 18px !important;
}
html body #itemsDialog .item-card-quantity output {
  width: 26px !important;
  min-width: 0 !important;
  height: 18px !important;
  line-height: 18px !important;
}
html body #itemsDialog .item-card.selected .item-card-name strong {
  color: #343634 !important;
  font-weight: 700 !important;
}
@media (hover: hover) {
  html body #itemsDialog .item-card-wrap:hover:not(:has(.item-card-quantity button:hover)) {
    background: rgba(77, 75, 71, .06) !important;
  }
  html body #itemsDialog .item-card-wrap:hover:not(:has(.item-card-quantity button:hover)) .item-card-name strong {
    color: #292b29 !important;
    font-weight: 700 !important;
  }
}

html body #itemsDialog .item-grid,
html body #itemsDialog .item-inspector,
html body #runesDialog .rune-grid {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(116, 131, 137, .48) transparent !important;
}
html body #itemsDialog .item-grid::-webkit-scrollbar,
html body #itemsDialog .item-inspector::-webkit-scrollbar,
html body #runesDialog .rune-grid::-webkit-scrollbar { width: 5px !important; }
html body #itemsDialog .item-grid::-webkit-scrollbar-track,
html body #itemsDialog .item-inspector::-webkit-scrollbar-track,
html body #runesDialog .rune-grid::-webkit-scrollbar-track { background: transparent !important; }
html body #itemsDialog .item-grid::-webkit-scrollbar-thumb,
html body #itemsDialog .item-inspector::-webkit-scrollbar-thumb,
html body #runesDialog .rune-grid::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(116, 131, 137, .48) !important;
}

html body #runesDialog {
  --rune-red-accent: #b65549;
  --rune-blue-accent: #3f81a3;
  --rune-green-accent: #668f54;
}
html body #runesDialog .rune-red { --rune-accent: var(--rune-red-accent); }
html body #runesDialog .rune-blue { --rune-accent: var(--rune-blue-accent); }
html body #runesDialog .rune-green { --rune-accent: var(--rune-green-accent); }
html body #runesDialog .rune-type-tabs button.selected { color: var(--rune-accent) !important; }
html body #runesDialog .rune-type-tabs button.selected b { color: var(--rune-accent) !important; }
html body #runesDialog .rune-type-tabs button.selected::after { background: var(--rune-accent) !important; }
html body #runesDialog .rune-row.active .rune-inline-counter output { color: var(--rune-accent) !important; }
html body #runesDialog .rune-row .rune-art.selected::after { background: var(--rune-accent) !important; }
html body #runesDialog .rune-inline-counter button[data-rune-zero],
html body #runesDialog .rune-inline-counter button[data-rune-max] {
  font-family: "Segoe UI Symbol", var(--ui-font) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
}

@media (pointer: coarse) {
  html body #itemsDialog .item-card-wrap { height: 110px !important; min-height: 110px !important; }
  html body #itemsDialog .item-card,
  html body #itemsDialog .item-card.selected,
  html body #itemsDialog .item-card:hover,
  html body #itemsDialog .item-card.inspected,
  html body #itemsDialog .item-card-wrap:not(.selected) .item-card {
    height: 110px !important;
    padding-right: 54px !important;
  }
  html body #itemsDialog .item-card-action {
    top: 4px !important;
    right: 4px !important;
    width: 44px !important;
    height: 102px !important;
  }
  html body #itemsDialog .item-card-quantity {
    width: 44px !important;
    grid-template-rows: 44px 14px 44px !important;
    gap: 0 !important;
  }
  html body #itemsDialog .item-card-quantity button { width: 44px !important; height: 44px !important; line-height: 42px !important; }
  html body #itemsDialog .item-card-quantity output { width: 44px !important; height: 14px !important; line-height: 14px !important; }
}

/* Equipment selection uses neutral graphite; source artwork keeps its own colours. */
html body #itemsDialog {
  --modal-paper: #f9f9f8;
  --modal-paper-soft: #f3f3f1;
  --modal-paper-inset: #ededeb;
  --modal-ink: #3d3e3b;
  --modal-muted: #6c6d69;
  --modal-faint: #969792;
  --modal-line: rgba(85, 86, 82, .24);
  --modal-line-soft: rgba(85, 86, 82, .14);
  --modal-gold-soft: rgba(85, 86, 82, .08);
}
html body #itemsDialog .item-card img,
html body #itemsDialog .item-inspector img { filter: none !important; opacity: 1 !important; }
html body #itemsDialog .item-card-selected-mark {
  background: #565853 !important;
  color: #fff !important;
}
html body #itemsDialog .item-card-quantity output { color: #3f423e !important; }
html body #itemsDialog .item-card-quantity button {
  border-color: rgba(94, 95, 90, .36) !important;
  background: #f9f9f8 !important;
  color: #4c4e49 !important;
}
html body #itemsDialog .item-card-quantity button:hover:not(:disabled) {
  border-color: #777973 !important;
  background: #e8e9e5 !important;
  color: #30322e !important;
}
html body #itemsDialog .item-card:focus-visible,
html body #itemsDialog .item-card-quantity button:focus-visible,
html body #itemsDialog .filter-tabs button:focus-visible {
  outline-color: #62655f !important;
}
html body #itemsDialog .filter-tabs button.selected::after { background: #686b65 !important; }
html body #itemsDialog .filter-tabs button:hover,
html body #itemsDialog .filter-tabs button.selected { color: #3f423e !important; }
html body #itemsDialog .search-control input { background: #fafaf9 !important; }
html body #itemsDialog .dialog-header .close-button {
  border-color: #4b4d49 !important;
  background: #4b4d49 !important;
}
html body #itemsDialog .dialog-header .close-button:hover {
  border-color: #373a35 !important;
  background: #373a35 !important;
}
html body #itemsDialog .dialog-header .close-button:focus-visible { outline-color: #30322e !important; }
html body #itemsDialog .item-grid,
html body #itemsDialog .item-inspector {
  scrollbar-color: rgba(105, 106, 101, .45) transparent !important;
}
html body #itemsDialog .item-grid::-webkit-scrollbar-thumb,
html body #itemsDialog .item-inspector::-webkit-scrollbar-thumb {
  background: rgba(105, 106, 101, .45) !important;
}

@media (forced-colors: active) {
  html body #itemsDialog .item-card-selected-mark { background: Highlight !important; color: HighlightText !important; }
}

/* One deep-blue accent carries selected equipment and both completion actions. */
html body #itemsDialog,
html body #runesDialog {
  --dialog-action-accent: #365b9a;
  --dialog-action-accent-hover: #284675;
}
html body #itemsDialog .item-card-selected-mark {
  background: var(--dialog-action-accent) !important;
}
html body #itemsDialog .dialog-header .close-button,
html body #runesDialog .dialog-header .close-button {
  border-color: var(--dialog-action-accent) !important;
  background: var(--dialog-action-accent) !important;
  color: #fff !important;
}
html body #itemsDialog .dialog-header .close-button:hover,
html body #runesDialog .dialog-header .close-button:hover {
  border-color: var(--dialog-action-accent-hover) !important;
  background: var(--dialog-action-accent-hover) !important;
}
html body #itemsDialog .dialog-header .close-button:focus-visible,
html body #runesDialog .dialog-header .close-button:focus-visible {
  outline-color: #1f355c !important;
}

@media (forced-colors: active) {
  html body #itemsDialog .item-card-selected-mark { background: Highlight !important; color: HighlightText !important; }
  html body #itemsDialog .dialog-header .close-button,
  html body #runesDialog .dialog-header .close-button {
    border-color: ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
}

/* Skill results: one clear name/value line, with type and rank beneath it. */
html body .result-panel > .skill-block > header {
  min-height: 28px !important;
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
}
html body .result-panel > .skill-block > header > div {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
html body .result-panel > .skill-block > header span {
  color: #7a858a !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}
html body .result-panel > .skill-block .skill-state-list {
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 12px !important;
}
html body .result-panel > .skill-block .skill-state-row.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  min-height: 64px !important;
  padding: 9px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(145, 116, 79, .12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .result-panel > .skill-block .skill-state-row.active:last-child {
  border-bottom: 0 !important;
}
/* The accepted light surface now covers every skill damage row. */
html body .result-panel > .skill-block .skill-state-row.active.skill-card-container {
  --skill-card-surface: rgba(240, 239, 235, .82);
  --skill-card-edge: rgba(101, 106, 106, .09);
  --skill-card-name: #484a49;
  --skill-card-meta: #727778;
  --skill-card-damage: #946b53;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 68px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--skill-card-edge) !important;
  border-radius: 11px !important;
  background: var(--skill-card-surface) !important;
  box-shadow: none !important;
}
html body .result-panel > .skill-block .skill-card-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}
html body .result-panel > .skill-block .skill-card-container .skill-card-damage {
  align-self: center !important;
  color: var(--skill-card-damage) !important;
}
html body .result-panel > .skill-block .skill-card-container .skill-card-name {
  color: var(--skill-card-name) !important;
}
html body .result-panel > .skill-block .skill-card-container .skill-card-meta,
html body .result-panel > .skill-block .skill-card-container .skill-card-note {
  color: var(--skill-card-meta) !important;
}
html body .result-panel > .skill-block .skill-card-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
}
html body .result-panel > .skill-block .skill-number-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #727778 !important;
  font-size: 10px !important;
}
html body .result-panel > .skill-block .skill-number-control button {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(101, 106, 106, .23) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .48) !important;
  color: #484a49 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html body .result-panel > .skill-block .skill-number-control button:disabled {
  opacity: .38 !important;
  cursor: default !important;
}
html body .result-panel > .skill-block .skill-number-control input {
  box-sizing: border-box !important;
  width: 34px !important;
  height: 22px !important;
  padding: 0 2px !important;
  border: 1px solid rgba(101, 106, 106, .23) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, .6) !important;
  color: #484a49 !important;
  font-size: 11px !important;
  text-align: center !important;
  appearance: textfield !important;
}
html body .result-panel > .skill-block .skill-number-control input::-webkit-inner-spin-button,
html body .result-panel > .skill-block .skill-number-control input::-webkit-outer-spin-button {
  margin: 0 !important;
  appearance: none !important;
}
html body .result-panel > .skill-block .skill-number-control b {
  color: #727778 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}
html body .result-panel > .skill-block .skill-number-control :is(button, input):focus-visible {
  outline: 2px solid #946b53 !important;
  outline-offset: 2px !important;
}
html body .result-panel > .skill-block .skill-card-top,
html body .result-panel > .skill-block .skill-card-bottom {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}
html body .result-panel > .skill-block .skill-card-name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #4d5559 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body .result-panel > .skill-block .skill-card-value {
  display: inline-flex !important;
  flex: none !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
html body .result-panel > .skill-block .skill-card-damage {
  flex: none !important;
  color: #a46237 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  line-height: 1 !important;
}
html body .result-panel > .skill-block .skill-card-meta,
html body .result-panel > .skill-block .skill-card-note {
  color: #7a858a !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
html body .result-panel > .skill-block .skill-card-note {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Match the equipment dialog's round quantity controls on both skill steppers. */
html body .build-column-loadout > .build-skill-rank .skill-rank-row button,
html body .result-panel > .skill-block .skill-number-control button {
  box-sizing: border-box !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(94, 95, 90, .36) !important;
  border-radius: 50% !important;
  background: #f9f9f8 !important;
  box-shadow: none !important;
  color: #4c4e49 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row button:hover:not(:disabled),
html body .result-panel > .skill-block .skill-number-control button:hover:not(:disabled) {
  border-color: #777973 !important;
  background: #e8e9e5 !important;
  color: #30322e !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row button:disabled,
html body .result-panel > .skill-block .skill-number-control button:disabled {
  opacity: .38 !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row output,
html body .result-panel > .skill-block .skill-number-control input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3f423e !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row output {
  width: 24px !important;
  height: 22px !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row button:focus-visible,
html body .result-panel > .skill-block .skill-number-control :is(button, input):focus-visible {
  outline: 2px solid #62655f !important;
  outline-offset: 2px !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row {
  gap: 2px !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row strong {
  margin-right: 3px !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row small {
  margin-left: 3px !important;
}
html body .build-column-loadout > .build-skill-rank .skill-rank-row output {
  width: 20px !important;
}
html body .result-panel > .skill-block .skill-number-control {
  gap: 2px !important;
}
html body .result-panel > .skill-block .skill-number-control > span:first-child {
  margin-right: 1px !important;
}
html body .result-panel > .skill-block .skill-number-control > b:last-child {
  margin-left: 1px !important;
}
html body .result-panel > .skill-block .skill-number-control input {
  width: 26px !important;
}

/* Equipment editing controls stay secondary to the approved art and glass. */
html body .build-column > .equipment-block .equipment-slot:not(.empty) .equipment-rank {
  visibility: hidden !important;
  opacity: 0 !important;
}
html body .build-column > .equipment-block .equipment-slot.empty .equipment-main > span {
  visibility: hidden !important;
  opacity: 0 !important;
}
html body .build-column > .equipment-block .equipment-slot > .equipment-remove {
  top: -7px !important;
  right: -4px !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #725f4d !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease, color 140ms ease !important;
}
html body .build-column > .equipment-block .equipment-slot > .equipment-remove::before {
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid rgba(112, 94, 75, .34);
  border-radius: 50%;
  background: rgba(255, 252, 247, .94);
  content: "";
}
html body .build-column > .equipment-block .equipment-slot:is(:hover, :focus-within) > .equipment-remove {
  opacity: 1 !important;
  pointer-events: auto !important;
}
html body .build-column > .equipment-block .equipment-slot > .equipment-remove:is(:hover, :focus-visible) {
  color: #9a4639 !important;
}
html body .build-column > .equipment-block .equipment-slot > .equipment-remove:focus-visible {
  outline: 2px solid #72533a !important;
  outline-offset: -5px !important;
}

html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle {
  top: 168px !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  min-height: 20px !important;
  padding: 1px 5px !important;
  gap: 4px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #77736e !important;
  opacity: .78 !important;
  transform: translateX(-50%) !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle i {
  width: 5px;
  height: 5px;
  background: #a3a19b !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle :is(span, b) {
  flex: none !important;
  color: inherit !important;
  font-weight: 400 !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: rgba(255, 252, 247, .6) !important;
  color: #554b40 !important;
  opacity: 1 !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle.active {
  border-color: transparent !important;
  background: transparent !important;
  color: #8a5933 !important;
  opacity: 1 !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle.active i {
  background: #bd8150 !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle.active b {
  font-weight: 600 !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle.active:is(:hover, :focus-visible) {
  background: rgba(224, 184, 139, .22) !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle:focus-visible {
  outline: 2px solid #72533a !important;
  outline-offset: 2px !important;
}
html body .build-column > .equipment-block .equipment-slot > :is(.item-passive-auto, .item-proc-control, .item-choice-select) {
  top: 168px !important;
  bottom: auto !important;
  border-color: transparent !important;
  background: rgba(255, 252, 247, .36) !important;
  box-shadow: none !important;
}

@media (hover: none) and (pointer: coarse) {
  html body .build-column > .equipment-block .equipment-slot > .equipment-remove {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .build-column > .equipment-block .equipment-slot > .equipment-remove {
    transition: none !important;
  }
}

/* Lower the six-item group within its existing board, leaving the rune board
 * and all card art untouched. The shorter row ends at the old rune boundary. */
html body .build-column > .equipment-block .equipped-row {
  top: 48px !important;
  height: 204px !important;
  min-height: 204px !important;
  flex: 0 0 204px !important;
}

/* Combat-state rows read as short explanations, with the control kept at right. */
html body .build-column-loadout > .combat-block .combat-state-grid {
  gap: 5px !important;
}
html body .build-column-loadout > .combat-block :is(.combat-state-toggle, .combat-choice, .combat-counter) {
  min-height: 58px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 160ms ease !important;
}
html body .build-column-loadout > .combat-block :is(.combat-state-toggle, .combat-choice, .combat-counter):first-child {
  border-top: 0 !important;
}
html body .build-column-loadout > .combat-block :is(.combat-state-toggle, .combat-choice, .combat-counter):hover {
  border: 0 !important;
  background: rgba(222, 225, 224, .19) !important;
}
html body .build-column-loadout > .combat-block :is(.combat-state-toggle, .combat-choice, .combat-counter).active {
  border: 0 !important;
  background: rgba(208, 217, 217, .27) !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 2px !important;
  align-content: center !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: #4c5354 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle > small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  overflow: visible !important;
  color: #757c7d !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle > b {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  font-size: 0 !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle > b::after {
  width: 30px !important;
  height: 16px !important;
  border: 1px solid rgba(115, 124, 125, .3) !important;
  border-radius: 9px !important;
  background: radial-gradient(circle at 7px 50%, #fff 0 5px, transparent 5.5px), #dce0df !important;
  box-sizing: border-box !important;
  content: "" !important;
  box-shadow: none !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle.active > b::after {
  border-color: rgba(101, 127, 130, .4) !important;
  background: radial-gradient(circle at calc(100% - 7px) 50%, #fff 0 5px, transparent 5.5px), #9ab5b6 !important;
}
html body .build-column-loadout > .combat-block :is(.combat-choice, .combat-counter) strong {
  color: #4c5354 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body .build-column-loadout > .combat-block :is(.combat-choice, .combat-counter) p {
  color: #757c7d !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Reading hierarchy: make scan targets legible between headings and display values. */
:root {
  --scan-name-size: 14px;
  --scan-skill-size: 16px;
  --scan-label-size: 12px;
  --scan-value-size: 14px;
}
html body .build-column-loadout > .equipment-block .equipment-main b em {
  color: #414747 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
}
html body .result-panel > .skill-block .skill-card-container .skill-card-name {
  font-size: var(--scan-skill-size) !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle > span,
html body .build-column-loadout > .combat-block :is(.combat-choice, .combat-counter) strong {
  font-size: var(--scan-name-size) !important;
  font-weight: 600 !important;
}
html body .result-panel > .output-summary > .damage-bars section > header > span:first-child {
  color: #545e62 !important;
  font-size: var(--scan-label-size) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
html body .result-panel > .output-summary > .damage-bars section > div {
  grid-template-columns: 74px minmax(0, 1fr) minmax(64px, auto) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 24px !important;
}
html body .result-panel > .output-summary > .damage-bars section > div > span {
  color: #596266 !important;
  font-family: var(--font-ui) !important;
  font-size: var(--scan-label-size) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
html body .result-panel > .output-summary > .damage-bars section > div > strong {
  color: #424d52 !important;
  font-family: var(--font-numeric) !important;
  font-size: var(--scan-value-size) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  line-height: 18px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
html body .result-panel > .output-summary > .damage-bars .damage-breakdown-legend {
  color: #727b7d !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}
html body .result-panel .dps-result > span,
html body .result-panel .summary-total > span {
  font-size: 11px !important;
  font-weight: 550 !important;
  letter-spacing: .03em !important;
}
html body .result-panel .dps-result small,
html body .result-panel .result-metrics span {
  font-size: 10px !important;
  letter-spacing: 0 !important;
}
html body .build-column-loadout > .equipment-block .equipment-main b small,
html body .build-column-loadout > .result-stats .compact-stats dd,
html body .result-panel :is(.dps-result, .summary-total, .result-metrics) strong,
html body .result-panel > .skill-block .skill-card-damage,
html body .result-panel #calculationBreakdown article b {
  font-variant-numeric: tabular-nums lining-nums !important;
}
@media (min-width: 1001px) {
  html body .result-panel .dps-result strong,
  html body .result-panel .summary-total strong {
    text-shadow: 0 1px rgba(255, 255, 255, .55) !important;
  }
}

/* All board and dialog headings share the equipment heading's near-black ink. */
:root { --section-title-ink: #292720; }
html body .tool-title h1,
html body .hero-list-heading h3,
html body .build-column-loadout > :is(.equipment-block, .rune-block, .result-stats, .combat-block, .target-block) > header h2,
html body .build-column-loadout > .build-skill-rank .stats-heading h3,
html body .result-panel > :is(.output-summary, .skill-block) > header h2,
html body .result-panel > .right-calculation-details > header h3,
html body dialog .dialog-header h2 {
  color: var(--section-title-ink) !important;
}

/* Readable secondary copy, without lifting prices, units or decorative captions. */
:root {
  --action-text-ink: #4d5556;
  --explanation-text-ink: #606a6d;
  --explanation-text-size: 12px;
}
html body .build-column-loadout > .equipment-block > header #openItemsBtn,
html body .build-column-loadout > .rune-block > header #openRunesBtn {
  color: var(--action-text-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html body .build-column-loadout > .equipment-block > header #openItemsBtn:is(:hover, :focus-visible),
html body .build-column-loadout > .rune-block > header #openRunesBtn:is(:hover, :focus-visible) {
  color: #343b3c !important;
}
html body .build-column-loadout > .combat-block .combat-state-toggle > small,
html body .build-column-loadout > .combat-block :is(.combat-choice, .combat-counter) p,
html body .build-column-loadout > .combat-block #yuanliuEnhancementNote,
html body .result-panel > .right-calculation-details #calculationBreakdown article p {
  color: var(--explanation-text-ink) !important;
  font-size: var(--explanation-text-size) !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}
@media (max-width: 1000px) {
  html body .result-panel > .right-calculation-details #calculationBreakdown article p {
    font-size: 10px !important;
    line-height: 14px !important;
  }
}

/* The live skill list is block-level, so its older grid gap cannot separate rows. */
html body .result-panel > .skill-block .skill-card-container + .skill-card-container {
  margin-top: 9px !important;
}
@media (max-width: 1000px) {
  html body .result-panel > .skill-block .skill-card-container + .skill-card-container {
    margin-top: 6px !important;
  }
}

/* Target controls: one quiet field treatment and one joined duration choice. */
html body .build-column-loadout > .target-block .target-grid input {
  border: 1px solid rgba(121, 117, 108, .16) !important;
  border-radius: 6px !important;
  background: rgba(249, 249, 247, .43) !important;
}
html body .build-column-loadout > .target-block .target-grid input:focus {
  border-color: rgba(111, 101, 82, .46) !important;
  outline: 2px solid rgba(111, 101, 82, .16) !important;
  outline-offset: 1px !important;
  background: rgba(255, 255, 254, .68) !important;
}
html body .build-column-loadout > .target-block .duration-segments {
  box-sizing: border-box !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid rgba(121, 117, 108, .16) !important;
  border-radius: 6px !important;
  background: rgba(249, 249, 247, .28) !important;
}
html body .build-column-loadout > .target-block .duration-segments button {
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #737574 !important;
}
html body .build-column-loadout > .target-block .duration-segments button:hover {
  border: 0 !important;
  background: rgba(91, 88, 79, .07) !important;
  color: #464a49 !important;
}
html body .build-column-loadout > .target-block .duration-segments button.active {
  border: 0 !important;
  background: rgba(113, 104, 89, .17) !important;
  color: #333837 !important;
  font-weight: 600 !important;
}
html body .build-column-loadout > .target-block .duration-segments button:focus-visible {
  outline: 2px solid rgba(111, 101, 82, .55) !important;
  outline-offset: -2px !important;
}

/* With the details action removed, center the two-line hero identity beside
 * its portrait without changing the portrait or the approved divider. */
@media (min-width: 1001px) {
  html body .build-column > .hero-context-block .selected-hero > div {
    display: flex !important;
    height: 76px !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  html body .build-column > .hero-context-block .selected-hero p {
    margin: 5px 0 0 !important;
  }
}

/* The equipment detail uses the icon-side name as its sole visible title.
 * Place Close beside that identity instead of reserving an empty header row. */
html body #itemDetailDialog .item-detail-shell {
  position: relative !important;
}
html body #itemDetailDialog .dialog-header {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 1 !important;
  min-height: 0 !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
html body #itemDetailDialog .standalone-item-detail {
  padding-top: 0 !important;
}
html body #itemDetailDialog .inspector-identity {
  padding-bottom: 14px !important;
  padding-right: 64px !important;
}
html body #itemDetailDialog .inspector-identity h3 {
  font-size: 18px !important;
  line-height: 24px !important;
}
html body #itemDetailDialog .inspector-identity small,
html body #itemDetailDialog .standalone-item-detail section > span {
  font-size: 11px !important;
}
html body #itemDetailDialog .standalone-item-detail section {
  margin-top: 18px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
html body #itemDetailDialog .standalone-item-detail section p {
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}
html body #itemDetailDialog .detail-passive-note,
html body #itemDetailDialog .coverage-note {
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* Hero index: the porcelain rail itself is the only surface. Removing the
 * list wash and selected-row fill exposes the continuous approved baseplate. */
html body .hero-panel .hero-grid,
html body .hero-panel .hero-option,
html body .hero-panel .hero-option:hover,
html body .hero-panel .hero-option.selected {
  background: transparent !important;
}
html body .hero-panel .hero-option.selected {
  border-left: 0 !important;
}
@media (min-width: 1001px) {
  html body .hero-panel .hero-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 10px !important;
    padding: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    scrollbar-gutter: auto !important;
  }
  html body .hero-panel .hero-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
  html body .hero-panel .hero-option {
    display: grid !important;
    grid-template-columns: 28px 46px !important;
    width: 94px !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 3px !important;
  }
  html body .hero-panel .hero-option span {
    width: 46px !important;
    min-width: 46px !important;
    text-overflow: clip !important;
  }
}

/* 2026-09-24: local control and result-rail refinements. Keep all porcelain
 * artwork and the approved column order; only the overlays and rhythm change. */
html body .build-column > .hero-context-block {
  z-index: 12 !important;
  overflow: visible !important;
}
html body .build-column > .hero-context-block .level-row label > span {
  color: #292720 !important;
  font-weight: 650 !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-select.open {
  z-index: 30 !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current {
  box-sizing: border-box !important;
  border: 1px solid rgba(104, 99, 88, .28) !important;
  border-radius: 7px !important;
  background: rgba(249, 248, 244, .58) !important;
  color: #3d403e !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current:is(:hover, :focus-visible),
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-select.open .boost-current {
  border-color: rgba(103, 92, 73, .56) !important;
  background: rgba(255, 254, 250, .9) !important;
  color: #292d2b !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-current:focus-visible {
  outline: 2px solid rgba(103, 92, 73, .48) !important;
  outline-offset: 2px !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-menu {
  z-index: 40 !important;
  padding: 4px !important;
  border: 1px solid rgba(101, 99, 92, .24) !important;
  border-radius: 8px !important;
  background: #f8f7f3 !important;
  box-shadow: 0 5px 14px rgba(50, 48, 43, .15) !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-menu button {
  min-height: 27px !important;
  border-radius: 5px !important;
  color: #444744 !important;
  font-size: 11px !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-menu button:is(:hover, :focus-visible, .selected) {
  background: rgba(95, 92, 82, .12) !important;
  color: #292d2b !important;
}
html body .build-column > .hero-context-block :is(#skinOptions, #supportAuraOptions, #supportAuraTierOptions) .boost-menu button:focus-visible {
  outline: 2px solid rgba(103, 92, 73, .48) !important;
  outline-offset: -2px !important;
}

/* The scrollbar sits four pixels from the centre sheet, not on the right
 * rail's edge. The sheet width itself stays at its previous value. */
@media (min-width: 1001px) and (max-width: 1440px) {
  html body .build-panel { width: calc(min(824px, 100vw - 616px) - 12px) !important; }
  html body .build-column,
  html body .build-column-loadout { width: calc(100% - 12px) !important; }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  html body .build-panel { width: calc(40vw + 236px) !important; }
  html body .build-column,
  html body .build-column-loadout { width: calc(100% - 12px) !important; }
}
@media (min-width: 1921px) {
  html body .build-panel { width: 1004px !important; }
  html body .build-column,
  html body .build-column-loadout { width: 992px !important; }
}
html body .build-panel,
html body .result-panel,
html body .build-column-loadout > .rune-block .rune-picks {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(97, 96, 89, .32) transparent !important;
}
html body .build-panel::-webkit-scrollbar,
html body .result-panel::-webkit-scrollbar,
html body .build-column-loadout > .rune-block .rune-picks::-webkit-scrollbar { width: 4px !important; }
html body .build-panel::-webkit-scrollbar-track,
html body .result-panel::-webkit-scrollbar-track,
html body .build-column-loadout > .rune-block .rune-picks::-webkit-scrollbar-track { background: transparent !important; }
html body .build-panel::-webkit-scrollbar-thumb,
html body .result-panel::-webkit-scrollbar-thumb,
html body .build-column-loadout > .rune-block .rune-picks::-webkit-scrollbar-thumb {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(97, 96, 89, .32) !important;
}

html body .result-panel .result-metrics > div {
  justify-items: center !important;
  text-align: center !important;
}
html body .result-panel .result-metrics > div > :is(span, strong) {
  width: 100% !important;
  text-align: center !important;
}
html body .result-panel > .output-summary > .damage-bars b.physical,
html body .result-panel > .output-summary > .damage-bars .legend-physical { background: #e65a52 !important; }
html body .result-panel > .output-summary > .damage-bars b.magic,
html body .result-panel > .output-summary > .damage-bars .legend-magic { background: #398fd4 !important; }
html body .result-panel > .output-summary > .damage-bars b.true,
html body .result-panel > .output-summary > .damage-bars .legend-true {
  box-sizing: border-box !important;
  border: 1px solid rgba(87, 89, 84, .48) !important;
  background: #fffdf8 !important;
}

/* Remove the historical cool-white wash from the detail panel and its
 * children. Only the two core numeric checks remain in this view. */
html body .result-panel > .right-calculation-details {
  background: url("assets/porcelain-result-panel-direct-ground-v6-top-panel-no-seams.webp") center / 100% 100% no-repeat !important;
}
html body .result-panel > .right-calculation-details > header,
html body .result-panel > .right-calculation-details #calculationBreakdown,
html body .result-panel > .right-calculation-details #calculationBreakdown article,
html body .result-panel > .right-calculation-details #calculationBreakdown article > :is(div, p) {
  background: transparent !important;
  box-shadow: none !important;
}
html body .result-panel > .right-calculation-details #calculationBreakdown {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  column-gap: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html body .result-panel > .right-calculation-details #calculationBreakdown article {
  min-height: 0 !important;
  padding: 7px 0 !important;
  border: 0 !important;
}
html body .result-panel > .right-calculation-details #calculationBreakdown article b {
  flex: 0 0 auto !important;
  font-size: 10px !important;
}
html body .result-panel > .right-calculation-details #calculationBreakdown article p {
  min-height: 0 !important;
  height: auto !important;
  white-space: normal !important;
}

/* At a regular laptop viewport, the three existing sheets fit in the right
 * rail without scrolling. Each skill row remains 68px high. */
@media (min-width: 1001px) and (min-height: 760px) and (max-height: 900px) {
  html body .result-panel { overflow-y: hidden !important; scrollbar-gutter: auto !important; }
  html body .result-panel > .output-summary {
    height: 302px !important;
    min-height: 302px !important;
    grid-template-rows: 98px 42px 132px !important;
  }
  html body .result-panel > .skill-block {
    top: 314px !important;
    height: 206px !important;
    min-height: 206px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  html body .result-panel > .skill-block > header { margin-bottom: 8px !important; }
  html body .result-panel > .right-calculation-details {
    top: 532px !important;
    height: calc(100vh - 612px) !important;
    min-height: 0 !important;
  }
}
@media (max-width: 1000px) {
  html body .result-panel > .right-calculation-details #calculationBreakdown {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
  }
}

/* 2026-09-24: annotated desktop refinements. Preserve the approved artwork
 * and all calculation controls while correcting their visible geometry. */
html body .tool-header {
  height: 40px !important;
  min-height: 40px !important;
}
html body .tool-title h1 {
  color: #2e302c !important;
  font-family: "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  letter-spacing: -.04em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important;
}
html body .tool-header #resetBtn {
  box-sizing: border-box !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(104, 101, 91, .30) !important;
  border-radius: 8px !important;
  background: rgba(249, 249, 246, .7) !important;
  color: #474b48 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
html body .tool-header #resetBtn:is(:hover, :focus-visible) {
  border-color: rgba(89, 89, 83, .55) !important;
  background: rgba(255, 255, 253, .94) !important;
  color: #2e3330 !important;
}
html body .tool-header #resetBtn:focus-visible {
  outline: 2px solid rgba(89, 89, 83, .44) !important;
  outline-offset: 2px !important;
}

html body .result-panel > .output-summary > .result-metrics {
  box-sizing: border-box !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
html body .result-panel > .output-summary > .result-metrics > div {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  align-content: center !important;
  justify-items: center !important;
  transform: none !important;
  text-align: center !important;
  border: 0 !important;
}
html body .result-panel > .output-summary > .damage-bars b.physical,
html body .result-panel > .output-summary > .damage-bars .legend-physical {
  background: #d95750 !important;
}

html body .result-panel > .skill-block .skill-state-row.active.skill-card-container {
  min-height: 58px !important;
  padding: 7px 14px !important;
}
html body .result-panel > .skill-block .skill-card-container .skill-card-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
}

/* Keep the three secondary readings visually attached to total damage. */
html body .output-summary > .result-metrics {
  border-top: 0 !important;
}

/* Same rounded action language for both loadout entry points. */
html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn) {
  box-sizing: border-box !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(103, 100, 89, .35) !important;
  border-radius: 7px !important;
  background: rgba(248, 247, 242, .78) !important;
  color: #41433e !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn):is(:hover, :focus-visible) {
  border-color: rgba(91, 89, 80, .62) !important;
  background: rgba(255, 254, 250, .95) !important;
  color: #292b28 !important;
}
html body .build-column-loadout > :is(.equipment-block, .rune-block) > header > :is(#openItemsBtn, #openRunesBtn):focus-visible {
  outline: 2px solid rgba(91, 89, 80, .5) !important;
  outline-offset: 2px !important;
}
html body .build-column-loadout > .equipment-block > header .equipment-total-price {
  color: #514b41 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
}

/* The short tier label needs the same right-side arrow breathing room. */
html body .build-column > .hero-context-block #supportAuraTierOptions,
html body .build-column > .hero-context-block #supportAuraTierOptions .boost-select-fit {
  width: 68px !important;
}
html body .build-column > .hero-context-block #supportAuraTierOptions .boost-current {
  padding-right: 8px !important;
}

/* Optically centre both skill-stepper glyphs inside their existing circles. */
html body .build-column-loadout > .build-skill-rank .skill-rank-row button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 2px !important;
  line-height: 1 !important;
}

@media (min-width: 1001px) {
  html body .build-column > .target-block {
    height: 150px !important;
    min-height: 150px !important;
    padding: 16px 28px 14px !important;
  }
  html body .build-column,
  html body .build-column-loadout {
    height: 1358px !important;
    min-height: 1358px !important;
  }
  html body .build-column > .target-block .target-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    margin-top: 10px !important;
  }
  html body .build-column > .target-block .target-grid label:not(.duration-control) {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 32px !important;
  }
  html body .build-column > .target-block .target-grid label:not(.duration-control) > span {
    white-space: nowrap !important;
  }
  html body .build-column > .target-block .target-grid input[type="number"] {
    box-sizing: border-box !important;
    min-width: 0 !important;
    appearance: auto !important;
    -moz-appearance: auto !important;
  }
  html body .build-column > .target-block .target-grid input[type="number"]::-webkit-inner-spin-button,
  html body .build-column > .target-block .target-grid input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: auto !important;
    opacity: .8 !important;
    margin: 0 !important;
  }
  html body .build-column > .target-block .duration-control {
    gap: 12px !important;
  }
  html body .build-column > .target-block .duration-segments {
    box-sizing: border-box !important;
    flex: 0 0 168px !important;
    width: 168px !important;
    min-width: 168px !important;
    grid-template-columns: repeat(4, 42px) !important;
    gap: 0 !important;
  }
  html body .build-column > .target-block .duration-segments button {
    box-sizing: border-box !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #696f6c !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
  }
  html body .build-column > .target-block .duration-segments button:hover:not(.active) {
    border: 0 !important;
    background: transparent !important;
    color: #696f6c !important;
  }
  html body .build-column > .target-block .duration-segments button.active,
  html body .build-column > .target-block .duration-segments button.active:hover {
    border: 0 !important;
    background: rgba(103, 107, 103, .10) !important;
    color: #444b47 !important;
    font-weight: 500 !important;
  }
  html body .build-column > .combat-block {
    filter:
      drop-shadow(0 3px 3px rgba(83, 75, 64, .18))
      drop-shadow(0 7px 7px rgba(83, 75, 64, .07)) !important;
  }
}
@media (min-width: 1001px) and (max-width: 1299px) {
  html body .build-column > .target-block {
    height: 200px !important;
    min-height: 200px !important;
    padding: 20px 28px !important;
  }
  html body .build-column,
  html body .build-column-loadout {
    height: 1408px !important;
    min-height: 1408px !important;
  }
  html body .build-column > .target-block .target-grid {
    margin-top: 14px !important;
  }
  html body .build-column > .target-block .target-grid label:not(.duration-control) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Total attributes: one neutral ink, three numeric weights, five fields per row. */
html body .build-column-loadout > .result-stats #heroStats > div dd {
  color: #242424 !important;
  font-family: "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
}
html body .build-column-loadout > .result-stats #heroStats > div.stat-tier-high dd {
  font-weight: 700 !important;
  font-variation-settings: "wght" 700 !important;
}
html body .build-column-loadout > .result-stats #heroStats > div.stat-tier-mid dd {
  font-weight: 550 !important;
  font-variation-settings: "wght" 550 !important;
}
html body .build-column-loadout > .result-stats #heroStats > div.stat-tier-low dd {
  font-weight: 400 !important;
  font-variation-settings: "wght" 400 !important;
}

/* 2026-09-26 desktop pass: restrain only the excessive 1920px expansion.
 * The centre sheet keeps its approved width; the right sheet gives up the
 * surplus width gradually, leaving the existing gaps and assets untouched. */
@media (min-width: 1760px) {
  html body { --wide-edge: max(16px, calc((100vw - 1760px) / 2)); }
  html body .hero-panel { left: var(--wide-edge) !important; }
  html body .build-panel { left: calc(var(--wide-edge) + 120px) !important; }
  html body .result-panel {
    right: var(--wide-edge) !important;
    width: calc(100vw - 2 * var(--wide-edge) - 136px - min(1004px, 40vw + 236px)) !important;
  }
}

/* The dialogs are work surfaces, not a second cool-blue theme. */
html body #itemsDialog,
html body #runesDialog { --dialog-action-accent: #85644c; --dialog-action-accent-hover: #6e503d; }
html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .dialog-shell {
  background: #faf8f4 !important;
  border-color: rgba(119, 101, 77, .18) !important;
  color: #30302d !important;
}
html body #itemsDialog .item-inspector,
html body #itemsDialog .item-grid,
html body #runesDialog .rune-grid { background: transparent !important; }
html body #itemsDialog .search-control input { background: #fffdf9 !important; }
html body :is(#itemsDialog, #runesDialog) .dialog-header { border-bottom-color: rgba(114, 99, 78, .17) !important; }
html body :is(#itemsDialog, #runesDialog) .dialog-header .close-button {
  border-color: #85644c !important;
  background: #85644c !important;
  color: #fffdf9 !important;
}
html body :is(#itemsDialog, #runesDialog) .dialog-header .close-button:hover {
  border-color: #6e503d !important;
  background: #6e503d !important;
}
html body :is(#itemsDialog, #runesDialog, #itemDetailDialog) .item-impact strong {
  color: #9b593c !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* The Yuanliu enhancement belongs to the same porcelain combat board. */
html body .build-column-loadout > .combat-block .yuanliu-panel {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(116, 111, 102, .16) !important;
  border-radius: 8px !important;
  background: rgba(248, 247, 243, .46) !important;
  box-shadow: none !important;
}
html body .build-column-loadout > .combat-block .yuanliu-title strong {
  color: #454a49 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body .build-column-loadout > .combat-block .yuanliu-title span {
  color: #656a66 !important;
  font-size: 11px !important;
}
html body .build-column-loadout > .combat-block .enhancement-options {
  gap: 6px !important;
  margin-top: 9px !important;
}
html body .build-column-loadout > .combat-block .enhancement-options button {
  min-height: 29px !important;
  border: 1px solid rgba(111, 108, 99, .17) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 253, .38) !important;
  color: #626866 !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease !important;
}
html body .build-column-loadout > .combat-block .enhancement-options button:is(:hover, :focus-visible) {
  border-color: rgba(97, 100, 93, .42) !important;
  background: rgba(255, 255, 253, .7) !important;
  color: #353d3a !important;
}
html body .build-column-loadout > .combat-block .enhancement-options button.selected {
  border-color: rgba(104, 111, 102, .4) !important;
  background: rgba(105, 116, 106, .12) !important;
  color: #343d38 !important;
  font-weight: 600 !important;
}
html body .build-column-loadout > .combat-block .enhancement-options button:focus-visible {
  outline: 2px solid rgba(91, 101, 92, .5) !important;
  outline-offset: 2px !important;
}
html body .build-column-loadout > .combat-block #yuanliuEnhancementNote {
  margin-top: 7px !important;
  color: #68706d !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

/* Keep the empty equipment slot clickable, but make its icon placeholder round. */
html body .build-column-loadout > .equipment-block .equipment-slot.empty .equipment-main b {
  box-sizing: border-box !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(120, 114, 104, .24) !important;
  border-radius: 50% !important;
  background: rgba(248, 247, 243, .38) !important;
  color: #777974 !important;
  font-family: var(--font-ui) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(14px) !important;
}
html body .build-column-loadout > .equipment-block .equipment-slot.empty .equipment-main:is(:hover, :focus-visible) b {
  border-color: rgba(105, 101, 92, .48) !important;
  background: rgba(250, 249, 245, .72) !important;
  color: #414841 !important;
}
html body .build-column-loadout > .equipment-block .equipment-slot.empty .equipment-main:focus-visible {
  outline: none !important;
}
html body .build-column-loadout > .equipment-block .equipment-slot.empty .equipment-main:focus-visible b {
  outline: 2px solid rgba(91, 101, 92, .55) !important;
  outline-offset: 3px !important;
}

/* Equipment counters: readable labels and a quiet, borderless stepper.
 * Give names their own line instead of squeezing them beside a native spinner. */
html body .build-column > .equipment-block .equipment-slot > .item-proc-control {
  top: 148px !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  min-height: 38px !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #655f55 !important;
  opacity: 1 !important;
  transform: none !important;
}
html body .build-column > .equipment-block .equipment-slot > .item-proc-control > .item-counter-label {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  column-gap: 4px !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #655f55 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 13px !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}
/* Use the same actual text metrics for counters and the Shadow Blade toggle. */
html body .build-column > .equipment-block .equipment-slot > .item-proc-control > .item-counter-label,
html body .build-column > .equipment-block .equipment-slot > .item-passive-toggle > :is(span, b) {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 13px !important;
  letter-spacing: normal !important;
}
html body .build-column > .equipment-block .item-counter-label span {
  flex: none !important;
  font: inherit !important;
  white-space: nowrap !important;
}
html body .build-column > .equipment-block .item-proc-control .item-counter-stepper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 84px !important;
  height: 24px !important;
}
html body .build-column > .equipment-block .item-counter-stepper > button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #605a50 !important;
  font: 400 12px/1 Arial, sans-serif !important;
  touch-action: manipulation;
  cursor: pointer;
}
html body .build-column > .equipment-block .item-counter-stepper > button::before {
  position: absolute;
  z-index: -1;
  width: min(16px, 100%);
  aspect-ratio: 1;
  border: 1px solid rgba(112, 104, 90, .32);
  border-radius: 50%;
  box-sizing: border-box;
  background: rgba(255, 253, 248, .7);
  content: '';
}
html body .build-column > .equipment-block .item-counter-stepper > button:enabled:hover::before {
  border-color: rgba(110, 86, 62, .58);
  background: rgba(255, 252, 242, .98);
}
html body .build-column > .equipment-block .item-counter-stepper > button:disabled {
  color: #a6a299 !important;
  opacity: .55 !important;
  cursor: default;
}
html body .build-column > .equipment-block .item-counter-stepper > input {
  box-sizing: border-box !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #4c4943 !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
html body .build-column > .equipment-block .item-counter-stepper > input::-webkit-inner-spin-button,
html body .build-column > .equipment-block .item-counter-stepper > input::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
html body .build-column > .equipment-block .item-counter-stepper > :is(button, input):focus-visible {
  outline: 2px solid rgba(112, 82, 52, .65) !important;
  outline-offset: 1px !important;
}