:root{
  --font:"Source Han Sans SC","Noto Sans CJK SC",-apple-system, system-ui, Helvetica, Arial,  sans-serif;
  --bg:#F4F8FE; --bg-2:#EAF3FD; --card:#FFFFFF;
  --p:#2E7DF6; --p-2:#1B5FD9; --p-3:#6AA9FF; --p-tint:#E9F2FE;
  --c:#22B8EC; --c-tint:#E3F6FD;
  --ink:#0D2A4E; --body:#4A6185; --muted:#7E92B4;
  --line:#DCE9F9; --line-2:#EDF3FC;
  --grad:linear-gradient(135deg,#2E7DF6 0%,#22A7F0 55%,#2EC8F0 100%);
  --grad-soft:linear-gradient(135deg,#EAF3FE 0%,#F2FAFF 100%);
  --sh:0 14px 40px rgba(46,125,246,.12);
  --sh-sm:0 6px 18px rgba(46,125,246,.08);
  --sh-lg:0 24px 60px rgba(27,95,217,.16);
  --r:16px; --r-lg:22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  font-family:var(--font);
  color:var(--body);
  background-color:var(--bg);
  background-image:
    radial-gradient(880px 520px at 6% -10%, #DCEBFF 0%, rgba(220,235,255,0) 62%),
    radial-gradient(760px 480px at 106% 4%, #DFF6FF 0%, rgba(223,246,255,0) 60%),
    radial-gradient(720px 520px at 50% 120%, #E7F0FF 0%, rgba(231,240,255,0) 62%);
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  padding:48px 20px;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

/* 背景网格纹理 */
body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background-image:
    linear-gradient(to right, rgba(46,125,246,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,125,246,.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,.35) 46%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,.35) 46%, transparent 78%);
  pointer-events:none;
  z-index:0;
}

/* ============ 卡片 ============ */
.card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:580px;
  background:var(--card);
  border:1px solid #E6EFFB;
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px rgba(27,95,217,.14), 0 4px 12px rgba(27,95,217,.06);
  padding:42px 44px 36px;
  overflow:hidden;
  -webkit-animation:cardIn .6s cubic-bezier(.22,.9,.3,1) both;
  animation:cardIn .6s cubic-bezier(.22,.9,.3,1) both;
  margin-top:80px;
}
@-webkit-keyframes cardIn{ from{opacity:0;-webkit-transform:translateY(18px) scale(.985);} to{opacity:1;-webkit-transform:none;} }
@keyframes cardIn{ from{opacity:0;transform:translateY(18px) scale(.985);} to{opacity:1;transform:none;} }

.card::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:4px;
  background:var(--grad);
}
.card::after{
  content:"";
  position:absolute; right:-100px; top:-120px;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(46,167,240,.16) 0%, rgba(46,167,240,0) 68%);
  pointer-events:none;
}

/* ============ 头部 ============ */
.pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:var(--p-tint);
  border:1px solid #D7E7FE;
  color:var(--p-2);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.3px;
  line-height:1;
}
.pill .dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--p);
  box-shadow:0 0 0 3px rgba(46,125,246,.16);
  margin-right:7px;
  vertical-align:1px;
}
.head h1{
  margin:18px 0 10px;
  font-size:26px;
  line-height:1.32;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.4px;
}
.head p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--muted);
}

/* ============ 表单 ============ */
form{ margin-top:28px; }

.field{ margin-bottom:18px; }

.field label{
  display:block;
  margin-bottom:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:.2px;
}
.req{ color:#F0574F; margin-left:2px; }

.control{
  position:relative;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  background:#F6FAFF;
  border:1px solid var(--line);
  border-radius:14px;
  -webkit-transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
  transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.control:hover{ background:#F2F8FF; }
.control:focus-within{
  border-color:var(--p);
  background:#fff;
  box-shadow:0 0 0 4px rgba(46,125,246,.12);
}

.ic{
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  width:44px;
  -webkit-flex:0 0 44px;
  flex:0 0 44px;
  color:#9DB2CF;
  -webkit-transition:color .2s ease;
  transition:color .2s ease;
}
.control:focus-within .ic{ color:var(--p); }

.control input{
  -webkit-box-flex:1;
  -webkit-flex:1 1 auto;
  flex:1 1 auto;
  min-width:0;
  height:52px;
  padding:0 16px 0 0;
  border:0;
  outline:0;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  line-height:1.2;
  -webkit-appearance:none;
  appearance:none;
  border-radius:14px;
}
.control input::-webkit-input-placeholder{ color:#A8BCD8; }
.control input::-moz-placeholder{ color:#A8BCD8; }
.control input:-ms-input-placeholder{ color:#A8BCD8; }
.control input::placeholder{ color:#A8BCD8; }

/* 验证码按钮 */
.send{
  -webkit-flex:0 0 auto;
  flex:0 0 auto;
  height:38px;
  margin:0 6px 0 4px;
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:var(--grad);
  color:#fff;
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(46,125,246,.24);
  -webkit-transition:filter .2s, transform .15s, opacity .2s, box-shadow .2s;
  transition:filter .2s, transform .15s, opacity .2s, box-shadow .2s;
}
.send:hover{ filter:brightness(1.06); -webkit-transform:translateY(-1px); transform:translateY(-1px); }
.send:active{ -webkit-transform:translateY(0); transform:translateY(0); }
.send[disabled],
.send[disabled]:hover{
  background:#D8E6F8;
  color:#8AA4C6;
  box-shadow:none;
  cursor:not-allowed;
  filter:none;
  -webkit-transform:none;
  transform:none;
}

/* 错误提示 */
.err{
  display:none;
  margin:7px 0 0 4px;
  font-size:12.5px;
  line-height:1.4;
  color:#E5484D;
}
.field.invalid .err{ display:block; }
.field.invalid .control{
  border-color:#F0A3A6;
  background:#FFF7F7;
  box-shadow:0 0 0 4px rgba(229,72,77,.08);
}
.field.invalid .ic{ color:#E5484D; }

/* 提交按钮 */
.submit{
  position:relative;
  width:100%;
  height:52px;
  margin-top:8px;
  border:0;
  border-radius:14px;
  background:var(--grad);
  background-size:180% 100%;
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(46,125,246,.28);
  -webkit-transition:transform .18s ease, box-shadow .25s ease, background-position .5s ease;
  transition:transform .18s ease, box-shadow .25s ease, background-position .5s ease;
  overflow:hidden;
}
.submit:hover{
  -webkit-transform:translateY(-2px);
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(46,125,246,.34);
  background-position:100% 0;
}
.submit:active{ -webkit-transform:translateY(0); transform:translateY(0); }

.spinner{
  display:inline-block;
  width:15px; height:15px;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  -webkit-animation:spin .8s linear infinite;
  animation:spin .8s linear infinite;
}
@-webkit-keyframes spin{ to{ -webkit-transform:rotate(360deg); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

.agree{
  margin:15px 0 0;
  text-align:center;
  font-size:12px;
  line-height:1.7;
  color:#94A8C5;
}
.agree b{ color:var(--p); font-weight:600; }

/* ============ 成功态 ============ */
.done{ display:none; text-align:center; padding:20px 0 8px; }
.card.is-done .form-view{ display:none; }
.card.is-done .done{
  display:block;
  -webkit-animation:cardIn .45s ease both;
  animation:cardIn .45s ease both;
}
.check{
  width:78px; height:78px;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--grad-soft);
  border:1px solid #D9E9FE;
  box-shadow:0 12px 26px rgba(46,125,246,.14);
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  color:var(--p);
  -webkit-animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both;
  animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both;
}
@-webkit-keyframes pop{ 0%{opacity:0;-webkit-transform:scale(.6);} 60%{opacity:1;-webkit-transform:scale(1.06);} 100%{-webkit-transform:scale(1);} }
@keyframes pop{ 0%{opacity:0;transform:scale(.6);} 60%{opacity:1;transform:scale(1.06);} 100%{transform:scale(1);} }

.done h2{
  margin:0 0 12px;
  font-size:21px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.5px;
}
.done p{
  margin:0;
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
}
.ghost{
  display:inline-block;
  margin-top:24px;
  padding:11px 26px;
  border-radius:12px;
  border:1px solid #D7E7FE;
  background:#F3F9FF;
  color:var(--p-2);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  -webkit-transition:background .2s, border-color .2s;
  transition:background .2s, border-color .2s;
}
.ghost:hover{ background:#E9F3FF; border-color:#BFD9FB; }

/* ============ Toast ============ */
.toast{
  position:fixed;
  left:50%;
  bottom:38px;
  z-index:99;
  max-width:86vw;
  padding:11px 20px;
  border-radius:12px;
  background:rgba(13,42,78,.93);
  color:#fff;
  font-size:13.5px;
  line-height:1.5;
  box-shadow:0 12px 28px rgba(13,42,78,.26);
  opacity:0;
  pointer-events:none;
  -webkit-transform:translate(-50%,20px);
  transform:translate(-50%,20px);
  -webkit-transition:opacity .3s ease, transform .3s ease;
  transition:opacity .3s ease, transform .3s ease;
}
.toast.show{
  opacity:1;
  -webkit-transform:translate(-50%,0);
  transform:translate(-50%,0);
}

/* ============ 响应式 ============ */
@media (max-width:600px){
  body{
    padding:24px 14px;
    -webkit-box-align:start;
    -webkit-align-items:flex-start;
    align-items:flex-start;
  }
  .card{
    padding:30px 20px 26px;
    border-radius:18px;
  }
  .head h1{ font-size:22px; margin:16px 0 9px; }
  .head p{ font-size:13px; line-height:1.68; }
  form{ margin-top:24px; }
  .control{ border-radius:12px; }
  .ic{ width:38px; -webkit-flex:0 0 38px; flex:0 0 38px; }
  .control input{ height:50px; font-size:16px; padding-right:10px; }
  .send{
    height:34px;
    padding:0 12px;
    margin:0 5px 0 2px;
    font-size:12.5px;
    border-radius:9px;
  }
  .submit{ height:50px; font-size:15px; }
  .toast{ bottom:26px; font-size:13px; }
}
@media (max-width:360px){
  .send{ padding:0 10px; font-size:12px; }
  .head h1{ font-size:20px; }
}