/* Keep the current upgrader layout. Align every skin preview with inventory rendering. */
html[data-csg-interface] body .site-shell .upgrader-page :is(.target-hero,.upgrade-result){
  overflow:hidden!important;
}

html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button img,
html[data-csg-interface] body .site-shell .upgrader-page .target-hero img,
html[data-csg-interface] body .site-shell .upgrader-page .upgrade-result img{
  z-index:1!important;
  display:block!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 10px #00000094)!important;
  max-width:100%!important;
  padding:5px!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
}

/* The old upgrader stylesheet hard-capped selectable skins at 78px. Match inventory scale instead. */
html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button img{
  width:100%!important;
  height:125px!important;
}

html[data-csg-interface] body .site-shell .upgrader-page .target-hero img{
  width:100%!important;
  height:310px!important;
}

html[data-csg-interface] body .site-shell .upgrader-page .upgrade-result img{
  width:150px!important;
  height:100px!important;
  margin-inline:auto!important;
}

@media (width<=620px){
  html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button img{
    height:108px!important;
  }
  html[data-csg-interface] body .site-shell .upgrader-page .target-hero img{
    height:255px!important;
  }
  html[data-csg-interface] body .site-shell .upgrader-page .upgrade-result img{
    width:132px!important;
    height:88px!important;
  }
}

/* Selecting a skin was meant to turn it green: the app bundle ships
   .upgrade-inventory button.selected{background:#244438;border-color:#67d391;
   box-shadow:0 0 0 2px #67d3912e}. Four later !important rules erased it - the
   cosmetic themes repaint every button, .setting-contrast forces
   border-color:#dce6ed, and the themes' own :is(.active,.selected) rule sets a
   near-black background - so a selected skin came back with a light grey border
   and a near-black fill, indistinguishable from an unselected one. Measured on a
   selected card before this rule: border rgb(220,230,237), background
   srgb(0.055 0.089 0.113). Restated here at (0,5,3), which outranks all four.
   #67d391 is the green the bundle already uses for the price line below. */
html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button.selected{
  border-color:#67d391!important;
  background:linear-gradient(180deg,#1f4a37,#163326)!important;
  box-shadow:0 0 0 2px #67d39147,0 10px 26px #0006,inset 0 1px #ffffff14!important;
  color:#eaf7f0!important;
}
html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button.selected>i{
  background:#67d391!important;
  color:#0b1a13!important;
  box-shadow:0 0 0 3px #67d3912e!important;
}
html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button.selected b,
html[data-csg-interface] body .site-shell .upgrader-page .upgrade-inventory button.selected small{
  color:#bff3d8!important;
}