@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink: #17221f; --muted: #71807c; --line: #dbe5df; --paper: #f5f7f3; --green: #133e34; --mint: #bce9c7; --lime: #d2ef50; --orange: #f29a63; }
.install-app-button { background: transparent; border: 0; cursor: pointer; padding: 0; }
.download-menu { position: relative; }
.download-menu > summary { list-style: none; }
.download-menu > summary::-webkit-details-marker { display: none; }
.download-options { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; display: grid; min-width: 190px; gap: 10px; padding: 12px; background: #fcfdf9; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 28px rgba(23, 34, 31, 0.16); }
.download-options .package-link-secondary { text-align: left; }
* { box-sizing: border-box; }
body { margin: 0; background: #dfe9df; color: var(--ink); font-family: Manrope, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; max-width: 1600px; margin: auto; background: var(--paper); }
.topbar { height: 78px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; background: #fcfdf9; border-bottom: 1px solid var(--line); }
.brand { color: var(--green); display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--lime); border-radius: 10px; font: 500 12px 'DM Mono', monospace; transform: rotate(-5deg); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }.location-pill { color: var(--muted); font: 12px 'DM Mono', monospace; border: 0; background: transparent; padding: 0; cursor: pointer; }.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #61c67b; margin-right: 7px; }.package-menu { display: flex; align-items: center; gap: 10px; }.package-button { display: inline-block; padding: 9px 16px; border: 1px solid var(--green); background: var(--green); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer; text-decoration: none; }.package-button:hover { background: #0e2f27; border-color: #0e2f27; }.package-link-secondary { color: var(--muted); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }.package-link-secondary:hover { color: var(--green); }.icon-button, .avatar { border: 0; background: transparent; color: var(--muted); font-size: 18px; }.avatar { display: grid; place-items: center; width: 32px; height: 32px; color: var(--green); background: var(--mint); border-radius: 50%; font-size: 12px; font-weight: 800; }
.workspace { display: grid; grid-template-columns: 395px 1fr; min-height: calc(100vh - 78px); }.sidebar { padding: 38px 30px 24px; background: #fcfdf9; border-right: 1px solid var(--line); }.sidebar-heading { display: flex; justify-content: space-between; gap: 15px; }.kicker, .live-label { margin: 0 0 10px; color: #84938d; font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }.sidebar h1 { max-width: 250px; margin: 0 0 26px; color: var(--green); font-size: 27px; line-height: 1.15; letter-spacing: -.055em; }.shield { color: var(--orange); font-size: 28px; }
.search-form { position: relative; display: flex; align-items: center; margin-bottom: 14px; }.search-form input, .route-row input, .modal input { width: 100%; border: 1px solid var(--line); background: #f4f7f2; color: var(--ink); outline: 0; }.search-form input { padding: 14px 43px; border-radius: 7px; font-size: 12px; }.search-form input:focus, .route-row input:focus, .modal input:focus { border-color: #8eab9a; box-shadow: 0 0 0 3px #dcefdc; }.search-icon { position: absolute; left: 15px; color: var(--muted); font-size: 22px; }.search-submit { position: absolute; right: 8px; border: 0; background: var(--green); color: white; width: 27px; height: 27px; border-radius: 5px; }
.route-box { padding: 14px; border: 1px solid var(--line); border-radius: 8px; }.route-row { display: flex; align-items: center; gap: 10px; }.route-row input { padding: 6px 0; border: 0; background: transparent; font-size: 12px; outline: 0; }.route-pin { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }.origin { border: 2px solid #6f9381; }.destination { background: var(--orange); }.route-line { height: 14px; margin: -1px 0 -1px 4px; border-left: 1px dashed #9bb1a5; }.route-button { width: 100%; margin-top: 13px; padding: 12px 15px; border: 0; border-radius: 5px; background: var(--green); color: white; font-size: 12px; font-weight: 800; transition: transform .2s, background .2s; }.route-button:hover { background: #235749; transform: translateY(-1px); }.route-button span { color: var(--lime); margin-right: 5px; }
.privacy-card { margin: 14px 0 26px; padding: 17px; color: white; background: var(--green); border-radius: 8px; }.privacy-card-top { display: flex; align-items: center; gap: 9px; }.privacy-icon { color: var(--lime); font-size: 18px; }.privacy-card .live-label { color: #9eb5a9; margin: 0; }.privacy-card h2 { margin: 14px 0 6px; font-size: 15px; letter-spacing: -.03em; }.privacy-card p { margin: 0; color: #bdd0c3; font-size: 11px; line-height: 1.6; }.privacy-stats { display: flex; justify-content: space-between; margin-top: 16px; color: #bdd0c3; font: 9px 'DM Mono', monospace; }.privacy-stats strong { color: var(--lime); font-size: 15px; }.verified { color: #bce9c7; }.verified span { color: var(--lime); }.toggle { width: 35px; height: 19px; margin-left: auto; padding: 2px; border: 0; background: #506b60; border-radius: 20px; }.toggle span { display: block; width: 15px; height: 15px; background: white; border-radius: 50%; transition: transform .2s; }.toggle.is-on { background: var(--lime); }.toggle.is-on span { transform: translateX(16px); }
.section-label { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 12px; font-weight: 800; }.layer-count { color: var(--muted); font: 9px 'DM Mono', monospace; font-weight: 400; }.layer-list { border-top: 1px solid var(--line); }.layer-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }.layer-item strong, .layer-item small { display: block; }.layer-item strong { font-size: 11px; }.layer-item small { color: var(--muted); margin-top: 3px; font-size: 10px; }.layer-swatch { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; font-weight: 800; }.camera-swatch { color: #c96336; background: #fae4d8; }.route-swatch { color: #36845c; background: #d6edd8; }.traffic-swatch { color: #cf9a2a; background: #f9ecc9; }.layer-check { position: absolute; opacity: 0; }.custom-check { width: 15px; height: 15px; margin-left: auto; border: 1px solid #a9bcb0; border-radius: 3px; }.layer-check:checked + .custom-check { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px #fcfdf9; }.report-button { width: 100%; margin-top: 20px; padding: 11px; color: var(--green); background: transparent; border: 1px dashed #a5b9ac; border-radius: 5px; font-size: 11px; font-weight: 800; }.report-button span { color: var(--orange); font-size: 16px; }.sidebar-footnote { margin: 20px 3px 0; color: #99a59f; font-size: 9px; line-height: 1.5; }
.map-panel { position: relative; overflow: hidden; background: #e7ead9; }.map-toolbar { position: absolute; z-index: 3; top: 25px; left: 27px; right: 27px; display: flex; justify-content: space-between; }.map-mode { display: flex; overflow: hidden; border: 1px solid #ccd8cc; background: rgba(252,253,249,.92); border-radius: 5px; box-shadow: 0 4px 15px #7e947e24; }.mode-button, .locate-button { padding: 9px 14px; color: var(--muted); border: 0; background: transparent; font-size: 10px; font-weight: 800; }.mode-button.active { color: var(--green); background: white; }.locate-button { border: 1px solid #ccd8cc; border-radius: 5px; background: rgba(252,253,249,.92); box-shadow: 0 4px 15px #7e947e24; }.locate-button span { color: var(--green); font-size: 17px; vertical-align: -2px; margin-right: 4px; }.map-canvas { position: absolute; inset: 0; background: #e6eadb; transition: filter .4s; }.map-canvas.satellite-mode { filter: saturate(.55) contrast(1.1) brightness(.88); }.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }.river { fill: #c5e2dc; }.water-lines path { fill: none; stroke: #add3cc; stroke-width: 2; opacity: .7; }.minor-roads path { fill: none; stroke: #d2d8c5; stroke-width: 8; }.major-roads path { fill: none; stroke: #faf8e9; stroke-width: 18; }.major-roads path + path { stroke: #fffdf2; stroke-width: 11; }.traffic-lines path { fill: none; stroke: #efbd70; stroke-width: 3; stroke-dasharray: 7 12; }.parks { fill: #c5dbb9; stroke: #b8d1ae; stroke-width: 2; }.map-label { position: absolute; z-index: 1; color: #91a097; font: 10px 'DM Mono', monospace; letter-spacing: .1em; pointer-events: none; }.label-river { top: 16%; right: 11%; color: #86ada5; transform: rotate(57deg); }.neighborhood { color: #a8b1a5; }.north { top: 24%; left: 19%; }.west { top: 60%; left: 7%; }.east { top: 39%; right: 17%; }.south { bottom: 17%; left: 38%; }
.camera-marker circle { fill: #f29a63; stroke: #fffaf0; stroke-width: 3; filter: drop-shadow(0 3px 3px #6d7a5d55); }.camera-marker text { fill: white; text-anchor: middle; font: 14px sans-serif; }.privacy-route { fill: none; stroke: #258256; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px #52785d55); }.privacy-route.route-pulse { stroke: var(--lime); stroke-width: 12; transition: stroke-width .25s; }.current-location circle:last-child { fill: #2876b4; stroke: white; stroke-width: 4; }.location-halo { fill: #71aee055; animation: halo 2.2s infinite; }.destination-marker path { fill: var(--orange); stroke: #fffaf0; stroke-width: 3; filter: drop-shadow(0 3px 3px #6d7a5d55); }.destination-marker circle { fill: white; }.layer-hidden { display: none; }.privacy-off .camera-layer { opacity: .18; }.privacy-off .route-layer { opacity: .25; }.map-zoom { position: absolute; z-index: 2; right: 27px; bottom: 27px; display: grid; border: 1px solid #ccd8cc; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 15px #7e947e24; }.map-zoom button { width: 34px; height: 32px; color: var(--green); background: rgba(252,253,249,.92); border: 0; font-size: 18px; }.map-zoom button + button { border-top: 1px solid var(--line); }.map-legend { position: absolute; z-index: 2; bottom: 29px; left: 27px; display: flex; gap: 17px; padding: 9px 12px; color: #65776b; background: #fcfdf9dd; border-radius: 5px; font: 9px 'DM Mono', monospace; }.map-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }.legend-camera { background: var(--orange); }.legend-route { width: 17px !important; height: 3px !important; border-radius: 0 !important; background: #258256; vertical-align: 2px; }.map-toast { position: absolute; z-index: 4; top: 25px; left: 50%; padding: 9px 14px; color: white; background: var(--green); border-radius: 20px; font: 10px 'DM Mono', monospace; opacity: 0; transform: translate(-50%, -10px); transition: opacity .25s, transform .25s; pointer-events: none; }.map-toast.visible { opacity: 1; transform: translate(-50%, 0); }.route-summary { position: absolute; z-index: 5; left: 27px; top: 85px; display: none; align-items: center; gap: 12px; width: 278px; padding: 12px; border: 1px solid #c9ded0; border-radius: 7px; background: #fcfdf9eF; box-shadow: 0 8px 22px #58705922; }.route-summary.visible { display: flex; animation: slide-in .3s ease-out; }.summary-icon { display: grid; place-items: center; width: 31px; height: 31px; color: #267d51; background: #d6edd8; border-radius: 5px; }.route-summary strong, .route-summary span { display: block; }.route-summary strong { font-size: 11px; }.route-summary span { margin-top: 3px; color: var(--muted); font: 9px 'DM Mono', monospace; }.route-summary button { margin-left: auto; color: var(--muted); border: 0; background: transparent; font-size: 18px; }
.modal-backdrop[hidden] { display: none; }.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: #13231f88; }.modal { position: relative; width: min(100%, 390px); padding: 30px; background: #fcfdf9; border-radius: 9px; box-shadow: 0 20px 60px #13231f44; }.modal h2 { margin: 0 0 8px; color: var(--green); font-size: 23px; letter-spacing: -.05em; }.modal p:not(.kicker) { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }.modal label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; }.modal input { padding: 12px; border-radius: 5px; font-size: 12px; }.modal .route-button { margin-top: 17px; }.modal-close { position: absolute; top: 15px; right: 17px; border: 0; color: var(--muted); background: transparent; font-size: 23px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.route-summary, .route-button, .report-button { transition: all .2s ease; }
@keyframes halo { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: .35; } } @keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.leaflet-map { position: absolute; inset: 0; z-index: 0; min-height: 100%; background: #e6eadb; }.leaflet-container { font-family: Manrope, sans-serif; }.leaflet-control-attribution { font: 9px 'DM Mono', monospace; }.camera-dot { display: grid; place-items: center; width: 28px !important; height: 28px !important; margin-left: -14px !important; margin-top: -14px !important; color: white; background: var(--orange); border: 3px solid #fffaf0; border-radius: 50%; box-shadow: 0 5px 12px #3a4b3f44; font-size: 12px; font-weight: 800; }.current-dot { width: 24px !important; height: 24px !important; margin-left: -12px !important; margin-top: -12px !important; background: #2876b4; border: 4px solid white; border-radius: 50%; box-shadow: 0 0 0 12px #71aee055; }.destination-dot { width: 28px !important; height: 28px !important; margin-left: -14px !important; margin-top: -28px !important; background: var(--orange); border: 3px solid #fffaf0; border-radius: 50% 50% 50% 0; box-shadow: 0 5px 12px #3a4b3f44; transform: rotate(-45deg); }.destination-dot::after { content: ''; position: absolute; inset: 7px; background: white; border-radius: 50%; }.map-canvas.privacy-off .leaflet-marker-icon.camera-dot { opacity: .22; }.map-canvas.privacy-off .leaflet-overlay-pane svg path { opacity: .32; }.legend-current { background: #2876b4; }.route-summary { position: absolute; z-index: 3; top: 84px; left: 27px; width: min(285px, calc(100% - 54px)); padding: 16px; background: #fcfdf9ee; border: 1px solid #dbe5df; border-radius: 7px; box-shadow: 0 10px 35px #4c5b4d24; opacity: 0; pointer-events: none; transform: translateY(-8px); }.route-summary.visible { opacity: 1; pointer-events: auto; transform: translateY(0); animation: slide-in .25s ease; }.route-summary button { position: absolute; top: 9px; right: 10px; border: 0; background: transparent; color: var(--muted); font-size: 18px; }.route-summary strong, .route-summary span { display: block; }.route-summary strong { color: var(--green); font-size: 14px; }.route-summary span { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 800px) { .topbar { height: 64px; padding: 0 18px; }.location-pill, .icon-button { display: none; }.package-button { padding: 8px 10px; font-size: 10px; line-height: 1.2; }.workspace { display: block; }.sidebar { padding: 25px 18px 22px; border-right: 0; }.sidebar h1 { margin-bottom: 18px; font-size: 24px; }.privacy-card { margin-bottom: 20px; }.layer-list { display: grid; grid-template-columns: 1fr 1fr; }.layer-item { padding-right: 10px; }.layer-item:last-child { grid-column: 1 / -1; }.map-panel { min-height: 67vh; }.map-toolbar { top: 15px; left: 15px; right: 15px; }.map-legend { left: 15px; bottom: 15px; }.map-zoom { right: 15px; bottom: 15px; }.route-summary { left: 15px; top: 70px; width: calc(100% - 30px); }.map-toast { top: 70px; } }
.route-button:disabled { cursor: wait; opacity: .65; }
.gps-button { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; padding: 0; color: var(--green); border: 1px solid var(--line); border-radius: 5px; background: #fcfdf9; font-size: 16px; }
.gps-button:hover { background: var(--mint); }
.account-modal label { margin-top: 14px; }
.account-modal input { width: 100%; }
.form-message { min-height: 18px; margin: 12px 0 0 !important; color: #b94c32 !important; font-size: 11px !important; }
.form-message.is-success { color: #277850 !important; }
.account-switch, .account-signout { display: block; width: 100%; margin-top: 14px; padding: 5px; color: var(--green); border: 0; background: transparent; font-size: 11px; font-weight: 800; text-align: center; }
.account-signout { color: #9d3d2a; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-image-row { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.profile-preview { width: 58px; height: 58px; border: 2px solid var(--mint); border-radius: 50%; background: var(--mint); object-fit: cover; }
.photo-picker { margin: 0 !important; padding: 9px 11px; color: var(--green); border: 1px solid var(--line); border-radius: 5px; background: var(--paper); font-size: 11px !important; cursor: pointer; }
.traffic-settings-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.traffic-settings-button:hover { color: var(--green); }
.traffic-swatch { color: #b25b27; background: #f8e5cf; }
.map-canvas.satellite-mode { filter: none; }
.leaflet-traffic-pane { pointer-events: none; }
.traffic-key-status { min-height: 18px; }
.legend-route { background: #1678e8; }
.legend-traffic { width: 17px !important; height: 3px !important; border-radius: 0 !important; background: linear-gradient(90deg, #4c9a62 0 32%, #e2bd37 32% 66%, #df543e 66%); vertical-align: 2px; }
@media (max-width: 800px) { .layer-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.report-location-pick { width: 100%; margin-top: 10px; padding: 10px; color: var(--green); background: #edf4eb; border: 1px solid #cbdccf; border-radius: 5px; font-size: 11px; font-weight: 800; }
.report-coordinate-status { min-height: 18px; margin: 9px 0 0 !important; font: 10px 'DM Mono', monospace; }
.moderation-panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.moderation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.moderation-heading h3 { margin: 0; color: var(--green); font-size: 13px; }
.moderation-refresh, .moderation-actions button { padding: 7px 9px; color: var(--green); background: #edf4eb; border: 1px solid #cbdccf; border-radius: 4px; font-size: 10px; font-weight: 800; }
.moderation-list { display: grid; gap: 10px; max-height: 32vh; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.moderation-report { display: grid; gap: 6px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; }
.moderation-report strong { color: var(--ink); font-size: 11px; }
.moderation-report > span { color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.moderation-actions { display: flex; gap: 7px; }
.moderation-actions button[data-report-status="approved"] { color: #fff; background: var(--green); }
body.is-picking-camera #liveMap { cursor: crosshair; }
.account-switch[hidden], .account-signout[hidden] { display: none; }
.turn-list li.is-current { padding-left: 8px; color: var(--green); background: #eaf3e9; border-left: 3px solid #1678e8; font-weight: 800; }
.navigation-status { margin: 10px 0 0 !important; padding: 9px; color: var(--green) !important; background: #eaf3e9; border-radius: 4px; font-size: 10px !important; line-height: 1.45; }
.navigation-stop { color: #713626; background: #f4e8e4; }
@media (min-width: 801px) { .workspace { grid-template-columns: 360px minmax(0, 1fr); }.sidebar { padding: 28px 22px 22px; } }
@media (max-width: 800px) {
	.workspace { display: flex; flex-direction: column; }
	.map-panel { order: -1; min-height: 62svh; }
	.sidebar { order: 1; padding-top: 24px; }
	#searchForm { position: fixed; z-index: 8; top: 75px; left: 15px; right: 15px; margin: 0; }
	.route-summary { top: 125px; }
	.map-toast { top: 119px; }
}
@media (max-width: 800px) { .avatar { display: grid; } .account-modal { padding: 25px 22px; } }
.route-row input, .layer-item > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-summary { max-height: min(65vh, 560px); overflow-x: hidden; overflow-y: auto; }
.route-summary.visible { display: block; }
.route-summary strong, .route-summary span, .turn-list li { overflow-wrap: anywhere; word-break: normal; }
.turn-list { width: 100%; margin: 14px 0 0; padding: 0 8px 0 22px; max-height: min(42vh, 360px); overflow-y: auto; color: var(--ink); font-size: 11px; line-height: 1.45; }
.turn-list li { padding: 7px 4px; border-top: 1px solid var(--line); }
.location-pill.is-error .status-dot { background: var(--orange); }
@media (max-width: 800px) { .route-summary { max-height: calc(67vh - 85px); }.turn-list { max-height: calc(67vh - 220px); } }