/* Card-only refinement. Approved background, document content and JS stay intact. */
.exchange-area .card-glow{
  padding:6px;
  border:1px solid #ffffffeb;
  border-radius:31px;
  background:linear-gradient(145deg,#ffffffbd,#ffffff70);
  box-shadow:0 28px 64px -32px #245e873d,0 7px 22px -13px #2b5f8830,inset 0 1px 0 #fff;
}
.exchange-area .card-glow::before,
.exchange-area .card-glow::after{content:none}
.exchange-area .exchange-card{
  min-height:0;
  padding:28px 31px 0;
  border:1px solid #dfeaf3;
  border-radius:24px;
  background:linear-gradient(155deg,#fff 0%,#fff 70%,#fbfdff 100%);
  box-shadow:0 2px 5px #3b638d04,inset 0 1px 0 #fff;
}
.exchange-area .tabs{
  display:flex;
  justify-content:flex-start;
  gap:29px;
  height:49px;
  padding:0;
  margin:0 0 25px;
  border:0;
  border-bottom:1px solid #e7eef4;
  border-radius:0;
  background:transparent;
}
.exchange-area .tab{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-width:51px;
  height:49px;
  padding:1px 2px 13px;
  border-radius:4px 4px 0 0;
  background:transparent;
  color:#5c758b;
  font-size:22px;
  font-weight:550;
  line-height:1.4;
  letter-spacing:.3px;
  box-shadow:none;
  transition:color .18s ease;
}
.exchange-area .tab::after{
  content:"";
  position:absolute;
  inset:auto auto -1px 50%;
  width:24px;
  height:3px;
  border-radius:3px;
  background:#268bdc;
  opacity:0;
  transform:translateX(-50%) scaleX(.65);
  transition:opacity .18s ease,transform .18s ease;
}
.exchange-area .tab[data-state="active"]{
  color:#193c5a;
  background:transparent;
  font-weight:650;
  box-shadow:none;
}
.exchange-area .tab[data-state="active"]::after{opacity:1;transform:translateX(-50%) scaleX(1)}
.exchange-area .tab[data-state="inactive"]:hover{color:#2684c9;background:transparent}
.exchange-area .steps{
  gap:0;
  padding:14px 8px;
  margin:0 0 27px;
  border:1px solid #e6eef5;
  border-radius:13px;
  background:#f5f9fc;
}
.exchange-area .steps li{
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:7px;
  color:#5d758b;
}
.exchange-area .step-number{
  width:24px;
  height:24px;
  border-radius:7px;
  background:transparent;
  color:#637b8f;
  font-size:11px;
  line-height:1;
  font-weight:550;
  font-variant-numeric:tabular-nums;
  box-shadow:none;
}
.exchange-area .step-label{font-size:13px;font-weight:500;line-height:1.4}
.exchange-area .steps li:not(:last-child)::after{
  top:50%;
  left:calc(100% - 8px);
  width:16px;
  height:1px;
  background:#cfdeea;
}
.exchange-area .steps li[data-state="active"]{color:#2577b3}
.exchange-area .steps li[data-state="active"] .step-number{background:#e2f0fc;color:#237cbb;box-shadow:none;font-weight:650}
.exchange-area .steps li[data-state="complete"]{color:#497d9d}
.exchange-area .steps li[data-state="complete"] .step-number{background:#eaf4fa;color:#38779e;box-shadow:none}
.exchange-area .steps li[data-state="complete"]::after{background:#87b6d5}
.exchange-area .field-label{margin:0 0 10px;color:#36536c;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.1px}
.exchange-area input{
  height:58px;
  border:1px solid #d9e5ef;
  border-radius:13px;
  padding:0 17px;
  background:#f5f9fc;
  color:#224362;
  font-size:16px;
  line-height:1.4;
  box-shadow:inset 0 1px 2px #325b7b03;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.exchange-area input::placeholder{color:#60778b;opacity:1;font-weight:400}
.exchange-area input:hover:not(:focus){border-color:#bdd3e5}
.exchange-area input:focus{border-color:#75afe0;background:#fff;box-shadow:0 0 0 3px #3998e912}
.exchange-area input[aria-invalid="true"]{border-color:#ca7e8d;background:#fffafb;box-shadow:0 0 0 3px #c95e7210}
.exchange-area input[readonly]{background:#f4f8fb;color:#516e86}
.exchange-area .input-wrap input{padding-right:61px}
.exchange-area .input-icon{
  top:11px;
  right:11px;
  width:36px;
  height:36px;
  border:1px solid #e0eaf2;
  border-radius:9px;
  background:#ffffffed;
  color:#68859c;
}
.exchange-area .input-icon svg{width:19px;height:19px;stroke-width:1.5}
.exchange-area .input-icon:hover{background:#eaf4fd;border-color:#cbdff0;color:#2c7ebd}
.exchange-area .primary-button{
  height:55px;
  margin-top:16px;
  border:1px solid #1d73ce;
  border-radius:13px;
  background:linear-gradient(112deg,#2387e2 0%,#2276d4 53%,#2666ce 100%);
  color:#fff;
  font-size:16px;
  font-weight:550;
  letter-spacing:.3px;
  box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #1455b121,0 7px 14px -9px #206bcc70;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.exchange-area .primary-button:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.035);
  box-shadow:inset 0 1px 0 #ffffff30,0 9px 19px -9px #206bcc70;
}
.exchange-area .primary-button:active:not(:disabled){transform:translateY(0);filter:brightness(.985)}
.exchange-area .primary-button:disabled{opacity:.72}
.exchange-area .button-arrow{
  right:16px;
  width:29px;
  height:29px;
  padding:5px;
  border-radius:50%;
  background:#ffffff14;
  stroke-width:1.65;
  transition:transform .18s ease,background .18s ease;
}
.exchange-area .primary-button:hover:not(:disabled) .button-arrow{transform:translateX(2px);background:#ffffff20}
.exchange-area .card-footer{
  min-height:62px;
  margin:26px -31px 0;
  border-top:1px solid #e8eff5;
  background:#f8fbfd;
}
.exchange-area .support-link{min-height:44px;padding:10px 15px;border-radius:9px;color:#52758e;font-size:13px;gap:7px;transition:color .18s ease,background .18s ease}
.exchange-area .support-link svg{width:17px;height:17px}
.exchange-area .support-link:hover{color:#277ebc;background:#edf5fc}
.exchange-area .product-summary{padding:14px;border-color:#e1ebf3;border-radius:13px;background:#f6fafd;gap:11px}
.exchange-area .product-symbol{width:37px;height:37px;border-radius:10px;background:#e8f2fb;color:#3f82b7}
.exchange-area .product-summary strong{font-size:14px;color:#2d4c67}
.exchange-area .product-note{color:#5f7a92;line-height:1.65}
.exchange-area .field-note{color:#627d93;line-height:1.6;margin:8px 0 18px}
.exchange-area .back-button{min-height:36px;margin-top:9px;color:#5b7890}
.exchange-area .feedback{font-size:12px;line-height:1.7;border-radius:10px}
.exchange-area .panel-heading{margin:0 0 24px}
.exchange-area .panel-heading h2{font-size:19px;color:#2a4964;font-weight:600;letter-spacing:0}
.exchange-area .panel-heading p{font-size:12px;color:#607b91}
.exchange-area .query-result{border-color:#dfeaf3;background:#f7fbfe;border-radius:13px}
.exchange-area .result-icon{width:56px;height:56px;margin-bottom:16px}
.exchange-area .result-panel h2{font-size:21px;color:#234762}
.exchange-area .result-panel>p{color:#5a758d}
.exchange-area .result-panel>.primary-button{margin-top:0}

@media(max-width:1100px) and (min-width:821px){
  .exchange-area .exchange-card{padding:26px 27px 0}
  .exchange-area .card-footer{margin-left:-27px;margin-right:-27px}
}
@media(max-width:820px){
  .exchange-area .card-glow{padding:5px;border-radius:28px}
  .exchange-area .exchange-card{padding:24px 24px 0;border-radius:22px}
  .exchange-area .tabs{margin-bottom:23px}
  .exchange-area .tab{font-size:21px}
  .exchange-area .steps{margin-bottom:24px;padding-top:12px;padding-bottom:12px}
  .exchange-area input{height:56px}
  .exchange-area .input-icon{top:10px}
  .exchange-area .primary-button{height:54px}
  .exchange-area .card-footer{min-height:59px;margin:24px -24px 0}
}
@media(max-width:480px){
  .exchange-area .card-glow{padding:5px;border-radius:25px}
  .exchange-area .exchange-card{padding:21px 18px 0;border-radius:19px}
  .exchange-area .tabs{height:44px;margin-bottom:21px;gap:25px}
  .exchange-area .tab{height:44px;min-width:48px;font-size:20px;padding-bottom:11px}
  .exchange-area .tab::after{width:23px}
  .exchange-area .steps{margin-bottom:23px;padding:11px 3px;border-radius:11px}
  .exchange-area .steps li{gap:3px}
  .exchange-area .step-number{width:22px;height:22px;font-size:10px;border-radius:6px}
  .exchange-area .step-label{font-size:12px}
  .exchange-area .steps li:not(:last-child)::after{left:calc(100% - 5px);width:10px}
  .exchange-area .field-label{font-size:13px;margin-bottom:9px}
  .exchange-area input{height:54px;border-radius:12px;font-size:16px;padding-left:14px}
  .exchange-area .input-wrap input{padding-right:53px}
  .exchange-area .input-icon{top:9px;right:9px;width:36px;height:36px}
  .exchange-area .primary-button{height:52px;margin-top:14px;border-radius:12px;font-size:15px}
  .exchange-area .button-arrow{right:12px;width:27px;height:27px;padding:5px}
  .exchange-area .card-footer{min-height:56px;margin:23px -18px 0}
  .exchange-area .support-link{font-size:12px}
  .exchange-area .product-summary{padding:12px}
  .exchange-area .product-summary strong{font-size:13px}
  .exchange-area .panel-heading h2{font-size:18px}
  .exchange-area .query-result{padding:13px}
}
@media(max-width:359px){
  .exchange-area .exchange-card{padding-left:16px;padding-right:16px}
  .exchange-area .card-footer{margin-left:-16px;margin-right:-16px}
  .exchange-area .step-number{width:19px}
  .exchange-area .step-label{font-size:11px}
}