.io-track-wrap{
  --io-ink:#161616;
  --io-ink-soft:#4b5563;
  --io-line:#e6e6e9;
  --io-line-soft:#f0f0f2;
  --io-blue:#2563eb;
  --io-blue-soft:#eaf1ff;
  --io-yellow:#c98a12;
  --io-yellow-soft:#fef3d9;
  --io-green:#1a8a4a;
  --io-green-soft:#eafaf0;
  --io-red:#c0362c;
  --io-red-soft:#fdeeed;
  --io-card:#ffffff;
  --io-radius:14px;
  max-width:640px;
  margin:0 auto;
  font-family:inherit;
  color:var(--io-ink);
}
.io-track-wrap *{box-sizing:border-box;}

.io-eyebrow{
  text-align:center;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--io-blue);margin:0 0 10px;
}
.io-h1{
  text-align:center;font-size:32px;font-weight:800;letter-spacing:-0.02em;margin:0 0 10px;
}
.io-sub{
  text-align:center;font-size:15.5px;color:var(--io-ink-soft);line-height:1.55;
  margin:0 auto 28px;max-width:440px;
}

.io-preorder-note{
  background:var(--io-yellow-soft);border:1px solid #f3dea0;border-radius:12px;
  padding:16px 18px;font-size:13.5px;line-height:1.6;color:#6b4a08;margin:0 0 22px;
}
.io-preorder-note b{color:#4a3305;}
.io-preorder-note a{color:var(--io-yellow);font-weight:700;text-decoration:none;}
.io-preorder-note a:hover{text-decoration:underline;}

.io-card{
  background:var(--io-card);border:1px solid var(--io-line);border-radius:var(--io-radius);
  padding:32px;box-shadow:0 1px 2px rgba(20,20,20,.03), 0 12px 32px -20px rgba(20,20,20,.12);
}

.io-card form{display:flex;gap:14px;flex-wrap:wrap;}
.io-field{flex:1 1 200px;display:flex;flex-direction:column;gap:7px;}
.io-field label{font-size:13px;font-weight:600;color:var(--io-ink);}
.io-card input{
  font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--io-line);
  border-radius:10px;outline:none;color:var(--io-ink);background:#fff;width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.io-card input::placeholder{color:#a8a8ad;}
.io-card input:focus{border-color:var(--io-blue);box-shadow:0 0 0 3px var(--io-blue-soft);}
.io-card input.io-err{border-color:var(--io-red);}
.io-card input.io-err:focus{box-shadow:0 0 0 3px var(--io-red-soft);}

.io-btn{
  flex:0 0 auto;align-self:flex-end;background:var(--io-ink);color:#fff;border:none;
  font-family:inherit;font-size:15px;font-weight:700;padding:0 26px;height:47px;
  border-radius:10px;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease, background .15s ease;
}
.io-btn:hover{background:#000;}
.io-btn:active{transform:scale(.98);}
.io-btn:disabled{opacity:.6;cursor:default;transform:none;}

.io-hint{font-size:13px;color:var(--io-ink-soft);margin:14px 2px 0;}
.io-hint a{color:var(--io-blue);text-decoration:none;font-weight:600;}
.io-hint a:hover{text-decoration:underline;}

.io-result{margin-top:30px;padding-top:28px;border-top:1px solid var(--io-line-soft);display:none;}
.io-result.io-show{display:block;}

.io-result-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.io-order-id{font-size:15px;color:var(--io-ink-soft);}
.io-order-id b{color:var(--io-ink);}
.io-badge{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--io-blue-soft);color:var(--io-blue);}
.io-badge.io-delivered{background:var(--io-green-soft);color:var(--io-green);}
.io-badge.io-hold{background:#f2f2f4;color:#55555a;}
.io-badge.io-processing{background:var(--io-yellow-soft);color:var(--io-yellow);}

.io-steps{display:flex;align-items:flex-start;justify-content:space-between;position:relative;}
.io-steps::before{content:"";position:absolute;top:15px;left:15px;right:15px;height:2px;background:var(--io-line);z-index:0;}
.io-fill{position:absolute;top:15px;left:15px;height:2px;background:var(--io-ink);z-index:0;transition:width .4s ease;}
.io-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;}
.io-dot{
  width:30px;height:30px;border-radius:50%;background:#e9e9ec;color:#9a9a9f;font-size:13px;
  font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fafafa;
}
.io-step.io-done .io-dot{background:var(--io-ink);color:#fff;}
.io-step.io-current .io-dot{background:var(--io-blue);color:#fff;box-shadow:0 0 0 4px var(--io-blue-soft);}
.io-step-label{font-size:12.5px;color:#9a9a9f;text-align:center;font-weight:500;line-height:1.3;}
.io-step.io-done .io-step-label{color:var(--io-ink-soft);}
.io-step.io-current .io-step-label{color:var(--io-ink);font-weight:700;}

.io-detail{margin-top:26px;background:var(--io-line-soft);border-radius:10px;padding:16px 18px;font-size:13.5px;color:var(--io-ink-soft);line-height:1.6;}
.io-detail b{color:var(--io-ink);}

.io-ship-info{margin-top:14px;background:var(--io-blue-soft);border-radius:10px;padding:16px 18px;font-size:13.5px;color:var(--io-ink);line-height:1.8;}
.io-ship-info b{display:block;margin-bottom:4px;color:var(--io-blue);}

.io-error-box{display:none;margin-top:22px;background:var(--io-red-soft);border:1px solid #f6cfcb;border-radius:10px;padding:16px 18px;font-size:13.5px;color:#8a291f;line-height:1.55;}
.io-error-box.io-show{display:block;}
.io-error-box b{display:block;color:var(--io-red);font-size:14px;margin-bottom:3px;}
.io-error-box a{color:#8a291f;font-weight:700;}

.io-foot-note{text-align:center;font-size:13.5px;color:var(--io-ink-soft);margin-top:26px;line-height:1.6;}
.io-foot-note a{color:var(--io-blue);text-decoration:none;font-weight:600;}
.io-foot-note a:hover{text-decoration:underline;}

@media (max-width:480px){
  .io-card{padding:22px;}
  .io-card form{flex-direction:column;}
  .io-btn{align-self:stretch;justify-content:center;}
  .io-h1{font-size:26px;}
  .io-step-label{font-size:10.5px;}
}