/* ============================================================================
 * ASIAVEN CARGO · 自助查件组件样式（浅/深两版共用）
 * 用 .trk[data-theme=light|dark] 切换配色；节点模型与 track_workbench 后端一致
 * ========================================================================== */
.trk{
  --tc-ink:#0F2436; --tc-sub:#5C7285; --tc-card:#FFFFFF; --tc-soft:#F2F7FA;
  --tc-line:#DEE9EF; --tc-done:#1E9E6A; --tc-now:#C23B46; --tc-todo:#C6D6E0;
  --tc-accent:#16688F; --tc-warn:#8A5A11; --tc-warnbg:#FFF6E8; --tc-warnline:#F0D59B;
  --tc-err:#C23B46; --tc-errbg:#FDEDEE; --tc-errline:#F2BFC4;
  background:var(--tc-card); border:1px solid var(--tc-line); border-radius:26px;
  padding:26px; color:var(--tc-ink)
}
.trk[data-theme="dark"]{
  --tc-ink:#EAF2F8; --tc-sub:#93A9BA; --tc-card:#0C1A27; --tc-soft:#0F2233;
  --tc-line:rgba(163,196,220,.18); --tc-done:#4BB1E2; --tc-now:#DC545C; --tc-todo:#2B4257;
  --tc-accent:#4BB1E2; --tc-warn:#F0C37E; --tc-warnbg:rgba(232,163,61,.13); --tc-warnline:rgba(232,163,61,.45);
  --tc-err:#F0A2A8; --tc-errbg:rgba(220,84,92,.14); --tc-errline:rgba(220,84,92,.5)
}
.trk *{box-sizing:border-box}
.trk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.trk-head h3{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--tc-ink)}
.trk-head p{margin:8px 0 0;font-size:14px;color:var(--tc-sub);max-width:60ch}
.trk-src{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tc-sub);white-space:nowrap}
.trk-src b{color:var(--tc-done);font-weight:600}

.trk-form{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;gap:12px;align-items:end}
.trk-f label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tc-sub);margin-bottom:8px}
.trk-f input,.trk-f select{
  width:100%;font:inherit;font-size:16px;font-weight:600;padding:14px 15px;
  border:1.5px solid var(--tc-line);border-radius:12px;background:var(--tc-soft);color:var(--tc-ink)
}
.trk-f input::placeholder{color:var(--tc-sub);opacity:.75;font-weight:400;font-size:14px}
.trk-f input:focus,.trk-f select:focus{outline:none;border-color:var(--tc-accent)}
.trk-go{
  font:inherit;font-weight:700;font-size:15.5px;padding:15px 26px;border-radius:12px;
  border:1.5px solid transparent;background:var(--tc-now);color:#fff;cursor:pointer;white-space:nowrap;
  transition:filter .18s,transform .18s
}
.trk[data-theme="dark"] .trk-go{color:#2A0B10}
.trk-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.trk-go[disabled]{opacity:.55;cursor:default;transform:none}
.trk-hint{margin-top:11px;font-size:12.5px;color:var(--tc-sub);font-family:'IBM Plex Mono',monospace}

/* 引导/报错/加载 */
.trk-msg{margin-top:18px;border-radius:14px;padding:16px 18px;font-size:14.5px;font-weight:600;line-height:1.6;display:none}
.trk-msg.on{display:block}
.trk-msg.info{background:var(--tc-soft);border:1px solid var(--tc-line);color:var(--tc-sub);font-weight:500}
.trk-msg.err{background:var(--tc-errbg);border:1px solid var(--tc-errline);color:var(--tc-err)}
.trk-msg.warn{background:var(--tc-warnbg);border:1px solid var(--tc-warnline);color:var(--tc-warn)}
.trk-msg .acts{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.trk-msg a.tb{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  padding:10px 16px;border-radius:999px;background:var(--tc-now);color:#fff;text-decoration:none
}
.trk[data-theme="dark"] .trk-msg a.tb{color:#2A0B10}
.trk-msg a.tb.ghost{background:none;border:1.5px solid var(--tc-line);color:var(--tc-ink)}

.trk-spin{display:inline-block;width:15px;height:15px;border:2.5px solid var(--tc-line);border-top-color:var(--tc-now);border-radius:50%;animation:trkspin .8s linear infinite;vertical-align:-3px;margin-right:9px}
@keyframes trkspin{to{transform:rotate(360deg)}}

/* 结果 */
.trk-res{display:none;margin-top:22px}
.trk-res.on{display:block}

.trk-card{
  border:1px solid var(--tc-line);border-radius:20px;background:var(--tc-soft);
  padding:24px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:26px;align-items:center
}
.trk-card .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tc-sub)}
.trk-card .num{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--tc-ink);margin-top:8px;word-break:break-all}
.trk-card .st{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:16px;color:var(--tc-ink)}
.trk-card .st em{font-style:normal;color:var(--tc-now)}
.trk-card .bar{margin-top:20px;height:10px;border-radius:99px;background:var(--tc-todo);overflow:hidden}
.trk-card .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--tc-accent),var(--tc-now));transition:width .5s}
.trk-card .bl{margin-top:11px;display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--tc-sub);font-weight:600}
.trk-card .pct{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700;color:var(--tc-ink)}
.trk-side{display:grid;gap:12px}
.trk-side .r{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:10px 0;border-bottom:1px dashed var(--tc-line)}
.trk-side .r:last-child{border-bottom:0}
.trk-side .r span:first-child{color:var(--tc-sub)}
.trk-side .r span:last-child{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--tc-ink);text-align:right}

/* 6 节点条 */
.trk-nodes{margin-top:22px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.trk-node{position:relative;padding:16px 12px 14px;border-radius:14px;border:1px solid var(--tc-line);background:var(--tc-card);text-align:center}
.trk-node .dot{width:13px;height:13px;border-radius:50%;margin:0 auto 11px;background:var(--tc-todo);display:block}
.trk-node .nm{font-size:12.5px;font-weight:700;color:var(--tc-sub);line-height:1.35}
.trk-node .dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--tc-sub);margin-top:7px;display:block}
.trk-node.done{border-color:transparent;background:var(--tc-soft)}
.trk-node.done .dot{background:var(--tc-done)}
.trk-node.done .nm{color:var(--tc-ink)}
.trk-node.now{border-color:var(--tc-now);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc-now) 16%,transparent)}
.trk-node.now .dot{background:var(--tc-now);box-shadow:0 0 0 5px color-mix(in srgb,var(--tc-now) 20%,transparent)}
.trk-node.now .nm{color:var(--tc-ink)}

/* 时间轴 */
.trk-tl{margin-top:24px}
.trk-tl h4{margin:0 0 14px;font-size:14px;font-weight:800;color:var(--tc-ink);letter-spacing:-.01em}
.trk-row{display:grid;grid-template-columns:112px 22px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--tc-line)}
.trk-row:last-child{border-bottom:0}
.trk-row .d{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tc-sub);padding-top:2px}
.trk-row .l{position:relative}
.trk-row .l::before{content:"";position:absolute;left:8px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--tc-done)}
.trk-row .l::after{content:"";position:absolute;left:12px;top:17px;bottom:-34px;width:1.5px;background:var(--tc-line)}
.trk-row:last-child .l::after{display:none}
.trk-row .t{font-size:14.5px;font-weight:700;color:var(--tc-ink)}
.trk-row .m{font-size:13px;color:var(--tc-sub);margin-top:3px;line-height:1.55}
.trk-row .it{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--tc-accent);margin-top:5px;word-break:break-all}

@media (max-width:1080px){
  .trk-form{grid-template-columns:1fr 1fr}
  .trk-go{grid-column:1/-1}
  .trk-card{grid-template-columns:1fr}
  .trk-nodes{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .trk{padding:20px;border-radius:20px}
  .trk-form{grid-template-columns:1fr}
  .trk-nodes{grid-template-columns:repeat(2,1fr)}
  .trk-row{grid-template-columns:1fr;gap:4px}
  .trk-row .l{display:none}
  .trk-row .d{color:var(--tc-accent)}
}
@media (prefers-reduced-motion:reduce){.trk *{animation:none!important;transition:none!important}}