.wpz-trk {
    --a: #1f6feb; --bd: #d7dce3; --mut: #5c6773; --ok: #15803d;
    max-width: 720px; margin: 0 auto; color: #1b232c; box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wpz-trk *, .wpz-trk *::before, .wpz-trk *::after { box-sizing: border-box; }

.wpz-trk-hero { text-align: center; margin-bottom: 1.5rem; }
.wpz-trk-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 .3rem; }
.wpz-trk-sub { color: var(--mut); margin: 0 0 1.2rem; }
.wpz-trk-search { display: flex; gap: .5rem; max-width: 460px; margin: 0 auto; }
.wpz-trk-input { flex: 1; padding: .7rem .9rem; border: 1px solid var(--bd); border-radius: 9px; font-size: 1rem; }
.wpz-trk-input:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px rgba(31,111,235,.15); }
.wpz-trk-btn { background: var(--a); color: #fff; border: none; border-radius: 9px; padding: 0 1.4rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
.wpz-trk-btn:hover { background: #195bc4; }
.wpz-trk-btn.loading { opacity: .7; }

.wpz-trk-error { background: #fdecef; color: #b01b4f; border: 1px solid #f4c2d2; border-radius: 8px; padding: .8rem 1rem; text-align: center; }

.wpz-trk-card { background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 1.4rem; }
.wpz-trk-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.wpz-trk-meta-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.wpz-trk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 1.05rem; }
.wpz-trk-pill { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef2f7; color: #334; white-space: nowrap; }
.wpz-trk-delivered { background: #ecfdf3; color: var(--ok); }
.wpz-trk-cancelled { background: #fdecef; color: #b01b4f; }

.wpz-trk-meta { display: flex; gap: 2rem; margin: 1rem 0 1.3rem; font-size: .92rem; }

.wpz-trk-progress { display: flex; justify-content: space-between; margin: 1.5rem 0; position: relative; }
.wpz-trk-progress::before { content: ""; position: absolute; top: 12px; left: 6%; right: 6%; height: 2px; background: var(--bd); z-index: 0; }
.wpz-trk-step { position: relative; z-index: 1; text-align: center; flex: 1; }
.wpz-trk-dot { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto .4rem; background: #fff; border: 2px solid var(--bd); color: #fff; font-size: .8rem; line-height: 22px; }
.wpz-trk-step.done .wpz-trk-dot { background: var(--a); border-color: var(--a); }
.wpz-trk-step-label { font-size: .72rem; color: var(--mut); }
.wpz-trk-step.done .wpz-trk-step-label { color: #1b232c; font-weight: 600; }

.wpz-trk-cancelled { border-radius: 8px; padding: .9rem; text-align: center; margin: 1.2rem 0; font-weight: 600; }

.wpz-trk-tl-head { font-weight: 700; margin: 1.4rem 0 .6rem; }
.wpz-trk-tl-empty { color: var(--mut); font-size: .9rem; padding: .5rem 0; }
.wpz-trk-tl-item { border-left: 2px solid var(--bd); padding: 0 0 1rem 1rem; position: relative; }
.wpz-trk-tl-item::before { content: ""; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.wpz-trk-tl-label { font-weight: 600; }
.wpz-trk-tl-time { font-size: .8rem; color: var(--mut); }
.wpz-trk-tl-note { font-size: .88rem; margin-top: .25rem; }

@media (max-width: 560px) {
    .wpz-trk-step-label { font-size: .62rem; }
    .wpz-trk-meta { gap: 1.2rem; }
}