.dj-redemption-guide {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 2px solid #ef4444;
  border-radius: 0.875rem;
  background: #fff1f2;
  color: #b91c1c;
  line-height: 1.6;
}
.dj-redemption-guide__title { font-size: clamp(18px, 2vw, 22px); font-weight: 850; }
.dj-redemption-guide p { order: 3; flex-basis: 100%; margin: 0; font-size: 15px; font-weight: 650; text-wrap: pretty; }
.dj-redemption-guide__actions { order: 2; margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.dj-redemption-guide__actions button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid #b91c1c;
  border-radius: 0.625rem;
  background: #b91c1c;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.dj-redemption-guide__actions button + button { background: #fff; color: #b91c1c; }
.dj-redemption-guide__actions button:hover { filter: brightness(0.94); }
.dj-redemption-guide__actions button:active { filter: brightness(0.88); }
.dj-redemption-guide__actions button:focus-visible { outline: 3px solid #fb7185; outline-offset: 3px; }
[data-dj-redemption-code]::before,
[data-dj-redemption-instructions]::before {
  display: block;
  margin: 0 0 0.625rem;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.6;
  letter-spacing: normal;
  user-select: none;
  pointer-events: none;
}
[data-dj-redemption-code]::before { content: "↓ ① 这里是您的 CDK，请先复制"; }
[data-dj-redemption-instructions]::before { content: "↓ ② 充值地址在这里，拿着 CDK 去充值"; }
[data-dj-redemption-address] {
  color: #b91c1c !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
[data-dj-redemption-focus] { outline: 3px solid #ef4444; outline-offset: 4px; }
@media (max-width: 640px) {
  .dj-redemption-guide { padding: 0.875rem; }
  .dj-redemption-guide__actions { order: 4; width: 100%; margin-left: 0; }
  .dj-redemption-guide__actions button { flex: 1 1 auto; padding-inline: 0.75rem; }
  [data-dj-redemption-code]::before, [data-dj-redemption-instructions]::before { font-size: 14px; }
}
.dark .dj-redemption-guide { background: #3b1219; color: #fecaca; border-color: #f87171; }
.dark .dj-redemption-guide__actions button + button { background: #3b1219; color: #fecaca; border-color: #f87171; }
.dark [data-dj-redemption-code]::before,
.dark [data-dj-redemption-instructions]::before { color: #fca5a5; }
.dark [data-dj-redemption-address] { color: #fca5a5 !important; }

.dj-redemption-copy { box-sizing: border-box; }
/* Keep the copy action beside the actual CDK, not across a full-width row.
   Both remain siblings, preserving Vue content and the existing CDK label. */
[data-cdk-code]:has(+ .dj-redemption-copy--code),
.hds-cdk-code-card:has(+ .dj-redemption-copy--code) {
  box-sizing: border-box;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  vertical-align: bottom;
}
.dj-redemption-copy--code {
  display: inline-flex;
  vertical-align: bottom;
  margin: 0.5rem 0 13px 0.5rem;
  max-width: calc(100% - 0.5rem);
}
.dj-redemption-copy--address { display: inline-flex; vertical-align: middle; margin: 0.25rem 0 0.25rem 0.625rem; }
.dj-redemption-copy button {
  box-sizing: border-box;
  min-height: 36px;
  padding: 0.375rem 0.875rem;
  border: 1px solid #2563eb;
  border-radius: 0.5rem;
  background: #2563eb;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  user-select: none;
}
.dj-redemption-copy button:hover { background: #1d4ed8; border-color: #1d4ed8; }
.dj-redemption-copy button:active { background: #1e40af; }
.dj-redemption-copy button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.dj-redemption-copy button:disabled { opacity: 0.7; cursor: wait; }
@media (max-width: 640px) {
  .dj-redemption-copy button { min-height: 44px; }
  .dj-redemption-copy--code { margin-bottom: 8px; }
  .dj-redemption-copy--address { margin-left: 0.375rem; }
}
.dark .dj-redemption-copy button { border-color: #60a5fa; }