:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
      --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
      --navy:#16233F;--red:#E63329;--ink:#1B2333;--mute:#6B7487;--line:#E3E7EF;--bg:#F4F6FA;--ok:#1E8E5A;--warn:#C46A00}
*{box-sizing:border-box}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);
     min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;
     padding:calc(12px + var(--sat)) calc(16px + var(--sar)) 12px calc(16px + var(--sal))}
.brand img{display:block;height:28px;width:auto}
.top-title{margin-left:auto;font-size:14px;opacity:.85}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:16px calc(14px + var(--sar)) 24px calc(14px + var(--sal))}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(22,35,63,.04)}
h1{font-size:22px;margin:0 0 4px;color:var(--navy)}
h2{font-size:18px;margin:0;color:var(--navy)}
.sub,.hint{color:var(--mute);margin:0 0 14px;font-size:14px}
.hint{margin:14px 0 0}
label{display:block;font-size:13px;font-weight:600;color:var(--mute);margin:10px 0 6px}
input{width:100%;font-size:16px;padding:13px 14px;border:1px solid #CBD2DE;border-radius:10px;background:#fff;color:var(--ink);min-height:48px}
input:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:10px;border:0;
     font-family:inherit;font-weight:600;font-size:16px;line-height:1.1;cursor:pointer;text-decoration:none}
#go{width:100%;margin-top:16px;background:var(--red);color:#fff}
#go[disabled]{opacity:.6}
.err{color:#B3261E;font-size:14px;margin:12px 0 0}
.foot{text-align:center;color:var(--mute);font-size:13px;padding:12px 16px calc(16px + var(--sab))}
.foot a{color:var(--navy)}

/* result */
.res-head{display:flex;align-items:flex-start;gap:10px}
.res-head .meta{color:var(--mute);font-size:13px;margin-top:2px}
.again{margin-left:auto;white-space:nowrap;flex:none;background:#EEF1F6;color:var(--navy);min-height:44px;font-size:14px;padding:0 12px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:#EEF1F6;color:var(--navy);vertical-align:middle}
.pill.ok{background:#E3F4EB;color:var(--ok)}.pill.warn{background:#FFF1DE;color:var(--warn)}.pill.bad{background:#FDE7E6;color:#B3261E}
.headline{font-size:20px;font-weight:700;margin:12px 0 2px;color:var(--navy)}
.eta{font-size:15px;color:var(--ink);margin:0 0 6px}
.steps{display:flex;margin:16px 0 6px;padding:0;list-style:none}
.steps li{flex:1;text-align:center;font-size:11px;color:var(--mute);position:relative;padding-top:22px}
.steps li::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:#D5DAE3;z-index:1}
.steps li::after{content:"";position:absolute;top:10px;left:-50%;width:100%;height:3px;background:#D5DAE3}
.steps li:first-child::after{display:none}
.steps li.done{color:var(--navy);font-weight:600}
.steps li.done::before,.steps li.done::after{background:var(--ok)}
.steps li.now::before{box-shadow:0 0 0 4px rgba(30,142,90,.2)}
.items{list-style:none;margin:12px 0 0;padding:0}
.items li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.items img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#EEF1F6;flex:none}
.items .q{margin-left:auto;color:var(--mute);white-space:nowrap}
.parcel{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:12px}
.parcel .row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px}
.parcel .awb{font-family:ui-monospace,Menlo,monospace;font-size:14px;user-select:all}
.parcel .note{color:var(--mute);font-size:13px;margin:8px 0 0}
.parcel .btn{background:var(--navy);color:#fff;font-size:14px;min-height:44px;margin-top:10px}
.copy{background:#EEF1F6;color:var(--navy);min-height:44px;font-size:13px;padding:0 10px}
.scans{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line)}
.scans li{position:relative;padding:0 0 12px 8px;font-size:14px}
.scans li::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:#C3CAD6}
.scans li:first-child::before{background:var(--ok)}
.scans .w{color:var(--mute);font-size:12px}
.more{background:none;color:var(--navy);min-height:44px;padding:0;font-size:14px;text-decoration:underline}
.split-note{background:#F7F8FB;border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);margin:0 0 12px}
.help{font-size:14px}
.help .btn{background:#25D366;color:#fff;margin:8px 8px 0 0}
.help .btn.mail{background:#EEF1F6;color:var(--navy)}
.checked{color:var(--mute);font-size:12px;text-align:center;margin:6px 0 0}
.skel{height:14px;border-radius:7px;background:linear-gradient(90deg,#EEF1F6,#F7F8FB,#EEF1F6);background-size:200% 100%;animation:sk 1.2s infinite;margin:10px 0}
@keyframes sk{to{background-position:-200% 0}}
.items .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Cross-sell: "You may also like" cards + collection chips under the tracker */
.picks{margin:6px 0 14px}
.picks h2{margin:0 0 10px}
.picks h3{font-size:15px;color:var(--navy);margin:18px 0 8px}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none}
.pc img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#F3F5F9}
.pc .t{font-size:13px;line-height:1.3;margin:8px 10px 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc .pr{margin:auto 10px 10px;font-size:15px;font-weight:700;color:var(--navy)}
.pc .pr s{color:var(--mute);font-weight:400;font-size:12px}
.pc .pr .off{color:var(--ok);font-size:12px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-size:14px;font-weight:600;text-decoration:none}