* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: rgba(20, 24, 33, 0.85); color: #fff;
}
#brand { font-weight: 700; font-size: 18px; letter-spacing: 0.5px; }

#auth-area { display: flex; gap: 8px; align-items: center; }
#auth-area button {
  background: #2b6cff; color: #fff; border: none; padding: 8px 14px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
}
#auth-area button.secondary { background: transparent; border: 1px solid #556; }
#auth-area span { font-size: 14px; }

#compose-btn {
  position: absolute; bottom: 24px; right: 24px; z-index: 10;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: #2b6cff; color: #fff; font-size: 24px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
  background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
}
#modal-overlay.hidden { display: none; }

.modal-box {
  background: #fff; border-radius: 10px; padding: 24px; width: 340px; max-width: 90vw;
}
.modal-box h2 { margin: 0 0 16px; font-size: 18px; }
.modal-box label { display: block; font-size: 13px; margin: 10px 0 4px; color: #333; }
.modal-box input, .modal-box select, .modal-box textarea {
  width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px;
}
.modal-box textarea { resize: vertical; min-height: 70px; }
.modal-box .row { display: flex; gap: 8px; }
.modal-box .row > div { flex: 1; }
.modal-box .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-box .actions button {
  padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px;
}
.modal-box .actions .primary { background: #2b6cff; color: #fff; }
.modal-box .actions .cancel { background: #eee; }
.modal-box .error { color: #d33; font-size: 13px; margin-top: 8px; min-height: 16px; }
.modal-box .link-btn { background: none; border: none; color: #2b6cff; cursor: pointer; font-size: 13px; padding: 0; }
.modal-box .switch-row { margin-top: 12px; font-size: 13px; text-align: center; }

.compass-wrap { display: flex; flex-direction: column; align-items: center; margin: 10px 0; }
#compass {
  width: 140px; height: 140px; border-radius: 50%; border: 2px solid #333;
  position: relative; cursor: pointer; touch-action: none; background: #f5f7fa;
}
#compass-arrow {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 60px;
  background: #2b6cff; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(0deg);
  border-radius: 2px;
}
#heading-label { margin-top: 6px; font-size: 13px; color: #333; }

.leaflet-popup-content { font-size: 13px; }