* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; }

#sidebar {
  width: 360px; min-width: 360px; height: 100vh; overflow-y: auto;
  background: #f7f8fa; border-right: 1px solid #ddd; padding: 16px;
}
#map { flex: 1; height: 100vh; min-width: 0; }

h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .5px; color: #555; }

.card { background: #fff; border: 1px solid #e3e5e8; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; }
.muted { color: #777; font-size: 13px; margin-top: 6px; }
.small { font-size: 11px; text-transform: none; letter-spacing: 0; }

label { display: block; font-size: 13px; margin-bottom: 4px; color: #444; }
input[type=text] { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
input[type=number] { width: 90px; padding: 5px; border: 1px solid #ccc; border-radius: 6px; text-align: right; }
select { padding: 5px; border: 1px solid #ccc; border-radius: 6px; }
button { padding: 8px 12px; border: none; border-radius: 6px; background: #2563eb; color: #fff; font-size: 14px; cursor: pointer; }
button:hover { background: #1d4ed8; }
#clearBtn { background: #6b7280; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 4px 0; }
td:last-child { text-align: right; }
.num { font-variant-numeric: tabular-nums; font-weight: 600; }

.estimate { margin-top: 10px; padding: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; text-align: center; }
.est-avg { font-size: 26px; font-weight: 700; color: #047857; }
.est-range { font-size: 13px; color: #065f46; margin-top: 2px; }

.status-error { color: #b91c1c; }

input.wide { width: 160px; text-align: left; }

/* live measurement labels on the map */
.map-label {
  background: rgba(255, 255, 255, 0.92); border-radius: 4px; padding: 1px 5px;
  font-size: 11px; font-weight: 600; color: #1f2937; white-space: nowrap;
  font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.area-label { font-size: 13px; border: 1px solid #f59e0b; background: rgba(255, 255, 255, 0.95); }

/* corner dots while tracing a new outline */
.draw-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #f59e0b; border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* shown in the map pane when Google Maps can't load (missing/invalid key) */
.map-message {
  height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px; background: #1f2937; color: #e5e7eb;
  font-size: 15px; line-height: 1.7;
}
.map-message code { background: #374151; padding: 2px 8px; border-radius: 6px; font-size: 13px; }
label.toggle { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 8px; cursor: pointer; }
button.export { width: 100%; background: #047857; }
button.export:hover { background: #065f46; }
button.export:disabled { background: #9ca3af; cursor: not-allowed; }