/* Only the key-entry card follows the retained PAY component. The page shell stays unchanged. */
.redeem-layout[data-view=key] #redeem-stage {
  --surface:#fff; --surface-2:#f0f2f5; --line:#e5e7eb; --ink:#0b0e13; --muted:#646b78; --accent:#658d27;
  padding:30px; border:1px solid var(--line); border-radius:22px;
  background:var(--surface); color:var(--ink);
  box-shadow:0 8px 24px -16px #0b0e1338,0 2px 4px -2px #0b0e131a;
}
:root[data-theme=dark] .redeem-layout[data-view=key] #redeem-stage {
  --surface:#13151c; --surface-2:#1a1d25; --line:#292d37; --ink:#e8eaf0; --muted:#a2a9b8; --accent:#badd69;
  box-shadow:0 8px 24px -16px #0008;
}
.redeem-layout[data-view=key] #redeem-stage .redeem-steps { flex-direction:row; align-items:center; gap:8px; margin:0 0 28px; padding:0; font-size:13px; font-weight:600; color:var(--muted); }
.redeem-layout[data-view=key] #redeem-stage .redeem-steps span { min-height:24px; padding:0; gap:8px; }
.redeem-layout[data-view=key] #redeem-stage .redeem-steps b { width:24px; height:24px; font-size:11px; font-weight:700; background:var(--surface-2); border:0; color:var(--muted); }
.redeem-layout[data-view=key] #redeem-stage .redeem-steps i { flex:1; width:auto; height:1px; min-width:8px; margin:0; background:var(--line); }
.redeem-layout[data-view=key] #redeem-stage .redeem-steps .current { color:var(--ink); }
.redeem-layout[data-view=key] #redeem-stage .redeem-steps .current b { background:var(--ink); color:var(--surface); }
.redeem-layout[data-view=key] #redeem-stage h2 { font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-.025em; }
.redeem-layout[data-view=key] #redeem-stage .redeem-description { margin-top:8px; font-size:14px; line-height:1.7; color:var(--muted); }
.redeem-layout[data-view=key] #redeem-stage .field { margin-top:24px; }
.redeem-layout[data-view=key] #redeem-stage .field>span:not(.key-input) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.redeem-layout[data-view=key] #redeem-stage .key-input { display:flex; align-items:center; min-height:56px; margin:0; padding:0 16px; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.redeem-layout[data-view=key] #redeem-stage .key-input input { height:54px; min-height:0; font:16px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.05em; color:var(--ink); }
.redeem-layout[data-view=key] #redeem-stage .key-input input::placeholder { font:14px Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; letter-spacing:0; color:var(--muted); }
.redeem-layout[data-view=key] #redeem-stage .entry-key-icon { width:18px; height:18px; color:var(--muted); }
.redeem-layout[data-view=key] #redeem-stage .key-input:focus-within { border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 50%,var(--line)); outline-offset:2px; box-shadow:none; }
.redeem-layout[data-view=key] #redeem-stage .full-width { min-height:50px; margin-top:14px; padding:12px 16px; font-size:15px; font-weight:600; border-radius:14px; background:var(--ink); border-color:var(--ink); color:var(--surface); box-shadow:0 6px 16px -8px color-mix(in srgb,var(--ink) 60%,transparent); }
.redeem-layout[data-view=key] #redeem-stage .full-width:hover:not(:disabled) { background:var(--ink); opacity:.9; }
.redeem-layout[data-view=key] #redeem-stage .full-width:disabled { opacity:.5; }
.redeem-layout[data-view=key] #activation-steps { display:none; }
/* The refinement is confined to the first page's right-hand operation area. */
.redeem-layout[data-view=key] .customer-main { max-width:680px; padding-top:36px; }
.redeem-layout[data-view=key] .customer-help { margin-top:28px; padding-top:22px; }
.redeem-layout[data-view=key] .customer-help h2 { font-size:15px; margin-bottom:6px; }
.redeem-layout[data-view=key] .customer-help summary { font-size:14px; min-height:48px; }
.redeem-layout[data-view=key] .customer-help details p { font-size:13px; }
@media(max-width:760px) {
  .redeem-layout[data-view=key] .customer-main { padding-top:24px; }
  .redeem-layout[data-view=key] #redeem-stage h2 { font-size:24px; }
  .redeem-layout[data-view=key] .customer-help summary { font-size:13px; }
  .redeem-layout[data-view=key] #redeem-stage { padding:22px 18px; }
  .redeem-layout[data-view=key] .activation-workspace { padding-inline:16px; }
  .redeem-layout[data-view=key] .redeem-environment { margin-inline:-16px; }
}
@media(max-width:380px) {
  .redeem-layout[data-view=key] #redeem-stage { padding-inline:14px; }
  .redeem-layout[data-view=key] #redeem-stage .key-input input::placeholder { font-size:12px; }
}