* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #f5f6f8;
  color: #1f2329;
  font-size: 14px;
  line-height: 1.6;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: #fff; border-bottom: 1px solid #e5e6eb;
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 36px; height: 36px; border-radius: 8px; background: #1a73c7;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 500;
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 500; }
.topbar p { margin: 0; font-size: 12px; color: #86909c; }
.tabs { display: flex; gap: 4px; }
.tab {
  border: none; background: none; padding: 8px 14px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: #4e5969;
}
.tab:hover { background: #f2f3f5; }
.tab.active { background: #eaf3fd; color: #185fa5; font-weight: 500; }
main { padding: 20px 24px 60px; max-width: 1400px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; }
.panel {
  background: #fff; border: 1px solid #e5e6eb; border-radius: 12px;
  padding: 18px; margin-bottom: 16px;
}
.panel h2 { font-size: 15px; margin: 0 0 12px; font-weight: 500; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.field.wide { min-width: 320px; flex: 1; }
.field label { font-size: 12px; color: #86909c; }
input, select, textarea {
  border: 1px solid #dcdfe6; border-radius: 8px; padding: 7px 10px;
  font-size: 14px; font-family: inherit; background: #fff; color: #1f2329;
}
textarea { width: 100%; font-family: Consolas, monospace; font-size: 13px; }
button {
  border: 1px solid #dcdfe6; background: #fff; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-size: 13px; font-family: inherit; color: #1f2329;
}
button:hover { border-color: #1a73c7; color: #1a73c7; }
button.primary { background: #1a73c7; border-color: #1a73c7; color: #fff; }
button.primary:hover { background: #1660aa; color: #fff; }
.hint { font-size: 12px; color: #86909c; margin-left: 8px; }
.grid-form { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.hidden { display: none !important; }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat {
  background: #fff; border: 1px solid #e5e6eb; border-radius: 12px;
  padding: 12px 18px; min-width: 120px;
}
.stat .k { font-size: 12px; color: #86909c; }
.stat .v { font-size: 20px; font-weight: 500; }
.stat.warn .v { color: #d97706; }
.stat.bad .v { color: #d0342c; }

.map-box { height: 380px; margin-bottom: 16px; border: 1px solid #e5e6eb; border-radius: 12px; overflow: hidden; }
#map { height: 100%; width: 100%; }
.map-err { padding: 20px; color: #b42318; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }

.route-card {
  background: #fff; border: 1px solid #e5e6eb; border-radius: 12px;
  margin-bottom: 16px; overflow: hidden;
}
.route-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #f0f1f3; background: #fafbfc;
  flex-wrap: wrap; gap: 8px;
}
.route-title { font-size: 15px; font-weight: 500; }
.route-meta { font-size: 12px; color: #86909c; margin-left: 8px; }
.util-bar { height: 8px; background: #f0f1f3; border-radius: 4px; width: 140px; display: inline-block; vertical-align: middle; }
.util-fill { height: 8px; border-radius: 4px; background: #1d9e75; }
.util-fill.low { background: #d97706; }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; background: #f2f3f5; color: #4e5969; margin-left: 4px;
}
.tag.red { background: #fceceb; color: #d0342c; }
.tag.amber { background: #fff4e5; color: #b45309; }
.tag.green { background: #e8f7f1; color: #0f6e56; }
.tag.blue { background: #eaf3fd; color: #185fa5; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid #f0f1f3; text-align: left; }
th { color: #86909c; font-weight: 400; font-size: 12px; background: #fafbfc; }
tr:hover td { background: #fafbfc; }
.table-wrap { overflow-x: auto; }

.stop-row { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #f5f6f8; align-items: flex-start; }
.stop-no {
  width: 28px; height: 28px; border-radius: 50%; background: #1a73c7; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none;
}
.stop-main { flex: 1; min-width: 0; }
.stop-name { font-weight: 500; }
.stop-addr { font-size: 12px; color: #86909c; word-break: break-all; }
.stop-right { text-align: right; font-size: 12px; color: #4e5969; flex: none; }

.load-sheet { background: #fafbfc; border-top: 1px solid #f0f1f3; padding: 14px 18px; }
.load-sheet h4 { margin: 0 0 10px; font-size: 13px; font-weight: 500; }
.load-track { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.load-cell {
  border: 1px dashed #c9cdd4; border-radius: 8px; padding: 8px 10px;
  background: #fff; min-width: 130px; flex: 1;
}
.load-cell .seq { font-size: 12px; color: #86909c; }
.load-cell .who { font-size: 13px; font-weight: 500; }
.load-cell .zone { font-size: 12px; color: #185fa5; }
.load-cell .tip { font-size: 12px; color: #86909c; }
.cab { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #86909c; }
.cab .door { border: 2px solid #c9cdd4; border-radius: 4px; padding: 2px 6px; }

.thumb { max-width: 140px; max-height: 140px; border-radius: 8px; border: 1px solid #e5e6eb; margin-top: 6px; display: block; }
.upload-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

@media print {
  .topbar, .controls, .tabs, .map-box, .stats, button { display: none !important; }
  body { background: #fff; }
  .page { display: none !important; }
  .page.active { display: block !important; }
  .route-card { break-inside: avoid; border-color: #999; }
}