:root { --brand:#0d5f8a; --brand-dark:#084160; }
* { box-sizing: border-box; }
body { font-family:'Segoe UI',Roboto,Arial,sans-serif; background:#f4f6f9; color:#212529; margin:0; }
.track-hero { background:linear-gradient(135deg,var(--brand-dark),var(--brand)); color:#fff; padding:50px 20px; text-align:center; }
.track-hero h1 { font-size:1.8rem; margin-bottom:8px; }
.track-hero p { opacity:.9; margin-bottom:24px; }
.track-form { max-width:520px; margin:0 auto; display:flex; gap:8px; flex-wrap:wrap; }
.track-form input[type=text] { flex:1; min-width:200px; padding:12px 14px; border-radius:8px; border:none; font-size:1rem; }
.track-form button { padding:12px 22px; border:none; border-radius:8px; background:#fff; color:var(--brand-dark); font-weight:600; cursor:pointer; }
.track-form button:hover { background:#eef6fb; }
.track-container { max-width:700px; margin:-30px auto 60px; padding:0 16px; }
.track-card { background:#fff; border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,0.08); padding:24px; }
.track-summary-row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #eee; }
.track-summary-item .label { font-size:.75rem; text-transform:uppercase; color:#6c757d; letter-spacing:.04em; }
.track-summary-item .value { font-size:1.05rem; font-weight:600; }
.track-badge { display:inline-block; padding:4px 14px; border-radius:20px; background:#e7f1f8; color:var(--brand-dark); font-weight:600; font-size:.85rem; }
.track-timeline { list-style:none; padding:0; margin:0; }
.track-timeline li { position:relative; padding:0 0 22px 30px; border-left:2px solid #dee2e6; }
.track-timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
.track-timeline .dot { position:absolute; left:-8px; top:0; width:14px; height:14px; border-radius:50%; background:#adb5bd; border:3px solid #fff; box-shadow:0 0 0 2px #adb5bd; }
.track-timeline li.done .dot { background:#198754; box-shadow:0 0 0 2px #198754; }
.track-timeline li.current .dot { background:var(--brand); box-shadow:0 0 0 4px rgba(13,95,138,.25); width:16px; height:16px; left:-9px; }
.track-timeline .t-status { font-weight:600; }
.track-timeline .t-meta { color:#6c757d; font-size:.85rem; }
.track-error { text-align:center; padding:30px 10px; color:#842029; }
.track-loading { text-align:center; padding:30px 10px; color:#6c757d; }
@media (max-width:576px) {
  .track-hero h1 { font-size:1.4rem; }
  .track-form { flex-direction:column; }
}