.track-brand-link { color: inherit; text-decoration: none; }
.track-main { width: min(960px, calc(100% - 28px)); margin: 28px auto 64px; display: grid; gap: 18px; }
.track-search-card,.track-result,.track-items-card,.track-info-card { border:1px solid var(--store-border); background:var(--store-card); color:var(--store-text); box-shadow:var(--store-shadow); }
.track-search-card,.track-result { border-radius:var(--store-radius); padding:clamp(18px,3vw,28px); }
.track-search-card h2,.track-order-head h2,.track-section-title h3 { margin:5px 0 7px; color:var(--store-text); }
.track-search-card>p { margin:0 0 18px; color:var(--store-muted); line-height:1.6; }
.track-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
.track-form .primary-button { min-height:46px; white-space:nowrap; }
.track-last-order { margin-top:12px; padding:0; border:0; background:none; color:var(--store-primary); cursor:pointer; font:inherit; font-size:13px; font-weight:700; }
.track-order-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.track-code-box { min-width:230px; padding:11px 13px; border:1px solid var(--store-border); border-radius:10px; background:var(--store-soft); }
.track-code-box span { display:block; color:var(--store-muted); font-size:11px; font-weight:700; }
.track-code-box strong { display:block; margin-top:3px; color:var(--store-text); font-size:16px; letter-spacing:.04em; overflow-wrap:anywhere; }
.track-status-banner { margin-top:18px; padding:17px 18px; border:1px solid color-mix(in srgb,var(--store-primary) 28%,var(--store-border)); border-radius:12px; background:color-mix(in srgb,var(--store-primary) 9%,var(--store-card)); }
.track-status-banner>span { display:block; color:var(--store-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.track-status-banner>strong { display:block; margin-top:4px; color:var(--store-text); font-size:clamp(19px,3vw,24px); }
.track-status-banner>small { display:block; margin-top:5px; color:var(--store-muted); line-height:1.45; }
.track-status-banner[data-status="cancelled"] { border-color:color-mix(in srgb,#ef4444 35%,var(--store-border)); background:color-mix(in srgb,#ef4444 8%,var(--store-card)); }
.track-status-banner[data-status="delivered"] { border-color:color-mix(in srgb,#16a34a 35%,var(--store-border)); background:color-mix(in srgb,#16a34a 8%,var(--store-card)); }
.track-timeline { list-style:none; margin:22px 0; padding:0; display:flex; }
.track-timeline li { position:relative; flex:1; min-width:0; padding:0 5px; display:grid; justify-items:center; gap:7px; color:var(--store-muted); text-align:center; font-size:11px; font-weight:700; }
.track-timeline li::before { content:''; position:absolute; top:14px; left:0; right:0; height:2px; background:var(--store-border); z-index:0; }
.track-timeline li:first-child::before { left:50%; }.track-timeline li:last-child::before { right:50%; }
.track-step-dot { position:relative; z-index:1; width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--store-border); border-radius:50%; background:var(--store-card); color:var(--brand-on-primary,#fff); font-size:12px; }
.track-timeline li.is-done::before,.track-timeline li.is-active::before { background:var(--store-primary); }
.track-timeline li.is-done .track-step-dot,.track-timeline li.is-active .track-step-dot { border-color:var(--store-primary); background:var(--store-primary); }
.track-timeline li.is-active { color:var(--store-text); }.track-timeline li.is-active .track-step-dot { box-shadow:0 0 0 5px color-mix(in srgb,var(--store-primary) 16%,transparent); }
.track-timeline li.is-cancelled .track-step-dot { border-color:#ef4444; background:#ef4444; }
.track-info-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.track-info-card { padding:13px; border-radius:10px; box-shadow:none; }.track-info-card span { display:block; color:var(--store-muted); font-size:11px; }.track-info-card strong { display:block; margin-top:5px; color:var(--store-text); font-size:13px; overflow-wrap:anywhere; }
.track-items-card { margin-top:18px; padding:17px; border-radius:12px; box-shadow:none; }.track-section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.track-section-title small { color:var(--store-muted); font-size:11px; }
.track-items { margin-top:12px; display:grid; gap:8px; }.track-item-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--store-border); }.track-item-row:first-child { border-top:0; }.track-item-row>div { min-width:0; }.track-item-row strong { color:var(--store-text); }.track-item-row small { display:block; margin-top:3px; color:var(--store-muted); }
@media(max-width:760px){.track-form{grid-template-columns:1fr}.track-order-head{align-items:stretch;flex-direction:column}.track-code-box{min-width:0}.track-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.track-timeline{display:grid}.track-timeline li{min-height:52px;grid-template-columns:32px minmax(0,1fr);justify-items:start;align-items:start;text-align:left;padding:0;gap:9px}.track-timeline li::before{top:0;bottom:0;left:13px!important;right:auto!important;width:2px;height:100%}.track-timeline li:first-child::before{top:14px}.track-timeline li:last-child::before{bottom:auto;height:14px}.track-timeline li>span:last-child{padding-top:5px}}
@media(max-width:480px){.track-main{width:min(100% - 20px,960px);margin-top:18px}.track-search-card,.track-result{padding:16px}.track-info-grid{grid-template-columns:1fr}.track-section-title{flex-direction:column}.track-item-row{align-items:flex-start}}