:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #302a24;
  background: #faf8f4;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #faf8f4; scroll-padding-block: 24px; }
body { min-width: 320px; min-height: 100%; margin: 0; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid rgba(113,66,45,.28); outline-offset: 2px; }
[hidden] { display: none !important; }

.claim-page {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--claim-background, #faf8f4);
}

.claim-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

.campaign-content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: clamp(90px, 16vh, 180px) 16px clamp(10px, 2vh, 20px);
  gap: 12px;
  /* Let the document scroll with the keyboard; an inner scroller clips the wider artwork. */
  overflow: visible;
}

.campaign-block-hero {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: min(100vw, 620px);
  height: min(78vh, 560px);
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
}

.campaign-block-hero-media, .campaign-block-image-frame { width: 100%; height: 100%; }
.campaign-block-hero-media { position: relative; }
.campaign-block-image-frame > picture { display: block; width: 100%; height: 100%; }
.campaign-block-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  opacity: .94;
  mask-image: linear-gradient(#000 0%, #000 37%, rgba(0,0,0,.35) 72%, transparent);
  -webkit-mask-image: linear-gradient(#000 0%, #000 37%, rgba(0,0,0,.35) 72%, transparent);
}

.campaign-block-kicker, .campaign-block-title, .claim-card-topline,
.claim-form-description, .claim-preview-note { display: none; }
.campaign-brandline, .campaign-block-hero-copy { display: none; }
.claim-card-heading .claim-kicker { display:block;position:relative;overflow:hidden;width:148px;aspect-ratio:2.85 / 1;margin:0 auto 13px;font-size:0;line-height:0; }
.claim-card-heading .claim-kicker::before { position:absolute;inset:0;content:"";background:url("/assets/brand-logo.webp") center / 145% auto no-repeat;mix-blend-mode:multiply; }
.campaign-block-form {
  width: min(100%, 420px);
  border: 1px solid rgba(180,166,145,.32);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 42px rgba(66,47,29,.08);
}
.claim-card-body { padding: 22px 20px 20px; }
.claim-card-heading { text-align: center; }
.claim-card-heading h2 { margin: 0; font-size: 21px; font-weight: 600; line-height: 30px; letter-spacing: -.4px; }
.claim-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.claim-phase { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.claim-phase > .claim-field, .claim-phase > .claim-code-field { position: relative; width: 100%; margin: 0; }
.claim-phase > .claim-code-field { display: none; }
.claim-phase > .claim-code-field:not(.is-awaiting) { display: block; }
.claim-field-label, .claim-field-label-row { display: flex; justify-content: center; margin-bottom: 7px; color: #70675d; font-size: 12px; font-weight: 500; line-height: 18px; }
.claim-input-row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.claim-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 12px;
  border: 1px solid #d7d0c6;
  border-radius: 10px;
  background: #fcfbf8;
  color: #302a24;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  outline: none;
  scroll-margin-block: 24px;
  -webkit-appearance: none;
  appearance: none;
}
.claim-input::placeholder { color: #a39a8e; font-size: 16px; letter-spacing: 0; }
.claim-input:focus { border-color: var(--claim-primary,#71422d); box-shadow: 0 0 0 3px rgba(113,66,45,.08); }
.claim-input[aria-invalid="true"] { border-color: #b34b40; box-shadow: 0 0 0 3px rgba(179,75,64,.1); }
.claim-input::-webkit-outer-spin-button, .claim-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1px solid #d7d0c6; border-radius: 8px; text-decoration: none; background: #fff; color: #71422d; }
.button-primary { background: var(--claim-primary,#71422d); border-color: var(--claim-primary,#71422d); color: #fff; }
.claim-send-button, .claim-verify-button { width: 100%; height: 50px; font-size: 15px; font-weight: 600; letter-spacing: .5px; }
.claim-field-help { margin: 6px 0 0; color: #9b9185; font-size: 11px; line-height: 16px; text-align: center; }
.claim-field-error { min-height: 17px; margin: 5px 0 0; color: #a53a32; font-size: 12px; line-height: 17px; text-align: center; }
.claim-challenge-summary { display: flex; align-items: center; gap: 10px; color: #766b5e; font-size: 13px; line-height: 28px; white-space: nowrap; }
#claim-change-phone { padding: 4px 0; border: 0; background: none; color: var(--claim-primary,#71422d); font-size: 12px; }
.has-challenge .claim-phase > .claim-field:first-child { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-height: 28px; gap: 0 8px; }
.has-challenge #claim-phone-error { grid-column: 1 / -1; }
.has-challenge .claim-phase > .claim-field:first-child > label, .has-challenge #claim-phone,
.has-challenge .claim-code-field .claim-field-label-row, .has-challenge .claim-phase .claim-field-help { display: none; }
.has-challenge .claim-phase > .claim-field:first-child .claim-input-row { width: auto; }
.has-challenge #claim-send-code { width: auto; min-height: 28px; height: 28px; padding: 0 3px; border: 0; background: none; color: #897664; font-size: 12px; letter-spacing: 0; }


.claim-consent { display: flex; align-items: center; gap: 8px; min-width: 0; color: #8b8277; font-size: 11px; line-height: 18px; }
.claim-consent input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--claim-primary,#71422d); }
.claim-consent-copy { display: block; min-width: 0; flex: 1 1 auto; }
.claim-consent-prefix, .claim-consent-separator { white-space: nowrap; }
.claim-consent-separator { margin-inline: .25em; }
.claim-policy-link { display: inline; padding: 0; border: 0; background: transparent; color: var(--claim-primary,#71422d); font: inherit; white-space: nowrap; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: 3px; }
.claim-policy-link:hover { color: #4e2417; }
.claim-footnote { min-height: 16px; margin: 10px 0 0; color: #9b9185; font-size: 11px; line-height: 16px; text-align: center; }
.has-challenge:not(.has-result) .claim-footnote { display: none; }
.claim-field-help:empty { display: none; }

body.claim-policy-open { overflow: hidden; }
.claim-policy-dialog { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; color: #3d2c25; }
.claim-policy-dialog[open], .claim-policy-dialog.is-open { display: flex; }
.claim-policy-dialog::before { position: absolute; inset: 0; background: rgba(38,28,22,.48); content: ''; }
.claim-policy-dialog::backdrop { background: transparent; }
.claim-policy-dialog-card { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%, 420px); max-height: min(80svh, 640px); overflow: hidden; border: 1px solid #ddd4c8; border-radius: 16px; background: #fffdf8; box-shadow: 0 18px 60px rgba(36,24,16,.24); }
.claim-policy-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid #eee7de; }
.claim-policy-dialog-header h2 { margin: 0; color: #55443a; font-size: 17px; font-weight: 650; line-height: 24px; }
.claim-policy-dialog-close { flex: 0 0 auto; min-height: 32px; padding: 5px 10px; border: 1px solid #d9cdbf; border-radius: 7px; background: #fff; color: #6e594c; font-size: 12px; line-height: 20px; }
.claim-policy-dialog-close:hover { background: #f5efe7; }
.claim-policy-dialog-list { overflow: auto; margin: 0; padding: 16px 24px 22px 40px; color: #66594e; font-size: 13px; line-height: 1.8; }
.claim-policy-dialog-copy { overflow: auto; margin: 0; padding: 16px 20px 22px; color: #66594e; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.claim-consent-dialog-card { width: min(100%, 360px); padding: 26px 22px 22px; overflow: auto; }
.claim-consent-dialog-card h2 { margin: 0 0 14px; font-size: 19px; font-weight: 650; line-height: 1.4; text-align: center; }
.claim-consent-dialog-card p { margin: 0; color: #73665d; font-size: 14px; line-height: 1.85; }
.claim-consent-dialog-card .claim-policy-link { display: inline-block; white-space: nowrap; color: #71422d; font-size: inherit; text-underline-offset: 3px; }
.claim-consent-policies { display: block; margin: 4px 0 10px; }
.claim-consent-purpose { display: block; color: #84796f; font-size: 13px; }
.claim-consent-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.claim-consent-dialog-actions .button { min-height: 44px; padding: 11px 8px; font-size: 14px; line-height: 20px; letter-spacing: 0; border-radius: 8px; }
.claim-footer { flex: 0 0 auto; padding: 4px 16px max(4px,env(safe-area-inset-bottom)); color: #9b9185; font-size: 10px; line-height: 14px; text-align: center; opacity: .55; }

.claim-result { min-height: 180px; padding: 6px 0 0; text-align: center; }
.claim-result-heading { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 4px; }
.claim-result h3 { margin: 0; font-size: clamp(19px, 5vw, 22px); font-weight: 600; line-height: 1.5; }
.claim-result-product { margin: 15px 0 7px; color: #71422d; font-size: 17px; font-weight: 600; line-height: 26px; }
.claim-result-message { margin: 0 0 10px; white-space: pre-line; color: #766b60; font-size: 13px; line-height: 1.7; }
.claim-footnote:empty { display: none; }
.claim-result-eyebrow { display: none; }
.claim-result-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #597650; background: #e9f0e5; }
.claim-result.is-danger .claim-result-icon { color:#b34435; background:#fff0eb; }
.claim-result.is-warning .claim-result-icon { color:#96702d; background:#fbf2df; }
.claim-result-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.claim-result-meta { display: flex; gap: 10px; justify-content: center; font-size: 12px; margin: 10px 0 18px; color: #8b7c70; }
.claim-result-meta strong { color: #514338; font-variant-numeric: tabular-nums; font-weight: 500; }
.claim-redeem-guide { margin-top: 16px; }
.claim-redeem-summary { padding: 14px 12px 12px; border: 1px solid #eadccc; border-radius: 12px; background: #faf6ef; }
.claim-redeem-summary h4 { margin: 0; color: #685447; font-size: 14px; line-height: 22px; font-weight: 500; }
.claim-redeem-quantity { margin: 6px 0 3px; color: #71422d; font-size: 17px; line-height: 32px; font-weight: 500; }
.claim-redeem-quantity strong { font-size: 28px; font-weight: 700; white-space: nowrap; }
.claim-redeem-benefit { margin: 0; color: #766454; font-size: 12px; line-height: 20px; }
.claim-redeem-warning { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid #eadccc; color: #a0462d; font-size: 13px; font-weight: 600; line-height: 21px; }
.claim-mini-program { margin: 16px 0 0; }
.claim-mini-qr { display: block; width: 184px; max-width: 100%; height: auto; margin: 0 auto; padding: 12px; background: #fff; border: 1px solid #eee7de; border-radius: 10px; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; touch-action: auto; }
.claim-mini-instruction { margin: 10px 0 0; color: #5f4839; font-size: 13px; font-weight: 600; line-height: 21px; }
.claim-mini-account { margin: 3px 0 0; color: #8b796b; font-size: 12px; line-height: 19px; }
.claim-config-state { width: min(100%,420px); padding: 20px; border-radius: 16px; background: #fffdf8; text-align: center; }
.claim-state-copy p { font-size: 12px; color: #8a8177; }
.claim-config-state.is-error { color: #a53a32; }
.campaign-skeleton > div { margin-bottom: 12px; border-radius: 10px; background: linear-gradient(100deg,#eee9e2 20%,#f8f5f0 45%,#eee9e2 70%); background-size: 240% 100%; animation: skeleton-shimmer 1.6s infinite; }
.skeleton-image { height: 130px; }
.skeleton-line { height: 22px; width: 70%; margin-inline: auto; }
.skeleton-input { height: 56px; }
.skeleton-button { height: 50px; }
.claim-config-state:not(.is-loading) .campaign-skeleton, .is-loading .claim-state-icon { display: none; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (max-width: 480px) {
  .campaign-content { width: 100%; padding-inline: 12px; }
  .claim-card-body { padding-inline: 16px; }
  .claim-card-heading .claim-kicker { width: 102px; }
}

@media (max-height: 740px) and (max-width: 600px) {
  .claim-page, .claim-shell { min-height: 100dvh; }
  .claim-page { overflow-y: auto; }
  .campaign-content { justify-content: flex-end; padding-top: 90px; padding-bottom: 16px; gap: 8px; }
  .campaign-block-hero { height: min(68dvh, 440px); }
  .claim-card-body { padding-top: 17px; padding-bottom: 15px; }
  .claim-form { margin-top: 12px; gap: 9px; }
  .claim-input { height: 50px; }
  .claim-send-button, .claim-verify-button { height: 46px; }
  .claim-field-help { font-size: 10px; }
  .has-result .claim-result-product { margin-top: 10px; }
  .has-result .claim-result-meta { margin-bottom: 12px; }
  .claim-redeem-guide { margin-top: 12px; }
  .claim-redeem-summary { padding: 11px 10px 10px; }
  .claim-mini-program { margin-top: 12px; }
  .claim-mini-qr { width: 160px; padding: 10px; }
}

@media (max-height: 560px) and (max-width: 600px) {
  .campaign-content { padding-top: 72px; }
  .claim-card-body { padding-top: 14px; padding-bottom: 12px; }
  .claim-card-heading h2 { font-size: 19px; line-height: 26px; }
  .claim-footnote { margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) { .campaign-skeleton > div { animation: none; } }

.claim-footer-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin-top:16px}
.campaign-block-form:not(.has-result) .claim-footer-actions{margin-top:50px}
.claim-footer-actions .claim-footnote{margin:0}
.claim-feedback-trigger{padding:2px 0;border:0;background:none;color:#896348;font:inherit;font-size:11px;line-height:18px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.feedback-dialog{width:calc(100% - 24px);max-width:420px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:22px;border:1px solid #e4dbcf;border-radius:18px;background:#fff;color:#493b30;overflow:auto;box-shadow:0 20px 80px #30201433}
.feedback-dialog:not([open]){display:none}
.feedback-dialog::backdrop{background:#2d2314a6}
.feedback-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.feedback-heading h2{margin:0;font-size:19px;font-weight:600}
.feedback-heading button{padding:6px 0 6px 10px;border:0;background:none;color:#927c68;font-size:13px;cursor:pointer}
#feedback-form label{display:block;margin:0 0 8px;font-size:13px;font-weight:600}
#feedback-form label span{margin-left:6px;color:#9a8a7a;font-size:11px;font-weight:400}
#feedback-content,#feedback-phone{display:block;box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #dacfc1;border-radius:9px;background:#fffdf9;color:#342b25;font-family:inherit;font-size:16px;line-height:1.5;box-shadow:none;-webkit-appearance:none}
#feedback-content{min-height:112px;max-height:230px;resize:vertical}
#feedback-phone{height:46px}
#feedback-content:focus,#feedback-phone:focus{outline:2px solid #ad86674d;outline-offset:1px;border-color:#9b7458}
.feedback-field-meta{display:flex;justify-content:space-between;gap:8px;margin:6px 0 20px;color:#a18e7b;font-size:10px;line-height:16px}
.feedback-field-meta span:last-child{flex-shrink:0;font-variant-numeric:tabular-nums}
.feedback-notice{margin:14px 0 0;color:#a35034;font-size:12px;line-height:1.6}
.feedback-submit{display:block;width:100%;min-height:46px;margin-top:22px;font-size:15px}
.feedback-success{text-align:center;padding:10px 0 0}
.feedback-success strong{display:block;color:#4f6c44;font-size:19px}
.feedback-success p{margin:10px 0 26px;color:#8f7e6c;font-size:13px;line-height:1.7}
.feedback-backdrop{position:fixed;inset:0;z-index:999;background:#2d2314a6}
.feedback-dialog-fallback[open]{display:block;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:1000}
@media(max-height:620px){.feedback-dialog{padding:18px}.feedback-heading{margin-bottom:14px}.feedback-field-meta{margin-bottom:14px}.feedback-submit{margin-top:16px}}