/* Coupon Center only: shared navigation/footer retain their own styles. */
.coupon-shell .reward-showcase { height:190px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 130%,#adf4e7,transparent 65%),linear-gradient(135deg,#12445b,#167c89); color:#c8fff3; }
.coupon-shell .reward-vip .reward-showcase { background:radial-gradient(ellipse at 50% 130%,#fae5a7,transparent 65%),linear-gradient(135deg,#33264f,#6a4b88); color:#ffe2a1; }
.coupon-shell .reward-emblem { font-size:90px; line-height:1; z-index:1; text-shadow:0 12px 30px #0003; transform:rotate(-8deg); }
.coupon-shell .reward-orbit { width:140px; height:140px; border:1px solid #ffffff40; border-radius:50%; position:absolute; box-shadow:0 0 0 24px #ffffff08,0 0 0 48px #ffffff05; }
.coupon-shell .reward-art-caption { position:absolute; bottom:14px; font-size:9px; letter-spacing:2px; font-weight:800; }
.coupon-shell .reward-kicker { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.coupon-shell .reward-delivery { font-size:11px; color:var(--coupon-muted); }
.coupon-shell .reward-progress { margin:14px 0 20px; }
.coupon-shell .reward-progress label { font-size:12px; font-weight:700; }
.coupon-shell .reward-progress progress { display:block; width:100%; height:8px; margin-top:10px; border:0; border-radius:99px; overflow:hidden; background:var(--coupon-line); accent-color:#168c82; }
.coupon-shell progress::-webkit-progress-bar { background:var(--coupon-line); }
.coupon-shell progress::-webkit-progress-value { background:#168c82; border-radius:99px; }
.coupon-shell .reward-transfer-note { margin:24px 0; color:var(--coupon-muted); font-size:13px; }
.coupon-shell .reward-confirm { box-sizing:border-box; width:calc(100% - 32px); max-width:460px; padding:30px; border:1px solid var(--coupon-line); border-radius:24px; color:var(--coupon-ink); background:var(--coupon-card); box-shadow:0 20px 100px #0005; }
.reward-confirm::backdrop { background:#071b35b0; backdrop-filter:blur(4px); }
.coupon-shell .reward-dialog-close { float:right; background:none; border:0; font-size:28px; color:inherit; }
.coupon-shell .reward-confirm-actions { display:grid; gap:10px; }
body.coupon-page {
    --coupon-card: #fff; --coupon-ink: #18384f; --coupon-muted: #536c80;
    --coupon-line: #d9e9f1; --coupon-soft: #eff8fd; --coupon-accent: #087ab8;
    --coupon-shadow: 0 12px 36px rgba(21, 67, 98, .06);
    background: radial-gradient(circle at 10% 0, #dff4ff 0, transparent 34rem), #f5f9fc;
    color: var(--coupon-ink);
}
body.coupon-page.dark-mode {
    --coupon-card: #162231; --coupon-ink: #e8f3fb; --coupon-muted: #a2b7ca;
    --coupon-line: #2b4055; --coupon-soft: #192d40; --coupon-accent: #7ad3ff;
    --coupon-shadow: 0 12px 36px rgba(0, 0, 0, .12);
    background: radial-gradient(circle at 10% 0, #142d46 0, transparent 34rem), #0f1722 !important;
    color: var(--coupon-ink) !important; color-scheme: dark;
}
.coupon-page .coupon-shell { max-width: 1100px; margin: auto; padding: 28px 20px 64px; color: var(--coupon-ink); overflow-wrap: anywhere; }
.coupon-shell a { color: var(--coupon-accent); text-underline-offset: 3px; }
.coupon-shell p { line-height: 1.65; margin: 0 0 16px; }
.coupon-shell h1,.coupon-shell h2,.coupon-shell h3 { color: inherit; font-weight: 800; }
.coupon-shell h2 { font-size: 24px; letter-spacing: -.5px; margin: 0; }
.coupon-shell h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.5px; margin: 14px 0; }
.coupon-shell button,.coupon-shell a,.coupon-shell summary { -webkit-tap-highlight-color: transparent; }
.coupon-shell :is(a,button,summary):focus-visible { outline: 3px solid var(--coupon-accent); outline-offset: 4px; }
.coupon-shell .coupon-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--coupon-muted); margin-bottom: 22px; }
.coupon-shell .coupon-hero { display: grid; grid-template-columns: minmax(0,1fr) 255px; align-items: center; gap: 32px; padding: 38px; border-radius: 24px; background: linear-gradient(120deg,#102f54,#145b87); color: #fff; box-shadow: var(--coupon-shadow); }
.coupon-hero .hero-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.coupon-shell .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; margin: 0 0 10px; color: var(--coupon-accent); }
.coupon-hero .eyebrow { color: #a2dffb; margin: 0; }
.coupon-shell .coupon-hero h1 { font-size: clamp(32px,4.3vw,49px); line-height: 1.08; letter-spacing: -1.5px; margin: 20px 0 16px; }
.coupon-hero h1 span { color: #91dfff; }
.coupon-shell .coupon-page-title { font-size: 19px; margin: 0 0 8px; }
.coupon-hero p:not(.eyebrow) { color: #d5eafa; max-width: 550px; font-size: 14px; }
.coupon-shell .hero-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 20px; }
.coupon-shell .hero-actions a { color: #d7f2ff; font-size: 12px; font-weight: 700; }
.coupon-shell .balance { padding: 24px; border: 1px solid #ffffff30; background: #ffffff10; border-radius: 18px; min-width: 0; }
.coupon-shell .balance span { color: #cce6f8; font-size: 12px; }
.coupon-shell .balance strong { display: block; color: #fff; font-size: 44px; line-height: 1.3; letter-spacing: -1px; margin: 6px 0 12px; }
.coupon-shell .balance h2 { font-size: 25px; margin: 14px 0; }
.coupon-shell .balance a { color: #bde9ff; font-size: 12px; }
.coupon-shell .beta-badge { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid #f1d783; border-radius: 6px; padding: 4px 8px; color: #74500b; background: #fff0b9; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.coupon-shell .beta-notice { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; margin: 18px 0 30px; border: 1px solid var(--coupon-line); background: var(--coupon-card); border-radius: 14px; }
.beta-notice strong { font-size: 13px; }
.coupon-shell .beta-notice p { font-size: 12px; color: var(--coupon-muted); margin: 5px 0 0; }
.coupon-shell .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 34px 0 18px; }
.coupon-shell .section-heading>span { font-size: 12px; color: var(--coupon-muted); }
.coupon-shell .reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.coupon-shell .reward-card { display: flex; flex-direction: column; border: 1px solid var(--coupon-line); border-radius: 20px; overflow: hidden; background: var(--coupon-card); box-shadow: var(--coupon-shadow); }
.coupon-shell .reward-art { height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.coupon-shell .reward-art::before,.coupon-shell .reward-art::after { content: ''; position: absolute; width: 240px; height: 240px; border: 1px solid #ffffff30; border-radius: 50%; top: -170px; left: -70px; }
.coupon-shell .reward-art::after { left: auto; right: -70px; top: 50px; }
.coupon-shell .water { background: linear-gradient(125deg,#126ca2,#12a5c3); color: #fff; }
.coupon-shell .auction { background: linear-gradient(125deg,#333f6f,#65588b); color: #f0eeff; }
.coupon-shell .reward-art>span { font-size: 58px; line-height: 1.1; font-weight: 800; letter-spacing: -3px; }
.coupon-shell .reward-art .percent { font-size: 35px; }
.coupon-shell .reward-art small { font-size: 9px; letter-spacing: 2px; margin-top: 12px; text-align: center; }
.coupon-shell .reward-body { flex: 1; padding: 26px; }
.coupon-shell .tag { display: inline-block; border-radius: 6px; padding: 5px 8px; background: var(--coupon-soft); color: var(--coupon-accent); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.coupon-shell .reward-body p { color: var(--coupon-muted); min-height: 68px; font-size: 14px; }
.coupon-shell .reward-price { font-size: 27px; font-weight: 850; margin: 22px 0 16px; }
.coupon-shell .reward-price span { font-size: 12px; color: var(--coupon-muted); font-weight: 500; }
.coupon-shell .primary,.coupon-shell .secondary { display: inline-block; padding: 12px 16px; border: 1px solid var(--coupon-line); border-radius: 10px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 750; cursor: pointer; }
.coupon-shell .primary { background: linear-gradient(120deg,#0877bb,#1399c9); border-color: #128bc1; color: #fff; }
.coupon-shell .secondary { background: var(--coupon-soft); color: var(--coupon-accent); }
.coupon-shell .primary:hover { filter: brightness(1.08); }
.coupon-shell button:disabled { opacity: .65; cursor: not-allowed; filter: none; }
.coupon-shell .reward-body :is(button,a.primary) { width: 100%; }
.coupon-shell .reward-body small { display: block; font-size: 11px; line-height: 1.65; color: var(--coupon-muted); margin-top: 12px; }
.coupon-shell .notice { padding: 16px 18px; background: var(--coupon-soft); border: 1px solid var(--coupon-line); border-radius: 12px; font-size: 13px; margin-top: 16px; }
.coupon-shell .notice.error { background: #fff0ed; color: #8e3426; border-color: #edc6bd; }
.coupon-shell .notice.success { background: #e2f4e9; color: #236140; border-color: #b1d5c0; }
.dark-mode .coupon-shell .notice.error { background: #41292b; color: #ffbfb2; border-color: #744a4a; }
.dark-mode .coupon-shell .notice.success { background: #183b32; color: #9fe6be; border-color: #336151; }
.coupon-shell .reward-body .notice { min-height: 0; }
.coupon-shell .empty { border: 1px dashed var(--coupon-line); background: var(--coupon-card); border-radius: 16px; text-align: center; padding: 32px; font-weight: 700; }
.coupon-shell .empty p { font-weight: 400; font-size: 13px; color: var(--coupon-muted); margin: 8px 0 0; }
.coupon-shell .wallet-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 25px; border: 1px solid var(--coupon-line); border-radius: 18px; background: var(--coupon-card); padding: 26px; }
.coupon-shell .wallet-card p { font-size: 13px; }
.coupon-shell .muted { color: var(--coupon-muted); font-size: 12px; }
.coupon-shell .qr-wrap { background: #fff; border-radius: 12px; max-width: 100%; text-align: center; padding-bottom: 12px; color-scheme: light; }
.coupon-shell .coupon-qr { width: 264px; max-width: 100%; aspect-ratio: 1; height: auto; padding: 28px; background: #fff; }
.coupon-shell .coupon-qr :is(img,canvas) { max-width: 100%; height: auto; }
.coupon-shell .qr-wrap>span { color: #43576c; font-size: 10px; }
.coupon-shell .scan-code { display: block; overflow-wrap: anywhere; color: var(--coupon-ink); background: var(--coupon-soft); padding: 10px; border-radius: 8px; margin-top: 10px; }
.coupon-shell .history { margin-top: 20px; font-size: 13px; line-height: 2; }
.coupon-shell summary { cursor: pointer; font-weight: 700; }
.coupon-shell .earning { margin-top: 40px; scroll-margin-top: 95px; }
.coupon-shell .earning-intro { color: var(--coupon-muted); max-width: 780px; font-size: 14px; }
.coupon-shell .earning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.coupon-shell .earning-card { background: var(--coupon-card); border: 1px solid var(--coupon-line); border-radius: 16px; padding: 26px; }
.coupon-shell .earn-step { display: block; color: var(--coupon-muted); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 16px; }
.coupon-shell .earn-value { display: block; color: var(--coupon-accent); font-size: 32px; }
.coupon-shell .earn-value span { font-size: 11px; font-weight: 600; }
.coupon-shell .earning-card h3 { font-size: 19px; margin: 15px 0 12px; }
.coupon-shell .earning-card p,.coupon-shell .earning-card li { font-size: 13px; color: var(--coupon-muted); }
.coupon-shell .earning-card ul { padding-left: 18px; margin: 0; }
.coupon-shell .earning-card li { line-height: 1.6; margin-top: 10px; }
.coupon-shell .milestone-list { margin: 0 0 18px; }
.coupon-shell .milestone-list>div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--coupon-line); padding: 12px 0; }
.coupon-shell .milestone-list dt { font-size: 12px; font-weight: 500; color: var(--coupon-muted); }
.coupon-shell .milestone-list dd { margin: 0; font-size: 12px; font-weight: 800; color: var(--coupon-accent); white-space: nowrap; }
.coupon-shell .earning-rules { background: var(--coupon-card); border: 1px solid var(--coupon-line); padding: 20px; border-radius: 12px; margin-top: 14px; font-size: 13px; }
.coupon-shell .earning-rules p { color: var(--coupon-muted); margin: 14px 0 0; }
.coupon-shell .coupon-beta-footer { text-align: center; color: var(--coupon-muted); font-size: 12px; margin: 26px 0 0; }
@media(max-width:700px) {
    .coupon-page .coupon-shell { padding: 20px 14px 40px; }
    .coupon-shell .coupon-hero { grid-template-columns: 1fr; padding: 25px; gap: 24px; border-radius: 18px; }
    .coupon-shell .balance { padding: 20px; }
    .coupon-shell .balance strong { font-size: 36px; }
    .coupon-shell .reward-grid,.coupon-shell .earning-grid,.coupon-shell .wallet-card { grid-template-columns: 1fr; }
    .coupon-shell .reward-body,.coupon-shell .earning-card { padding: 22px; }
    .coupon-shell .section-heading { align-items: flex-start; flex-wrap: wrap; }
    .coupon-shell .section-heading>span { display: none; }
    .coupon-shell .reward-body p { min-height: 0; }
    .coupon-shell .wallet-card { padding: 20px; }
    .coupon-shell .qr-wrap { justify-self: center; }
    .coupon-shell .beta-notice { padding: 16px; gap: 10px; }
}