:root { --ink:#16251f; --muted:#64756c; --line:#dbe4de; --surface:#f5f7f3; --green:#126a45; --green-dark:#0c5034; --mint:#d9f0df; --amber:#c67a08; --red:#b63b35; --navy:#214764; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--surface); font:14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select, input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:390px minmax(0,1fr); }
.panel { z-index:2; min-height:100vh; padding:22px 20px 12px; background:#fff; box-shadow:5px 0 18px #16342414; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:0 2px 18px; border-bottom:1px solid var(--line); }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:11px; font-size:19px; font-weight:800; }
h1,h2,h3,p { margin:0; } h1 { font-size:20px; letter-spacing:-.4px; } .brand p { color:var(--muted); font-size:12px; }
.status-dot { margin-left:auto; padding:4px 7px; border-radius:999px; background:#edf2ee; color:var(--muted); font-size:11px; white-space:nowrap; }.status-dot::before { content:""; width:6px; height:6px; display:inline-block; margin-right:5px; border-radius:50%; background:currentColor; }.status-ready { background:#e4f5e9; color:#13713c; }.status-error { background:#fceceb; color:#ae302b; }.status-loading { color:#a87014; }
.control-section { padding:17px 1px; border-bottom:1px solid var(--line); }.area-section { padding-top:16px; }
label, legend { display:block; color:#405249; font-size:12px; font-weight:700; margin-bottom:6px; } select, input[type=number] { width:100%; border:1px solid #c8d5cc; border-radius:8px; color:var(--ink); background:#fff; padding:9px 10px; } select:focus, input:focus, button:focus-visible { outline:3px solid #81bfa2; outline-offset:2px; }
.muted,.instruction,.raster-note,.uncertainty-help { margin-top:7px; color:var(--muted); font-size:12px; }.raster-note,.uncertainty-help { font-size:11px; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.section-heading h2 { font-size:14px; }.text-button { padding:2px; border:0; color:var(--green); background:transparent; font-size:12px; font-weight:700; }.text-button:hover { text-decoration:underline; }
.point-row { margin-top:8px; }.point-select { width:100%; display:flex; align-items:center; gap:10px; border:1px solid #d4ded7; border-radius:9px; padding:8px 10px; text-align:left; background:#fff; }.point-select.active { border-color:var(--green); box-shadow:0 0 0 2px #cce9d7; }.point-select strong,.point-select small { display:block; }.point-select small { color:var(--muted); font-size:11px; font-weight:400; }.point-pin { width:11px; height:11px; flex:0 0 auto; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 2px currentColor; }.start-pin { color:var(--green); background:var(--green); }.destination-pin { color:#c24234; background:#c24234; }.secondary-button { width:100%; margin-top:10px; padding:8px; border:1px solid #c8d5cc; border-radius:8px; color:var(--green-dark); background:#f8fbf8; font-size:12px; font-weight:700; }.secondary-button:disabled,.calculate-button:disabled { cursor:not-allowed; opacity:.5; }
.profile-summary { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }.profile-summary span { padding:3px 6px; border-radius:99px; color:#365246; background:#edf4ef; font-size:11px; }.advanced-profile { margin-top:12px; padding:12px; border-radius:9px; background:#f5f8f5; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.field-grid label { font-size:11px; }.field-grid input { margin-top:4px; padding:7px; }.advanced-profile fieldset { margin:12px 0 8px; padding:0; border:0; }.advanced-profile legend { margin-bottom:5px; }.check-options { display:flex; flex-wrap:wrap; gap:5px; }.check-options label { display:inline-flex; align-items:center; gap:4px; margin:0; padding:3px 6px; border:1px solid #ced9d1; border-radius:5px; background:#fff; font-size:10px; font-weight:500; }.check-options input { width:auto; margin:0; }.switch-row { display:flex; align-items:center; gap:6px; margin:9px 0; font-size:12px; font-weight:500; }.switch-row input { width:auto; margin:0; }.raster-switch { margin:12px 0 0; }
.calculate-button { width:100%; margin-top:18px; border:0; border-radius:9px; padding:11px; color:#fff; background:var(--green); font-weight:800; }.calculate-button:not(:disabled):hover { background:var(--green-dark); }.form-message { min-height:18px; margin-top:6px; color:var(--muted); font-size:12px; }.form-message.error { color:var(--red); }.form-message.loading { color:#9a650e; }
.results { margin:3px -2px 12px; padding:13px 12px; border:1px solid #cfe2d5; border-radius:11px; background:#f8fcf8; }.route-state { padding:3px 6px; border-radius:99px; color:#17633e; background:#dff2e4; font-size:10px; font-weight:700; }.metrics { display:grid; grid-template-columns:1fr 1fr 1fr; margin:12px 0; }.metrics div { padding:0 8px; border-left:1px solid #d9e4dc; }.metrics div:first-child { border-left:0; padding-left:0; }.metrics span,.metrics small { display:block; }.metrics span { font-size:17px; font-weight:800; letter-spacing:-.4px; }.metrics small { color:var(--muted); font-size:10px; }.lidar-metrics { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:-4px 0 12px; }.lidar-metrics div { padding:5px 7px; border:1px solid #dce7df; border-radius:5px; background:#fff; }.lidar-metrics small,.lidar-metrics span { display:block; }.lidar-metrics small { color:var(--muted); font-size:9px; }.lidar-metrics span { font-size:11px; font-weight:700; }.performance-card { margin:-4px 0 12px; padding:6px 8px; border-left:3px solid #7a9383; color:#50645a; background:#eff5f0; font-size:10px; }.elevation-card { padding:9px; border:1px solid #dce7df; border-radius:8px; background:#fff; }.elevation-card h3 { margin-bottom:4px; font-size:11px; }.elevation-card svg { display:block; width:100%; height:104px; }.warning-list { margin-top:11px; }.warning { display:flex; gap:7px; margin-top:5px; padding:7px; border-left:3px solid var(--amber); border-radius:3px; color:#76510c; background:#fff8e8; font-size:11px; }.warning::before { content:"!"; display:grid; place-items:center; flex:0 0 14px; height:14px; border-radius:50%; color:white; background:var(--amber); font-size:10px; font-weight:800; }.segment-heading { display:flex; justify-content:space-between; margin-top:13px; color:#41564a; font-weight:700; font-size:11px; }.segment-heading span { color:var(--muted); font-weight:400; }.segment-list { max-height:185px; margin:7px 0 0; padding-left:21px; overflow:auto; }.segment-list li { padding:5px 3px 5px 2px; border-bottom:1px solid #e5ece7; font-size:11px; }.segment-list li:last-child { border:0; }.segment-list button { display:block; width:100%; padding:0; border:0; color:inherit; background:transparent; text-align:left; }.segment-list button:hover { color:var(--green); }.segment-meta { color:var(--muted); }
footer { padding:12px 1px 0; color:var(--muted); font-size:10px; } footer a { color:var(--green); }
.map-wrap { position:relative; min-height:100vh; background:#e9eeea; }.leaflet-container { font:inherit; }.map-overlay { position:absolute; top:18px; left:50%; z-index:1000; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #d6e0d9; border-radius:99px; color:#385044; background:#fff; box-shadow:0 3px 12px #0002; font-size:12px; }.spinner { width:13px; height:13px; border:2px solid #b5d2be; border-top-color:var(--green); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }.map-overlay.error { color:#9e302b; border-color:#e6c1bd; }.map-key { position:absolute; right:14px; bottom:18px; z-index:800; display:flex; flex-direction:column; gap:5px; padding:8px 10px; border:1px solid #d9e2dc; border-radius:7px; background:#fffffff0; box-shadow:0 2px 7px #0001; font-size:10px; }.key-line { display:inline-block; width:20px; vertical-align:middle; margin-right:5px; border-top:3px solid; }.key-line.network { border-color:#94a29a; }.key-line.route { border-color:var(--green); }.key-line.caution { border-color:var(--amber); }.key-line.raster-good { border-color:#23864c; }.key-line.raster-low { border-color:#d39b20; }.key-line.raster-obstacle { border-color:#bf443d; }.key-line.raster-unknown { border-color:#9ca3a0; }.robot-marker { width:26px; height:26px; display:grid; place-items:center; border:3px solid #fff; border-radius:50% 50% 50% 4px; transform:rotate(-45deg); color:#fff; box-shadow:0 1px 5px #0005; }.robot-marker span { transform:rotate(45deg); font-size:12px; }.robot-marker.start { background:var(--green); }.robot-marker.destination { background:#c24234; }.map-popup { min-width:170px; color:var(--ink); font:12px/1.4 Inter,system-ui,sans-serif; }.map-popup strong { display:block; margin-bottom:3px; }.map-popup p { margin:2px 0; }.map-popup .popup-warning { color:#8a5b0c; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:760px) { .app-shell { display:block; }.panel { min-height:auto; max-height:58vh; overflow:auto; }.map-wrap { height:42vh; min-height:320px; }.map-key { display:none; }.results { margin-bottom:0; } }

[hidden] { display:none !important; }
#map { position:absolute; inset:0; }
@media (min-width:761px) { .app-shell { height:100vh; overflow:hidden; } .panel { height:100vh; overflow:auto; } .map-wrap { height:100vh; } }