/* ─── Reset & Variables ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:    #2c7be5;
  --primary-dk: #1a5cbf;
  --danger:     #e74c3c;
  --success:    #27ae60;
  --bg:         #f2f4f8;
  --surface:    #ffffff;
  --border:     #dde1ea;
  --text:       #2c3e50;
  --muted:      #6c7a8d;
  --header-h:   50px;
  --sidebar-w:  300px;
  --elev-h:     180px;
}

html, body { height: 100%; font-family: 'Segoe UI','Hiragino Sans','Yu Gothic UI',sans-serif; font-size: 13px; color: var(--text); background: var(--bg); overflow: hidden; }

/* ─── Header ─────────────────────────────────────────────── */
#header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 10px; gap: 8px;
  z-index: 1000; box-shadow: 0 1px 4px rgba(0,0,0,.07);
  overflow-x: auto; white-space: nowrap;
}

#logo { font-size: 16px; font-weight: 800; color: var(--primary); letter-spacing: -.3px; flex: 0 0 auto; margin-right: 4px; }
#mobile-sidebar-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
}
#mobile-sidebar-toggle:hover { background: var(--bg); }

/* toolbar */
#toolbar { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.tool-group { display: flex; gap: 2px; }
.tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }

.tool-btn {
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px;
  transition: all .13s; white-space: nowrap; flex: 0 0 auto;
}
.tool-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.tool-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.tool-add-wrap { position: relative; }
#add-layer-menu { position: fixed; min-width: 150px; z-index: 3200; }

/* map type buttons */
#map-type-row { display: flex; gap: 2px; flex: 0 0 auto; margin-left: 4px; }
#map-type-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}
.layer-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 11px; transition: all .13s; }
.layer-btn:hover { border-color: var(--primary); color: var(--primary); }
.layer-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.layer-btn.dev-disabled {
  background: #eef1f5;
  border-color: #d7dde6;
  color: #8a95a6;
}
.layer-btn.dev-disabled:hover {
  background: #e6ebf2;
  border-color: #c9d1dd;
  color: #7b8799;
}

#help-btn    { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 15px; font-weight: 700; }
#help-btn:hover { background: var(--bg); }
#tutorial-btn { flex: 0 0 auto; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 12px; }
#tutorial-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
#settings-btn { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 15px; }
#settings-btn:hover { background: var(--bg); }

/* ─── Sidebar Credit ──────────────────────────────────────── */
#sidebar-credit {
  padding: 10px 12px 8px; text-align: center; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1px;
}
#sidebar-credit span { font-size: 10px; color: var(--muted); line-height: 1.4; }
#sidebar-credit span:first-child { font-weight: 600; }

/* ─── Help Modal ──────────────────────────────────────────── */
.help-body { font-size: 13px; }
.help-section-title {
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.help-body .help-section-title:first-child { margin-top: 0; }
.help-table {
  width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px;
}
.help-table th {
  text-align: left; padding: 5px 8px; background: var(--bg);
  border-bottom: 1px solid var(--border); font-weight: 600; color: var(--muted);
}
.help-table td { padding: 5px 8px; border-bottom: 1px solid var(--bg); vertical-align: top; }
.help-table tr:last-child td { border-bottom: none; }
kbd {
  display: inline-block; padding: 1px 5px; border: 1px solid #c8ccd0;
  border-radius: 3px; background: var(--bg); font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.5;
}
.help-hints { font-size: 12px; color: var(--text); line-height: 1.7; }
.help-hints p { margin: 0 0 6px; }
.help-hints ul { margin: 0; padding-left: 18px; }
.help-hints li { margin-bottom: 2px; }
.help-credit { font-size: 11px; color: var(--muted); }

/* ─── Main Layout ─────────────────────────────────────────── */
#main {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: var(--elev-h);
  display: flex;
}

/* ─── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto; display: flex; flex-direction: column; gap: 0;
}
#mobile-sidebar-head { display: none; }
#sidebar-scrim { display: none; }
#mobile-bottom-bar { display: none; }
/* Prevent flex children from shrinking — sidebar scrolls instead */
#sidebar > * { flex-shrink: 0; }

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Profile row */
#profile-row {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px; background: #f8f9fb; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
#profile-row label { color: var(--muted); white-space: nowrap; }
#active-profile-select { flex: 1; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; }
#edit-profile-btn { flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--muted); }
#edit-profile-btn:hover { color: var(--primary); }

/* Tool options */
#tool-options { padding: 8px; border-bottom: 1px solid var(--border); min-height: 80px; }
.tp.hidden { display: none !important; }
.tp-hint { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 5px; }

.form-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px;
}
.form-row label { color: var(--muted); min-width: 52px; }
.form-row input[type="color"] { flex: 0 0 auto; width: 32px; height: 24px; border: 1px solid var(--border); border-radius: 3px; padding: 1px; cursor: pointer; }
.form-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--primary); }
.form-row input[type="number"], .form-row input[type="text"], .form-row select {
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; font-size: 12px;
}
.form-row select { flex: 1; }
.form-row input[type="checkbox"] { width: 14px; height: 14px; }

/* Sidebar sections */
.sidebar-section { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section h3 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 7px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.section-header h3 { margin-bottom: 0; }
.section-note { font-size: 10px; color: var(--muted); font-weight: 500; }

/* Profiles */
.profile-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 5px;
  cursor: pointer; transition: background .12s; margin-bottom: 2px;
}
.profile-item:hover { background: var(--bg); }
.profile-item.active { background: #eff5fe; }
.profile-item.dragging { opacity: 0.45; }
.profile-item.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; }
.profile-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.profile-name { flex: 1; font-size: 12px; font-weight: 500; }
.profile-edit-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .12s; padding: 0 2px; }
.profile-item:hover .profile-edit-btn { opacity: 1; }
.profile-edit-btn:hover { color: var(--primary); }

/* Layers */
.layer-item {
  display: flex; align-items: center; gap: 4px; padding: 4px 4px; border-radius: 4px;
  margin-bottom: 2px; background: var(--bg); font-size: 12px;
}
.layer-item:hover { background: #e8ecf4; }
.layer-item.editing { box-shadow: inset 0 0 0 2px rgba(44,123,229,.45); background: #eef4ff; }
.layer-item.selected { background: #ddeaff; border-left: 3px solid var(--primary); padding-left: 1px; }
.layer-item.selected:hover { background: #cfe0ff; }
.layer-item.dragging { opacity: 0.45; }
.layer-item.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; }
.layer-group { margin-bottom: 6px; border: 1px solid #e4e9f2; border-radius: 6px; background: #fbfcff; }
.layer-group.dragging { opacity: 0.45; }
.layer-group.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; }
.layer-group-header { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid #edf1f8; }
.layer-group-toggle {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  color: #5c6c84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer-group-toggle:hover { background: #e8ecf4; color: var(--primary); }
.layer-group.collapsed .layer-group-body { display: none; }
.layer-group.collapsed .layer-group-header { border-bottom: none; }
.layer-group-name { flex: 1; font-size: 11px; font-weight: 700; color: #53627a; }
.layer-group-actions { display: flex; gap: 2px; }
.group-mini-btn { border: 1px solid #d5dceb; background: #fff; border-radius: 4px; padding: 1px 5px; font-size: 10px; cursor: pointer; color: #5c6c84; }
.group-mini-btn:hover { border-color: var(--primary); color: var(--primary); }
.layer-group-body { padding: 4px; }
.layer-group-empty { font-size: 11px; color: var(--muted); padding: 4px; }
.layer-props {
  padding: 5px 8px 7px 10px; background: #f0f5ff;
  border-bottom: 1px solid #d4e0f5; border-radius: 0 0 4px 4px; margin-bottom: 4px;
  overflow: hidden;
}
.layer-props .form-row { margin-bottom: 0; }
.layer-vis-btn { background: none; border: none; cursor: pointer; font-size: 13px; flex: 0 0 auto; padding: 0 2px; }
.layer-type-icon { font-size: 12px; flex: 0 0 auto; }
.layer-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; outline: none; border-radius: 2px; padding: 1px 2px; }
.layer-name:focus { background: #fff; box-shadow: 0 0 0 2px var(--primary); white-space: normal; }
.layer-del-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 11px; flex: 0 0 auto; padding: 0 2px; }
.layer-del-btn:hover { color: var(--danger); }
.empty-hint { font-size: 11px; color: var(--muted); text-align: center; padding: 8px 0; }

/* Stats */
.stat-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #f0f2f6; font-size: 12px; }
.stat-row:last-child { border-bottom: none; }
.stat-row span:last-child { font-weight: 600; color: var(--primary); }

/* Action buttons */
.action-btn {
  display: block; width: 100%; padding: 6px 9px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
  color: var(--text); cursor: pointer; text-align: left; font-size: 12px; transition: all .13s;
}
.action-btn:last-child { margin-bottom: 0; }
.action-btn:hover { background: var(--bg); }
.action-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.action-btn.primary:hover { background: var(--primary-dk); }
.action-btn.danger { color: var(--danger); border-color: #f0c9c5; }
.action-btn.danger:hover { background: #fef5f4; border-color: var(--danger); }
.action-btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.action-btn.success:hover { background: #1e8449; }
.action-btn.small { padding: 4px 8px; font-size: 11px; margin-bottom: 3px; }
#route-undo-btn {
  background: #fff3f2;
  border-color: #f2b9b3;
  color: #b03a2e;
  font-weight: 700;
}
#route-undo-btn:hover {
  background: #ffe9e6;
  border-color: #e98f86;
  color: #922b21;
}

/* Icon grid */
#icon-grid { display: flex; flex-wrap: wrap; gap: 3px; max-height: 110px; overflow-y: auto; }
.icon-btn {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.icon-btn:hover { background: var(--bg); border-color: var(--primary); }
.icon-btn.active { background: #eff5fe; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(44,123,229,.2); }

/* Projects section controls */
.proj-btn-row { display: flex; gap: 6px; margin-bottom: 7px; }
.proj-btn { flex: 1; text-align: center; margin-bottom: 0; font-size: 12px; padding: 6px 4px; }
.project-select { width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 12px; margin-bottom: 5px; }
.project-name-row { display: flex; gap: 4px; align-items: center; }
.project-name-input { flex: 1; border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 12px; min-width: 0; }
.project-name-input:focus { outline: none; border-color: var(--primary); }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1; }
.mini-btn:hover { border-color: var(--primary); color: var(--primary); background: #f0f5ff; }
.danger-mini { color: var(--danger); border-color: #f0c9c5; }
.danger-mini:hover { background: #fef5f4; border-color: var(--danger); color: var(--danger); }

/* ─── Map Container ───────────────────────────────────────── */
#map-container { flex: 1; position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; }

#map-tooltip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.65); color: #fff; padding: 5px 14px;
  border-radius: 20px; font-size: 12px; pointer-events: none; z-index: 500;
  white-space: nowrap;
}
#map-tooltip.hidden { display: none; }
#map-tooltip.visible { display: block; }

/* Floating label popup */
#label-popup {
  position: absolute; display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 7px; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 600;
}
#label-popup.hidden { display: none; }
#label-text-input {
  border: 1px solid var(--border); border-radius: 4px; padding: 4px 7px;
  font-size: 13px; outline: none; width: 160px;
}
#label-text-input:focus { border-color: var(--primary); }
#label-confirm-btn, #label-cancel-btn {
  width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); cursor: pointer; font-size: 13px;
}
#label-confirm-btn { color: var(--success); }
#label-cancel-btn  { color: var(--danger); }

/* ─── Route Mode Banner ───────────────────────────────────── */
#route-mode-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 700; white-space: nowrap;
}
#route-mode-banner.hidden { display: none; }
.route-banner-inner {
  background: rgba(255,255,255,.97); border: 2px solid var(--primary);
  border-radius: 8px; padding: 8px 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 18px rgba(44,123,229,.22); font-size: 12px; font-weight: 600;
  color: var(--primary);
}
.route-banner-btn {
  padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.route-banner-btn:hover { background: var(--bg); }
.route-banner-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.route-banner-btn.primary:hover { background: var(--primary-dk); }
.route-banner-btn.danger { color: var(--danger); border-color: #f0c9c5; }
.route-banner-btn.danger:hover { background: #fef5f4; border-color: var(--danger); }

/* ─── Location Picker ─────────────────────────────────────── */
#location-picker {
  position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  z-index: 700; white-space: nowrap;
}
#location-picker.hidden { display: none; }
.lp-banner {
  background: #fff; border: 2.5px solid var(--primary);
  border-radius: 10px; padding: 11px 16px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(44,123,229,.35); font-size: 14px;
  animation: lpBannerPulse 2s ease-in-out infinite;
}
@keyframes lpBannerPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(44,123,229,.35); }
  50%      { box-shadow: 0 4px 28px rgba(44,123,229,.55); }
}
.lp-banner span { color: var(--primary); font-weight: 700; }
#lp-confirm-btn { padding: 7px 16px; background: var(--primary); border: none; border-radius: 6px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; }
#lp-confirm-btn:hover { background: var(--primary-dk); }
#lp-cancel-btn { padding: 4px 8px; background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; font-size: 12px; color: var(--muted); white-space: nowrap; }
#lp-cancel-btn:hover { border-color: var(--danger); color: var(--danger); }

#map-crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 36px; line-height: 1; color: var(--primary); z-index: 700;
  pointer-events: none; text-shadow: 0 0 6px #fff, 0 0 2px #fff;
}
#map-crosshair.hidden { display: none; }

#cursor-bar {
  position: absolute; bottom: 6px; right: 8px;
  background: rgba(255,255,255,.88); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; font-size: 11px; color: var(--muted);
  pointer-events: none; z-index: 500;
}

/* ─── Waypoint Dots ───────────────────────────────────────── */
.wp-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.wp-dot.start { background: #27ae60; }
.wp-dot.end   { background: #e74c3c; }
.wp-dot.mid   { background: #3498db; }

/* ─── Image Overlay Handles ───────────────────────────────── */
.corner-handle {
  width: 12px; height: 12px; background: #fff; border: 2px solid #2c7be5;
  border-radius: 2px; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.move-handle {
  width: 16px; height: 16px; background: rgba(44,123,229,.85); border-radius: 50%;
  cursor: move; box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.side-handle-ns {
  width: 18px; height: 8px; background: #fff; border: 2px solid #2c7be5;
  border-radius: 2px; cursor: ns-resize; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.side-handle-ew {
  width: 8px; height: 18px; background: #fff; border: 2px solid #2c7be5;
  border-radius: 2px; cursor: ew-resize; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.vertex-handle {
  width: 12px; height: 12px; background: #fff; border: 2px solid #27ae60;
  border-radius: 2px; cursor: move; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.rot-handle {
  width: 18px; height: 18px; background: #fff; border: 2.5px solid #e67e22;
  border-radius: 50%; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #e67e22; line-height: 1;
}
.size-handle {
  width: 18px; height: 18px; background: #fff; border: 2.5px solid #2c7be5;
  border-radius: 50%; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #2c7be5; line-height: 1;
}

/* ─── Map Labels ──────────────────────────────────────────── */
.map-label {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: auto;
  line-height: 1.35;
  overflow: hidden;
}
.map-label-text {
  display: inline-block;
  pointer-events: auto;
  line-height: inherit;
}

/* ─── Elevation Panel ─────────────────────────────────────── */
#elevation-panel {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--elev-h);
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 900; transition: height .2s;
}
#elevation-panel.collapsed { height: 34px; }
#elevation-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; flex: 0 0 auto; border-bottom: 1px solid var(--border); user-select: none;
}
#toggle-elevation-btn {
  background: none; border: none; cursor: pointer; font-size: 13px; color: var(--muted);
  transition: transform .2s;
}
#elev-sample-controls {
  display: flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px;
}
#elev-interval-select {
  font-size: 11px; border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 3px; height: 22px; cursor: pointer; background: var(--surface);
}
.elev-ctrl-btn {
  font-size: 11px; padding: 0 7px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); cursor: pointer; height: 22px; white-space: nowrap; line-height: 1;
}
.elev-ctrl-btn:hover { border-color: var(--primary); color: var(--primary); }
.elev-ctrl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.elev-cancel-btn { color: var(--danger); border-color: #f0c9c5; }
.elev-cancel-btn:hover { background: #fef5f4; border-color: var(--danger); color: var(--danger); }
#elev-sample-progress { font-size: 11px; color: var(--muted); min-width: 46px; text-align: right; }
#elevation-body { flex: 1; padding: 4px 12px 8px; overflow: hidden; }
#elevation-chart { width: 100%; height: 100%; }

/* ─── Modals ──────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.42);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--surface); border-radius: 10px; width: 460px; max-width: 95vw;
  box-shadow: 0 8px 36px rgba(0,0,0,.18); max-height: 90vh; display: flex; flex-direction: column;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.modal-header h2 { font-size: 15px; }
.modal-header button { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--muted); }
.modal-header button:hover { color: var(--danger); }
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--border); flex: 0 0 auto; align-items: center; }
.modal-footer .action-btn { width: auto; display: inline-block; margin-bottom: 0; }

.form-group { margin-bottom: 13px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.form-group input[type="text"],
.form-group input[type="range"],
.form-group select {
  width: 100%; border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 8px; font-size: 13px; outline: none;
}
.form-group input[type="text"]:focus, .form-group select:focus { border-color: var(--primary); }
.form-group input[type="range"] { padding: 0; accent-color: var(--primary); }
.form-group input[type="color"] { height: 32px; width: 60px; border: 1px solid var(--border); border-radius: 4px; padding: 2px; cursor: pointer; }
.hint-text { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

/* Profile preview SVG */
#pm-preview-svg { display: block; }

/* ─── Context Menu ─────────────────────────────────────────── */
.context-menu {
  position: fixed;
  min-width: 160px;
  background: #fff;
  border: 1px solid #cfd7e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px 0;
  z-index: 3000;
}
.context-menu.hidden { display: none; }
.context-menu-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  color: #2c3e50;
  cursor: pointer;
}
.context-menu-item:hover { background: #eef4ff; color: #1a5cbf; }
.context-menu-item.danger { color: #c0392b; }
.context-menu-item.danger:hover { background: #fff1ef; color: #a93226; }
.context-menu-item.has-submenu { position: relative; display: flex; align-items: center; justify-content: space-between; }
.context-menu-item.has-submenu > span { pointer-events: none; }
.context-submenu {
  display: none;
  position: absolute;
  left: calc(100% - 2px);
  top: -6px;
  min-width: 150px;
  background: #fff;
  border: 1px solid #cfd7e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px 0;
  z-index: 3100;
}
.context-menu-item.has-submenu:hover .context-submenu { display: block; }
.context-menu-divider { border: none; border-top: 1px solid #e2e8f0; margin: 4px 0; }

/* ─── Measure Tool ─────────────────────────────────────────── */
#measure-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 700; white-space: nowrap;
}
#measure-banner.hidden { display: none; }
.measure-banner-inner {
  background: rgba(255,255,255,.97); border: 2px solid #e67e22;
  border-radius: 8px; padding: 8px 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 18px rgba(230,126,34,.22); font-size: 12px; font-weight: 600;
  color: #e67e22;
}
.measure-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e67e22; border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e67e22;
}
.measure-seg-label {
  background: rgba(255,255,255,.88); border: 1px solid #e67e22;
  border-radius: 4px; padding: 1px 5px; font-size: 11px; font-weight: 600;
  color: #c0560c; white-space: nowrap; pointer-events: none;
}

/* ─── Tutorial ─────────────────────────────────────────────── */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 20, 34, 0.38);
  z-index: 3500;
}
#tutorial-overlay.hidden { display: none; }
#tutorial-card {
  position: fixed;
  max-width: 360px;
  background: #fff;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  padding: 12px 14px;
}
#tutorial-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #1f2d3d; }
#tutorial-text { font-size: 12px; color: #3f4d61; line-height: 1.5; margin-bottom: 8px; }
#tutorial-step { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
#tutorial-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tutorial-focus {
  position: relative;
  z-index: 3600 !important;
  outline: 2px solid #2c7be5;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(44,123,229,.18);
}

body.require-new-project-only #header,
body.require-new-project-only #map-container,
body.require-new-project-only #elevation-panel,
body.require-new-project-only #sidebar .sidebar-section:not(#projects-section),
body.require-new-project-only #sidebar #profile-row,
body.require-new-project-only #sidebar #tool-options,
body.require-new-project-only #sidebar #sidebar-credit {
  pointer-events: none !important;
  opacity: 0.55;
}
body.require-new-project-only #projects-section,
body.require-new-project-only #new-project-btn,
body.require-new-project-only #location-picker,
body.require-new-project-only #mobile-sidebar-toggle,
body.require-new-project-only #mobile-bottom-menu,
body.require-new-project-only #mobile-sidebar-close {
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.require-project-name #header,
body.require-project-name #map-container,
body.require-project-name #elevation-panel,
body.require-project-name #sidebar .sidebar-section:not(#projects-section),
body.require-project-name #sidebar #profile-row,
body.require-project-name #sidebar #tool-options,
body.require-project-name #sidebar #sidebar-credit,
body.require-project-save #header,
body.require-project-save #map-container,
body.require-project-save #elevation-panel,
body.require-project-save #sidebar .sidebar-section:not(#projects-section),
body.require-project-save #sidebar #profile-row,
body.require-project-save #sidebar #tool-options,
body.require-project-save #sidebar #sidebar-credit {
  pointer-events: none !important;
  opacity: 0.55;
}
body.require-project-name #projects-section,
body.require-project-name #project-name-input,
body.require-project-name #save-project-btn,
body.require-project-name #mobile-sidebar-toggle,
body.require-project-name #mobile-bottom-menu,
body.require-project-name #mobile-sidebar-close,
body.require-project-save #projects-section,
body.require-project-save #project-name-input,
body.require-project-save #save-project-btn,
body.require-project-save #mobile-sidebar-toggle,
body.require-project-save #mobile-bottom-menu,
body.require-project-save #mobile-sidebar-close {
  pointer-events: auto !important;
  opacity: 1 !important;
}
#project-name-input.onboarding-name-required {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
  background: #fff6f5;
}
body.require-new-project-only #new-project-btn,
body.require-project-name #project-name-input,
body.require-project-name #save-project-btn,
body.require-project-save #save-project-btn,
body.require-new-project-only #mobile-sidebar-toggle,
body.require-new-project-only #mobile-bottom-menu,
body.require-project-name #mobile-sidebar-toggle,
body.require-project-name #mobile-bottom-menu,
body.require-project-save #mobile-sidebar-toggle,
body.require-project-save #mobile-bottom-menu {
  box-shadow: 0 0 0 3px rgba(44,123,229,.25);
  border-color: #2c7be5 !important;
}
body.require-new-project-only #mobile-bottom-bar button:not(#mobile-bottom-menu),
body.require-project-name #mobile-bottom-bar button:not(#mobile-bottom-menu),
body.require-project-save #mobile-bottom-bar button:not(#mobile-bottom-menu) {
  pointer-events: none !important;
  opacity: 0.45;
}
body.require-new-project-only #mobile-bottom-menu,
body.require-project-name #mobile-bottom-menu,
body.require-project-save #mobile-bottom-menu {
  pointer-events: auto !important;
  opacity: 1 !important;
}
@keyframes onboardingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(44,123,229,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(44,123,229,0); }
  100% { box-shadow: 0 0 0 0 rgba(44,123,229,0); }
}
@keyframes onboardingPulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(39,174,96,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(39,174,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,174,96,0); }
}

/* ─── Onboarding hint text ─────────────────────────────────── */
@keyframes obArrowBounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.ob-hint {
  display: none;
  font-size: 12px; font-weight: 600; text-align: center;
  padding: 8px 10px 8px; margin: 4px 0 6px; border-radius: 8px;
  line-height: 1.6; position: relative;
}
/* 上向き矢印（ボタン類への誘導） */
.ob-hint::before {
  content: '▲';
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
  animation: obArrowBounce 0.9s ease-in-out infinite;
}
/* 下向き矢印（入力欄への誘導はフィールドより後に配置されるため不要だが統一感のため） */
#ob-hint-name::before { content: '▲'; }
#ob-hint-save::before { content: '▲'; color: #1a6e36; text-align: right; padding-right: 14px; }

.ob-step {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-bottom: 2px;
}

#ob-hint-new  { color: #1a5fb4; background: #ddeaff; border: 1.5px solid #b3cef7; }
#ob-hint-save { color: #1a6e36; background: #d4f5e0; border: 1.5px solid #a3d9b8; }
#ob-hint-name { color: #1a5fb4; background: #ddeaff; border: 1.5px solid #b3cef7; }

body.require-new-project-only #ob-hint-new  { display: block; }
body.require-project-save     #ob-hint-save { display: block; }
body.require-project-name     #ob-hint-name { display: block; }

/* オンボーディング中はプロジェクトセクションを枠で強調 */
body.require-new-project-only #projects-section,
body.require-project-name     #projects-section,
body.require-project-save     #projects-section {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}
body.require-project-save #projects-section {
  outline-color: #27ae60;
}

/* ＋新規 button: highlighted in needNew stage */
body.require-new-project-only #new-project-btn {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  animation: onboardingPulse 1.4s infinite;
}
/* Save button: highlighted in needSave stage */
body.require-project-save #save-project-btn {
  animation: onboardingPulseGreen 1.4s infinite;
  font-weight: 700 !important;
  font-size: 13px !important;
}
/* Name input: pulsing in needName stage */
body.require-project-name #project-name-input {
  animation: onboardingPulse 1.4s infinite;
}

/* ─── Mobile Layout ────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --header-h: 56px; }

  html, body { font-size: 14px; }
  #header { gap: 6px; padding: 0 8px; overflow-x: auto; }
  #mobile-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  #logo { font-size: 15px; margin-right: 0; }
  #toolbar .tool-btn { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  #map-type-row {
    position: static;
    transform: none;
    margin-left: 0;
    order: 10;
  }
  .layer-btn { min-height: 34px; font-size: 12px; }
  #help-btn, #settings-btn, #tutorial-btn { min-height: 36px; }

  #main { left: 0; right: 0; }
  body {
    --mobile-bottom-h: 56px;
  }
  #main {
    bottom: calc(var(--elev-h) + var(--mobile-bottom-h));
  }
  #elevation-panel.collapsed ~ #mobile-bottom-bar,
  #mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mobile-bottom-h);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    z-index: 1250;
    border-top: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 -3px 10px rgba(0,0,0,.08);
  }
  #mobile-bottom-bar button {
    border: none;
    border-right: 1px solid #eef1f6;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    min-height: var(--mobile-bottom-h);
    cursor: pointer;
  }
  #mobile-bottom-bar button:last-child { border-right: none; }
  #mobile-bottom-bar button:active { background: #f0f5ff; }
  body.require-new-project-only #mobile-bottom-menu,
  body.require-new-project-only #mobile-sidebar-toggle {
    animation: onboardingPulse 1.5s infinite;
    position: relative;
    z-index: 3;
  }
  body.require-new-project-only #mobile-bottom-menu::after {
    content: "メニューを開く";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 8px);
    background: #2c7be5;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
  }
  body.require-new-project-only #mobile-bottom-menu::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 2px);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #2c7be5;
  }
  #location-picker {
    top: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    white-space: normal;
  }
  .lp-banner {
    white-space: normal;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lp-banner span {
    display: block;
    width: 100%;
    line-height: 1.45;
  }
  #sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    z-index: 1300;
    width: min(88vw, 360px);
    min-width: min(88vw, 360px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
  }
  body.mobile-sidebar-open #sidebar {
    transform: translateX(0);
  }
  #mobile-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 700;
  }
  #mobile-sidebar-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
  }
  #sidebar-scrim {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(0,0,0,.28);
    z-index: 1200;
  }
  body.mobile-sidebar-open #sidebar-scrim { display: block; }

  #map-container { width: 100%; }
  .action-btn { min-height: 38px; }
  .mini-btn { min-width: 28px; min-height: 28px; }
  .form-row input[type="number"], .form-row input[type="text"], .form-row select {
    min-height: 34px;
    font-size: 14px;
  }
  #cursor-bar { display: none; }
}