:root {
  --tracking-bg: #070809;
  --tracking-panel: #0d0f11;
  --tracking-panel-soft: #111315;
  --tracking-border: #292c30;
  --tracking-border-light: #3a3e43;

  --tracking-text: #f5f5f5;
  --tracking-muted: #8c9198;
  --tracking-muted-light: #b3b6bb;

  --tracking-silver: #d5d7da;
  --tracking-success: #bfc7c2;

  --tracking-radius-lg: 22px;
  --tracking-radius-md: 14px;
}


* {
  box-sizing: border-box;
}


html {
  background:
    var(--tracking-bg);
}


body.tracking-page {
  margin: 0;

  min-height:
    100vh;

  background:
    radial-gradient(
      circle at top,
      #15181b 0,
      #090a0b 36%,
      #070809 70%
    );

  color:
    var(--tracking-text);

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.tracking-header {
  width:
    100%;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);

  background:
    rgba(7, 8, 9, 0.84);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}


.tracking-header-inner {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}


.tracking-brand {
  color:
    #ffffff;

  text-decoration:
    none;

  font-size:
    19px;

  font-weight:
    700;

  letter-spacing:
    0.16em;
}


.tracking-back-link {
  color:
    var(--tracking-muted-light);

  text-decoration:
    none;

  font-size:
    13px;

  transition:
    color 160ms ease;
}


.tracking-back-link:hover {
  color:
    #ffffff;
}


.tracking-main {
  width:
    min(
      840px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    72px 0 58px;
}


.tracking-hero {
  text-align:
    center;

  margin-bottom:
    38px;
}


.tracking-eyebrow {
  color:
    #757a80;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.19em;

  text-transform:
    uppercase;
}


.tracking-hero h1 {
  margin:
    14px 0 12px;

  color:
    #ffffff;

  font-size:
    clamp(
      34px,
      6vw,
      52px
    );

  font-weight:
    600;

  letter-spacing:
    -0.045em;

  line-height:
    1.05;
}


.tracking-hero p {
  max-width:
    610px;

  margin:
    0 auto;

  color:
    var(--tracking-muted);

  font-size:
    14px;

  line-height:
    1.75;
}


.tracking-panel,
.tracking-result {
  border:
    1px solid
    var(--tracking-border);

  border-radius:
    var(--tracking-radius-lg);

  background:
    linear-gradient(
      145deg,
      rgba(20, 22, 25, 0.96),
      rgba(10, 11, 13, 0.98)
    );

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.34);
}


.tracking-panel {
  padding:
    28px;
}


.tracking-form {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.tracking-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}


.tracking-field label {
  color:
    #c1c4c8;

  font-size:
    12px;

  font-weight:
    500;
}


.tracking-field input {
  width:
    100%;

  min-height:
    52px;

  border:
    1px solid
    var(--tracking-border);

  border-radius:
    11px;

  outline:
    none;

  background:
    #090b0d;

  color:
    #ffffff;

  padding:
    0 15px;

  font:
    inherit;

  font-size:
    13px;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


.tracking-field input::placeholder {
  color:
    #555b61;
}


.tracking-field input:focus {
  border-color:
    #70757b;

  background:
    #0b0d0f;

  box-shadow:
    0 0 0 3px
    rgba(180, 184, 189, 0.08);
}


.tracking-submit-button {
  grid-column:
    1 / -1;

  min-height:
    54px;

  margin-top:
    4px;

  border:
    1px solid
    #d3d5d7;

  border-radius:
    11px;

  background:
    linear-gradient(
      180deg,
      #eeeeef,
      #c5c7ca
    );

  color:
    #090a0b;

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    transform 150ms ease,
    filter 150ms ease,
    opacity 150ms ease;
}


.tracking-submit-button:hover:not(:disabled) {
  filter:
    brightness(1.06);

  transform:
    translateY(-1px);
}


.tracking-submit-button:disabled {
  cursor:
    wait;

  opacity:
    0.6;
}


.tracking-message {
  margin-top:
    18px;

  padding:
    14px 16px;

  border:
    1px solid
    #34383d;

  border-radius:
    10px;

  background:
    #0a0c0e;

  color:
    #b4b8bd;

  font-size:
    13px;

  line-height:
    1.55;
}


.tracking-message.is-error {
  border-color:
    #5a3234;

  color:
    #d6b0b2;

  background:
    #160d0e;
}


.tracking-result {
  margin-top:
    22px;

  padding:
    30px;
}


.tracking-result-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-bottom:
    25px;

  border-bottom:
    1px solid
    var(--tracking-border);
}


.tracking-result-label {
  margin-bottom:
    6px;

  color:
    #737980;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.tracking-result-header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    20px;

  font-weight:
    600;
}


.tracking-status-badge {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    33px;

  padding:
    0 13px;

  border:
    1px solid
    #41464b;

  border-radius:
    999px;

  background:
    #15181a;

  color:
    #d7d9dc;

  font-size:
    11px;

  font-weight:
    600;
}


.tracking-progress {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  margin:
    32px 0 6px;
}


.tracking-progress-step {
  position:
    relative;

  min-height:
    105px;

  padding:
    0 14px 0 0;

  color:
    #646a70;
}


.tracking-progress-step::after {
  content:
    "";

  position:
    absolute;

  top:
    9px;

  left:
    20px;

  right:
    0;

  height:
    1px;

  background:
    #292d31;
}


.tracking-progress-step:last-child::after {
  display:
    none;
}


.tracking-progress-dot {
  position:
    relative;

  z-index:
    2;

  width:
    18px;

  height:
    18px;

  margin-bottom:
    14px;

  border:
    1px solid
    #40454b;

  border-radius:
    50%;

  background:
    #0d0f11;
}


.tracking-progress-step strong {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #777d83;

  font-size:
    12px;

  font-weight:
    600;
}


.tracking-progress-step span {
  display:
    block;

  color:
    #5d6268;

  font-size:
    10px;

  line-height:
    1.45;
}


.tracking-progress-step.is-complete
.tracking-progress-dot {
  border-color:
    #d4d6d8;

  background:
    #d4d6d8;

  box-shadow:
    0 0 0 4px
    rgba(212, 214, 216, 0.08);
}


.tracking-progress-step.is-complete::after {
  background:
    linear-gradient(
      90deg,
      #c9cccf,
      #494d52
    );
}


.tracking-progress-step.is-complete strong {
  color:
    #f2f2f2;
}


.tracking-progress-step.is-complete span {
  color:
    #999ea4;
}


.tracking-progress-step.is-current
.tracking-progress-dot {
  box-shadow:
    0 0 0 5px
    rgba(211, 213, 216, 0.1);
}


.tracking-shipping-card {
  margin-top:
    20px;

  padding:
    22px;

  border:
    1px solid
    var(--tracking-border);

  border-radius:
    var(--tracking-radius-md);

  background:
    rgba(6, 8, 9, 0.48);
}


.tracking-card-title {
  margin-bottom:
    18px;

  color:
    #767c82;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.tracking-shipping-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    16px;
}


.tracking-shipping-item {
  padding:
    16px;

  border:
    1px solid
    #25282c;

  border-radius:
    11px;

  background:
    #0b0d0f;
}


.tracking-shipping-item span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #72777d;

  font-size:
    10px;

  text-transform:
    uppercase;
}


.tracking-shipping-item strong {
  display:
    block;

  color:
    #f0f1f2;

  font-size:
    14px;

  word-break:
    break-word;
}


.tracking-shipping-note {
  margin:
    16px 0 0;

  color:
    #777d83;

  font-size:
    11px;

  line-height:
    1.6;
}


.tracking-order-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    16px;

  margin-top:
    18px;
}


.tracking-order-summary > div {
  padding:
    18px 0;

  border-top:
    1px solid
    var(--tracking-border);
}


.tracking-order-summary span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #70767c;

  font-size:
    11px;
}


.tracking-order-summary strong {
  color:
    #f2f2f2;

  font-size:
    14px;
}


.tracking-help {
  padding:
    38px 0 0;

  text-align:
    center;
}


.tracking-help-line {
  width:
    46px;

  height:
    1px;

  margin:
    0 auto 18px;

  background:
    #33373b;
}


.tracking-help p {
  max-width:
    530px;

  margin:
    0 auto;

  color:
    #666c72;

  font-size:
    11px;

  line-height:
    1.7;
}


.tracking-footer {
  padding:
    26px 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

  color:
    #555a60;

  text-align:
    center;

  font-size:
    10px;

  letter-spacing:
    0.08em;
}


@media (
  max-width: 720px
) {
  .tracking-main {
    padding-top:
      48px;
  }


  .tracking-panel,
  .tracking-result {
    padding:
      20px;
  }


  .tracking-form {
    grid-template-columns:
      1fr;
  }


  .tracking-submit-button {
    grid-column:
      auto;
  }


  .tracking-result-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .tracking-progress {
    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .tracking-progress-step {
    min-height:
      82px;

    padding-left:
      34px;
  }


  .tracking-progress-step::after {
    top:
      18px;

    bottom:
      0;

    left:
      8px;

    right:
      auto;

    width:
      1px;

    height:
      auto;
  }


  .tracking-progress-dot {
    position:
      absolute;

    top:
      9px;

    left:
      0;
  }


  .tracking-shipping-grid,
  .tracking-order-summary {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width: 480px
) {
  .tracking-header-inner {
    width:
      min(
        100% - 28px,
        1180px
      );

    min-height:
      68px;
  }


  .tracking-brand {
    font-size:
      16px;
  }


  .tracking-back-link {
    font-size:
      11px;
  }


  .tracking-main {
    width:
      min(
        100% - 22px,
        840px
      );
  }


  .tracking-hero h1 {
    font-size:
      34px;
  }
}