:root{--navy:#16479E;--navy2:#0E3576;--navy-soft:#EDF3FD;--y:#FDB913;--y2:#FFCB4D;--ink:#0B0B0B;--ink2:#3A3A3A;--mute:#6B7280;--line:#E3E7EE;--bg:#FFFFFF;--card:#fff;--ok:#2E8B57;--ok-soft:#E3F3E9;--warn:#B8700F;--warn-soft:#FFF2D4;--bad:#C8433B;--bad-soft:#FBE5E3}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;font-size:15px;line-height:1.55}
header{background:var(--ink);color:#E7ECF3;padding:18px 20px}
.wrap{max-width:720px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}.mark{width:26px;height:26px;background:var(--y);clip-path:polygon(0 0,38% 0,50% 40%,62% 0,100% 0,72% 100%,50% 60%,28% 100%)}
.brand b{font-family:Montserrat,sans-serif;letter-spacing:-.02em;font-size:20px;letter-spacing:.06em}.brand small{display:block;font-size:10px;color:#98A2B3;font-weight:600}
main{padding:28px 20px 60px}
h1{font-family:Montserrat,sans-serif;letter-spacing:-.02em;font-size:38px;font-weight:800;margin:0 0 6px;line-height:1}
.sub{color:var(--mute);margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--mute)}
.when{font-family:Montserrat,sans-serif;letter-spacing:-.02em;font-size:24px;font-weight:700;margin:2px 0 8px}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#EAEEF5;color:var(--ink2)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}
.btn{display:inline-block;background:var(--y);color:var(--ink);text-decoration:none;font-weight:700;padding:11px 18px;border-radius:9px;margin-top:6px}
.btn.s{background:#fff;border:1px solid var(--line);font-weight:600;padding:8px 14px}
.note{background:#FAFCFF;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:12px;font-size:14px}
.note b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.meta{font-size:13px;color:var(--mute);margin-top:10px}
.empty{text-align:center;color:var(--mute);padding:40px 10px}
.foot{font-size:12px;color:var(--mute);margin-top:28px;text-align:center}
.foot a{color:var(--mute)}
@media(max-width:480px){h1{font-size:32px}}

.btn{transition:transform .12s ease,box-shadow .18s ease,background .18s ease}.btn:hover{transform:translateY(-1px)}
::selection{background:var(--y);color:#0B0B0B}

/* One way back to the homepage from every page, in the same place on all of them.
   The label shortens to Home on a phone so the header never overflows. */
.homebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.45);
 color:#fff;border-radius:999px;padding:7px 14px;font-weight:700;font-size:12.5px;
 text-decoration:none;white-space:nowrap;line-height:1}
.homebtn:hover{background:rgba(255,255,255,.14)}
.homebtn .hbshort{display:none}
header .wrap.brand{justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.homebtn .hbfull{display:none}.homebtn .hbshort{display:inline}}

/* The Order Number box. Deliberately the only thing on the page before a
   lookup : nothing about anybody's order is on screen until one is asked for. */
.lookup{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.lookup input{flex:1;min-width:210px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
 font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.lookup input:focus{outline:2px solid var(--navy);outline-offset:1px}
.lookup button{background:var(--y);color:var(--ink);border:0;border-radius:10px;padding:12px 20px;
 font-family:inherit;font-weight:700;font-size:15px;cursor:pointer}
.lookup button:disabled{opacity:.55;cursor:not-allowed}
.msg{border-radius:10px;padding:12px 14px;font-size:14px;margin-top:12px}
.msg.warn{background:var(--warn-soft);color:var(--warn)}
.msg.bad{background:var(--bad-soft);color:var(--bad)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(0,0,0,.25);border-top-color:var(--ink);
 border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}}

/* One legal line, the same on every page, so the Terms are never more than a
   glance away wherever a customer happens to be. */
.aeralegal{max-width:720px;margin:30px auto 0;padding:0 20px 30px;
 font-size:12px;line-height:1.7;color:#6B7280;text-align:center}
.aeralegal a{color:inherit;text-underline-offset:3px}

.langsw{display:inline-flex;align-items:center;border:1px solid rgba(128,128,128,.45);background:transparent;border-radius:99px;padding:2px;cursor:pointer;font-family:inherit;line-height:1;overflow:hidden;margin-right:10px;vertical-align:middle}
.langsw span{display:block;padding:4px 8px;font-size:11px;font-weight:700;color:inherit;border-radius:99px;white-space:nowrap}
.langsw .l1{background:#16479E;color:#fff}
html[data-lang="zh"] .langsw .l1{background:transparent;color:inherit}
html[data-lang="zh"] .langsw .l2{background:#16479E;color:#fff}