.ubtr { max-width: 1120px; margin: 0 auto; padding: 0 18px; box-sizing: border-box; color: var(--ink, #111827); }
#ubtrack .ubtr { padding: 0; }
.ubtr[hidden] { display: none; }
.ubtr * { box-sizing: border-box; }

.ubtr__card {
  border: 1px solid var(--line, #d7dbe0);
  border-radius: 14px;
  padding: 28px 30px;
  background: #fff;
  margin-top: 28px;
}
.ubtr__card--empty { background: #fafafa; }
.ubtr__card--warn { border-color: #f5c33b; background: #fffaeb; }
.ubtr__card--loading { min-height: 120px; }

.ubtr__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.ubtr__order { font-size: 15px; font-weight: 600; }
.ubtr__updated { font-size: 13px; color: var(--muted, #6b7280); margin-left: auto; }

.ubtr__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  background: #eef0f3; color: #374151;
}
.ubtr__pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
.ubtr__pill--sm { padding: 3px 9px; font-size: 12px; }
.ubtr__pill--none { background: #eef0f3; color: #4b5563; }
.ubtr__pill--label { background: #e8f0fe; color: #1d4ed8; }
.ubtr__pill--in_transit { background: #e6f1fb; color: #0b5cad; }
.ubtr__pill--out_for_delivery { background: #ede9fe; color: #5b21b6; }
.ubtr__pill--ready_for_pickup { background: #ede9fe; color: #5b21b6; }
.ubtr__pill--attempted_delivery { background: #fff1e6; color: #b45309; }
.ubtr__pill--delivered { background: #e3f6ec; color: #027a48; }
.ubtr__pill--failure { background: #fde8e8; color: #b42318; }

.ubtr__message { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
.ubtr__card--empty .ubtr__message, .ubtr__card--warn .ubtr__message { margin: 0; font-size: 15px; }

.ubtr__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 28px; margin: 0 0 16px; }
.ubtr__meta > div { min-width: 0; }
.ubtr__meta dt { font-size: 13px; color: var(--muted, #6b7280); margin: 0 0 4px; }
.ubtr__meta dd { margin: 0; font-size: 15px; }
.ubtr__num-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ubtr__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 6px; background: #f3f4f6; color: var(--ink, #111827);
  word-break: break-all;
}
.ubtr__copy {
  border: 1px solid var(--line, #d7dbe0); background: #fff; color: var(--ink, #111827);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ubtr__copy:hover { background: #f3f4f6; }
.ubtr__copy.is-copied { border-color: #027a48; color: #027a48; }

.ubtr .ubtr__events { list-style: none; margin: 8px 0 0; padding: 0; }
.ubtr .ubtr__meta { margin: 0 0 16px; }
.ubtr .ubtr__message:not(:last-child) { margin-bottom: 18px; }
.ubtr__event { position: relative; display: flex; gap: 16px; padding: 0 0 22px; }
.ubtr__event:last-child { padding-bottom: 0; }
.ubtr__event::before { content: ""; position: absolute; left: 7px; top: 19px; bottom: -3px; border-left: 2px solid #111827; }
.ubtr__event:last-child::before { content: none; }
.ubtr__event.is-latest::before { border-left-color: var(--line, #d7dbe0); }
.ubtr__dot {
  flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: #111827; border: 2px solid #111827; position: relative; z-index: 1;
}
.ubtr__event.is-latest .ubtr__dot { box-shadow: 0 0 0 4px rgba(17, 24, 39, .1); }
.ubtr__event--delivered.is-latest .ubtr__dot { border-color: #027a48; background: #027a48; box-shadow: 0 0 0 4px rgba(2, 122, 72, .14); }
.ubtr__event--failure.is-latest .ubtr__dot, .ubtr__event--attempted_delivery.is-latest .ubtr__dot { border-color: #b42318; background: #b42318; box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }
.ubtr__event--pending .ubtr__dot { background: #fff; border-color: var(--line, #d7dbe0); box-shadow: none; }
.ubtr__event-body { min-width: 0; }
.ubtr__event-title { margin: 0; font-size: 15px; line-height: 1.4; }
.ubtr__event.is-latest .ubtr__event-title { font-weight: 600; }
.ubtr__event-meta { margin: 3px 0 0; font-size: 13px; color: var(--muted, #6b7280); }
.ubtr__event--pending .ubtr__event-title, .ubtr__event--pending .ubtr__event-meta { color: #9ca3af; }

#ubtrack { scroll-margin-top: calc(var(--header-height, 72px) + 16px); }
#ubtrack .ubt-in::placeholder { color: #b6bbc4; opacity: 1; }
#ubtrack.ubt-has-result .ubt-card { display: none; }
#ubtrack.ubt-has-result #YQContainer { margin-top: 0; }
#ubtrack.ubt-has-result .ubtr__card { margin-top: 0; }
.ubtr__card:focus { outline: none; }
.ubtr__again { margin: 16px 0 0; }
.ubtr__again-btn {
  border: 0; background: none; padding: 6px 0; font: inherit; font-size: 14px; color: var(--ink, #111827);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ubtr__again-btn:hover { color: #000; }
.ubtr__again-btn:focus-visible { outline: 2px solid #111827; outline-offset: 3px; border-radius: 4px; }

.ubtr__more { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, #d7dbe0); }
.ubtr__more-title { margin: 0 0 8px; font-size: 13px; color: var(--muted, #6b7280); }
.ubtr .ubtr__more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ubtr__more li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ubtr__more a { color: inherit; }

.ubtr__skeleton { display: block; height: 14px; border-radius: 7px; margin: 0 0 14px; background: linear-gradient(90deg, #eef0f3 25%, #f7f8f9 50%, #eef0f3 75%); background-size: 200% 100%; animation: ubtr-shimmer 1.2s linear infinite; }
.ubtr__skeleton--pill { width: 110px; height: 26px; border-radius: 999px; }
.ubtr__skeleton--short { width: 45%; margin-bottom: 0; }
@keyframes ubtr-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ubtr__skeleton { animation: none; } }

.ubtr-nojs { border: 1px solid var(--line, #d7dbe0); border-radius: 14px; padding: 26px 30px; margin: 24px auto 0; max-width: 1120px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.ubtr-nojs p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted, #6b7280); }
.ubtr-nojs label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ubtr-nojs input { width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; border: 1px solid #111; border-radius: 7px; background: #fff; }
.ubtr-nojs__or { align-self: center; justify-self: center; color: var(--muted, #6b7280); font-size: 15px; }
.ubtr-nojs button { grid-column: 1 / -1; justify-self: start; padding: 14px 34px; border: 0; border-radius: 11px; background: #000; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.ubtr-nojs button:hover { background: #333; }

@media (max-width: 760px) {
  .ubtr { padding: 0 14px; }
  .ubtr__card { padding: 22px 18px; margin-top: 20px; }
  .ubtr__updated { margin-left: 0; width: 100%; }
  .ubtr-nojs { grid-template-columns: 1fr; padding: 22px 18px; }
}