:root {
  color-scheme: light; --ink: #14241b; --muted: #647168; --panel: rgba(255,255,252,.96); --line: #d9e1da;
  --green: #176b45; --green-light: #36a66c; --navy: #365a75; --orange: #d27532; --cream: #f3f1e9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--cream); color: var(--ink); overflow: hidden; }
button, select, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { height: 100%; display: grid; grid-template-rows: 82px minmax(0,1fr) 178px; }
.topbar { z-index: 1001; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 22px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 2px 16px rgba(24,44,32,.08); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.brand-mark { color: var(--green-light); font-size: 31px; line-height: 1; text-shadow: 0 0 0 7px #dff2e7; }
h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.selectors { display: flex; align-items: end; justify-content: flex-end; gap: 11px; }
.selectors label, .speed-label, .export-group > span { color: var(--muted); font-size: 11px; font-weight: 700; }
select { display: block; min-width: 142px; margin-top: 4px; padding: 8px 30px 8px 10px; border: 1px solid #cbd6ce; border-radius: 8px; background: white; color: var(--ink); font-size: 13px; }
.export-group > div { display: flex; gap: 5px; margin-top: 4px; }
.secondary-button { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid #c7d4ca; border-radius: 8px; color: var(--green); background: #fff; text-decoration: none; font-size: 12px; font-weight: 750; }
.secondary-button:hover { background: #eef7f1; }
.map-wrap { position: relative; min-height: 0; }
#map { width: 100%; height: 100%; background: #e8ece8; }
.leaflet-control-zoom a { color: var(--ink); }
.leaflet-control-attribution { font-size: 10px; }
.status-card, .statistics-card, .debug-card, .layer-toggles { position: absolute; z-index: 800; border: 1px solid rgba(210,221,213,.92); border-radius: 13px; background: var(--panel); box-shadow: 0 10px 30px rgba(20,40,28,.14); backdrop-filter: blur(10px); }
.status-card { top: 14px; left: 14px; width: 272px; padding: 15px 17px 12px; }
.statistics-card { right: 14px; bottom: 14px; width: 286px; padding: 13px 15px 10px; }
.debug-card { left: 300px; top: 14px; width: 300px; padding: 13px 15px 10px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status-label { color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.mode-badge { padding: 3px 7px; border-radius: 99px; background: #fff0df; color: #9a511f; font-size: 10px; font-weight: 750; }
.status-card time { display: block; margin: 4px 0 10px; font-size: 29px; font-weight: 770; font-variant-numeric: tabular-nums; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #e7ece8; }
dt { color: var(--muted); font-size: 11px; }
dd { margin: 0; text-align: right; font-size: 11px; font-weight: 680; font-variant-numeric: tabular-nums; }
.compact-list { margin-top: 8px; }
.interpolation-note, .distance-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.distance-note { color: #8b5a25; }
.layer-toggles { right: 14px; top: 14px; display: grid; grid-template-columns: repeat(2,auto); gap: 7px 12px; padding: 10px 12px; font-size: 11px; }
.layer-toggles label { cursor: pointer; white-space: nowrap; }
input[type="checkbox"] { accent-color: var(--green); }
.message, .error-banner, .loading, .empty-state { position: absolute; z-index: 950; left: 50%; transform: translateX(-50%); border-radius: 9px; box-shadow: 0 8px 28px rgba(20,40,28,.18); font-size: 12px; }
.message { top: 14px; padding: 9px 13px; background: #173f2c; color: white; }
.error-banner { top: 14px; max-width: 620px; padding: 11px 15px; background: #a93737; color: white; }
.loading, .empty-state { top: 50%; transform: translate(-50%,-50%); padding: 13px 19px; background: rgba(23,37,29,.9); color: white; }
.timeline-panel { z-index: 1001; display: grid; grid-template-columns: 350px minmax(0,1fr); align-items: center; gap: 23px; padding: 13px 22px 14px; background: #fffefa; border-top: 1px solid var(--line); box-shadow: 0 -5px 20px rgba(24,44,32,.08); }
.playback-controls { min-width: 0; }
.transport-row { display: flex; align-items: center; gap: 6px; }
.icon-button, .play-button { height: 38px; border-radius: 8px; cursor: pointer; font-weight: 750; }
.icon-button { min-width: 36px; padding: 0 8px; border: 1px solid #cbd6ce; background: white; color: var(--ink); }
.icon-button:hover { border-color: #91ac99; background: #f1f7f3; }
.play-button { min-width: 92px; padding: 0 13px; border: 0; background: var(--green); color: white; font-size: 13px; }
.play-button:hover { background: #0f5938; }
.icon-button:disabled, .play-button:disabled { opacity: .45; cursor: default; }
.playback-meta { display: flex; align-items: end; gap: 12px; margin-top: 8px; }
.speed-label select { min-width: 68px; padding-top: 6px; padding-bottom: 6px; }
.shortcut-hint { color: #7d8981; font-size: 10px; padding-bottom: 7px; line-height: 1.3; }
.timeline { min-width: 0; }
.timeline-metrics { display: grid; grid-template-columns: repeat(7,minmax(76px,1fr)); gap: 8px; margin-bottom: 7px; }
.timeline-metrics div { min-width: 0; }
.timeline-metrics div + div { border-left: 1px solid #e2e8e3; padding-left: 8px; }
.timeline-metrics span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.timeline-metrics strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.timeline-metrics div:first-child strong { color: var(--green); font-size: 15px; }
#timeline-slider { width: 100%; height: 24px; margin: 0; accent-color: var(--green); cursor: pointer; }
.track-legend { display: flex; gap: 17px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.track-legend span { display: inline-flex; align-items: center; gap: 5px; }
.track-legend i { display: inline-block; width: 18px; }
.legend-full { border-top: 3px dashed var(--navy); }
.legend-traveled { border-top: 4px solid var(--green-light); }
.legend-point { width: 8px !important; height: 8px; border: 2px solid var(--green); border-radius: 50%; background: white; }
.legend-marker { width: 10px !important; height: 10px; border: 2px solid white; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.truck-icon { background: transparent; border: 0; }
.truck-dot { width: 26px; height: 26px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--orange); box-shadow: 0 2px 10px rgba(0,0,0,.38); color: white; font-size: 10px; font-weight: 800; }
.sequence-arrow { background: transparent; border: 0; }
.sequence-arrow span { display: block; color: #274e68; font-size: 17px; opacity: .78; text-shadow: 0 1px 2px white,0 0 3px white; }
.gps-popup { min-width: 225px; line-height: 1.45; }
.gps-popup strong { font-size: 14px; }
.gps-popup dl { margin-top: 7px; }
.gps-popup dl div { padding: 3px 0; border: 0; }
.gps-popup button { width: 100%; margin-top: 9px; padding: 7px; border: 0; border-radius: 7px; background: var(--green); color: white; cursor: pointer; font-weight: 700; }
@media (max-width: 1050px) {
  .brand { min-width: auto; } .brand p, .shortcut-hint { display: none; } .selectors select { min-width: 112px; }
  .timeline-panel { grid-template-columns: 330px minmax(0,1fr); } .timeline-metrics { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 800px) {
  body { overflow: auto; } .app-shell { min-height: 780px; grid-template-rows: auto 480px auto; }
  .topbar { align-items: flex-start; padding: 10px 12px; } .selectors { flex-wrap: wrap; } .export-group { display: none; }
  .status-card { top: 10px; left: 10px; width: 228px; } .statistics-card { display: none; } .debug-card { left: 10px; top: auto; bottom: 10px; }
  .layer-toggles { top: 10px; right: 10px; grid-template-columns: 1fr; } .timeline-panel { grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; }
  .timeline-metrics { grid-template-columns: repeat(4,1fr); }
}

/* Module navigation and fixed street-sweep route viewer */
body { display: grid; grid-template-rows: 52px minmax(0, 1fr); }
.viewer-tabs { z-index: 1200; display: flex; align-items: end; gap: 4px; padding: 0 22px; background: #10291e; box-shadow: 0 3px 16px rgba(11,31,22,.2); }
.viewer-tab { position: relative; height: 52px; padding: 0 18px; border: 0; background: transparent; color: #b7c9bd; cursor: pointer; font-size: 13px; font-weight: 760; letter-spacing: .02em; }
.viewer-tab::after { position: absolute; right: 16px; bottom: 0; left: 16px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.viewer-tab:hover { color: white; }
.viewer-tab.is-active { color: white; }
.viewer-tab.is-active::after { background: #73d597; }
.module-view { min-height: 0; }
.module-view[hidden] { display: none !important; }
.app-shell { height: auto; min-height: 0; }

.sweep-shell { display: grid; grid-template-rows: 78px minmax(0, 1fr) 118px; height: 100%; min-height: 0; background: #eef1ec; }
.sweep-shell.is-overview { grid-template-rows: 78px minmax(0, 1fr) 0; }
.sweep-shell.is-overview .sweep-timeline { display: none; }
.sweep-topbar { z-index: 1001; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 20px; border-bottom: 1px solid #cfd9d1; background: rgba(255,255,252,.97); box-shadow: 0 2px 14px rgba(24,44,32,.07); }
.sweep-brand { min-width: 270px; }
.sweep-mark { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; background: #0b6241; color: white; font-size: 18px; }
.sweep-toolbar { display: flex; align-items: end; gap: 14px; }
.version-actions { display: flex; gap: 6px; padding-bottom: 1px; }
.version-actions .secondary-button { height: 34px; white-space: nowrap; }
.version-actions .play-button { min-width: 112px; height: 34px; padding: 0 12px; white-space: nowrap; }
.sweep-toolbar label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.sweep-toolbar select { display: block; min-width: 250px; margin-top: 4px; padding: 8px 28px 8px 10px; border: 1px solid #cbd6ce; border-radius: 7px; background: white; color: var(--ink); }
.mode-switch { display: flex; padding: 3px; border: 1px solid #cbd6ce; border-radius: 9px; background: #eef3ef; }
.mode-button { padding: 8px 13px; border: 0; border-radius: 6px; background: transparent; color: #52645a; cursor: pointer; font-size: 12px; font-weight: 740; }
.mode-button.is-active { background: white; color: #0b6241; box-shadow: 0 1px 6px rgba(20,40,28,.12); }

.sweep-workspace { display: grid; grid-template-columns: minmax(0,1fr) 348px; min-height: 0; }
.sweep-map-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#sweep-map { width: 100%; height: 100%; background: #dfe6de; }
.sweep-status-card { position: absolute; z-index: 800; top: 14px; left: 14px; width: 282px; padding: 15px 17px 12px; border: 1px solid rgba(193,207,197,.9); border-radius: 11px; background: rgba(255,255,252,.96); box-shadow: 0 10px 30px rgba(20,40,28,.14); backdrop-filter: blur(10px); }
.sweep-status-card > strong { display: block; margin: 5px 0 9px; color: #0b6241; font-size: 32px; font-variant-numeric: tabular-nums; }
.sweep-status-card p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.sweep-badge { background: #e4f4e9; color: #176b45; }
.sweep-map-legend { position: absolute; z-index: 800; right: 14px; bottom: 14px; display: flex; gap: 13px; padding: 9px 12px; border: 1px solid rgba(193,207,197,.9); border-radius: 8px; background: rgba(255,255,252,.95); box-shadow: 0 5px 18px rgba(20,40,28,.12); color: #55675c; font-size: 10px; }
.sweep-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sweep-map-legend i { display: inline-block; width: 18px; font-style: normal; }
.sweep-legend-traveled { border-top: 4px solid #e67836; }
.sweep-legend-remaining { border-top: 4px solid #2d6b55; opacity: .7; }
.sweep-legend-arrow { color: #173f2c; text-align: center; }

.instruction-panel { min-height: 0; overflow: hidden; border-left: 1px solid #d7dfd8; background: #fffefa; }
.instruction-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 17px 18px 10px; border-bottom: 1px solid #e2e8e3; }
.instruction-heading span:first-child { color: #7c8b82; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.instruction-heading h2 { margin: 3px 0 0; font-size: 16px; }
.route-length { flex: 0 0 auto; padding: 5px 8px; border-radius: 99px; background: #eef4ef; color: #315a44; font-size: 10px; font-weight: 760; }
.instruction-description { margin: 0; padding: 9px 18px; border-bottom: 1px solid #e8ece9; color: #657269; font-size: 10px; line-height: 1.45; }
.instruction-list { height: calc(100% - 112px); margin: 0; padding: 6px 8px 18px; overflow-y: auto; list-style: none; counter-reset: sweep-step; }
.instruction-panel.is-editing .instruction-list { height: calc(100% - 350px); }
.instruction-item { counter-increment: sweep-step; }
.instruction-row { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 4px; border-radius: 7px; }
.instruction-button { display: grid; grid-template-columns: 24px minmax(0,1fr) 16px; align-items: center; width: 100%; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #25372d; cursor: pointer; text-align: left; }
.instruction-button::before { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #c9d4cb; border-radius: 50%; color: #7b8980; content: counter(sweep-step); font-size: 9px; font-weight: 760; }
.instruction-button:hover { background: #f1f5f1; }
.instruction-button strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.instruction-button small { display: block; margin-top: 2px; color: #7a877f; font-size: 9px; }
.instruction-state { color: #aab4ad; font-size: 12px; }
.instruction-item.is-complete .instruction-button::before { border-color: #3aa36c; background: #3aa36c; color: white; content: "✓"; }
.instruction-item.is-current .instruction-button { background: #eaf4ed; box-shadow: inset 3px 0 #176b45; }
.instruction-item.is-current .instruction-button::before { border-color: #176b45; background: white; color: #176b45; content: "→"; }
.instruction-item.is-current .instruction-state { color: #176b45; }
.instruction-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px 42px; opacity: .72; transition: opacity .15s ease; }
.instruction-item:hover .instruction-actions, .instruction-item.is-current .instruction-actions, .instruction-item.is-editing .instruction-actions { opacity: 1; }
.instruction-actions button { min-width: 34px; height: 24px; padding: 0 6px; border: 1px solid #ccd7cf; border-radius: 5px; background: white; color: #53645a; cursor: pointer; font-size: 9px; }
.instruction-actions button:hover { border-color: #6c977c; color: #176b45; }
.instruction-actions button:disabled { opacity: .3; cursor: default; }
.instruction-item.is-editing .instruction-row { outline: 2px solid #8c4e9c; outline-offset: -1px; background: #f7eff9; }
.instruction-item.needs-geometry-review { border-radius: 7px; background: #fff8e6; }
.geometry-review-badge { display: inline-block; margin-top: 4px; padding: 2px 5px; border-radius: 99px; background: #fff0b8; color: #8a5d00; font-size: 8px; font-weight: 800; }

.segment-editor { padding: 11px 12px; border-bottom: 1px solid #d8e1da; background: #f5f7f4; }
.segment-editor-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.segment-editor-heading div { min-width: 0; }
.segment-editor-heading span { display: block; color: #8c4e9c; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.segment-editor-heading strong { display: block; overflow: hidden; margin-top: 2px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.segment-editor-heading > button { width: 25px; height: 25px; border: 1px solid #cbd6ce; border-radius: 6px; background: white; cursor: pointer; }
.segment-editor label { display: block; color: #66756c; font-size: 9px; font-weight: 700; }
.segment-editor textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; resize: none; border: 1px solid #cbd6ce; border-radius: 6px; background: white; color: var(--ink); font: inherit; font-size: 11px; line-height: 1.35; }
.instruction-text-fields[hidden], .instruction-geometry-fields[hidden] { display: none; }
.sweep-shell:not(.is-edit-mode) .edit-only, .sweep-shell:not(.is-edit-mode) .instruction-actions { display: none !important; }
.sweep-shell:not(.is-edit-mode) .instruction-button { padding-top: 10px; padding-bottom: 10px; }
body.is-shared-route .viewer-tabs, body.is-shared-route #garbage-view, body.is-shared-route .sweep-toolbar > label, body.is-shared-route .version-actions { display: none !important; }
body.is-shared-route { grid-template-rows: minmax(0, 1fr); }
body.is-shared-route #sweep-view { display: grid; }
.editor-wide-button { width: 100%; height: 30px; margin-top: 6px; }
.waypoint-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; color: #53645a; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.waypoint-heading button { padding: 4px 6px; border: 1px solid #bdd0c2; border-radius: 5px; background: white; color: #176b45; cursor: pointer; font-size: 9px; }
.waypoint-heading button.is-armed { background: #176b45; color: white; }
.waypoint-list { display: flex; gap: 5px; min-height: 31px; margin: 6px 0 0; padding: 0; overflow-x: auto; list-style: none; }
.waypoint-list li { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 5px 6px; border: 1px solid #d2dbd4; border-radius: 6px; background: white; color: #53645a; font-size: 9px; }
.waypoint-list button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 4px; background: #f7e7e7; color: #a13c3c; cursor: pointer; }
#sweep-editor-hint { margin: 6px 0 0; color: #7b8980; font-size: 9px; line-height: 1.35; }
.sweep-waypoint-icon { background: transparent; border: 0; }
.sweep-waypoint-icon span { display: grid; width: 22px; height: 22px; place-items: center; border: 3px solid white; border-radius: 50%; background: #8c4e9c; box-shadow: 0 1px 8px rgba(0,0,0,.35); color: white; font-size: 9px; font-weight: 850; }
.sweep-waypoint-icon.is-selected span { width: 28px; height: 28px; border-color: #fff5a8; background: #c12678; box-shadow: 0 0 0 4px rgba(193,38,120,.22), 0 2px 12px rgba(0,0,0,.42); font-size: 11px; }
.sweep-anchor-icon { background: transparent; border: 0; }
.sweep-anchor-icon span { display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid white; border-radius: 6px; background: #25372d; box-shadow: 0 1px 8px rgba(0,0,0,.36); color: white; font-size: 10px; font-weight: 850; }
.sweep-anchor-icon.is-movable span { cursor: grab; background: #116f54; outline: 3px solid rgba(17,111,84,.22); }
.route-resolution { margin-top: 14px; padding: 14px; border: 2px solid #d7952f; border-radius: 14px; background: #fff9ea; }
.route-resolution-item { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 10px; background: white; border: 1px solid #e7d5ad; }
.route-resolution-item strong { color: #7b4b09; }
.route-resolution-item input[type="text"] { width: 100%; }
.route-resolution-candidates { display: flex; flex-wrap: wrap; gap: 6px; }
.route-resolution-candidates button { border: 1px solid #aac2b6; border-radius: 999px; background: #f4faf7; padding: 5px 9px; color: #245b45; }
.route-version-row-has-issue { outline: 2px solid #d7952f; border-radius: 9px; background: #fff8e8; }
.sweep-video-dialog { width: min(980px, calc(100vw - 28px)); max-width: 980px; }
.sweep-video-dialog form { max-height: calc(100vh - 34px); overflow-y: auto; }
.video-settings-grid { display: grid; grid-template-columns: 2fr 1.25fr 1fr; gap: 10px; margin: 12px 0; }
.video-settings-grid label { color: #53645a; font-size: 10px; font-weight: 760; }
.video-settings-grid input, .video-settings-grid select { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid #cbd6ce; border-radius: 7px; background: white; color: var(--ink); }
.video-settings-grid input[type="range"] { height: 32px; padding: 0; border: 0; accent-color: #176b45; }
.video-range-label output { float: right; color: #176b45; font-weight: 850; }
#sweep-video-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid #cbd6ce; border-radius: 12px; background: #edf1eb; box-shadow: 0 8px 25px rgba(20,40,28,.12); }
.sweep-video-dialog .dialog-note { margin: 9px 0 0; }
@media (max-width: 760px) { .video-settings-grid { grid-template-columns: 1fr 1fr; } .video-settings-grid label:first-child { grid-column: 1 / -1; } }
.sweep-edit-toolbar { position: absolute; z-index: 1002; right: 18px; bottom: 18px; left: 320px; display: grid; grid-template-columns: minmax(190px,1fr) auto; align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1px solid #c9b0d0; border-radius: 12px; background: rgba(255,253,255,.98); box-shadow: 0 10px 32px rgba(48,24,55,.24); }
.sweep-edit-toolbar[hidden] { display: none; }
.sweep-edit-context { min-width: 0; }
.sweep-edit-context > span { display: block; color: #8c4e9c; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.sweep-edit-context strong { display: block; overflow: hidden; margin-top: 2px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sweep-edit-context small { display: block; margin-top: 3px; color: #59675f; font-size: 10px; font-variant-numeric: tabular-nums; }
.sweep-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sweep-edit-actions button { min-height: 34px; cursor: pointer; }
.sweep-edit-actions button.is-armed { border-color: #176b45; background: #176b45; color: white; box-shadow: 0 0 0 3px rgba(23,107,69,.16); }
.sweep-edit-actions .danger-button:not(:disabled) { border-color: #d5a5a5; color: #a63333; }
.sweep-edit-toolbar > p { grid-column: 1 / -1; margin: -2px 0 0; color: #6c776f; font-size: 10px; }
.sweep-edit-toolbar > p.is-error { color: #b33030; font-weight: 750; }
.waypoint-list li.is-selected { border-color: #bd6dcc; background: #f8ecfa; color: #6f2d7c; }
.waypoint-list li > button:first-child { width: auto; height: auto; padding: 2px 4px; background: transparent; color: inherit; font-weight: 800; }
.sweep-preview-bar { position: absolute; z-index: 1000; right: 16px; bottom: 16px; left: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid #d8b9df; border-radius: 9px; background: rgba(255,251,255,.97); box-shadow: 0 7px 24px rgba(58,27,65,.2); }
.sweep-map-wrap.is-editing .sweep-preview-bar { right: auto; bottom: 120px; left: 320px; max-width: 510px; }
.sweep-preview-bar[hidden] { display: none; }
.sweep-preview-bar strong { display: block; color: #7c368b; font-size: 11px; }
.sweep-preview-bar span { display: block; margin-top: 2px; color: #675a69; font-size: 9px; }
.sweep-preview-bar > div:last-child { display: flex; gap: 6px; }
.sweep-preview-bar .play-button { min-width: 84px; height: 32px; }

.instruction-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid #cbd8cf; border-radius: 14px; background: #fffefa; color: var(--ink); box-shadow: 0 24px 70px rgba(25,45,33,.28); }
.instruction-dialog::backdrop { background: rgba(18,32,23,.46); backdrop-filter: blur(2px); }
.instruction-dialog form { padding: 20px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.dialog-heading span { color: #176b45; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.dialog-heading h2 { margin: 3px 0 0; font-size: 20px; }
.dialog-heading > button { width: 30px; height: 30px; border: 1px solid #cbd6ce; border-radius: 7px; background: white; cursor: pointer; font-size: 18px; }
.dialog-position { margin: 12px 0; padding: 9px 10px; border-radius: 7px; background: #edf4ef; color: #315a44; font-size: 11px; }
.instruction-dialog label { display: grid; gap: 5px; color: #53645a; font-size: 10px; font-weight: 760; }
.instruction-dialog input, .instruction-dialog select { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid #c7d3ca; border-radius: 7px; background: white; color: var(--ink); font: inherit; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 12px; }
.dialog-note { margin: 13px 0 0; color: #68766d; font-size: 10px; line-height: 1.55; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.dialog-actions button { min-height: 36px; }
.route-version-dialog { width: min(720px, calc(100vw - 32px)); }
.bulk-instruction-label { margin-top: 14px; }
.instruction-dialog textarea { width: 100%; padding: 8px 9px; resize: vertical; border: 1px solid #c7d3ca; border-radius: 7px; background: white; color: var(--ink); font: inherit; line-height: 1.5; }
.route-version-import-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.route-version-list-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-bottom: 7px; border-bottom: 1px solid #dbe3dd; color: #4e5f54; font-size: 11px; }
.route-version-list { display: grid; gap: 6px; max-height: 300px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; counter-reset: route-draft; }
.route-version-list li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 7px; counter-increment: route-draft; }
.route-version-list li::before { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #cbd6ce; border-radius: 50%; color: #68776e; content: counter(route-draft); font-size: 9px; font-weight: 800; }
.route-version-list input { min-height: 34px; }
.route-version-row-actions { display: flex; gap: 3px; }
.route-version-row-actions button { width: 30px; height: 30px; padding: 0; border: 1px solid #ccd7cf; border-radius: 5px; background: white; color: #53645a; cursor: pointer; }
.route-version-row-actions button:last-child { color: #a63333; }
.share-dialog label { margin-top: 12px; }
.share-dialog input[readonly] { color: #315a44; font-size: 10px; }

.sweep-timeline { z-index: 1001; display: grid; grid-template-columns: 360px minmax(0,1fr); align-items: center; gap: 24px; padding: 13px 22px; border-top: 1px solid #cfd9d1; background: #fffefa; box-shadow: 0 -5px 18px rgba(24,44,32,.07); }
.sweep-transport { display: flex; align-items: center; gap: 7px; }
.sweep-transport .speed-label { margin-left: 8px; }
.sweep-transport .speed-label select { min-width: 72px; }
.sweep-progress-control { min-width: 0; }
.sweep-progress-labels { display: flex; justify-content: space-between; color: #728078; font-size: 10px; }
.sweep-progress-labels strong { color: #176b45; font-size: 12px; }
#sweep-slider { width: 100%; height: 26px; margin: 2px 0 0; accent-color: #e67836; cursor: pointer; }
.sweep-progress-control p { margin: 0; color: #7b8780; font-size: 9px; text-align: center; }

.sweep-arrow-icon { background: transparent; border: 0; }
.sweep-arrow-icon span { display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid white; border-radius: 50%; background: #173f2c; box-shadow: 0 1px 6px rgba(0,0,0,.28); color: white; font-size: 11px; transform-origin: center; }
.sweep-vehicle-icon { background: transparent; border: 0; }
.sweep-vehicle-dot { display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid white; border-radius: 50%; background: #e67836; box-shadow: 0 2px 11px rgba(0,0,0,.34); color: white; font-size: 11px; font-weight: 850; }
.sweep-landmark-icon { background: transparent; border: 0; }
.sweep-landmark-icon span { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid white; border-radius: 10px; background: var(--landmark-color, #173f2c); box-shadow: 0 2px 10px rgba(0,0,0,.26); color: white; font-size: 15px; font-weight: 850; }
.sweep-landmark-icon.is-rest span { background: #8c4e2d; }
.sweep-landmark-icon.is-uturn span { background: #385e7a; }
.landmark-manager { margin: 0 0 14px; padding: 12px; border: 1px solid #d9e2dc; border-radius: 11px; background: #f8faf7; }
.landmark-manager-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.landmark-manager-heading > div { display: grid; gap: 2px; }
.landmark-manager-heading span { color: #758279; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.landmark-manager-heading strong { color: var(--ink); font-size: 14px; }
.landmark-manager-note { margin: 7px 0 9px; color: #6b786f; font-size: 10px; line-height: 1.45; }
.landmark-list { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.landmark-list li button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 7px; border: 1px solid transparent; border-radius: 8px; background: white; color: inherit; text-align: left; }
.landmark-list li button:not(:disabled):hover { border-color: #aebfb3; background: #f0f6f1; cursor: pointer; }
.landmark-list li button:disabled { opacity: 1; }
.landmark-list li.is-hidden { opacity: .56; }
.landmark-list-icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 8px; background: var(--landmark-color, #385e7a); color: white; font-size: 12px; font-weight: 850; }
.landmark-list li button > span:last-child { display: grid; min-width: 0; gap: 1px; }
.landmark-list strong, .landmark-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landmark-list strong { font-size: 11px; }
.landmark-list small { color: #758279; font-size: 9px; }
.landmark-list-empty { padding: 8px 2px; color: #7b887f; font-size: 10px; }
.landmark-visible { display: flex !important; grid-template-columns: 18px 1fr; align-items: center; margin: 10px 0; }
.landmark-visible input { width: 16px !important; min-height: 16px !important; }
.landmark-dialog input[type="color"] { padding: 3px; }
.sweep-label { padding: 5px 8px; border: 0; border-radius: 5px; background: rgba(255,255,252,.94); box-shadow: 0 2px 9px rgba(20,40,28,.18); color: #173f2c; font-size: 10px; font-weight: 780; }
.segment-tooltip { font-size: 11px; font-weight: 720; }

@media (max-width: 900px) {
  body { grid-template-rows: 48px minmax(0,1fr); overflow: hidden; }
  .viewer-tabs { height: 48px; padding: 0 8px; }
  .viewer-tab { height: 48px; padding: 0 12px; }
  .sweep-shell { grid-template-rows: auto 1fr auto; }
  .sweep-topbar { align-items: flex-start; padding: 9px 12px; }
  .sweep-brand p { display: none; }
  .sweep-toolbar { flex-wrap: wrap; justify-content: end; }
  .sweep-toolbar select { min-width: 190px; }
  .sweep-workspace { grid-template-columns: minmax(0,1fr) 285px; }
  .sweep-edit-toolbar { left: 18px; grid-template-columns: 1fr; }
  .sweep-edit-actions { justify-content: flex-start; }
  .sweep-status-card { width: 235px; }
  .sweep-timeline { grid-template-columns: 300px minmax(0,1fr); padding: 10px 12px; }
}