@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,700;1,500;1,700&family=Noto+Sans+TC:wght@400;500;600&display=swap');

:root { --ink:#1e2624; --cream:#f5f0e7; --sage:#809287; --line:#d6cec1; --coral:#cf624d; --paper:#fffdf9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 80% 5%, #c9d5cb 0, transparent 28rem), var(--cream); font-family:"Noto Sans TC", sans-serif; }
.tracking-shell { width:min(960px, calc(100% - 40px)); margin:auto; padding:38px 0 74px; }
.wordmark { color:var(--ink); font:500 16px/1 "DM Mono", monospace; letter-spacing:.12em; text-decoration:none; }
.wordmark span { color:var(--coral); }
.masthead { width:min(600px, 100%); padding:74px 0 44px; }
.eyebrow { margin:0 0 10px; color:var(--coral); font:500 11px/1 "DM Mono", monospace; letter-spacing:.14em; }
h1,h2 { margin:0; font-family:"Playfair Display", serif; font-weight:500; }
h1 { font-size:clamp(3rem, 8vw, 5.8rem); letter-spacing:-.06em; line-height:.91; }
h1 em { color:var(--sage); }
.masthead > p:last-child { max-width:470px; margin:24px 0 0; color:#59605d; font-size:15px; line-height:1.9; }
.lookup-card { display:grid; grid-template-columns:.82fr 1.18fr; gap:38px; padding:36px; background:var(--paper); border:1px solid var(--line); box-shadow:9px 10px 0 rgba(30,38,36,.09); }
.lookup-card.direct-lookup { display:none; }
h2 { font-size:2.35rem; letter-spacing:-.05em; }
form { display:grid; gap:15px; }
.lookup-mode { display:flex; gap:20px; padding:0 0 7px; border:0; color:#59605d; font-size:13px; }
.lookup-mode label { display:flex; align-items:center; gap:6px; }
input { accent-color:var(--coral); }
form > label { display:grid; gap:7px; color:#43504a; font-size:12px; font-weight:600; letter-spacing:.04em; }
form > label[hidden] { display:none !important; }
form > label input { width:100%; padding:13px 0 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:400 15px "DM Mono", monospace; outline:none; }
form > label input:focus { border-color:var(--coral); }
button { justify-self:start; margin-top:4px; padding:13px 18px; border:0; color:#fffdf9; background:var(--ink); cursor:pointer; font:500 12px "DM Mono", monospace; letter-spacing:.06em; transition:transform .18s ease, background .18s ease; }
button:hover { background:var(--coral); transform:translate(-2px,-2px); }
button span { padding-left:10px; font-size:17px; }
.form-status { grid-column:2; min-height:20px; margin:-22px 0 0; color:var(--coral); font-size:13px; }
.privacy-note { grid-column:2; margin:-12px 0 0; color:#69716d; font-size:11px; line-height:1.7; }
.results { margin-top:46px; }
.order-card { padding:31px; border-top:3px solid var(--ink); background:rgba(255,253,249,.73); animation:rise .35s ease both; }
.order-card__head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid var(--line); }
.order-card__number { font:500 14px "DM Mono", monospace; letter-spacing:.06em; }
.status-chip { padding:6px 9px; color:#46564d; background:#dae4dd; font:500 10px "DM Mono", monospace; text-transform:uppercase; }
.order-items { padding:19px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.9; }
.tracking-item { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 0; }.tracking-item + .tracking-item { border-top:1px solid var(--line); }.tracking-item img { width:56px; height:70px; object-fit:cover; background:#eef2ef; }.tracking-item strong,.tracking-item span { display:block; }.tracking-item span { color:#59605d; font-size:12px; }.tracking-total { display:flex; justify-content:space-between; margin:0; padding:15px 0 0; font-size:14px; }
.order-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:19px 0; font-size:12px; color:#59605d; }
.order-meta strong { display:block; color:var(--ink); font-family:"DM Mono", monospace; font-weight:500; }
.timeline { list-style:none; margin:0; padding:15px 0 0; }
.timeline li { position:relative; padding:0 0 18px 23px; color:#59605d; font-size:12px; }
.timeline li::before { content:""; position:absolute; left:0; top:4px; width:8px; height:8px; border:1px solid var(--coral); border-radius:50%; background:var(--paper); }
.timeline li:first-child::before { background:var(--coral); }
.timeline time { display:block; margin-top:3px; color:#89908c; font:10px "DM Mono", monospace; }
.result-list { display:grid; gap:10px; }
.result-list button { width:100%; display:flex; justify-content:space-between; align-items:center; margin:0; text-align:left; }
.line-support { display:grid; grid-template-columns:120px 1fr; gap:25px; align-items:center; margin-top:34px; padding:25px; border:1px solid var(--line); background:rgba(255,253,249,.72); }
.line-support img { width:120px; height:120px; object-fit:contain; background:#fff; }
.line-support h2 { font-size:1.7rem; }
.line-support p { color:#59605d; line-height:1.7; }
.line-support a,.result-support a { display:inline-block; padding:11px 15px; color:#fff; background:#178b63; text-decoration:none; font-size:13px; }
.result-support { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:14px; padding:18px; border-left:3px solid #178b63; background:var(--paper); }
.result-support span { color:#59605d; font-size:13px; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:680px) { .tracking-shell { width:min(100% - 28px, 960px); padding-top:25px; } .masthead { padding:54px 0 32px; } .lookup-card { display:block; padding:25px 21px; } .card-heading { margin-bottom:23px; } .form-status,.privacy-note { margin:13px 0 0; } .privacy-note { font-size:10px; } .order-card { padding:22px 18px; } .order-meta { grid-template-columns:1fr; } .line-support { grid-template-columns:86px 1fr; padding:18px; gap:16px; }.line-support img { width:86px; height:86px; } }
@media (max-width:480px) { .tracking-item { grid-template-columns:48px 1fr; }.tracking-item img { width:48px; height:60px; }.tracking-item b { grid-column:2; } }