.promotion-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  color: #edf0f4;
  background: #20262e;
  border: 1px solid #424d58;
  border-radius: 12px;
  box-shadow: 0 16px 64px #0008;
}
.promotion-dialog::backdrop { background: #080c12b3; }
.promotion-dialog h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.promotion-dialog p { margin: 0 0 22px; color: #b8c2cf; font-size: 15px; }
.promotion-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.promotion-options button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; min-height: 124px; padding: 10px 6px;
  color: #edf0f4; background: #303a44; border: 1px solid #566371;
  border-radius: 8px; box-shadow: none; cursor: pointer;
}
.promotion-options button:hover { background: #405345; border-color: #8fad76; }
.promotion-options button:focus-visible, .promotion-cancel:focus-visible { outline: 3px solid #b1d192; outline-offset: 3px; }
.promotion-options img { width: 52px; height: 52px; object-fit: contain; }
.promotion-options span { font-size: 13px; font-weight: 600; }
.promotion-options kbd { color: #bcc7d2; font: 11px system-ui; }
.promotion-dialog footer { display: flex; justify-content: flex-end; margin-top: 20px; }
.promotion-dialog .promotion-cancel { min-height: 40px; padding: 8px 16px; color: #edf0f4; background: #303a44; border: 1px solid #566371; border-radius: 6px; box-shadow: none; }
@media (max-width: 380px) {
  .promotion-dialog { padding: 18px; }
  .promotion-options { gap: 6px; }
  .promotion-options img { width: 42px; height: 42px; }
}