/* 品牌精修：统一间距、文字层级与表格。保留现有江城主图及活动流程。 */
:root {
  --ink:#29252a; --secondary:#595258; --muted:#746c70;
  --wine:#a51d57; --deep:#871744; --accent-soft:#fcf5f8;
  --line:#e6e1e3; --paper:#faf8f8; --surface:#fff; --raised:#f6f3f4;
  --ui:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  --display:"STSong","Songti SC","Noto Serif CJK SC","SimSun",serif;
  --figures:Arial,"Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font:15px/1.65 var(--ui); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4,b,strong { font-weight:600; }
button,input,textarea { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; color:inherit; border:0; background:none; }
button:disabled { cursor:default; opacity:.6; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--wine); outline-offset:4px; }
button,a { transition:background-color 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease); }
.wrap { width:min(1184px,calc(100% - 96px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; }

/* 公共头部：品牌细线与清晰的当前栏目。 */
header { border-top:3px solid var(--deep); background:var(--surface); border-bottom:1px solid var(--line); }
.head { min-height:80px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; flex:none; }
.brand img { width:176px; height:auto; }
.head-title { border-left:1px solid var(--line); padding-left:24px; font-size:14px; color:var(--secondary); white-space:nowrap; }
nav { display:flex; gap:32px; align-self:stretch; margin-left:auto; }
nav a { position:relative; display:flex; align-items:center; color:var(--secondary); font-size:14px; white-space:nowrap; min-height:44px; }
nav a:hover { color:var(--wine); }
nav a[aria-current] { color:var(--wine); font-weight:600; }
nav a[aria-current]:after { content:""; position:absolute; bottom:12px; left:0; right:0; height:2px; background:var(--wine); }
.rules { display:flex; align-items:center; gap:8px; min-height:40px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; margin-left:8px; white-space:nowrap; }
.rules:hover,.secondary:hover { background:var(--raised); border-color:#d7c7ce; }
.account-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; border-top:1px solid var(--line); font-size:13px; }
.account-strip[hidden] { display:none; }
.account-identity { min-width:0; display:flex; align-items:center; gap:12px; }
.account-identity>span { flex:none; color:var(--muted); }
.account-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-strip .text-link { flex:none; min-height:44px; padding:8px 0; font-size:13px; }
main { padding-top:24px; }

/* 首页主视觉。颜色集中在江城画面，表单与活动入口保持安静。 */
.hero { position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; min-height:280px; border-radius:16px; background:#891439 url("../asset/images/jiangcheng.webp") center / 100% 100% no-repeat; color:#fff9ee; }
.hero-copy { position:relative; padding:32px 4.4%; }
.campaign-tag { display:flex; align-items:center; gap:12px; font-size:13px; color:#ffdeb1; }
.campaign-tag span { width:32px; height:1px; background:currentColor; }
.hero h1 { font:600 clamp(36px,4.3vw,60px)/1.3 var(--display); margin:12px 0; letter-spacing:.02em; }
.title-space { display:inline-block; width:.23em; }
.hero-copy>p { color:#ffebdf; font-size:14px; }
.hero-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:#fff0d9; border:1px solid #e7bbb28c; border-radius:8px; padding:8px 16px; font-size:13px; margin-top:20px; }
.hero-link:hover { background:#fff1db16; }
.home-grid,.detail-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:24px; margin-top:24px; align-items:start; }
.panel { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 1px 2px #29252a03; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-title h2 { font-size:24px; line-height:1.4; }
.sub { color:var(--secondary); font-size:14px; margin-top:8px; line-height:1.7; }
.member-identity { display:grid; gap:4px; margin:24px 0 16px; }
.member-identity strong { font-size:28px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.member-identity span { color:var(--muted); font:13px/1.65 var(--figures); font-variant-numeric:tabular-nums; }
.member-actions { display:grid; gap:12px; margin-top:24px; }
.member-actions .secondary { margin:0; }
.safe { color:var(--muted); font-size:12px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.safe .icon { width:16px; height:16px; }
form { margin-top:24px; }
.field-label { display:block; font-size:14px; font-weight:500; margin:16px 0 8px; }
.field { background:var(--surface); border:1px solid #d9d1d5; border-radius:8px; min-height:48px; display:flex; align-items:center; gap:12px; padding:0 12px; }
.field:focus-within { border-color:var(--wine); }
.field .icon { color:var(--muted); }
.field input { width:100%; min-width:0; outline:0; background:transparent; border:0; color:var(--ink); font-size:16px; height:44px; }
.field input::placeholder { color:var(--muted); font-size:14px; }
.field button { flex:none; min-height:44px; border-left:1px solid var(--line); padding:0 0 0 12px; font-size:13px; font-weight:500; color:var(--wine); }
.agree { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--secondary); margin:20px 0; line-height:1.8; }
.agree input { flex:none; margin:4px 0 0; width:16px; height:16px; accent-color:var(--wine); }
.agree button { color:var(--wine); padding:0; font-size:inherit; }
.primary,.secondary { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:8px 16px; border-radius:8px; font-weight:500; }
/* 同色相的微小明暗变化延续用户指定的品牌按钮。 */
.primary { background:linear-gradient(105deg,#a51d57,#98194f); color:#fff; }
.primary:hover { background:var(--deep); }
.primary:active { transform:translateY(1px); }
.secondary { margin-top:12px; border:1px solid var(--line); color:var(--wine); background:var(--surface); }
.error { color:#9e233b; font-size:13px; margin-bottom:12px; }
.error:empty { display:none; }
.perks { display:flex; flex-direction:column; }
.offer-shortcuts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:24px; }
.offer-shortcuts button { text-align:left; padding:0 0 16px; border-bottom:2px solid #dcc1cd; min-width:0; }
.offer-shortcuts button:hover { border-color:var(--wine); }
.offer-shortcuts button>span { font-size:14px; font-weight:500; color:var(--ink); }
.offer-shortcuts button>strong { display:block; font:500 24px/1.4 var(--figures); margin:8px 0; color:var(--wine); font-variant-numeric:tabular-nums; }
.offer-shortcuts strong small { font:400 12px var(--ui); }
.offer-shortcuts button>small { display:block; color:var(--muted); font-size:12px; line-height:1.7; }
.offer-shortcuts .icon { width:16px; height:16px; }
.perk { position:relative; isolation:isolate; display:flex; align-items:center; width:100%; min-height:112px; border-radius:8px; text-align:left; overflow:hidden; padding:16px; }
.perk>div { z-index:1; }
.perk-tag { color:var(--muted); font-size:12px; line-height:1.5; }
.perk h3 { font-size:20px; line-height:1.4; margin:4px 0; }
.perk p { font-size:13px; color:var(--secondary); }
.perk strong { color:var(--wine); font:500 24px var(--figures); font-variant-numeric:tabular-nums; margin-left:4px; }
.perk strong small { font-size:14px; }
.perk img { position:absolute; z-index:0; right:6%; width:29%; height:88%; object-fit:contain; }
.perk-arrow { display:grid; place-items:center; position:absolute; right:12px; color:var(--muted); }
.savings { background:#f7f4ee; margin:20px 0 12px; }
.prizes { background:var(--raised); }
.perk:hover { background:#f0ebec; }
footer { margin-top:32px; padding:20px 0 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
footer b { font-weight:400; color:#b5aab0; }

/* 存款礼遇：先读摘要，再直接比较金额和奖励；不以等高空白撑开内容。 */
.benefits-heading,.rewards-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:8px 0 24px; }
.eyebrow { font-size:13px; color:var(--wine); margin-bottom:8px; }
.benefits-heading h1,.rewards-heading h1 { font:500 32px/1.4 var(--display); }
.benefits-season { flex:none; font-size:13px; color:var(--muted); padding-bottom:4px; }
.benefit-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.benefit-title { display:flex; gap:12px; align-items:baseline; }
.benefit-index { color:var(--wine); font:400 14px var(--figures); font-variant-numeric:tabular-nums; }
.benefit-title h2 { font-size:24px; line-height:1.4; }
.benefit-title p { font-size:13px; color:var(--muted); margin-top:8px; }
.benefit-highlight { display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:baseline; margin:24px 0 16px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.benefit-highlight>span { font-size:13px; color:var(--secondary); }
.benefit-highlight>strong { grid-column:1; font:500 36px/1.35 var(--figures); font-variant-numeric:tabular-nums; margin-top:4px; color:var(--wine); white-space:nowrap; }
.benefit-highlight small { font:400 14px var(--ui); color:var(--secondary); }
.benefit-highlight>b { grid-column:2; grid-row:2; font-size:12px; font-weight:400; color:var(--muted); text-align:right; }
.benefit-description { font-size:14px; line-height:1.85; color:var(--secondary); margin-bottom:24px; }
.benefit-description strong { color:var(--ink); font-weight:500; }
.benefit-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-top:2px solid var(--wine); border-radius:0 0 8px 8px; overflow:hidden; margin:0; table-layout:fixed; font-size:14px; }
.benefit-table thead th { background:var(--raised); color:var(--secondary); text-align:left; padding:12px 16px; font-size:13px; font-weight:500; border:0; border-bottom:1px solid var(--line); }
.benefit-table thead th:first-child { width:52%; }
.benefit-table tbody th,.benefit-table tbody td { padding:16px; text-align:left; vertical-align:middle; border:0; border-bottom:1px solid var(--line); line-height:1.5; font-weight:400; }
.benefit-table tbody th { background:var(--surface); color:var(--secondary); }
.benefit-table tbody td { background:var(--accent-soft); color:var(--deep); }
.benefit-table tbody tr:last-child th,.benefit-table tbody tr:last-child td { border-bottom:0; }
.benefit-table tbody th strong { font:500 22px/1.5 var(--figures); color:var(--ink); font-variant-numeric:tabular-nums; }
.benefit-table tbody th>span { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.benefit-table tbody td>strong { font:600 20px/1.5 var(--ui); display:inline-block; color:var(--deep); }
.gift-quantity { display:block; font-size:14px; font-weight:400; margin-top:4px; }
.gift-alternative { display:block; font-size:14px; font-weight:400; line-height:1.7; margin-top:4px; }
.benefit-table tbody td .points-number { font:500 36px/1.3 var(--figures); font-variant-numeric:tabular-nums; display:inline-block; margin-right:8px; }
.points-unit { font-size:13px; white-space:nowrap; }
.benefit-note { font-size:12px; color:var(--muted); line-height:1.8; margin-top:16px; }
.points-explanation { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.points-explanation h3 { font-size:16px; margin-bottom:8px; }
.points-explanation p { font-size:14px; color:var(--secondary); line-height:1.8; }
.points-formula { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; background:var(--raised); border-radius:8px; margin-top:16px; font-size:13px; color:var(--secondary); }
.points-formula b { color:var(--muted); font-weight:400; }
.points-formula strong { color:var(--wine); font-weight:500; }
.page-panel { margin-top:24px; }
.detail-grid .page-panel { margin-top:0; }
.muted,.helper-title small { font-size:12px; color:var(--muted); font-weight:400; }
.rate-grid,.features { display:grid; gap:24px; margin-top:24px; }
.rate-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.rate-block { border:1px solid var(--line); overflow:hidden; border-radius:8px; }
.rate-block h3 { font-size:16px; background:var(--raised); color:var(--ink); padding:12px 16px; }
table { border-collapse:collapse; width:100%; font-size:14px; text-align:center; }
th { background:#fcfafb; font-size:13px; font-weight:400; color:var(--muted); }
td,th { padding:12px 8px; border-bottom:1px solid var(--line); }
tr:last-child td { border:0; }
td strong { font:500 24px var(--figures); color:var(--wine); font-variant-numeric:tabular-nums; }
td small { font-size:14px; }
.features { grid-template-columns:repeat(3,minmax(0,1fr)); }
.features>div { display:flex; align-items:center; gap:12px; }
.features .icon { width:40px; height:40px; padding:8px; color:var(--muted); }
.features b { font-weight:500; }
.features small,.level small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.fixed-cta { position:fixed; bottom:0; left:0; right:0; padding:12px 20px max(12px,env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); z-index:5; }
.fixed-cta .primary { max-width:432px; margin:auto; }
.has-fixed { padding-bottom:88px; }

/* 邀请进度：人数、阶梯奖励和账号操作分层。 */
.compact { min-height:200px; }
.compact h1 { font-size:40px; }
.counter { margin:24px 0 12px; color:var(--secondary); }
.counter strong { font:500 48px var(--figures); color:var(--wine); font-variant-numeric:tabular-nums; }
progress { width:100%; height:8px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--wine); }
progress::-webkit-progress-bar { background:var(--raised); }
progress::-webkit-progress-value { background:var(--wine); border-radius:8px; }
.detail-grid .primary { margin-top:24px; }
.helper-title { margin:24px 0 16px; border-top:1px solid var(--line); padding-top:20px; font-size:16px; }
.avatars { padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0; }
.avatars li { text-align:center; }
.avatar { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--raised); color:var(--muted); }
.avatars small { display:block; color:var(--muted); font-size:12px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.helpers-empty { color:var(--muted); font-size:13px; }
.level { display:flex; align-items:center; gap:12px; padding:20px 0; border-bottom:1px solid var(--line); color:var(--secondary); }
.level:last-child { border:0; }
.level h3 { font-size:16px; font-weight:500; }
.level-icon,.result-icon { display:grid; place-items:center; color:var(--muted); background:var(--raised); padding:12px; width:44px; height:44px; border-radius:8px; flex:none; }
.state { margin-left:auto; font-size:12px; display:flex; align-items:center; gap:4px; flex:none; }
.state .icon { width:16px; height:16px; }
.unlocked { color:var(--wine); }
.unlocked .level-icon { background:var(--accent-soft); color:var(--wine); }
.levels { margin-top:8px; }
.account-menu { display:flex; flex-wrap:wrap; gap:12px; background:transparent; border:0; padding:0; box-shadow:none; }
.account-menu .secondary { width:auto; margin:0; min-height:44px; }
.account-input { width:100%; min-height:48px; padding:12px; border:1px solid #d9d1d5; border-radius:8px; background:var(--surface); margin-bottom:12px; }
.test-notice { color:var(--secondary); font-size:13px; line-height:1.8; padding:12px 16px; border-left:2px solid var(--wine); background:var(--raised); margin:0 0 20px; }
.test-tools .test-notice { margin-bottom:16px; }
.test-controls { display:flex; flex-wrap:wrap; gap:12px; }
.test-controls .primary,.test-controls .secondary { flex:1 1 180px; width:auto; margin:0; }

/* 获奖记录：编号与时间对齐；兑奖说明保持次要层级。 */
.text-link { color:var(--wine); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; font-size:14px; flex:none; }
.text-link:hover { color:var(--deep); text-decoration:underline; text-underline-offset:4px; }
.rewards-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; gap:24px; }
.records-message { padding:32px 0; color:var(--muted); }
.records-count { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; font-size:14px; padding:20px 0; border-bottom:2px solid var(--wine); margin-top:4px; }
.records-count strong { color:var(--wine); font:500 32px var(--figures); font-variant-numeric:tabular-nums; }
.records-count span { font-size:12px; color:var(--muted); margin-left:auto; }
.grant-card { padding:24px 0; border-bottom:1px solid var(--line); min-width:0; }
.grant-card:last-child { border-bottom:0; padding-bottom:0; }
.grant-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.grant-kind { font-size:12px; color:var(--muted); }
.grant-badge { font-size:12px; line-height:1.6; color:var(--wine); }
.grant-card h3 { font-size:24px; line-height:1.4; font-weight:500; }
.grant-card dl { font-size:13px; margin:16px 0; }
.grant-card dl div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding:4px 0; }
.grant-card dt { color:var(--muted); }
.grant-card dd { margin:0; overflow-wrap:anywhere; font-family:var(--figures); font-variant-numeric:tabular-nums; min-width:0; }
.grant-card .secondary { min-height:44px; font-size:14px; margin:0; width:auto; padding-inline:16px; }
.no-reward h3 { font-size:20px; color:var(--muted); }
.no-reward .grant-badge { color:var(--muted); }
.records-empty { padding:32px 0 16px; text-align:center; }
.records-empty>.icon { width:40px; height:40px; color:var(--muted); margin-bottom:16px; }
.records-empty h3 { font-size:20px; }
.records-empty p { font-size:14px; color:var(--secondary); max-width:320px; margin:12px auto 20px; }
.records-empty .secondary { min-height:44px; display:inline-flex; width:auto; padding-inline:20px; }
.pickup-symbol { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--muted); background:var(--raised); border-radius:8px; margin-bottom:16px; }
.pickup-guide h2 { font-size:24px; line-height:1.4; }
.pickup-guide>p { font-size:14px; color:var(--secondary); margin:12px 0 24px; }
.pickup-guide ol { list-style:none; counter-reset:pickup; margin:0; padding:0; }
.pickup-guide li { position:relative; counter-increment:pickup; padding:0 0 24px 36px; }
.pickup-guide li:before { content:counter(pickup,decimal-leading-zero); position:absolute; left:0; top:0; color:var(--wine); font:400 14px/1.65 var(--figures); font-variant-numeric:tabular-nums; }
.pickup-guide li b { display:block; font-size:15px; font-weight:500; }
.pickup-guide li span { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.pickup-footnote { font-size:12px!important; line-height:1.8!important; color:var(--muted)!important; border-top:1px solid var(--line); padding-top:16px; margin:12px 0 0!important; }

/* 通用弹窗及兑奖记录单。兑奖二维码 225px，邀请二维码 240px，保留白色静区。 */
html:has(dialog[open]) { overflow:hidden; }
dialog { border:1px solid var(--line); border-radius:16px; max-width:min(420px,calc(100vw - 32px)); width:100%; max-height:85dvh; padding:24px; color:var(--ink); box-shadow:0 16px 64px #29252a26; overscroll-behavior:contain; }
dialog::backdrop { background:#29252a66; }
dialog h2 { font-size:24px; line-height:1.4; padding-right:32px; }
dialog p,dialog li { font-size:14px; line-height:1.85; margin:12px 0; color:var(--secondary); }
dialog ol { padding-left:24px; }
.close { position:absolute; right:12px; top:12px; width:44px; height:44px; border-radius:8px; }
.close:hover { background:#29252a08; }
.gift-list { list-style:none; padding:0; }
.gift-list li { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:8px 0; }
.invite-qr { margin:24px auto 16px; text-align:center; }
.invite-qr img { display:block; width:240px; height:240px; max-width:100%; object-fit:contain; margin:auto; }
.invite-qr figcaption { margin-top:8px; color:var(--secondary); font-size:13px; }
.share-dialog .invite-qr { margin:16px auto; }
.share-actions { display:flex; gap:12px; }
.share-actions>* { flex:1; min-width:0; margin:0; font-size:14px; padding-inline:12px; }
.support-heading { max-width:560px; margin:8px auto 16px; }
.support-card { max-width:560px; margin:0 auto 32px; padding:32px 24px; text-align:center; }
.support-card h1 { font:600 28px/1.4 var(--display); margin:16px 0 12px; }
.support-mark { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:var(--accent-soft); color:var(--wine); border-radius:50%; }
.support-mark .icon { width:32px; height:32px; }
.support-message { color:var(--secondary); overflow-wrap:anywhere; }
.support-prize { margin:24px 0; padding:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.support-prize > span { color:var(--secondary); }
.support-prize strong { display:block; color:var(--wine); font:500 32px/1.5 var(--ui); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; margin:4px 0; }
.support-prize strong small { font-size:16px; }
.support-prize p,.support-footnote { color:var(--muted); font-size:13px; }
.support-actions { display:grid; gap:12px; margin-top:24px; }
.support-actions .secondary { display:flex; align-items:center; justify-content:center; margin:0; }
.support-footnote { margin-top:20px; }
.invitation-note { color:var(--secondary); padding:16px; border-left:3px solid var(--wine); background:var(--surface); margin-bottom:20px; }
.share-url { width:100%; font-size:13px; padding:12px; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
#toast { pointer-events:none; position:fixed; bottom:32px; left:50%; transform:translateX(-50%); z-index:10; max-width:calc(100vw - 32px); width:max-content; background:#29252af5; color:#fff; border-radius:8px; padding:12px 16px; font-size:13px; visibility:hidden; }
.has-fixed #toast { bottom:88px; }
#toast.show { visibility:visible; }
.result-icon { margin:16px auto; }
.redemption-dialog { max-width:min(440px,calc(100vw - 32px)); }
.redemption-dialog .redemption-intro { margin:12px 0 20px; }
.redemption-record { padding:16px; background:var(--raised); border-top:2px solid var(--wine); border-radius:0 0 8px 8px; }
.redemption-record>span { font:400 12px/1.5 var(--figures); color:var(--secondary); overflow-wrap:anywhere; }
.redemption-record h3 { font-size:24px; line-height:1.4; margin-top:8px; }
.redemption-record p { margin:8px 0 0; font-size:12px; }
.contact-qr { margin:24px auto 12px; text-align:center; }
.contact-qr img { display:block; width:225px; height:225px; max-width:100%; object-fit:contain; margin:0 auto; background:#fff; }
.contact-qr figcaption { font-size:12px; color:var(--muted); margin-top:8px; }
.contact-person { text-align:center; margin-bottom:24px; }
.contact-person strong { font-size:16px; font-weight:500; }
.contact-person p { font-size:13px; margin:4px 0; }
.record-copy { display:block; width:100%; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--secondary); font:13px/1.8 var(--ui); margin:8px 0 16px; min-height:132px; }
.qr-download { display:flex; align-items:center; justify-content:center; min-height:44px; }

@media(min-width:1500px) {
  main { padding-top:32px; }
  .hero { min-height:312px; }
}
@media(max-width:1100px) {
  .head { gap:16px; }
  nav { gap:20px; }
  .head-title { padding-left:16px; font-size:13px; }
}
@media(max-width:950px) {
  .wrap { width:calc(100% - 48px); }
  .brand img { width:152px; }
  .head-title { display:none; }
  .home-grid,.detail-grid,.benefit-grid { gap:16px; }
  .hero { min-height:248px; }
  .panel { padding:20px; }
  .benefit-highlight { grid-template-columns:1fr; }
  .benefit-highlight>b { grid-column:1; grid-row:3; text-align:left; margin-top:4px; }
  .benefit-table thead th,.benefit-table tbody th,.benefit-table tbody td { padding-inline:12px; }
  .benefit-table tbody th strong { font-size:20px; }
  .benefit-table tbody td>strong { font-size:18px; }
  .points-unit { display:block; }
}
@media(max-width:730px) {
  .wrap { width:calc(100% - 32px); }
  .head { min-height:64px; flex-wrap:wrap; gap:0; padding-top:12px; }
  .brand img { width:132px; }
  .head-title { display:block; font-size:12px; padding-left:12px; margin-left:12px; }
  .rules { margin-left:auto; min-height:44px; font-size:12px; padding:8px; gap:4px; }
  .rules .icon { width:16px; height:16px; }
  nav { order:4; width:100%; justify-content:space-between; gap:0; margin:8px 0 0; }
  nav a { min-height:44px; font-size:13px; padding-inline:4px; }
  nav a[aria-current]:after { bottom:0; left:4px; right:4px; }
  main { padding-top:20px; }
  .hero { min-height:224px; background-size:auto 100%; background-position:98% center; border-radius:12px; }
  .hero:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#831137e6 0%,#85133a8c 36%,transparent 78%); }
  .hero-copy { padding:20px; }
  .hero h1 { font-size:32px; line-height:1.25; margin:12px 0; }
  .hero .title-space { display:block; }
  .hero-copy>p { font-size:12px; max-width:204px; }
  .campaign-tag { font-size:12px; gap:8px; }
  .campaign-tag span { width:20px; }
  .hero-link { font-size:12px; margin-top:16px; padding:8px 12px; gap:8px; }
  .home-grid,.detail-grid,.rate-grid,.benefit-grid,.rewards-layout { grid-template-columns:minmax(0,1fr); }
  .home-grid,.detail-grid { margin-top:20px; gap:20px; }
  .panel { border-radius:12px; padding:20px; }
  .section-title h2,.benefit-title h2 { font-size:22px; }
  .sub { font-size:13px; }
  .field input::placeholder { font-size:13px; }
  .agree { font-size:12px; }
  .offer-shortcuts { gap:12px; }
  .offer-shortcuts button>strong { font-size:22px; }
  .offer-shortcuts strong small { font-size:12px; }
  .perk img { width:100px; right:16px; }
  .perk h3 { font-size:20px; }
  .compact { min-height:160px; }
  .compact h1 { font-size:28px; }
  .features { grid-template-columns:1fr; gap:20px; }
  .page-panel { margin-top:20px; }
  footer { font-size:12px; gap:8px; flex-direction:column; margin-top:24px; padding-top:16px; }
  .benefits-heading,.rewards-heading { margin:4px 0 20px; gap:12px; align-items:flex-start; flex-wrap:wrap; }
  .benefits-heading h1,.rewards-heading h1 { font-size:28px; line-height:1.4; }
  .benefits-season { font-size:12px; }
  .benefit-grid { gap:20px; }
  .benefit-title { gap:8px; }
  .benefit-title p { font-size:12px; margin-top:4px; }
  .benefit-highlight { margin-top:20px; }
  .benefit-highlight>strong { font-size:32px; }
  .benefit-description { font-size:14px; margin-bottom:20px; }
  .benefit-table { font-size:13px; }
  .benefit-table thead th { font-size:12px; padding:12px; }
  .benefit-table tbody th,.benefit-table tbody td { padding:16px 12px; }
  .benefit-table tbody th>span { font-size:12px; }
  .gift-alternative { font-size:12px; }
  .benefit-table tbody td .points-number { font-size:32px; }
  .points-formula { align-items:flex-start; flex-direction:column; gap:4px; }
  .points-formula b { line-height:1; }
  .points-unit { display:inline; font-size:12px; }
  .rewards-heading .text-link { font-size:13px; }
  .rewards-layout { gap:20px; }
  .grant-card h3 { font-size:22px; }
  .grant-card .secondary { width:100%; }
  .records-count span { width:100%; margin-left:0; }
  .account-menu { gap:8px; }
  .account-menu .secondary { flex:1 1 auto; }
  .redemption-dialog,.share-dialog { padding:20px; }
}
@media(max-width:400px) {
  .head-title { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { scroll-behavior:auto!important; transition-duration:0ms!important; }
}