* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: Arial, Helvetica, sans-serif; background: #f4f6f8; color: #1d2733; }
body { min-height: 100vh; }
button, input { font: inherit; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 16px 18px; background: #ffffff; border-bottom: 1px solid #d8e0e8;
}
.topbar h1 { margin: 0 0 6px 0; font-size: 1.5rem; }
.subtitle { margin: 0; color: #536272; font-size: 0.95rem; }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
button {
  border: 1px solid #b8c4d0; background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer;
}
button:hover { background: #f0f5fa; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.layout {
  display: grid; grid-template-columns: 360px 1fr; gap: 16px;
  padding: 16px; flex: 1;
}
.sidebar, .content { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.card {
  background: #fff; border: 1px solid #d8e0e8; border-radius: 14px; padding: 14px;
  box-shadow: 0 2px 10px rgba(20,40,60,.04);
}
.card h2 { margin: 0 0 12px 0; font-size: 1.05rem; }
.drop-zone {
  border: 2px dashed #8ca5bf; border-radius: 14px; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px; background: #f9fbfd; text-align: center;
}
.drop-zone.dragover { background: #eef6ff; border-color: #4e83b8; }
.file-label {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #91a8bf; border-radius: 10px; padding: 10px 14px; background: #fff; cursor: pointer;
}
.file-label input { display: none; }
.small { font-size: 0.88rem; line-height: 1.4; }
.muted { color: #5f7080; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.field-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.field-grid input {
  width: 100%; border: 1px solid #b9c6d3; border-radius: 10px; padding: 10px 12px; background: #fff;
}
.field-grid small { font-weight: normal; color: #667788; }
.action-row { margin-top: 12px; display: flex; gap: 10px; }
.stats-list { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.stats-list div {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf1f4;
}
.stats-list dt { font-weight: 600; }
.stats-list dd { margin: 0; text-align: right; }
.map-card { padding: 0; overflow: hidden; }
#map { height: 52vh; min-height: 420px; width: 100%; }
.table-header {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px;
}
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; color: #516171; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-gap { background: #d64545; }
.dot-speed { background: #f59e0b; }
.dot-acc { background: #2563eb; }
.table-wrap { overflow: auto; max-height: 36vh; border: 1px solid #e2e8ee; border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
thead th {
  position: sticky; top: 0; background: #f8fafc; border-bottom: 1px solid #d9e2ea; text-align: left;
  padding: 10px 8px; white-space: nowrap;
}
tbody td { padding: 9px 8px; border-bottom: 1px solid #edf2f7; vertical-align: top; }
tbody tr:hover { background: #fbfdff; }
tbody tr.issue-gap { background: #fff5f5; }
tbody tr.issue-speed { background: #fffaf0; }
tbody tr.issue-acc { background: #f4f8ff; }
.empty { text-align: center; color: #667788; padding: 18px; }
.badge {
  display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.badge-gap { background: #fde8e8; color: #a61b1b; }
.badge-speed { background: #fff1d6; color: #925900; }
.badge-acc { background: #deebff; color: #0b52c2; }
.popup-grid { display: grid; grid-template-columns: auto auto; gap: 4px 8px; font-size: 0.9rem; }
.popup-grid strong { white-space: nowrap; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  #map { min-height: 340px; height: 44vh; }
}