* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
#map { position: fixed; inset: 0; }
#panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px;
  background: rgba(255, 255, 255, 0.95); padding: 10px;
  overflow-y: auto; z-index: 1000; font-size: 14px;
}
#cursor-pos {
  position: fixed; left: 8px; bottom: 8px; z-index: 1000;
  background: rgba(255, 255, 255, 0.9); padding: 2px 8px;
  border-radius: 4px; font-family: ui-monospace, monospace;
}
#route-bar { display: flex; gap: 4px; }
#route-bar select { flex: 1; min-width: 0; }
#route-name { width: 100%; margin-top: 6px; }
#actions { display: flex; gap: 4px; margin-top: 6px; }
#status { color: #c62828; min-height: 1.2em; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #ddd; }
input { padding: 4px; }
#waypoints input { width: 100%; font-family: ui-monospace, monospace; }
input.invalid { outline: 2px solid #c62828; }
#totals { margin-top: 8px; font-weight: 600; }
#legend { color: #555; margin-top: 8px; }
#legend .gc { color: #e65100; }
#legend .rh { color: #1565c0; }
@media (max-width: 700px) {
  #panel { top: auto; left: 0; width: 100%; max-height: 45vh; }
  #cursor-pos { bottom: auto; top: 8px; }
}
#routing-box { margin-top: 10px; border-top: 1px solid #ccc; padding-top: 6px; }
#routing-box summary { font-weight: 600; cursor: pointer; }
#routing-box .row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
#grib-line { color: #555; margin-top: 6px; font-size: 13px; }
#routing-status { color: #c62828; min-height: 1.2em; margin-top: 4px; }
#btn-route { margin-top: 6px; width: 100%; }
#route-summary { margin-top: 8px; font-weight: 600; }
#legs-summary { margin: 4px 0 0 16px; padding: 0; }
#wind-hour { flex: 1; }
#btn-panel {
  position: fixed; top: 8px; right: 8px; z-index: 1100;
  width: 40px; height: 40px; font-size: 18px; border-radius: 6px;
  border: 1px solid #aaa; background: #fff; cursor: pointer;
}
body.panel-hidden #panel { display: none; }
#geo-pos { font-family: ui-monospace, monospace; font-size: 12px; }
#btn-geo.active { background: #bbdefb; }
#btn-replan { margin-top: 6px; width: 100%; }
#next-mark { flex: 1; min-width: 0; }
.geo-btn, .center-btn { font-size: 16px; text-decoration: none; }
.geo-btn.active { background: #bbdefb; }
.center-btn.geo-off { color: #bbb; pointer-events: none; }
#scan-box { margin-top: 8px; }
#scan-box summary { cursor: pointer; }
#scan-hours, #scan-step, #efficiency { width: 60px; }
#btn-scan { margin-top: 6px; }
#scan-status { color: #555; min-height: 1.2em; margin-top: 4px; }
#scan-table tr.scan-ok { cursor: pointer; }
#scan-table tr.scan-best { font-weight: 600; background: #e8f5e9; }
#cur-set, #cur-drift { width: 60px; }
#tracks-box { margin-top: 10px; border-top: 1px solid #ccc; padding-top: 6px; }
#tracks-box summary { font-weight: 600; cursor: pointer; }
#tracks-status { color: #555; min-height: 1.2em; margin-top: 4px; }
#tracks-list { margin: 4px 0 0 0; padding: 0; list-style: none; }
#tracks-list li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
#tracks-list .t-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#track-analysis { margin-top: 8px; color: #333; font-size: 13px; white-space: pre-wrap; }