.track-root{--bg:#f4f6fa;--surface:#fff;--surface-2:#f0f3f8;--border:rgba(0,0,0,0.08);--border-hi:rgba(0,0,0,0.13);--accent:#00a87a;--accent-2:#0072d6;--accent-glow:rgba(0,168,122,0.12);--text-1:#0f1520;--text-2:#4a5568;--text-3:#9aa3b2;--radius:14px;--radius-sm:8px;--font-head:"DM Mono","Fira Code",monospace;--font-body:"Inter","Segoe UI",sans-serif;--transition:0.22s ease;--col-green:#00a87a;--col-yellow:#d97706;--col-blue:#0072d6;--col-red:#dc2626;--col-gray:#9aa3b2;font-family:var(--font-body);background:var(--bg);min-height:100vh;color:var(--text-1);position:relative;overflow-x:hidden}.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(0,168,122,.045) 1px,transparent 0),linear-gradient(90deg,rgba(0,168,122,.045) 1px,transparent 0);background-size:40px 40px;pointer-events:none;z-index:0}.track-wrapper{z-index:1;max-width:780px;margin:0 auto;padding:24px 16px 60px;flex-direction:column;gap:16px}.hero-strip,.track-wrapper{position:relative;display:flex}.hero-strip{background:var(--surface);border:1px solid var(--border-hi);border-radius:var(--radius);padding:24px 24px 20px;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04)}.hero-strip:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent)}.hero-label{font-family:var(--font-head);font-size:10px;letter-spacing:.2em;color:var(--accent);margin-bottom:12px;font-weight:600}.order-meta{display:flex;flex-wrap:wrap;gap:8px}.meta-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--text-2);font-family:var(--font-head)}.meta-chip svg{color:var(--accent);flex-shrink:0}.hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.etd-block{text-align:right}.etd-label{font-size:10px;letter-spacing:.12em;color:var(--text-3);font-family:var(--font-head);text-transform:uppercase;margin-bottom:3px}.etd-value{font-size:18px;font-weight:700;color:var(--text-1);letter-spacing:-.02em}.status-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-head);border:1px solid}.pill-dot{width:7px;height:7px;border-radius:50%;-webkit-animation:pulse 1.6s infinite;animation:pulse 1.6s infinite}@-webkit-keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.courier-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 18px;font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.04em;box-shadow:0 1px 3px rgba(0,0,0,.05)}.courier-badge svg{color:var(--accent-2)}.stepper-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04)}.stepper-title{font-family:var(--font-head);font-size:10px;letter-spacing:.2em;color:var(--text-3);margin-bottom:24px;font-weight:600}.stepper{flex-direction:row;justify-content:space-between;gap:4px;overflow-x:auto;padding-bottom:4px}.step,.stepper{display:flex;position:relative}.step{flex-direction:column;align-items:center;flex:1;min-width:72px}.step-connector{position:absolute;top:20px;left:50%;width:100%;height:2px;background:var(--border-hi);z-index:0}.step--active .step-connector{background:linear-gradient(90deg,var(--accent),rgba(0,168,122,.15))}.step-node{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border-hi);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;flex-shrink:0;transition:var(--transition)}.step--active .step-node{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 0 4px rgba(0,168,122,.1)}.step-info{margin-top:10px;text-align:center;padding:0 4px}.step-name{font-size:11px;font-weight:700;font-family:var(--font-head);color:var(--text-3);letter-spacing:.04em;white-space:nowrap}.step--active .step-name{color:var(--text-1)}.step-msg{font-size:10px;color:var(--text-3);margin-top:2px;line-height:1.3;display:none}.step-date{font-size:10px;color:var(--accent);margin-top:3px;font-family:var(--font-head)}.scans-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04)}.scans-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--surface-2)}.scans-title{font-size:10px;letter-spacing:.2em;color:var(--text-3);font-weight:600}.scans-count,.scans-title{font-family:var(--font-head)}.scans-count{font-size:11px;color:var(--accent);background:rgba(0,168,122,.08);border:1px solid rgba(0,168,122,.2);border-radius:999px;padding:3px 10px}.scan-list{padding:8px 0}.scan-item{display:flex;padding:14px 24px;gap:16px;transition:background var(--transition);border-bottom:1px solid transparent}.scan-item:hover{background:var(--surface-2);border-bottom-color:var(--border)}.scan-timeline-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:14px;padding-top:4px}.scan-dot{width:10px;height:10px;border-radius:50%;background:var(--border-hi);flex-shrink:0;border:2px solid var(--border);transition:var(--transition)}.scan-dot--active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(0,168,122,.4)}.scan-line{width:1px;flex:1;min-height:20px;background:var(--border-hi);margin-top:4px}.scan-body{flex:1;min-width:0}.scan-status{font-size:13px;font-weight:600;color:var(--text-1);line-height:1.3}.scan-item--first .scan-status{color:var(--accent)}.scan-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:5px}.scan-location{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-2)}.scan-date,.scan-location svg{color:var(--text-3)}.scan-date{font-size:11px;font-family:var(--font-head)}.empty-scans{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:48px 24px;text-align:center;color:var(--text-3);font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.05)}.empty-scans svg{display:block;margin:0 auto 12px}.not-found{text-align:center;padding:80px 24px;color:var(--text-3);position:relative;z-index:1}.not-found svg{display:block;margin:0 auto 16px}.not-found h2{font-size:22px;color:var(--text-2);margin:0 0 8px}.not-found p{font-size:14px;margin:0}@media (max-width:600px){.track-wrapper{padding:16px 12px 48px;gap:12px}.hero-strip{padding:18px 16px}.hero-right{align-items:flex-start;width:100%}.etd-block{text-align:left}.etd-value{font-size:16px}.stepper{gap:0}.step-node{width:34px;height:34px}.step-name{font-size:9px}.step-connector{top:17px}.scans-header{padding:14px 16px}.scan-item{padding:12px 16px;gap:12px}.scan-status{font-size:12px}.stepper-card{padding:18px 14px}}@media (min-width:601px){.step-msg{display:block}}