.skin-credit-plain { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; color: #cbd0d4; font-size: 13px; }
.skin-credit-plain > strong { color: #fff; font-size: 18px; font-weight: 500; }
.skin-bonus { --skin-bonus-accent: var(--promotion-accent, var(--accent, currentColor)); --skin-bonus-surface: var(--admin-panel, var(--panel-strong, #181616cc)); display: grid; gap: 9px; min-width: 0; padding: 14px; border: 1px solid #ffffff24; border-radius: 4px; background: var(--skin-bonus-surface); color: #d3d9dd; text-align: left; font: 13px/1.4 Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.skin-bonus > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 0; padding: 0; border: 0; background: transparent; color: #d3d9dd; font-size: 12px; }
.skin-bonus__badge { padding: 3px 7px; border-radius: 3px; background: color-mix(in srgb, var(--skin-bonus-accent) 12%, transparent); color: var(--skin-bonus-accent); white-space: nowrap; }
.skin-bonus > .skin-bonus__total { display: block; margin: 0; color: #fff; font-size: 25px; line-height: 1.2; font-weight: 500; overflow-wrap: anywhere; }
.skin-bonus__details { display: grid; gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid #ffffff16; }
.skin-bonus__details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 12px; }
.skin-bonus__details dt, .skin-bonus__details dd { margin: 0; font-size: 12px; }
.skin-bonus__details > div:last-child { color: var(--skin-bonus-accent); }
.skin-bonus > p { margin: 0; color: #b2bdc6; font-size: 12px; }
.skin-bonus--compact { gap: 6px; padding: 10px 12px; border: 0; border-left: 3px solid var(--skin-bonus-accent); border-radius: 0; }
.skin-bonus--compact > .skin-bonus__total { font-size: 22px; }
.skin-bonus--compact .skin-bonus__details { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 0; border: 0; }
.skin-bonus--compact .skin-bonus__details > div { gap: 4px; }
.skin-bonus--highlight { grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 8px 14px; border-color: color-mix(in srgb, var(--skin-bonus-accent) 38%, transparent); background: linear-gradient(115deg, color-mix(in srgb, var(--skin-bonus-accent) 8%, transparent), transparent 65%), var(--skin-bonus-surface); }
.skin-bonus__hero { grid-column: 1; grid-row: 1 / 3; display: grid; align-content: center; gap: 3px; padding-right: 14px; border-right: 1px solid #ffffff20; }
.skin-bonus__hero > strong { color: var(--skin-bonus-accent); font-size: 28px; font-weight: 500; }
.skin-bonus__hero > span { color: #cbd0d4; font-size: 11px; }
.skin-bonus--highlight > header, .skin-bonus--highlight > .skin-bonus__total { grid-column: 2; }
.skin-bonus--highlight > .skin-bonus__total { align-self: end; }
.skin-bonus--highlight > .skin-bonus__details, .skin-bonus--highlight > p { grid-column: 1 / -1; }
.skin-deposit-confirmation .skin-bonus, .skin-deposit-confirmation .skin-credit-plain { margin: 14px 20px 0; }
.skin-deposit-result .skin-bonus, .skin-deposit-result .skin-credit-plain { width: min(360px, 100%); margin: 12px auto; box-sizing: border-box; }
[class*="admin-skin-promotions"] .skin-bonus { max-width: 410px; margin: 18px 22px; }
/* Keep the final credit and action visible while either item list scrolls. */
.skin-deposit-variant--modal-wide > .skin-deposit-builder {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: min(900px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px);
  min-height: 0; overflow: hidden;
}
.skin-deposit-builder > .skin-deposit-columns { min-height: 0; overflow: hidden; }
.skin-deposit-builder .skin-deposit-columns > article { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; }
.skin-deposit-builder .skin-deposit-columns .skin-deposit-item-grid { height: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.skin-deposit-builder > .skin-deposit-notice { margin: 0; padding: 6px 18px; max-height: 60px; overflow-y: auto; }
@media (max-width: 800px) {
  .skin-deposit-variant--modal-wide > .skin-deposit-builder { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .skin-deposit-builder > .skin-deposit-columns { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 6px 8px; }
  .skin-deposit-variant .skin-deposit-builder > header { flex-direction: row; align-items: center; min-height: 48px; padding: 6px 8px; }
  .skin-deposit-builder > header strong { font-size: 15px; }
  .skin-deposit-builder > .skin-deposit-trade-url { grid-template-columns: minmax(0, 1fr) 80px; gap: 5px; padding: 6px 8px; }
  .skin-deposit-builder > .skin-deposit-trade-url > button { align-self: end; min-height: 36px; height: 36px; }
  .skin-deposit-builder > .skin-deposit-trade-url label { grid-template-columns: 1fr; gap: 3px; }
  .skin-deposit-builder .skin-deposit-selection > footer { padding: 5px 8px; }
}
@media (max-width: 800px) and (max-height: 650px) {
  .skin-deposit-builder > .skin-deposit-columns { grid-template-rows: minmax(80px, .5fr) minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .skin-bonus { gap: 6px; padding: 10px; }
  .skin-bonus > .skin-bonus__total { font-size: 22px; }
  .skin-bonus--highlight { gap: 6px 10px; }
  .skin-bonus__hero { padding-right: 10px; }
  .skin-bonus__hero > strong { font-size: 25px; }
  .skin-bonus__details { padding-top: 6px; gap: 3px; }
}