.journey-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 25px;
}
.journey-summary div { background: #eef2ec; padding: 15px; }
.journey-summary span {
  display: block;
  font: 700 9px var(--mono);
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 7px;
}
.journey-summary strong { font-size: 18px; }
.panel label small { color: var(--muted); font-weight: 500; }
@media (max-width: 560px) { .journey-summary { grid-template-columns: 1fr; } }
.map-actions, .upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.map-actions p { margin: 0; color: var(--muted); font-size: 12px; }
.map-actions .ghost, .upload-actions .ghost { color: var(--ink); white-space: nowrap; }
.route-action-buttons { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.route-attribution { margin: 10px 0 0; color: var(--muted); font: 10px/1.5 var(--mono); }
.route-attribution a { color: var(--teal); }
#roadRouteStatus[data-state="loading"] { color: var(--teal); }
#roadRouteStatus[data-state="ready"] { color: #24652c; font-weight: 700; }
#roadRouteStatus[data-state="error"] { color: var(--red); font-weight: 700; }
#calculateRoadRoute:disabled { cursor: wait; opacity: .65; }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.upload-box, .format-card { min-height: 118px; padding: 20px; border: 1px dashed var(--teal); background: #eef2ec; }
.upload-box input { margin-top: 12px; background: transparent; border: 0; padding: 0; }
.format-card span, .format-card small { display: block; }
.format-card span { font: 700 9px var(--mono); letter-spacing: .12em; color: var(--teal); margin-bottom: 12px; }
.format-card code { display: block; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); }
.format-card small { margin-top: 10px; color: var(--muted); }
.excel-status { color: var(--muted); font: 12px var(--mono); margin: 16px 0 0; }
.action-buttons { display: flex; align-items: center; gap: 10px; }
.action-buttons .ghost { color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .45; transform: none !important; }
@media (max-width: 700px) { .upload-grid { grid-template-columns: 1fr; } .map-actions, .upload-actions { align-items: stretch; flex-direction: column; } .route-action-buttons { display: grid; grid-template-columns: 1fr; } .route-action-buttons button { width: 100%; } }
.packet-row.sent { background: #e7f2dc; }
.packet-row.sent > span::after { content: " ✓"; color: var(--teal); }
.packet-row { grid-template-columns: 145px minmax(0, 1fr) 70px; }
.packet-row > span small { display: block; margin-top: 5px; color: var(--muted); font: 9px/1.4 var(--mono); overflow-wrap: anywhere; }
.journey-tabs { display: flex; gap: 8px; margin: 0 0 22px 49px; }
.journey-tab { border: 1px solid var(--ink); background: transparent; padding: 11px 16px; font-weight: 750; cursor: pointer; }
.journey-tab.active { background: var(--ink); color: white; }
.identity-grid { margin-bottom: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bulk-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr); gap: 20px; }
.bulk-settings { display: grid; align-content: start; gap: 17px; }
.bulk-rows textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  padding: 14px 15px;
  outline: none;
  font: 12px/1.65 var(--mono);
}
.bulk-rows textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(17,107,101,.1); }
.bulk-format { padding: 14px 15px; border-radius: 10px; background: #e9eee7; border: 1px solid var(--line); }
.bulk-format span, .bulk-format small { display: block; }
.bulk-format span { color: var(--teal); font: 800 10px/1.5 var(--mono); }
.bulk-format small { margin-top: 5px; color: var(--muted); }
.bulk-tools { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.bulk-tools .ghost { color: var(--ink); white-space: nowrap; }
.bulk-tools p { margin: 0 0 0 auto; color: var(--muted); font: 11px/1.5 var(--mono); text-align: right; }
.bulk-upload { display: inline-flex!important; min-height: 42px; padding: 10px 14px; align-items: center; border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; }
.bulk-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.job-list { display: grid; gap: 10px; }
.job-card { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--line); padding: 15px 17px; background: #eef2ec; }
.job-card strong, .job-card span { display: block; }
.job-card span { color: var(--muted); font: 11px/1.5 var(--mono); margin-top: 4px; }
.job-progress { width: 190px; height: 6px; background: var(--line); margin-top: 8px; }
.job-progress i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .25s; }
.job-state { font: 700 10px var(--mono); color: var(--teal); }
.empty-jobs { color: var(--muted); font-size: 13px; }
@media (max-width: 800px) { .bulk-layout { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .packet-row > span small { display: none; } }
@media (max-width: 560px) { .grid.two { grid-template-columns: 1fr; } .bulk-tools { align-items: stretch; flex-direction: column; } .bulk-tools > * { width: 100%; } .bulk-tools p { margin: 0; text-align: left; } }
