/* duo 兑换页：借鉴多邻国的配色、圆角和立体按钮，吉祥物用 haze 的 IP；不使用多邻国官方 logo、猫头鹰和字标 */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(fonts/nunito-latin.woff2) format('woff2-variations'), url(fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --green: #58cc02;
  --green-dark: #58a700;
  --green-soft: #d7ffb8;
  --green-line: #a5ed6e;
  --blue: #1cb0f6;
  --blue-dark: #1899d6;
  --blue-soft: #ddf4ff;
  --blue-line: #84d8ff;
  --red: #ff4b4b;
  --red-dark: #ea2b2b;
  --red-soft: #ffdfe0;
  --red-line: #ffb2b2;
  --yellow-soft: #fff5d3;
  --yellow-line: #ffc800;
  --yellow-ink: #a56700;
  --ink: #3c3c3c;
  --muted: #777;
  --faint: #afafaf;
  --line: #e5e5e5;
  --soft: #f7f7f7;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 页脚始终在页面最底下：内容不满一屏时由 main 撑开 */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  font: 500 16px/1.6 'Nunito', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.3; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 18px; }
p { margin: 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.04em; }

/* 页头：手机上和内容同宽，宽屏时品牌和客服按钮分到两边 */
.top { border-bottom: 2px solid var(--line); background: #fff; }
.top-in { max-width: 520px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.brand img { flex: none; border-radius: 50%; border: 2px solid var(--line); }
.brand b { display: block; font-size: 18px; font-weight: 900; color: var(--green); line-height: 1.2; }
.brand small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.brand-sep { display: none; }
.top-acts { flex: none; display: flex; gap: 8px; }

@media (min-width: 760px) {
  .top-in { max-width: 1280px; padding: 14px 48px; }
  /* 宽屏标题排成一行：hazebot redeem · Duolingo自助兑换 */
  .brand b, .brand small, .brand-sep { display: inline; }
  .brand small { font-size: 16px; }
}

main { flex: 1 0 auto; width: 100%; max-width: 520px; margin: 0 auto; padding: 16px 16px 24px; display: grid; gap: 16px; align-content: start; }
main.is-home { align-content: center; } /* 首页：输码框在页头和页脚之间垂直居中 */
#notice:empty { display: none; }
#view { display: grid; gap: 16px; }

/* 登录页宽屏左右分布：左边进度、订单和提示，右边嵌入的上游登录页，一屏放下不用滚动。
   右栏 524px：iframe 宽 = 524 + 34 = 558，不超过上游内容区的 560px（超过会居中，卡片位置就变了） */
@media (min-width: 1000px) {
  main.split { max-width: 1200px; padding-top: 24px; grid-template-columns: minmax(0, 1fr) 524px; column-gap: 40px; align-items: start; }
  main.split > #notice, main.split > #steps { grid-column: 1 / -1; } /* 进度条单独一行，三步居中、间距收紧 */
  main.split > #steps { justify-content: center; gap: 56px; }
  main.split > #steps li { flex: none; }
  main.split > #view { grid-column: 1; }
  main.split > #embed { grid-column: 2; }
}

/* 顶部三步进度 */
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.steps li span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: #fff; font-size: 13px; font-weight: 800; }
.steps li.now { color: var(--ink); }
.steps li.now span { background: var(--blue); }
.steps li.done { color: var(--green-dark); }
.steps li.done span { background: var(--green); }

/* 卡片与表单 */
.card { border: 2px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; background: #fff; }
.hero { text-align: center; justify-items: center; padding: 28px 20px; }
.hero form { width: 100%; }
.mascot { width: 96px; height: 96px; border-radius: 50%; }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 8px; }
.row > .input { flex: 1; min-width: 0; }
.row > .btn { flex: none; }
.input {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--soft);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
}
.input:focus { border-color: var(--blue); background: #fff; }
.input-code { text-align: center; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.input-code::placeholder { letter-spacing: normal; font-weight: 600; text-transform: none; }

/* 立体按钮：底部 4px 阴影，按下时下沉 */
.btn {
  font: inherit;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.03em;
  border: 0;
  border-radius: 16px;
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.06s, box-shadow 0.06s;
  -webkit-tap-highlight-color: transparent;
}
.btn-block { width: 100%; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-dark); }
.btn-secondary { background: #fff; color: var(--blue); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); padding: 10px 16px; }
.btn-sm { font-size: 14px; border-radius: 12px; padding: 7px 12px; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.btn:disabled { background: var(--line); color: var(--faint); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.link { font: inherit; font-size: 14px; font-weight: 700; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }

/* 订单摘要 */
.summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.badge { flex: none; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.badge-gray { background: var(--soft); color: var(--muted); }
.badge-blue { background: var(--blue-soft); color: var(--blue-dark); }
.badge-green { background: var(--green-soft); color: var(--green-dark); }
.badge-yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.badge-red { background: var(--red-soft); color: var(--red-dark); }
.meta { margin: 0; display: grid; gap: 8px; }
.meta div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.meta dt { color: var(--muted); flex: none; }
.meta dd { margin: 0; font-weight: 700; text-align: right; word-break: break-all; }

/* 错误卡片 */
.alert { border: 2px solid var(--red-line); background: var(--red-soft); border-radius: var(--radius); padding: 18px; display: grid; gap: 10px; }
.alert-title { color: var(--red-dark); display: flex; gap: 8px; align-items: center; }
.alert-title::before { content: '!'; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 15px; }
.alert-warn { border-color: var(--yellow-line); background: var(--yellow-soft); }
.alert-warn .alert-title { color: var(--yellow-ink); }
.alert-warn .alert-title::before { background: var(--yellow-line); }
.alert ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.alert-sub { font-weight: 800; }
.kv { font-size: 15px; }
.kv span { font-weight: 800; }
.kv span::after { content: '：'; }
/* 处理步骤里的跳转按钮 */
.step-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }

/* 嵌入的上游兑换页：iframe 按上游整页大小放，外面开窗只露出上游卡片里登录面板及以下的部分，裁掉页头、步骤条和订单信息。
   数值按上游 2026-10 的布局实测（iframe 宽 ≤560）：登录面板顶端在 365px，卡密那一行在 329～351px；
   卡片左边框在 12px（iframe 宽 ≤360）或 17px 处，--cut-x 正好裁到边框，让上游卡片贴齐窗口两边。上游改版要重新量。
   表单下面的「兑换说明 / 遇到问题」裁不掉，窗口留够展开的高度：说明文字在窄屏更长（520 宽约 224px，339 宽约 433px），按屏宽线性估算。
   本区块不加自己的卡片边框，用上游卡片的边框，顶部补一段圆角上边框；多出来的高度只是空白 */
.embed-window { --cut-x: 17px; --extra: 0px; height: calc(clamp(662px, 1266px - 115.5vw, 922px) + var(--extra)); overflow: hidden; }
/* iframe 要比窗口高很多：上游页底的渐变和草地是 fixed 贴在 iframe 视口底部的，得压到窗口外。窗口从登录面板上方 26px 开始 */
.embed-window iframe { display: block; border: 0; width: calc(100% + 2 * var(--cut-x)); height: 2100px; margin: -339px 0 0 calc(-1 * var(--cut-x)); background: #fff; }
/* 补上上游卡片被裁掉的上边框（颜色、圆角照抄上游）：
   ::before 是不透明白底，盖住卡密那一行（也挡住它的「更换」按钮）和圆角外侧露出来的上游竖边框；::after 画圆角边框 */
.embed-window::before, .embed-window::after { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.embed-window::before { height: 24px; background: #fff; }
.embed-window::after { height: 25px; border: 1px solid #e7ecdf; border-bottom: 0; border-radius: 24px 24px 0 0; }
.embed.is-error .embed-window { --extra: 70px; } /* 失败过：上游在表单上方加一条报错 */
.embed.is-review .embed-window { --extra: 170px; } /* 待核验：上游在表单上方加一段说明 */
@media (min-width: 1000px) {
  main.split .embed-window { height: calc(648px + var(--extra)); } /* 宽屏 iframe 558 宽实测：卡片 420px + 兑换说明展开 224px */
}
/* 嵌入页加载中：盖一层转圈提示（上游页面加载较慢） */
.embed-window { position: relative; }
.embed-loading { position: absolute; inset: 0; z-index: 1; display: none; align-content: start; justify-items: center; gap: 12px; padding-top: 96px; background: #fff; color: var(--muted); font-weight: 700; font-size: 15px; }
.embed.is-loading .embed-loading { display: grid; }
@media (max-width: 358px) {
  .embed-window { --cut-x: 12px; } /* 此时 iframe 宽 ≤360，上游换成窄屏边距 */
}

/* 处理中 */
.progress { text-align: center; justify-items: center; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 5px solid var(--blue-soft); border-top-color: var(--blue); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.track { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; text-align: left; }
.track li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--soft); color: var(--faint); font-weight: 700; font-size: 15px; }
.track li::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.track li.done { color: var(--green-dark); }
.track li.done::before { background: var(--green); }
.track li.now { color: var(--blue-dark); background: var(--blue-soft); }
.track li.now::before { background: var(--blue); }
.note { font-size: 14px; color: var(--muted); }

/* 成功 */
.success { border-color: var(--green-line); background: var(--green-soft); text-align: center; justify-items: center; }
.success h3 { color: var(--green-dark); font-size: 22px; }
.success .meta { width: 100%; background: #fff; border-radius: 12px; padding: 12px 14px; text-align: left; }
.success .row { width: 100%; }
.success .row > .btn { flex: 1; }
.linkbox { width: 100%; background: #fff; border: 2px dashed var(--green-line); border-radius: 12px; padding: 10px 12px; font-size: 14px; word-break: break-all; text-align: left; }

.notice { border: 2px solid var(--yellow-line); background: var(--yellow-soft); color: var(--yellow-ink); border-radius: var(--radius); padding: 12px 16px; font-weight: 700; font-size: 15px; }

footer { width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 16px 40px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; text-align: center; }
footer .link { font-size: inherit; }
@media (min-width: 1000px) {
  footer { max-width: 1200px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; } /* 宽屏排成一行 */
}

/* 客服、售后弹窗 */
dialog { border: 0; border-radius: 20px; padding: 24px; width: min(360px, calc(100vw - 32px)); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.contact { display: grid; gap: 12px; }
.contact-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; }
.contact-item span { flex: none; color: var(--muted); font-size: 14px; }
.contact-item b { flex: 1; min-width: 0; word-break: break-all; }
.qr { width: 200px; height: 200px; margin: 0 auto; border: 2px solid var(--line); border-radius: 12px; display: grid; place-items: center; color: var(--faint); font-size: 14px; overflow: hidden; }
.qr img { width: 100%; height: 100%; object-fit: contain; }

/* 绑定邮箱教程弹窗：比联系客服宽一些，放得下教程图；图片点开看大图 */
dialog.guide { width: min(560px, calc(100vw - 32px)); }
.guide-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 16px; font-size: 15px; }
.guide-steps li > * { margin: 0; } /* li 保持 list-item 才有序号，子项间距用 margin */
.guide-steps li > * + * { margin-top: 8px; }
.guide-img { width: 100%; display: block; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; }
.guide-img img { display: block; width: 100%; height: auto; }

/* 看大图：铺满屏幕；默认适应屏幕，.zoomed 时原尺寸，可滚动拖动看细节 */
#viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border-radius: 0; background: rgba(0, 0, 0, 0.88); overflow: auto; }
#viewer[open] { display: flex; }
#viewer::backdrop { background: transparent; }
#viewer img { margin: auto; max-width: 100%; max-height: 100%; cursor: zoom-in; }
#viewer.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.viewer-close { position: fixed; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; }
.viewer-tip { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 13px; pointer-events: none; }
.contact-item .mono { font-size: 17px; }

#toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; z-index: 10; }

/* 宽屏两侧装饰：绿色色块、点阵、星星和各国「你好」气泡，铺在内容列两边的空白里，不挡内容 */
.deco { display: none; }
@media (min-width: 1000px) {
  .deco { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .deco-side { position: absolute; top: 0; bottom: 0; width: calc(50% - 290px); }
  .deco-l { left: 0; }
  .deco-r { right: 0; }
  body.split .deco { display: none; } /* 左右分布时内容更宽，两边空白放不下装饰 */
}
@media (min-width: 1600px) {
  body.split .deco { display: block; }
  body.split .deco-side { width: calc(50% - 560px); }
}
.shape { position: absolute; display: block; }
.blob-a { width: 460px; left: -170px; bottom: -150px; fill: var(--green-soft); }
.blob-b { width: 380px; right: -130px; bottom: -170px; fill: var(--green-soft); }
.ring { width: 300px; right: -120px; top: 12%; fill: none; stroke: var(--green-soft); stroke-width: 14; }
.dots { width: 120px; height: 120px; fill: var(--green-line); opacity: 0.6; }
.dots-a { top: 16%; left: 8%; }
.dots-b { bottom: 24%; right: 12%; }
.spark { width: 26px; height: 26px; }
.s1 { top: 33%; right: 12%; fill: var(--yellow-line); }
.s2 { top: 72%; left: 22%; width: 18px; height: 18px; fill: var(--blue); }
.s3 { top: 57%; left: 10%; width: 22px; height: 22px; fill: var(--yellow-line); }
.chip {
  position: absolute;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
  border-radius: 16px;
  padding: 8px 16px;
  white-space: nowrap;
  transform: rotate(var(--rot, 0deg));
  animation: bob 6s ease-in-out infinite;
}
.chip-green { background: var(--green); color: #fff; border-color: var(--green-dark); box-shadow: 0 4px 0 var(--green-dark); }
.c1 { top: 24%; right: 16%; --rot: -8deg; }
.c2 { top: 44%; left: 14%; --rot: 6deg; animation-delay: -2s; }
.c3 { top: 61%; right: 20%; --rot: -4deg; animation-delay: -4s; }
.c4 { top: 26%; left: 16%; --rot: 7deg; animation-delay: -1s; }
.c5 { top: 43%; right: 14%; --rot: -6deg; animation-delay: -3s; }
.c6 { top: 63%; left: 26%; --rot: 4deg; animation-delay: -5s; }
.bar { position: absolute; top: 80%; left: 16%; width: 180px; height: 16px; border-radius: 8px; background: var(--line); }
.bar i { position: relative; display: block; width: 64%; height: 100%; border-radius: 8px; background: var(--green); }
.bar i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
@keyframes bob {
  50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}
/* 两侧空白不够宽时少放几个，免得挤 */
@media (max-width: 1199px) {
  .c3, .c6, .dots-a, .bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  .btn { transition: none; }
  .chip { animation: none; }
}