:root {
  color-scheme: light;
  --page: #fff;
  --ink: #111;
  --muted: #666;
  --row: #fafafa;
  --brand: #ed1724;
  --brand-hover: #d00d1b;
  --focus: #1459bd;
  --scrollbar-track: #f4f4f4;
  --scrollbar-thumb: #bcbcbc;
  --scrollbar-hover: #999;
  --scrollbar-active: #777;
  --font-display: "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; scrollbar-width: auto; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 3px solid var(--scrollbar-track); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--scrollbar-active); }
html { background: var(--page); min-height: 100%; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); font-family: var(--font-body); -webkit-text-size-adjust: 100%; }
.coupon-page { width: min(100%, 660px); margin: clamp(8px, 4vh, 44px) auto 0; padding: 0 clamp(12px, 3vw, 23px) max(20px, env(safe-area-inset-bottom)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.coupon-list { display: grid; gap: clamp(7px, 1.6vw, 12px); }
.coupon-row { display: flex; align-items: center; gap: clamp(13px, 3.6vw, 31px); min-height: 56px; padding: 0 clamp(13px, 3vw, 23px) 0 0; border-radius: 17px; background: var(--row); box-shadow: 0 2px 5px #00000007; text-decoration: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease, transform 120ms ease; }
.brand-logo { display: block; width: 47%; height: auto; aspect-ratio: 284 / 101; object-fit: fill; border-radius: clamp(12px, 3vw, 21px); flex: 0 0 47%; }
.coupon-label { flex: 1 1 auto; font-family: var(--font-display); font-size: clamp(25px, 6.8vw, 48px); font-weight: 900; line-height: 1.2; letter-spacing: -.04em; white-space: nowrap; }
.chevron { width: clamp(9px, 2.2vw, 15px); height: clamp(9px, 2.2vw, 15px); flex: 0 0 auto; border-right: 4px solid var(--brand); border-top: 4px solid var(--brand); transform: rotate(45deg); }
.coupon-row--jd .chevron { border-color: #b7b7b7; }
.claim-button { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(76px, 17.2vw, 118px); margin-top: clamp(14px, 3vw, 23px); padding: 8px 42px; border-radius: 999px; background: var(--brand); box-shadow: inset 0 -3px 0 #bc101a33; color: #fff; font-family: var(--font-display); font-size: clamp(34px, 8.6vw, 60px); font-weight: 800; letter-spacing: .02em; line-height: 1.1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease, transform 120ms ease; }
.tap-hand { position: absolute; width: clamp(63px, 16.5vw, 115px); height: auto; right: -6px; bottom: -7px; color: #181818; pointer-events: none; }
.claim-status { min-height: 2.9em; margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; }
.noscript-note { color: var(--muted); font-size: 13px; text-align: center; line-height: 1.6; }
.claim-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.claim-link:active:not([aria-disabled="true"]) { transform: scale(.99); }
.claim-link[aria-disabled="true"] { cursor: default; }
.claim-link[aria-disabled="true"] .tap-hand { opacity: .9; }
@media (hover: hover) {
  .coupon-row:hover:not([aria-disabled="true"]) { background: #f1f1f1; }
  .claim-button:hover:not([aria-disabled="true"]) { background: var(--brand-hover); }
}
@media (max-width: 350px) {
  .coupon-page { padding-left: 9px; padding-right: 9px; }
  .coupon-row { gap: 10px; padding-right: 14px; }
  .coupon-label { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
  .coupon-row, .claim-button { border: 2px solid ButtonText; }
  .chevron { border-color: LinkText; }
  .claim-link:focus-visible { outline-color: Highlight; }
}