.tracking-page { padding-top: 37px; }
.tracking-page .breadcrumbs { margin-bottom: 28px; }
.tracking-layout { width: min(760px, 100%); }
.tracking-intro { margin-bottom: 26px; }
.tracking-intro .eyebrow { margin-bottom: 8px; }
.tracking-intro h1 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 46px); font-weight: 650; letter-spacing: -.045em; }
.tracking-intro p { max-width: 560px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.tracking-search-card, .tracking-result { border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: 10px; background: linear-gradient(155deg, var(--surface-raised), color-mix(in srgb, var(--surface) 48%, var(--surface-raised))); box-shadow: 0 8px 22px rgb(20 29 42 / 5%); }
.tracking-search-card { padding: 23px; }
.tracking-search-card.account-card-discord-tilt { border-color: color-mix(in srgb, var(--line) 80%, var(--accent)); box-shadow: 0 12px 32px rgb(20 29 42 / 7%); transform: perspective(1000px) rotateX(var(--discord-tilt-x, 0deg)) rotateY(var(--discord-tilt-y, 0deg)) translateZ(var(--discord-tilt-z, 0px)); transform-style: preserve-3d; transition: transform .38s cubic-bezier(.2,.75,.2,1), translate .38s cubic-bezier(.2,.75,.2,1), box-shadow .38s cubic-bezier(.2,.75,.2,1), border-color .22s ease; }
.tracking-search-card.account-card-discord-tilt.is-tilting { transition-duration: .09s, .38s, .24s, .22s; --discord-tilt-z: 10px; box-shadow: 0 22px 46px rgb(20 29 42 / 15%); }
:root[data-theme="dark"] .tracking-search-card.account-card-discord-tilt.is-tilting { box-shadow: 0 24px 50px rgb(0 0 0 / 40%); }
@media (prefers-reduced-motion: reduce) {
  .tracking-search-card.account-card-discord-tilt { transform: none; transition: none; }
}
.tracking-card-heading { margin-bottom: 17px; }
.tracking-card-heading h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.tracking-card-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.tracking-input-row { display: flex; align-items: stretch; gap: 10px; }
.tracking-input { width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--bg); font-size: 13px; letter-spacing: .06em; transition: border-color .18s ease, box-shadow .18s ease, background-color .22s ease; }
.tracking-input::placeholder { color: var(--soft); letter-spacing: .04em; }
.tracking-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.tracking-submit { min-height: 42px; flex: 0 0 auto; }
.tracking-submit:disabled { cursor: wait; opacity: .72; }
.tracking-hint { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.tracking-loading { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.tracking-feedback { margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line)); border-radius: var(--radius-md); color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised)); font-size: 12px; line-height: 1.65; }
.tracking-feedback p { margin: 0; }
.tracking-result { margin-top: 22px; padding: clamp(20px, 4vw, 28px); }
.result-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.result-topline h2 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 25px); font-weight: 650; letter-spacing: -.035em; }
.result-topline p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.status-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-radius: 3px; color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-raised)); font-size: 10px; font-weight: 650; }
.tracking-product { display: grid; gap: 5px; margin-top: 16px; }
.result-kicker { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.tracking-product strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-weight: 650; }
.tracking-code-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 15px 0 24px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.tracking-code-panel > div { display: grid; gap: 5px; min-width: 0; }
.tracking-code-panel strong { overflow-wrap: anywhere; color: var(--text); font-size: 13px; letter-spacing: .08em; }
.copy-tracking { min-height: 34px; gap: 7px; padding: 0 10px; font-size: 10px; }
.copy-tracking svg { width: 14px; height: 14px; }
.tracking-copy-status { margin: -16px 0 19px; color: var(--muted); font-size: 10px; }
.tracking-copy-status:empty { display: none; }
.tracking-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tracking-progress-heading h3 { margin: 0; font-size: 15px; font-weight: 640; }
.progress-count { color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.progress-count span { color: var(--muted); font-weight: 500; }
.tracking-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.timeline-step { position: relative; display: grid; min-height: 60px; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
.timeline-step:last-child { border-bottom: 0; }
.timeline-marker { z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--soft); background: var(--surface-raised); font-size: 9px; }
.timeline-marker svg { width: 12px; height: 12px; }
.timeline-marker > span { font-size: 9px; }
.timeline-copy { display: grid; gap: 3px; }
.timeline-copy > strong { color: var(--muted); font-size: 11px; font-weight: 620; }
.timeline-copy > span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.timeline-copy time { margin-top: 2px; color: var(--soft); font-size: 9px; }
.timeline-step.is-complete .timeline-marker { border-color: color-mix(in srgb, var(--good) 48%, var(--line)); color: var(--good); }
.timeline-step.is-complete .timeline-copy > strong { color: var(--text); }
.timeline-step.is-skipped .timeline-marker { border-style: dashed; color: var(--soft); background: var(--surface); }
.timeline-step.is-skipped .timeline-copy > strong { color: var(--soft); }
.timeline-step.is-current .timeline-marker { border-color: var(--accent); color: var(--accent-contrast); background: var(--accent); }
.timeline-step.is-current .timeline-copy > strong { color: var(--text); font-weight: 700; }
.timeline-now { align-self: center; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.tracking-privacy { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }
.tracking-empty { min-height: 160px; margin-top: 18px; border-style: solid; border-radius: 10px; background: var(--surface-raised); }
.tracking-empty h3 { margin-bottom: 7px; }
.tracking-empty p { margin-bottom: 0; }
.tracking-support { margin: 20px 0 0; color: var(--muted); font-size: 10px; }
.tracking-support a { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .tracking-search-card.account-card-discord-tilt:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--line) 70%, var(--accent)); }
  .tracking-result { transition: transform .26s cubic-bezier(.2,.7,.2,1), border-color .22s ease, box-shadow .26s ease; }
  .tracking-result:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 14px 30px rgb(20 29 42 / 9%); }
  :root[data-theme="dark"] .tracking-result:hover { box-shadow: 0 16px 34px rgb(0 0 0 / 26%); }
  .tracking-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgb(40 107 214 / 20%); }
  .tracking-intro h1, .tracking-card-heading h2, .tracking-progress-heading h3 { transition: translate .24s cubic-bezier(.2,.75,.2,1); }
  .tracking-intro h1:hover, .tracking-card-heading h2:hover, .tracking-progress-heading h3:hover { translate: 0 -3px; }
}
@media (max-width: 640px) {
  .tracking-page { width: calc(100% - 36px); min-height: 0; padding: 25px 0 56px; }
  .tracking-page .breadcrumbs { margin-bottom: 20px; font-size: 10px; }
  .tracking-intro { margin-bottom: 20px; }
  .tracking-intro h1 { font-size: 34px; }
  .tracking-search-card { padding: 18px; }
  .tracking-input-row { flex-direction: column; }
  .tracking-submit { width: fit-content; min-width: 120px; }
  .result-topline { flex-direction: column; }
  .status-badge { align-self: flex-start; }
  .tracking-result { margin-top: 16px; padding: 18px; }
}
@media (max-width: 380px) {
  .tracking-page { width: calc(100% - 28px); }
  .tracking-search-card, .tracking-result { padding: 15px; }
  .timeline-step { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tracking-result { transition: none; }
}