.upgrade-benefits-panel {
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid #566473;
  border-radius: 12px;
  background: linear-gradient(180deg, #222b35 0%, #171e26 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.18);
}
.upgrade-benefits-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border-bottom: 1px solid #46515e;
  background: linear-gradient(90deg, rgba(189,135,43,.18), rgba(255,255,255,.025));
}
.upgrade-benefits-panel > header small {
  display: block;
  margin-bottom: 2px;
  color: #c4ccd5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.upgrade-benefits-panel > header h3 { margin: 0; color: #f2f5f7; font-size: 15px; }
.upgrade-level-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #d59b35;
  border-radius: 999px;
  color: #ffdc83;
  background: #392b17;
  font-weight: 900;
  white-space: nowrap;
}
.upgrade-benefit-head,
.upgrade-benefit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 92px 24px 92px 92px;
  align-items: center;
  gap: 10px;
}
.upgrade-benefit-head {
  padding: 8px 13px;
  color: #8f9aa6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(0,0,0,.16);
}
.upgrade-benefit-row {
  min-height: 48px;
  padding: 8px 13px;
  border-top: 1px solid rgba(116,130,145,.22);
}
.upgrade-benefit-row:first-child { border-top: 0; }
.upgrade-benefit-row:nth-child(even) { background: rgba(255,255,255,.018); }
.upgrade-benefit-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.upgrade-benefit-name > span { display: inline-flex; width: 25px; flex: 0 0 25px; justify-content: center; font-size: 18px; }
.upgrade-benefit-name > div { min-width: 0; overflow: hidden; }
.upgrade-benefit-name strong { display: block; overflow: hidden; max-width: 100%; color: #e5e9ed; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-benefit-name small { display: block; overflow: hidden; color: #929eaa; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-benefit-current,
.upgrade-benefit-next,
.upgrade-benefit-difference { min-width: 0; overflow: hidden; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-benefit-current { color: #cbd3da; }
.upgrade-benefit-next { color: #ffdb80; }
.upgrade-benefit-arrow { color: #6f7d89; font-size: 18px; text-align: center; }
.upgrade-benefit-difference {
  padding: 5px 7px;
  border-radius: 7px;
  color: #8ee3a0;
  background: rgba(48,145,72,.16);
}
.upgrade-benefit-row.is-negative .upgrade-benefit-difference { color: #ff9a8f; background: rgba(180,51,42,.17); }
.upgrade-benefits-panel.is-compact { margin: 10px 0; }
.upgrade-benefits-panel.is-compact > header { padding: 10px 12px; }
.upgrade-benefits-panel.is-compact .upgrade-benefit-head { display: none; }
.upgrade-benefits-panel.is-compact .upgrade-benefit-row { grid-template-columns: minmax(0,1.7fr) 84px 22px 84px 84px; min-height: 42px; padding: 7px 11px; }
.upgrade-benefits-panel.is-fortification { min-width: 430px; }
.upgrade-benefits-panel.is-maxed { padding-bottom: 12px; }
.upgrade-benefits-panel.is-maxed p { margin: 12px 15px 0; color: #b9c1ca; }
.building-upgrade-order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.building-upgrade-order > div {
  padding: 10px 12px;
  border: 1px solid #46515e;
  border-radius: 9px;
  background: #171e26;
}
.building-upgrade-order span { display: block; margin-bottom: 4px; color: #aeb8c2; font-size: 11px; }
.building-upgrade-order strong { color: #f3f6f8; }
@media (max-width: 760px) {
  .upgrade-benefit-head { display: none; }
  .upgrade-benefit-row,
  .upgrade-benefits-panel.is-compact .upgrade-benefit-row {
    grid-template-columns: minmax(150px,1.4fr) 1fr 22px 1fr;
  }
  .upgrade-benefit-difference { grid-column: 2 / 5; justify-self: stretch; }
  .upgrade-benefits-panel.is-fortification { min-width: 0; }
}
.castle-fortification-main { min-width: 0; }
.castle-fortification-main > .costs { margin-top: 9px; }
.castle-fortification-row .upgrade-benefits-panel { width: 100%; }
.barracks-shell > .upgrade-benefits-panel,
.workshop-shell > .upgrade-benefits-panel,
.barracks-shell > .building-upgrade-order,
.workshop-shell > .building-upgrade-order { margin-left: 14px; margin-right: 14px; }