.trailer-track-page[data-v-9b7cc854] {
  background: #f4f6f8;
}
.trailer-track-page .track-shell[data-v-9b7cc854] {
  min-height: 760px;
}
.trailer-track-page .page-head[data-v-9b7cc854],
.trailer-track-page .panel-head[data-v-9b7cc854],
.trailer-track-page .playback-bar[data-v-9b7cc854],
.trailer-track-page .bind-item[data-v-9b7cc854],
.trailer-track-page .current-row[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.trailer-track-page .page-head[data-v-9b7cc854] {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 14px;
}
.trailer-track-page .page-kicker[data-v-9b7cc854] {
  margin-bottom: 4px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
}
.trailer-track-page h2[data-v-9b7cc854] {
  margin: 0;
  color: #111827;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}
.trailer-track-page .page-meta[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 7px;
  color: #667085;
  font-size: 13px;
}
.trailer-track-page .head-actions[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.trailer-track-page .summary-grid[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.trailer-track-page .metric-card[data-v-9b7cc854],
.trailer-track-page .panel[data-v-9b7cc854] {
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
}
.trailer-track-page .metric-card[data-v-9b7cc854] {
  padding: 14px 16px;
}
.trailer-track-page .metric-label[data-v-9b7cc854],
.trailer-track-page .panel-subtitle[data-v-9b7cc854],
.trailer-track-page .muted-text[data-v-9b7cc854],
.trailer-track-page .mapping-field[data-v-9b7cc854],
.trailer-track-page .mapping-usage[data-v-9b7cc854] {
  color: #667085;
}
.trailer-track-page .metric-label[data-v-9b7cc854] {
  font-size: 12px;
}
.trailer-track-page .metric-value[data-v-9b7cc854] {
  margin-top: 5px;
  color: #111827;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}
.trailer-track-page .metric-desc[data-v-9b7cc854] {
  margin-top: 4px;
  color: #98a2b3;
  font-size: 12px;
}
.trailer-track-page .main-grid[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 12px;
}
.trailer-track-page .detail-grid[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 12px;
  margin-top: 12px;
}
.trailer-track-page .panel[data-v-9b7cc854] {
  padding: 14px;
}
.trailer-track-page .panel-head[data-v-9b7cc854] {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}
.trailer-track-page .panel-head.compact[data-v-9b7cc854] {
  margin-bottom: 8px;
}
.trailer-track-page .panel-title[data-v-9b7cc854] {
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}
.trailer-track-page .panel-subtitle[data-v-9b7cc854] {
  margin-top: 3px;
  font-size: 12px;
}
.trailer-track-page .legend-list[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  color: #667085;
  font-size: 12px;
  white-space: nowrap;
}
.trailer-track-page .route-tools[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.trailer-track-page .legend-dot[data-v-9b7cc854] {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
}
.trailer-track-page .legend-dot.route[data-v-9b7cc854] {
  background: #2563eb;
}
.trailer-track-page .legend-dot.stop[data-v-9b7cc854] {
  background: #f59e0b;
}
.trailer-track-page .legend-dot.current[data-v-9b7cc854] {
  background: #dc2626;
}
.trailer-track-page .legend-dot.start[data-v-9b7cc854] {
  background: #16a34a;
}
.trailer-track-page .legend-dot.loading[data-v-9b7cc854] {
  background: #d97706;
}
.trailer-track-page .legend-dot.unloading[data-v-9b7cc854] {
  background: #be123c;
}
.trailer-track-page .legend-dot.end[data-v-9b7cc854] {
  background: #7c3aed;
}
.trailer-track-page .route-chart[data-v-9b7cc854] {
  height: 500px;
}
.trailer-track-page .map-wrap[data-v-9b7cc854] {
  position: relative;
  height: 500px;
  overflow: hidden;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #eef2f7;
}
.trailer-track-page .route-map[data-v-9b7cc854] {
  width: 100%;
  height: 100%;
}
.trailer-track-page .map-fallback[data-v-9b7cc854] {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #b45309;
  font-size: 13px;
}
.trailer-track-page[data-v-9b7cc854] .track-stop-marker div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 4px;
  background: #f59e0b;
  -webkit-box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28);
          box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.trailer-track-page[data-v-9b7cc854] .track-stop-marker span {
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.trailer-track-page[data-v-9b7cc854] .track-work-marker div {
  width: 48px;
  height: 34px;
  border-radius: 18px 18px 18px 6px;
  background: #d97706;
}
.trailer-track-page[data-v-9b7cc854] .track-unloading-marker div {
  background: #be123c;
}
.trailer-track-page[data-v-9b7cc854] .track-work-marker span {
  font-size: 12px;
}
.trailer-track-page[data-v-9b7cc854] .track-current-marker div {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 22px solid #dc2626;
  -webkit-filter: drop-shadow(0 5px 8px rgba(220, 38, 38, 0.35));
          filter: drop-shadow(0 5px 8px rgba(220, 38, 38, 0.35));
}
.trailer-track-page[data-v-9b7cc854] .track-endpoint-marker div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  border: 2px solid #fff;
  border-radius: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  -webkit-box-shadow: 0 7px 18px rgba(17, 24, 39, 0.22);
          box-shadow: 0 7px 18px rgba(17, 24, 39, 0.22);
  white-space: nowrap;
}
.trailer-track-page[data-v-9b7cc854] .endpoint-start div {
  background: #16a34a;
}
.trailer-track-page[data-v-9b7cc854] .endpoint-end div {
  background: #7c3aed;
}
.trailer-track-page[data-v-9b7cc854] .track-endpoint-tooltip {
  border: 0;
  border-radius: 6px;
  -webkit-box-shadow: 0 6px 18px rgba(17, 24, 39, 0.16);
          box-shadow: 0 6px 18px rgba(17, 24, 39, 0.16);
  color: #111827;
  font-size: 12px;
  font-weight: 700;
}
.trailer-track-page .endpoint-strip[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.trailer-track-page .endpoint-item[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fbfcfe;
}
.trailer-track-page .endpoint-badge[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.trailer-track-page .endpoint-item.start .endpoint-badge[data-v-9b7cc854] {
  background: #16a34a;
}
.trailer-track-page .endpoint-item.loading .endpoint-badge[data-v-9b7cc854] {
  background: #d97706;
}
.trailer-track-page .endpoint-item.unloading .endpoint-badge[data-v-9b7cc854] {
  background: #be123c;
}
.trailer-track-page .endpoint-item.end .endpoint-badge[data-v-9b7cc854] {
  background: #7c3aed;
}
.trailer-track-page .endpoint-title[data-v-9b7cc854] {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}
.trailer-track-page .endpoint-company[data-v-9b7cc854] {
  margin-top: 4px;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}
.trailer-track-page .endpoint-address[data-v-9b7cc854] {
  margin-top: 3px;
  color: #475467;
  font-size: 12px;
  line-height: 18px;
}
.trailer-track-page .endpoint-meta[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
}
.trailer-track-page .endpoint-coord[data-v-9b7cc854] {
  color: #667085;
  font-size: 12px;
}
.trailer-track-page .speed-chart[data-v-9b7cc854] {
  height: 270px;
}
.trailer-track-page .assessment-panel[data-v-9b7cc854] {
  margin-top: 12px;
}
.trailer-track-page .assessment-body[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.trailer-track-page .assessment-conclusion[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  line-height: 20px;
}
.trailer-track-page .assessment-conclusion i[data-v-9b7cc854] {
  margin-top: 2px;
  font-size: 16px;
}
.trailer-track-page .assessment-metrics[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.trailer-track-page .assessment-metric[data-v-9b7cc854] {
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fbfcfe;
}
.trailer-track-page .assessment-metric span[data-v-9b7cc854] {
  display: block;
  color: #667085;
  font-size: 12px;
}
.trailer-track-page .assessment-metric strong[data-v-9b7cc854] {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 18px;
  line-height: 24px;
}
.trailer-track-page .suspect-card[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  background: #fffbeb;
}
.trailer-track-page .suspect-badge[data-v-9b7cc854] {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.trailer-track-page .suspect-badge.unloading[data-v-9b7cc854] {
  background: #be123c;
}
.trailer-track-page .suspect-title[data-v-9b7cc854] {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.trailer-track-page .suspect-meta[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
}
.trailer-track-page .playback-bar[data-v-9b7cc854] {
  gap: 12px;
  min-height: 42px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
}
.trailer-track-page .playback-slider[data-v-9b7cc854] {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.trailer-track-page .current-point[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  min-width: 420px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  color: #667085;
  font-size: 12px;
}
.trailer-track-page .current-point strong[data-v-9b7cc854] {
  color: #111827;
}
.trailer-track-page .bind-panel[data-v-9b7cc854] {
  min-height: 586px;
}
.trailer-track-page .bind-list[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}
.trailer-track-page .bind-item[data-v-9b7cc854] {
  gap: 10px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
}
.trailer-track-page .bind-item .el-tag[data-v-9b7cc854] {
  margin-left: auto;
}
.trailer-track-page .bind-icon[data-v-9b7cc854] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 18px;
}
.trailer-track-page .bind-label[data-v-9b7cc854] {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}
.trailer-track-page .bind-no[data-v-9b7cc854] {
  max-width: 190px;
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trailer-track-page .flow-strip[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 0;
}
.trailer-track-page .flow-step[data-v-9b7cc854] {
  min-height: 76px;
  padding: 10px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #667085;
  text-align: center;
  font-size: 12px;
}
.trailer-track-page .flow-step i[data-v-9b7cc854] {
  display: block;
  margin-bottom: 7px;
  font-size: 20px;
}
.trailer-track-page .flow-step.done[data-v-9b7cc854] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}
.trailer-track-page .flow-step.active[data-v-9b7cc854] {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}
.trailer-track-page .flow-step.pending[data-v-9b7cc854] {
  background: #f9fafb;
}
.trailer-track-page .current-card[data-v-9b7cc854] {
  padding: 13px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #f8fafc;
}
.trailer-track-page .current-title[data-v-9b7cc854] {
  margin-bottom: 8px;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
}
.trailer-track-page .current-row[data-v-9b7cc854] {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 7px 0;
  color: #667085;
  font-size: 13px;
}
.trailer-track-page .current-row + .current-row[data-v-9b7cc854] {
  border-top: 1px solid #e5e7eb;
}
.trailer-track-page .current-row strong[data-v-9b7cc854] {
  color: #111827;
  font-weight: 600;
}
.trailer-track-page .stop-table[data-v-9b7cc854] {
  width: 100%;
}
.trailer-track-page .muted-text[data-v-9b7cc854] {
  margin-top: 2px;
  font-size: 12px;
}
.trailer-track-page .mapping-panel[data-v-9b7cc854] {
  margin-top: 12px;
}
.trailer-track-page .mapping-grid[data-v-9b7cc854] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.trailer-track-page .mapping-item[data-v-9b7cc854] {
  min-height: 118px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #fbfcfe;
}
.trailer-track-page .mapping-platform[data-v-9b7cc854] {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
}
.trailer-track-page .mapping-field[data-v-9b7cc854] {
  margin-top: 7px;
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
}
.trailer-track-page .mapping-usage[data-v-9b7cc854] {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
}
@media (max-width: 1280px) {
.trailer-track-page .summary-grid[data-v-9b7cc854] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trailer-track-page .assessment-metrics[data-v-9b7cc854] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trailer-track-page .main-grid[data-v-9b7cc854],
  .trailer-track-page .detail-grid[data-v-9b7cc854] {
    grid-template-columns: 1fr;
}
.trailer-track-page .current-point[data-v-9b7cc854] {
    min-width: 320px;
}
}
@media (max-width: 768px) {
.trailer-track-page .page-head[data-v-9b7cc854],
  .trailer-track-page .panel-head[data-v-9b7cc854],
  .trailer-track-page .playback-bar[data-v-9b7cc854] {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.trailer-track-page .summary-grid[data-v-9b7cc854],
  .trailer-track-page .mapping-grid[data-v-9b7cc854],
  .trailer-track-page .endpoint-strip[data-v-9b7cc854],
  .trailer-track-page .assessment-metrics[data-v-9b7cc854] {
    grid-template-columns: 1fr;
}
.trailer-track-page .current-point[data-v-9b7cc854] {
    min-width: 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.trailer-track-page .flow-strip[data-v-9b7cc854] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trailer-track-page .route-tools[data-v-9b7cc854] {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
}