* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* 品牌色板：深蓝主色 + 金色（中泰贸易）强调 */
  --navy: #0B2A4A;
  --navy-2: #123E7A;
  --brand: #1565E6;
  --brand-dark: #0E4DB8;
  --accent: #FFB200;
  --accent-soft: #FFF4D6;

  --bg: #EDF1F7;
  --surface: #FFFFFF;
  --text: #0E1B2C;
  --text-sub: #6B7689;
  --line: #E6EBF2;
  --ok: #15A05A;
  --warn: #E08A00;
  --radius: 18px;
  --shadow: 0 8px 24px rgba(11, 42, 74, 0.08);
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
}

/* ===== 品牌头部 ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: hidden;
  margin: 0 -16px 18px;
  padding: 22px 20px 20px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: 0 0 26px 26px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 42, 74, 0.2);
}
.topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, #fff 50%, var(--accent) 70%, transparent);
  background-size: 200% 100%;
  z-index: 3;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 6%, rgba(255, 178, 0, 0.20), rgba(255, 178, 0, 0) 55%),
    radial-gradient(circle at 6% 94%, rgba(21, 101, 230, 0.16), rgba(21, 101, 230, 0) 55%);
}

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  display: flex;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.brand-text h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
.brand-en {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  font-weight: 500;
}

.slogan {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ===== 查询卡 ===== */
.search-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow);
  z-index: 2;
  margin-top: -8px;
}
.search-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand);
  margin-bottom: 12px;
}
.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F4F7FB;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus-within {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(21, 101, 230, 0.1);
}
.search-input .icon { color: var(--text-sub); flex-shrink: 0; }
.search-input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  padding: 14px 0;
  color: var(--text);
  outline: none;
  letter-spacing: 0.5px;
}
.clear-btn {
  border: none;
  background: #C8CFDB;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.query-btn {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  width: 100%;
  border: none;
  background: linear-gradient(135deg, var(--brand) 0%, #1E7BE8 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 15px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(21, 101, 230, 0.3);
  transition: transform 0.16s ease, box-shadow 0.2s;
}
.query-btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #FFF4D6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.query-btn:active {
  transform: translateY(-2px) scale(0.99);
  box-shadow: 0 10px 22px rgba(21, 101, 230, 0.38);
}
.query-btn:active::after {
  transform: scaleX(1);
}
.query-btn:disabled { opacity: 0.7; cursor: default; }

/* ===== 结果区 ===== */
.result {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.overview-card,
.step-card,
.timeline-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.overview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  padding: 4px 12px;
  border-radius: 999px;
}
.status-badge.done { background: var(--ok); }
.status-badge.transit { background: var(--brand); }
.status-badge.pending { background: var(--warn); }
.carrier {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}
.overview-no {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-sub);
}
.overview-no span {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.overview-latest {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}

/* ===== 进度条（图标步骤） ===== */
.stepbar {
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.step.done:not(:first-child)::before,
.step.active:not(:first-child)::before { background: var(--brand); }
.step-dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--text-sub);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.step-dot svg { width: 16px; height: 16px; }
.step.done .step-dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.step.active .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 178, 0, 0.22);
}
.step.todo .step-dot {
  background: #fff;
  border-color: var(--line);
  color: var(--text-sub);
}
.step-label {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.3;
}
.step.done .step-label,
.step.active .step-label {
  color: var(--text);
  font-weight: 700;
}

/* ===== 时间线 ===== */
.timeline-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.timeline {
  list-style: none;
  position: relative;
}
.timeline li {
  position: relative;
  padding: 0 0 20px 26px;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: -4px;
  width: 2px;
  background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline li::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--line);
}
.timeline li.active::after {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 178, 0, 0.18);
}
.timeline li.active .tl-text {
  color: var(--text);
  font-weight: 600;
}
.tl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tl-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.4;
  white-space: nowrap;
}
.tag-recv     { color: #1f7a4d; background: #e3f7ec; }
.tag-customs  { color: #9a5b00; background: #fdf0d9; }
.tag-clear    { color: #1452A8; background: #e6edff; }
.tag-transit  { color: #1565E6; background: #e9f0ff; }
.tag-deliver  { color: #7a3bc4; background: #f3e9ff; }
.tag-done     { color: #fff; background: var(--ok); }
.tl-text {
  font-size: 14px;
  color: var(--text-sub);
}
.tl-time {
  font-size: 12px;
  color: #b3b8c5;
  margin-top: 4px;
}

/* ===== 空状态 ===== */
.placeholder {
  margin-top: 56px;
  text-align: center;
  color: var(--text-sub);
}
.ph-icon { margin-bottom: 14px; }
.placeholder p {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}
.ph-tip {
  font-size: 13px;
  margin-top: 6px;
  color: #aab2c0;
  font-weight: 400;
}

/* ===== 错误提示 ===== */
.error {
  margin-top: 16px;
  background: #FFF1F0;
  color: #D4382F;
  border: 1px solid #FFCCC7;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  text-align: center;
}

/* ===== 推荐服务 ===== */
.goods-card {
  margin-top: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.goods-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.goods-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-left: 11px;
}
.goods-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--accent);
}
.goods-sub {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-sub);
  font-weight: 500;
}
.goods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.goods-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.goods-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.goods-item:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11, 42, 74, 0.1);
  border-color: rgba(21, 101, 230, 0.4);
}
.goods-item:active::after {
  transform: scaleX(1);
}
.goods-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #c3ccda;
  transition: transform 0.18s ease, color 0.18s ease;
}
.goods-item:active .goods-arrow {
  color: var(--brand);
  transform: translateX(3px);
}
.goods-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand) 0%, #1E7BE8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(21, 101, 230, 0.25);
}
.goods-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.goods-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.goods-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.5;
}

/* ===== 配送记录列表 ===== */
.record-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.record-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.record-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-left: 11px;
}
.record-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--accent);
}
.record-count {
  font-size: 12px;
  color: var(--text-sub);
}
.record-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.record-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  cursor: pointer;
  background: var(--surface);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.record-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.record-item:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11, 42, 74, 0.12);
  border-color: rgba(21, 101, 230, 0.4);
}
.record-item:active::after {
  transform: scaleX(1);
}
.ri-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ri-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}
.ri-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ri-mode svg { width: 13px; height: 13px; }
/* 海运 / 陆运 / 空运 不同样式 */
.ri-mode.sea  { background: #0E7C86; }
.ri-mode.land { background: #2E9E5B; }
.ri-mode.air  { background: #6A5ACD; }
.ri-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.ri-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  background: #E7F0FF;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  line-height: 1.4;
  border: 1px solid #C9DEFF;
}
.ri-status svg { width: 13px; height: 13px; }
/* 业务状态：浅色底 + 彩色字，轻快活泼 */
.ri-status.st-recv    { background: #E6F7EE; color: #1FA85E; border-color: #C5ECD6; }
.ri-status.st-unload  { background: #E3F6F6; color: #0E8C8C; border-color: #C2EAEA; }
.ri-status.st-customs { background: #FDEEDD; color: #C9790F; border-color: #F8DCBD; }
.ri-status.st-transit { background: #E7F0FF; color: #1A6FE0; border-color: #C9DEFF; }
.ri-status.st-clear   { background: #F1E9FF; color: #7A5BD6; border-color: #E0D2FB; }
.ri-status.st-deliver { background: #FCE7F0; color: #D6457E; border-color: #F8CFE0; }
.ri-status.st-done    { background: #E6F7EE; color: #15A05A; border-color: #C5ECD6; }
.ri-status.st-pending { background: #EEF1F5; color: #8A94A6; border-color: #DDE3EC; }
.ri-sub {
  font-size: 13px;
  color: var(--text-sub);
}
.ri-carrier {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}
.ri-latest {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.back-btn {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 30;
  border: none;
  background: linear-gradient(135deg, var(--brand) 0%, #1E7BE8 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(21, 101, 230, 0.38);
}
.back-btn:active { transform: scale(0.96); }

/* ===== 货运概述 + 状态步骤条 ===== */
.ov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ov-mark {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-sub);
  letter-spacing: 0.3px;
}
.stepbar-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow);
}

/* ===== 货运明细（实体字段） ===== */
.detail-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.detail-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-left: 11px;
  margin-bottom: 14px;
}
.detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.detail-top .detail-title {
  margin-bottom: 0;
}
.detail-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--accent);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  background: var(--surface);
}
.field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #4E5A6E;
  font-weight: 700;
}
.field-label svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
  flex-shrink: 0;
}
.field-value {
  font-size: 15px;
  color: #8A93A3;
  font-weight: 500;
  letter-spacing: 0.2px;
  word-break: break-all;
  line-height: 1.5;
}
/* 唛头/品名/地址/备注等较长字段整行展示 */
.field.full {
  grid-column: 1 / -1;
}

/* ===== 页脚 ===== */
.footer {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #aab2c0;
}
.foot-logo {
  font-weight: 600;
  color: var(--navy);
}

/* ===== 动效（尊重无障碍设置）===== */
@media (prefers-reduced-motion: no-preference) {
  .overview-card,
  .step-card,
  .timeline-card,
  .stepbar-card,
  .detail-card,
  .record-card,
  .goods-card {
    animation: fadeUp 0.4s ease both;
  }
  .goods-item {
    animation: fadeUp 0.42s ease both;
  }
  .goods-item:nth-child(1) { animation-delay: 0.04s; }
  .goods-item:nth-child(2) { animation-delay: 0.10s; }
  .goods-item:nth-child(3) { animation-delay: 0.16s; }
  .goods-item:nth-child(4) { animation-delay: 0.22s; }
  .step-card { animation-delay: 0.06s; }
  .timeline-card { animation-delay: 0.12s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes flow {
    to { stroke-dashoffset: -36; }
  }

  .topbar::before { animation: shimmer 3.6s linear infinite; }
  .topbar::after { animation: glowFloat 11s ease-in-out infinite; }
  .slogan { animation: fadeIn 0.7s ease both; }
  @keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  @keyframes glowFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-14px, 10px); }
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}