/* 沃农甄选 · 提货卡兑换页样式（从 docs 原型提取，保留响应式与视觉） */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#e9e7e1;color:#1f2d28;-webkit-font-smoothing:antialiased;
}
.page{
  max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;background:#f3f1ec;
  box-shadow:0 0 60px rgba(0,0,0,.09);position:relative;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0);
}

/* ============ 顶部 Banner ============ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#0b3527 0%,#12503a 48%,#0a2f23 100%);
  padding:26px 24px 76px;border-radius:0 0 30px 30px;color:#fff;
}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(212,175,106,.20);}
.ring1{width:260px;height:260px;right:-90px;top:-110px;}
.ring2{width:170px;height:170px;right:-25px;top:-30px;border-color:rgba(212,175,106,.13);}
.ring3{width:320px;height:320px;left:-180px;bottom:-230px;border-color:rgba(212,175,106,.11);}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;
  background:radial-gradient(ellipse at 50% 120%,rgba(212,175,106,.14),transparent 68%);
}

.brand{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.logo{
  width:44px;height:44px;border-radius:13px;flex:none;
  background:linear-gradient(145deg,#e8d09b,#c8a45c 55%,#a9832f);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#0b3527;font-family:"Songti SC",serif;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.brand-name{font-size:17px;font-weight:600;letter-spacing:2.5px;}
.brand-sub{font-size:10px;letter-spacing:3px;color:rgba(226,199,140,.75);margin-top:4px;}

.hero-title{
  position:relative;z-index:2;margin:26px 0 0;
  font-size:25px;font-weight:600;letter-spacing:1px;
}
.hero-title .gold{color:#e2c78c;}
.hero-desc{
  position:relative;z-index:2;margin:10px 0 0;
  font-size:13px;line-height:1.75;color:rgba(255,255,255,.6);letter-spacing:.3px;
}

/* ============ 表单卡片 ============ */
.card{
  position:relative;z-index:3;background:#fff;margin:-50px 16px 0;
  border-radius:22px;padding:6px 20px 26px;
  box-shadow:0 14px 40px rgba(15,58,42,.10),0 2px 8px rgba(15,58,42,.05);
}

.sec-title{
  display:flex;align-items:center;gap:9px;
  margin:22px 0 2px;font-size:14px;font-weight:600;color:#12503a;letter-spacing:.5px;
}
.sec-title::before{
  content:'';width:4px;height:14px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,#d9b96e,#a9832f);
}
.sec-title .line{flex:1;height:1px;background:linear-gradient(90deg,#eeece6,rgba(255,255,255,0));}

.field{margin-top:15px;}
.field label{display:block;font-size:12.5px;color:#5a6b64;margin-bottom:7px;font-weight:500;letter-spacing:.3px;}
.field label .req{color:#c8543a;margin-left:2px;}

.ctrl{
  width:100%;height:48px;border-radius:12px;
  border:1px solid #e6e4dd;background:#faf9f6;
  padding:0 14px;font-size:16px;color:#1f2d28;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
  font-family:inherit;
}
.ctrl::placeholder{color:#b5bab4;font-size:14px;letter-spacing:0;}
.ctrl:focus{border-color:#1a6b4c;background:#fff;box-shadow:0 0 0 3px rgba(26,107,76,.09);}
.ctrl.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;font-size:16px;}
textarea.ctrl{height:auto;padding:13px 14px;line-height:1.6;resize:none;font-size:15px;}

/* 图形验证码通过后的状态 */
.ctrl.verified{
  border-color:#1a6b4c;background:#f5fbf7;
  box-shadow:0 0 0 3px rgba(26,107,76,.07);
}

.row{display:flex;gap:10px;}
.row .ctrl{flex:1;min-width:0;}

.btn-code{
  flex:0 0 112px;height:48px;border-radius:12px;
  border:1px solid #1a6b4c;background:#fff;color:#1a6b4c;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;font-family:inherit;letter-spacing:.5px;
}
.btn-code:active{background:#f0f7f3;}
.btn-code:disabled{border-color:#e2e2dc;color:#adb3ad;background:#f7f7f4;cursor:not-allowed;}

.captcha-box{
  flex:0 0 108px;height:48px;border-radius:12px;overflow:hidden;
  border:1px solid #e6e4dd;background:#faf9f6;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.captcha-box:active{opacity:.85;}
#captchaImg{display:block;width:108px;height:48px;object-fit:cover;}

/* 图形验证码辅助提示 */
.cap-hint{
  display:flex;align-items:center;gap:5px;
  margin-top:7px;font-size:11.5px;color:#a3aca6;line-height:1.5;
  transition:color .2s;
}
.cap-hint.ok{color:#1a6b4c;}
.cap-hint .dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#d0d5d1;transition:background .2s;
}
.cap-hint.ok .dot{background:#1a6b4c;}

.btn-submit{
  width:100%;height:52px;margin-top:28px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#155c40,#0b3627);
  color:#f3e3bd;font-size:16px;font-weight:600;letter-spacing:4px;
  cursor:pointer;position:relative;overflow:hidden;font-family:inherit;
  box-shadow:0 10px 24px rgba(12,58,41,.28);
  transition:transform .15s,box-shadow .15s,opacity .2s;
}
.btn-submit:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(12,58,41,.24);}
.btn-submit:disabled{opacity:.75;cursor:default;}
.btn-submit span{position:relative;z-index:2;}
.btn-submit::after{
  content:'';position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(226,199,140,.30),transparent);
  transform:translateX(-180%);animation:sheen 3.6s ease-in-out infinite;pointer-events:none;
}
@keyframes sheen{0%{transform:translateX(-180%)}55%{transform:translateX(260%)}100%{transform:translateX(260%)}}

/* ============ 提货须知 ============ */
.notes{
  margin:18px 16px 0;padding:18px 20px 16px;
  background:rgba(255,255,255,.75);border:1px solid #eae7df;border-radius:18px;
}
.notes h3{
  font-size:13px;color:#12503a;margin:0 0 10px;font-weight:600;
  display:flex;align-items:center;gap:8px;letter-spacing:.5px;
}
.notes h3::before{
  content:'';width:4px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,#d9b96e,#a9832f);
}
.notes ol{margin:0;padding-left:17px;font-size:12.5px;line-height:2.05;color:#7c8781;}
.notes ol li::marker{color:#c8a45c;}
.notes ol li b{color:#5f6a64;font-weight:600;}

/* ============ 页脚 ============ */
.footer{
  text-align:center;font-size:11px;color:#a8b0aa;
  margin:22px 0 0;line-height:1.9;letter-spacing:.6px;
  padding-bottom:calc(30px + env(safe-area-inset-bottom,0));
}
.footer .dot{display:inline-block;margin:0 6px;color:#d3d7d3;}

/* 技术支持链接 */
.footer .tech{
  display:inline-flex;align-items:center;gap:5px;
  color:#8f9a93;text-decoration:none;
  transition:color .2s;
  border-bottom:1px dashed transparent;
}
.footer .tech:hover{color:#1a6b4c;border-bottom-color:rgba(26,107,76,.35);}
.footer .tech:active{color:#0b3627;}
.footer .tech svg{
  width:11px;height:11px;flex:none;
  stroke:currentColor;opacity:.75;
}

/* ============ 成功弹层 ============ */
.success{
  position:fixed;inset:0;z-index:99;background:rgba(10,35,25,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.success.show{opacity:1;visibility:visible;}
.success-card{
  width:100%;max-width:340px;background:#fff;border-radius:24px;
  padding:32px 24px 24px;text-align:center;
  transform:translateY(18px) scale(.96);transition:transform .38s cubic-bezier(.34,1.4,.64,1);
}
.success.show .success-card{transform:none;}
.check{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,#e9f4ee,#d2e9dc);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(26,107,76,.12);
}
.success-card h3{margin:0;font-size:19px;color:#123c2c;letter-spacing:1px;}
.s-sub{margin:8px 0 0;font-size:13px;color:#8b958f;letter-spacing:.3px;}
.s-info{background:#f7f9f6;border-radius:14px;padding:12px 16px;margin:20px 0 0;text-align:left;}
.s-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:7px 0;color:#8b958f;}
.s-row b{color:#22423a;font-weight:600;letter-spacing:.5px;}
.s-row b.gold-text{color:#a9832f;}
.s-tip{margin:18px 0 0;font-size:12.5px;line-height:1.9;color:#8b958f;}
.s-btn{
  width:100%;height:46px;margin-top:22px;border:none;border-radius:13px;
  background:linear-gradient(135deg,#155c40,#0b3627);color:#f3e3bd;
  font-size:15px;font-weight:600;letter-spacing:4px;cursor:pointer;font-family:inherit;
  transition:transform .15s;
}
.s-btn:active{transform:translateY(1px);}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:14%;transform:translate(-50%,12px);
  background:rgba(20,42,33,.93);color:#fff;font-size:13.5px;
  padding:11px 20px;border-radius:12px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:200;
  max-width:82%;text-align:center;line-height:1.5;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ============ 抖动提示 ============ */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}
}
.shake{animation:shake .42s;border-color:#d9534f !important;background:#fffafa !important;}

/* 窄屏：验证码行与获取验证码按钮更紧凑 */
@media (max-width:380px){
  .hero{padding:22px 16px 68px;border-radius:0 0 24px 24px;}
  .hero-title{font-size:22px;}
  .card{margin:-44px 12px 0;padding:6px 14px 22px;border-radius:18px;}
  .btn-code{flex:0 0 96px;font-size:12px;letter-spacing:0;}
  .captcha-box{flex:0 0 96px;}
  #captchaImg{width:96px;}
  .ctrl{height:46px;}
}