html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
html, body { overflow-x: hidden; }
body { display: flex; flex-direction: column; }
#toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; background: #1e1e1e; color: #e8e8e8; }
#toolbar .brand { font-weight: 600; margin-right: 8px; }
#toolbar .spacer { flex: 1; }
#toolbar button { background: #2b2b2b; color: #e8e8e8; border: 1px solid #3c3c3c; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
@media (max-width: 600px) {
  #toolbar { gap: 5px; }
  #toolbar button { padding: 5px 7px; font-size: 12px; }
  #toolbar .brand { margin-right: 2px; }
}
#toolbar button:hover { background: #363636; }
#toolbar button:disabled { opacity: 0.45; cursor: default; }
#toolbar button:disabled:hover { background: #2b2b2b; }
#toolbar button.mode.active { background: #2f7dff; border-color: #2f7dff; color: #fff; }
#hint { padding: 6px 10px; background: #2a2a2a; color: #a9a9a9; font-size: 13px; min-height: 19px; }
#search-panel { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: #161616; border-top: 1px solid #2b2b2b; }
#search-panel input { flex: 1; min-width: 0; max-width: 640px; }
#search-panel button { background: #2b2b2b; color: #e8e8e8; border: 1px solid #3c3c3c; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
#search-panel button:hover { background: #363636; }
body.light-theme #search-panel { background: #dde4ec; border-top-color: #c3cdd9; }
body.light-theme #search-panel button { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #search-panel button:hover { background: #eef2f7; }
#map { flex: 1; }
#filter-bar { display: flex; gap: 6px; padding: 5px 8px; background: #161616; overflow-x: auto; }
#filter-bar[hidden] { display: none; }
#role-chips { display: flex; gap: 6px; padding: 5px 8px; background: #161616; overflow-x: auto; }
#role-chips[hidden] { display: none; }
.filter-chip { border-radius: 999px; padding: 3px 11px; background: #2b2b2b; border: 1px solid #3c3c3c; color: #e8e8e8; cursor: pointer; font-size: 12px; white-space: nowrap; flex: none; }
.filter-chip:hover { background: #363636; }
.filter-chip.active { background: #2f7dff; border-color: #2f7dff; color: #fff; }
.popup-cat { width: 100%; box-sizing: border-box; padding: 4px 6px; }
.leaflet-popup-content-wrapper { background: #1e1e1e; color: #e8e8e8; border: 1px solid #3c3c3c; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
.leaflet-popup-tip { background: #1e1e1e; border-right: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; }
.leaflet-container a.leaflet-popup-close-button { color: #a9a9a9; }
.leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus { color: #e8e8e8; }
.popup input[type=text], .popup textarea, .popup select, .popup input[type=color] { background: #141414; border: 1px solid #3c3c3c; color: #e8e8e8; border-radius: 5px; }
.popup input[type=color] { padding: 2px; height: 28px; }
.nearby-grid { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 6px; margin-bottom: 10px; }
.nearby-grid button { padding: 7px 10px; border-radius: 6px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; text-align: left; }
.nearby-grid button:hover { background: #363636; }
.nearby-grid button:disabled { opacity: 0.5; cursor: default; }
.nearby-grid button:disabled:hover { background: #2b2b2b; }
.poi-pin { opacity: 0.8; }
#map.draw-mode { cursor: crosshair; }
.popup-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #7a7a7a; margin-bottom: 6px; }
.popup label { display: block; margin-bottom: 6px; font-size: 13px; }
.popup input[type=text] { width: 100%; box-sizing: border-box; padding: 4px 6px; }
.popup textarea { width: 100%; box-sizing: border-box; padding: 4px 6px; font-family: inherit; font-size: 13px; resize: vertical; min-height: 48px; }
.popup-actions { display: flex; gap: 8px; margin-top: 6px; }
.popup-actions button { padding: 4px 10px; border-radius: 5px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
.popup-delete { background: #d34040 !important; border-color: #d34040 !important; color: #fff !important; }
.popup-nav { background: #2f7dff !important; border-color: #2f7dff !important; color: #fff !important; }
.popup-warn { font-size: 12px; color: #e8e8e8; cursor: pointer; }
.popup-warn input { accent-color: #d34040; margin-right: 4px; }
.popup-warn-flag { color: #ffb3b3; font-size: 12px; margin-bottom: 4px; }
.leaflet-tooltip { background: #1e1e1e; border: 1px solid #3c3c3c; color: #e8e8e8; box-shadow: 0 2px 6px rgb(0 0 0 / 35%); }
.leaflet-tooltip-top::before { border-top-color: #3c3c3c; }
.leaflet-tooltip-bottom::before { border-bottom-color: #3c3c3c; }
#map.dark-mode { background: #141414; }
#map.dark-mode .leaflet-tile-pane img { filter: invert(1) hue-rotate(180deg) brightness(0.92) saturate(0.9); }
#map.dark-mode.base-satellite .leaflet-tile-pane img { filter: none; }
#map.dark-mode .leaflet-control-attribution { background: rgb(30 39 51 / 80%); color: #a9a9a9; }
#map.dark-mode .leaflet-control-attribution a { color: #7fb2ff; }
#map.dark-mode .leaflet-control-zoom { border-color: #3c3c3c; }
#map.dark-mode .leaflet-control-zoom a { background: #1e1e1e; color: #e8e8e8; border-color: #3c3c3c; }
.emoji-pin { background: transparent; border: 0; font-size: 22px; line-height: 26px; text-align: center; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 45%)); }
#search { background: #2b2b2b; border: 1px solid #3c3c3c; color: #e8e8e8; border-radius: 6px; padding: 6px 10px; flex: 1 1 160px; min-width: 120px; max-width: 480px; }
#search::placeholder { color: #848484; }
#search:focus { outline: 1px solid #2f7dff; }
#search-results { position: fixed; top: 90px; left: 10px; z-index: 1200; display: none; max-height: 55vh; overflow-y: auto; max-width: min(480px, 92vw); background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 8px; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
#search-results.open { display: block; }
.search-item { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; cursor: pointer; font-size: 13px; color: #e8e8e8; border-bottom: 1px solid #2b2b2b; }
.search-item:hover { background: #2b2b2b; }
.search-item.muted { color: #848484; cursor: default; }
.search-item.muted:hover { background: transparent; }
.search-kind { flex: none; font-size: 10px; letter-spacing: 1px; color: #7a7a7a; border: 1px solid #3c3c3c; border-radius: 3px; padding: 1px 4px; }
.search-item.local .search-kind { color: #8fd0ff; border-color: #2f7dff; }
#speed-badge { position: fixed; bottom: 20px; right: 10px; z-index: 1150; background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 8px; padding: 8px 14px; color: #e8e8e8; font-size: 20px; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
#speed-badge[hidden] { display: none; }
body:has(#route-panel.open) #speed-badge { bottom: auto; top: calc(var(--nav-top, 8px) + 64px); }
#route-resume { position: fixed; bottom: 20px; left: 10px; z-index: 1150; background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 8px; padding: 8px 14px; color: #e8e8e8; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); cursor: pointer; }
#route-resume[hidden] { display: none; }
body.light-theme #route-resume { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
#speed-badge.over { background: #5d2e2e; border-color: #a35050; color: #ffc7c7; }
#toasts { position: fixed; bottom: 14px; left: 50%; transform: translate(-50%, 0); z-index: 1250; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; pointer-events: none; max-width: min(520px, 94vw); }
.toast { background: #1e1e1e; border: 1px solid #3c3c3c; color: #e8e8e8; border-radius: 8px; padding: 7px 14px; font-size: 13px; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.hide { opacity: 0; transform: translateY(8px); }
#route-panel { position: fixed; bottom: 20px; left: 10px; z-index: 1100; display: none; flex-direction: column; gap: 8px; background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 8px; padding: 10px 12px; color: #e8e8e8; font-size: 13px; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); max-width: calc(100vw - 20px); box-sizing: border-box; }
#route-panel.open { display: flex; }
#route-panel.compact #route-vias, #route-panel.compact .route-row label, #route-panel.compact .route-modes, #route-panel.compact #btn-route-go { display: none; }
body.fs-hide-chrome #toolbar, body.fs-hide-chrome #search-panel, body.fs-hide-chrome #hint { display: none; }
.route-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.route-row label, .via-row label { position: relative; display: flex; flex-direction: column; gap: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #7a7a7a; }
.addr-suggest { position: absolute; top: 100%; left: 0; min-width: 100%; max-width: 86vw; z-index: 1300; display: none; max-height: 230px; overflow-y: auto; background: #1e1e1e; border: 1px solid #3c3c3c; border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
.addr-suggest.open { display: block; }
.addr-item { display: flex; gap: 6px; align-items: baseline; padding: 6px 8px; font-size: 12px; color: #e8e8e8; cursor: pointer; border-bottom: 1px solid #2b2b2b; text-transform: none; letter-spacing: 0; }
.addr-item:hover { background: #2b2b2b; }
.addr-kind { flex: none; font-size: 9px; letter-spacing: 1px; color: #7a7a7a; border: 1px solid #3c3c3c; border-radius: 3px; padding: 1px 3px; }
.addr-item.hist .addr-kind { color: #c8a95f; border-color: #8a7338; }
.route-row input, .via-row input { width: min(230px, 40vw); background: #2b2b2b; border: 1px solid #3c3c3c; color: #e8e8e8; border-radius: 6px; padding: 5px 8px; }
.route-row input:focus, .via-row input:focus { outline: 1px solid #2f7dff; }
.route-modes { margin-top: -2px; }
#route-vias { display: flex; flex-direction: column; gap: 6px; }
#route-vias[hidden] { display: none; }
.via-row { display: flex; align-items: flex-end; gap: 8px; }
.via-del { padding: 5px 10px; border-radius: 5px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
.via-del:hover { background: #363636; }
#route-info { font-size: 12px; color: #a9a9a9; }
#route-steps { max-height: 34vh; overflow-y: auto; border-top: 1px solid #2b2b2b; margin-top: 2px; }
#route-steps[hidden] { display: none; }
.route-step { display: flex; gap: 8px; align-items: baseline; padding: 5px 4px; border-bottom: 1px solid #262626; cursor: pointer; font-size: 12px; }
.route-step:hover { background: #2b2b2b; }
.route-step.active { background: #26406a; }
.step-icon { flex: none; width: 18px; text-align: center; color: #8fd0ff; font-size: 14px; }
.step-text { flex: 1; }
.step-dist { flex: none; color: #848484; font-size: 11px; }
.route-navrow { align-items: stretch; flex-wrap: nowrap; }
#nav-banner { position: fixed; top: calc(var(--nav-top, 8px) + 8px); left: 8px; right: 8px; z-index: 1160; display: flex; align-items: center; gap: 10px; background: #26406a; border: 1px solid #3c5a8a; border-radius: 8px; padding: 6px 10px; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
#nav-banner[hidden] { display: none; }
.nav-icon { flex: none; font-size: 22px; line-height: 1; color: #cfe4ff; }
.nav-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; }
.nav-text > span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #a9c4e8; }
.nav-body { font-weight: 600; }
.nav-dist { flex: none; font-size: 16px; font-weight: 700; color: #cfe4ff; }
#route-panel button { padding: 5px 10px; border-radius: 5px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
#route-panel button:hover { background: #363636; }
#toolbar button.active { background: #2f7dff; border-color: #2f7dff; color: #fff; }
#route-panel button.active { background: #2f7dff; border-color: #2f7dff; color: #fff; }
.locate-dot { width: 16px; height: 16px; border-radius: 50%; background: #2f7dff; border: 2px solid #fff; box-sizing: border-box; animation: locate-pulse 2s infinite; }
#modal-back { position: fixed; inset: 0; z-index: 1400; background: rgb(0 0 0 / 45%); }
#modal-back[hidden] { display: none; }
#modal { position: fixed; z-index: 1410; left: 50%; top: 16%; transform: translate(-50%, 0); width: min(440px, calc(100vw - 24px)); background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 10px; padding: 14px 16px; color: #e8e8e8; box-shadow: 0 8px 24px rgb(0 0 0 / 50%); font-size: 13px; box-sizing: border-box; }
#modal[hidden] { display: none; }
.modal-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.modal-note { color: #a9a9a9; font-size: 12px; margin-bottom: 10px; }
.modal-row { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-row button { padding: 6px 14px; border-radius: 6px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
.modal-row button:hover { background: #363636; }
.modal-row button.primary { background: #2f7dff; border-color: #2f7dff; color: #fff; }
.share-link { width: 100%; box-sizing: border-box; background: #141414; border: 1px solid #3c3c3c; color: #8fd0ff; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; font-size: 12px; }
.list-add { display: flex; gap: 8px; margin-bottom: 10px; }
.list-add input { flex: 1; background: #2b2b2b; border: 1px solid #3c3c3c; color: #e8e8e8; border-radius: 6px; padding: 5px 8px; }
.list-add button { padding: 5px 12px; border-radius: 6px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
.list-add button:hover { background: #363636; }
.list-add button:disabled { opacity: 0.5; cursor: default; }
.list-add button.primary { background: #2f7dff; border-color: #2f7dff; color: #fff; }
.list-rows { max-height: 45vh; overflow-y: auto; margin-bottom: 10px; }
.list-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 2px; border-bottom: 1px solid #2b2b2b; }
.list-vis { display: flex; gap: 7px; align-items: center; cursor: pointer; min-width: 0; flex: 1; }
.list-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-count { color: #7a7a7a; font-size: 11px; flex: none; }
.list-acts { display: flex; gap: 5px; flex: none; }
.list-acts button { padding: 3px 8px; border-radius: 5px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; font-size: 11px; }
.list-acts button:hover { background: #363636; }
.list-acts .list-del { background: #4a2424; border-color: #7a3a3a; color: #ffb3b3; }
.list-acts .list-del:hover { background: #5d2e2e; }
.help-rows { display: flex; flex-direction: column; }
.help-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid #2b2b2b; font-size: 12px; }
.help-key { flex: none; min-width: 150px; color: #8fd0ff; font-family: ui-monospace, consolas, monospace; font-size: 11px; }
.modal-check { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; color: #a9a9a9; }
#view-banner { background: #4a3a1c; color: #ffe3b3; padding: 7px 12px; display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 13px; }
#view-banner[hidden] { display: none; }
#view-banner button { padding: 3px 10px; border-radius: 5px; border: 1px solid #8a7338; background: #6d5226; color: #ffe3b3; cursor: pointer; }
.popup-ro-name { font-weight: 600; margin-bottom: 4px; }
.popup-ro-desc { color: #a9a9a9; }
@keyframes locate-pulse { 0% { box-shadow: 0 0 0 0 rgb(47 125 255 / 50%); } 70% { box-shadow: 0 0 0 14px rgb(47 125 255 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(47 125 255 / 0%); } }
body.light-theme { color: #1d1d1d; }
body.light-theme #toolbar { background: #e6ebf2; color: #1d1d1d; }
body.light-theme #toolbar button { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #toolbar button:hover { background: #eef2f7; }
body.light-theme #toolbar button:disabled:hover { background: #ffffff; }
body.light-theme #hint { background: #f1f4f8; color: #4d4d4d; }
body.light-theme #filter-bar, body.light-theme #role-chips { background: #dde4ec; }
body.light-theme .filter-chip { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .filter-chip:hover { background: #eef2f7; }
body.light-theme .filter-chip.active { background: #2f7dff; border-color: #2f7dff; color: #fff; }
body.light-theme #search { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #search::placeholder { color: #7c8a9c; }
body.light-theme #search-results { background: #ffffff; border-color: #c3cdd9; }
body.light-theme .search-item { color: #1d1d1d; border-bottom-color: #e4eaf2; }
body.light-theme .search-item:hover { background: #eef2f7; }
body.light-theme .search-item.muted { color: #7c8a9c; }
body.light-theme .search-item.muted:hover { background: transparent; }
body.light-theme .search-kind { color: #5b5b5b; border-color: #c3cdd9; }
body.light-theme .search-item.local .search-kind { color: #1e6fd0; border-color: #2f7dff; }
body.light-theme #speed-badge { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #speed-badge.over { background: #b34040; border-color: #8a2f2f; color: #fff; }
body.light-theme #route-panel { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #route-panel button { background: #f1f4f8; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #route-panel button:hover { background: #e4eaf2; }
body.light-theme #route-panel button.active { background: #2f7dff; border-color: #2f7dff; color: #fff; }
body.light-theme .route-row label, body.light-theme .via-row label { color: #5b5b5b; }
body.light-theme .route-row input, body.light-theme .via-row input { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .addr-suggest { background: #ffffff; border-color: #c3cdd9; }
body.light-theme .addr-item { color: #1d1d1d; border-bottom-color: #e4eaf2; }
body.light-theme .addr-item:hover { background: #eef2f7; }
body.light-theme .addr-kind { color: #5b5b5b; border-color: #c3cdd9; }
body.light-theme .addr-item.hist .addr-kind { color: #8a6f2f; border-color: #c9a85f; }
body.light-theme .route-step { border-bottom-color: #edf1f6; }
body.light-theme .route-step:hover { background: #eef2f7; }
body.light-theme .route-step.active { background: #cfe4ff; }
body.light-theme .step-icon { color: #1e6fd0; }
body.light-theme .step-dist, body.light-theme #route-info { color: #5b5b5b; }
body.light-theme #route-steps { border-top-color: #e4eaf2; }
body.light-theme .via-del { background: #f1f4f8; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .toast { background: #1d1d1d; border-color: #1d1d1d; color: #f4f4f4; }
body.light-theme #modal { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .modal-note, body.light-theme .modal-check { color: #4d4d4d; }
body.light-theme .modal-row button { background: #f1f4f8; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .modal-row button:hover { background: #e4eaf2; }
body.light-theme .modal-row button.primary { background: #2f7dff; border-color: #2f7dff; color: #fff; }
body.light-theme .modal-row button.list-del { background: #b34040; border-color: #8a2f2f; color: #fff; }
body.light-theme .share-link { background: #f1f4f8; border-color: #c3cdd9; color: #1e6fd0; }
body.light-theme .help-key { color: #1e6fd0; }
body.light-theme .help-row { border-bottom-color: #e4eaf2; }
body.light-theme .help-rows, body.light-theme .list-row { border-bottom-color: #e4eaf2; }
body.light-theme .list-count { color: #7c8a9c; }
body.light-theme .list-add input { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .list-add button { background: #f1f4f8; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .list-add button:hover { background: #e4eaf2; }
body.light-theme .list-add button.primary { background: #2f7dff; border-color: #2f7dff; color: #fff; }
body.light-theme .list-acts button { background: #f1f4f8; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .list-acts button:hover { background: #e4eaf2; }
body.light-theme .list-acts .list-del { background: #b34040; border-color: #8a2f2f; color: #fff; }
body.light-theme .leaflet-tooltip { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .leaflet-tooltip-top::before { border-top-color: #c3cdd9; }
body.light-theme .leaflet-tooltip-bottom::before { border-bottom-color: #c3cdd9; }
body.light-theme .leaflet-popup-content-wrapper { background: #ffffff; color: #1d1d1d; border-color: #c3cdd9; }
body.light-theme .leaflet-popup-tip { background: #ffffff; border-right-color: #c3cdd9; border-bottom-color: #c3cdd9; }
body.light-theme .leaflet-container a.leaflet-popup-close-button { color: #5b5b5b; }
body.light-theme .leaflet-container a.leaflet-popup-close-button:hover, body.light-theme .leaflet-container a.leaflet-popup-close-button:focus { color: #1d1d1d; }
body.light-theme .popup input[type=text], body.light-theme .popup textarea, body.light-theme .popup select, body.light-theme .popup input[type=color] { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }

/* Geometry (territory / zone line) editing */
#geom-edit-panel { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 1300;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 20px); box-sizing: border-box;
  background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 8px; padding: 8px 10px;
  color: #e8e8e8; font-size: 13px; box-shadow: 0 4px 14px rgb(0 0 0 / 45%); }
#geom-edit-panel[hidden] { display: none; }
#geom-edit-panel .geom-edit-label { font-weight: 700; color: #58a6ff; white-space: nowrap; }
#geom-edit-panel .geom-edit-hint { color: #9aa4b2; font-size: 12px; max-width: 34ch; }
#geom-edit-panel button { padding: 6px 10px; border-radius: 6px; border: 1px solid #3c3c3c; background: #2b2b2b; color: #e8e8e8; cursor: pointer; white-space: nowrap; }
#geom-edit-panel #btn-geom-save { background: #2f7dff; border-color: #2f7dff; color: #fff; }
#geom-edit-panel button:hover { filter: brightness(1.12); }
@media (max-width: 600px) { #geom-edit-panel .geom-edit-hint { display: none; } }

.geom-vertex { background: #fff; border: 2px solid #2f7dff; border-radius: 50%; box-sizing: border-box; cursor: grab; }
.geom-vertex:active { cursor: grabbing; }
.geom-midpoint { background: rgb(47 125 255 / 0.35); border: 1px solid #2f7dff; border-radius: 4px;
  color: #fff; font-weight: 700; font-size: 13px; line-height: 14px; text-align: center; cursor: pointer; }
.geom-midpoint:hover { background: #2f7dff; }

/* Custom data fields in feature popups */
.popup-fields { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.popup-field-row { display: flex; gap: 4px; }
.popup-field-row .field-key { flex: 0 0 34%; min-width: 0; }
.popup-field-row .field-value { flex: 1; min-width: 0; }
.popup-field-row .field-remove { flex: 0 0 auto; padding: 0 7px; border-radius: 5px; border: 1px solid #3c3c3c;
  background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
.popup-field-row .field-remove:hover { background: #d34040; border-color: #d34040; color: #fff; }
.popup-add-field { margin-bottom: 6px; padding: 4px 10px; border-radius: 5px; border: 1px solid #3c3c3c;
  background: #2b2b2b; color: #e8e8e8; cursor: pointer; }
.popup-add-field:hover { background: #363636; }
.popup-fields-view { margin: 4px 0 6px; border-top: 1px solid #3c3c3c; padding-top: 6px; }
.popup-field-view { display: flex; gap: 8px; font-size: 12.5px; margin-bottom: 3px; }
.popup-field-k { color: #7a7a7a; min-width: 72px; }
.popup-field-v { color: #d7d7d7; overflow-wrap: anywhere; }
body.light-theme #geom-edit-panel { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme #geom-edit-panel .geom-edit-hint { color: #5b6b7c; }
body.light-theme .popup-fields-view { border-top-color: #c3cdd9; }
body.light-theme .popup-field-v { color: #1d1d1d; }

/* Closest service centre + mileage cost dialog */
.service-label { position: relative; display: flex; flex-direction: column; gap: 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; color: #7a7a7a; margin-bottom: 10px; }
.service-label input { width: 100%; box-sizing: border-box; background: #2b2b2b; border: 1px solid #3c3c3c;
  color: #e8e8e8; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.service-label input:focus { outline: 1px solid #2f7dff; }
.service-results { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.service-note { color: #a9a9a9; font-size: 12px; }
.service-err { color: #ff9a9a; }
.service-addr { font-size: 12px; color: #cfe4ff; overflow-wrap: anywhere; }
.service-centre { border: 1px solid #2b2b2b; border-radius: 6px; padding: 6px 8px; background: #232323; }
.service-centre.closest { border-color: #c8a95f; background: #2a2620; }
.service-centre-name { font-size: 13px; font-weight: 600; }
.service-centre-addr { font-size: 11px; color: #a9a9a9; margin: 2px 0; }
.service-centre-dist { font-size: 11px; color: #848484; }
.service-tag { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #c8a95f;
  border: 1px solid #8a7338; border-radius: 3px; padding: 1px 4px; margin-left: 6px; }
.service-cost { border-top: 1px solid #2b2b2b; padding-top: 8px; font-size: 13px;
  display: flex; flex-direction: column; gap: 3px; }
.service-cost b { color: #c8a95f; }
body.light-theme .service-label input { background: #ffffff; border-color: #c3cdd9; color: #1d1d1d; }
body.light-theme .service-note, body.light-theme .service-centre-addr { color: #4d4d4d; }
body.light-theme .service-centre-dist { color: #6b6b6b; }
body.light-theme .service-centre { background: #f1f4f8; border-color: #c3cdd9; }
body.light-theme .service-centre.closest { background: #fdf6e3; border-color: #b99b52; }
body.light-theme .service-addr { color: #1f5fa9; }
body.light-theme .service-cost { border-top-color: #c3cdd9; }
body.light-theme .service-cost b { color: #8a7338; }
body.light-theme .service-err { color: #b34040; }