*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;font:14px/1.4 Inter,system-ui,sans-serif;color:#222}
header{--mode-accent:#f26b21;--mode-wash:rgba(242,107,33,.09);--mode-art:#d95e1a;position:relative;height:56px;display:flex;align-items:center;gap:32px;padding:0 20px;overflow:hidden;border-bottom:2px solid var(--mode-accent);background:linear-gradient(105deg,#fff 0%,#fff 48%,var(--mode-wash) 100%);transition:background .25s,border-color .25s}
header[data-mode="running"]{--mode-accent:#cf4f39;--mode-wash:rgba(207,79,57,.09);--mode-art:#b83d2d}
header[data-mode="hiking"]{--mode-accent:#568259;--mode-wash:rgba(86,130,89,.1);--mode-art:#416d4a}
header[data-mode="walking"]{--mode-accent:#468b91;--mode-wash:rgba(70,139,145,.09);--mode-art:#33747b}
header[data-mode="straight"]{--mode-accent:#68748a;--mode-wash:rgba(104,116,138,.09);--mode-art:#536076}
.logo{display:block;width:174px;height:46px;flex:none}
nav a{margin-right:20px;color:#444;text-decoration:none;transition:color .25s}
nav a.on{font-weight:600;color:var(--mode-accent)}
#modes{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:6px}
#modes button{position:relative;z-index:1;transition:background .2s,border-color .2s,color .2s}
#modes button.on{border-color:var(--mode-accent)!important;background:var(--mode-wash)!important;color:var(--mode-art)}
#activity-art{position:absolute;right:12px;top:4px;width:48px;height:48px;color:var(--mode-art);opacity:.68;pointer-events:none;transition:color .25s}
#activity-art svg{position:absolute;inset:0;width:100%;height:100%;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s}
header[data-mode="cycling"] #activity-art .activity-cycling,
header[data-mode="running"] #activity-art .activity-running,
header[data-mode="hiking"] #activity-art .activity-hiking,
header[data-mode="walking"] #activity-art .activity-walking,
header[data-mode="straight"] #activity-art .activity-straight{opacity:1;transform:translateY(0)}
main{flex:1;display:grid;grid-template-columns:260px 1fr 250px;min-height:0}
aside{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}
#left{border-right:1px solid #e5e5e5}#right{border-left:1px solid #e5e5e5}
h3,h4{margin:10px 0 2px;font-size:13px;font-weight:600}
#center{display:flex;flex-direction:column;min-width:0;min-height:0}
#mapwrap{position:relative;flex:1;min-height:0}
#map,#google-map{position:absolute;inset:0}
#google-map{z-index:0}
#map{z-index:1}
#map.google-map-active{background:transparent}
#map.google-map-active .leaflet-tile-pane{display:none}
.float{position:absolute;top:10px;right:10px;z-index:1000;padding:6px 8px;border:1px solid #ccc;border-radius:6px;background:#fff}
#street-view-control{position:absolute;right:12px;bottom:12px;z-index:1002;width:42px;height:48px;display:grid;place-items:center;padding:5px;border:1px solid #c8c8c8;border-radius:5px;background:#fff;color:#f5a623;box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:grab;touch-action:none;user-select:none}
#street-view-control:hover{background:#f7f7f7}
#street-view-control:active{cursor:grabbing}
#street-view-control svg,#street-view-drop-marker svg{width:26px;height:34px}
#street-view-control[hidden],#street-view-drop-marker[hidden],#street-view-panel[hidden]{display:none}
#mapwrap.street-view-placement-mode{cursor:crosshair}
#mapwrap.street-view-placement-mode #map,#mapwrap.street-view-placement-mode #map *{cursor:crosshair!important}
#street-view-drop-marker{position:absolute;z-index:1004;pointer-events:none;color:#f5a623;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));transform:translate(-50%,-90%)}
#street-view-panel{position:absolute;right:12px;bottom:70px;z-index:1003;width:min(380px,calc(100% - 24px));height:min(250px,55%);min-height:180px;border:1px solid #fff;border-radius:6px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.45);overflow:hidden}
#street-view-panorama{width:100%;height:100%}
#street-view-close{position:absolute;top:8px;right:8px;z-index:1;width:30px;height:30px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);font-size:22px;line-height:1;cursor:pointer}
.row{display:flex;gap:6px;flex-wrap:wrap}
.row .btn{flex:1}
#right>.row:first-child{flex-wrap:nowrap}
#right>.row:first-child .map-action-icon{flex:0 0 50px;padding:8px;display:grid;place-items:center}
#right>.row:first-child .map-action-clear{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.map-action-icon svg,.map-action-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn,#modes button,.tog{font:inherit;padding:8px 10px;border:1px solid #d4d4d4;border-radius:6px;background:#fff;cursor:pointer;text-align:center}
.btn:hover,#modes button:hover,.tog:hover{background:#f6f6f6}
.btn:disabled{opacity:.45;cursor:default}
.on{border-color:#4a7cf0!important;background:#eef3ff!important}
.primary{background:#f26b21;border-color:#f26b21;color:#fff;font-weight:600}
.primary:hover{background:#d95e1a}
input{font:inherit;padding:8px 10px;border:1px solid #d4d4d4;border-radius:6px;width:100%}
.surface-preference{display:grid;gap:8px;margin:0;padding:9px 10px;border:1px solid #d4d4d4;border-radius:6px}
.surface-preference legend{padding:0 3px;font-size:13px;font-weight:600}
.surface-preference label{display:flex;align-items:center;gap:8px;cursor:pointer}
.surface-preference input{width:auto;margin:0;accent-color:#4a7cf0}
.surface-preference-icon{display:inline-flex;align-items:center}
.surface-preference-icon .road-icon{width:38px;height:18px}
.surface-preference:disabled{opacity:.55}
.cycling-profile label{font-size:12px}
.control-help{color:#666;font-size:11px;line-height:1.35}
.card{background:#eef3ff;border-radius:6px;padding:8px}
.card input{border:1px solid #c5d2e8;border-radius:4px;background:#fff;font-weight:600;padding:6px 8px}
.stats{display:flex;gap:12px;padding:2px;color:#444}
.surface-breakdown{display:grid;gap:6px;margin-top:7px;color:#555;font-size:11px}
.breakdown-group{min-width:0;padding:7px;border:1px solid #dce2e9;border-radius:6px;background:#fff}
.breakdown-group h4{margin:0 0 6px;font-size:11px;font-weight:600;color:#444}
.breakdown-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.breakdown-item{display:flex;align-items:center;gap:5px;min-width:0}
.road-icon{width:38px;height:18px;flex:none}
.road-ground{fill:#e8eddf}
.road-surface{fill:#59616a}
.road-centerline{fill:none;stroke:#fff;stroke-width:1.4;stroke-dasharray:5 3}
.road-icon.local .road-centerline{stroke-width:1;stroke-dasharray:3 3}
.road-icon.path .road-surface,.road-icon.cycleway .road-surface{fill:#8a9690}
.road-icon.path .road-centerline,.road-icon.cycleway .road-centerline{stroke-dasharray:2 3}
.road-icon.unknown .road-surface{fill:#9299a1}
.road-icon.unknown .road-centerline{stroke-dasharray:2 3}
.road-icon.unpaved .road-surface{fill:#b58a5a}
.road-pebble{fill:#6f4f32}
.breakdown-details{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.breakdown-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.breakdown-details strong{font-size:10px;font-weight:600;color:#333}
.breakdown-empty{font-size:10px;color:#888}
.surface-legend{position:absolute;left:10px;bottom:10px;z-index:1000;display:flex;gap:10px;padding:6px 8px;border:1px solid #ccc;border-radius:6px;background:rgba(255,255,255,.95);font-size:11px}
.surface-legend span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.surface-swatch{display:inline-block;width:24px;height:5px;border-radius:2px}
.surface-swatch.paved{background:#e8392b}
.surface-swatch.unpaved{background:repeating-linear-gradient(to right,#542d0a 0 5px,transparent 5px 14px) center/100% 2px no-repeat,repeating-linear-gradient(to right,rgba(17,17,17,.55) 0 7px,transparent 7px 14px) center/100% 4px no-repeat,linear-gradient(#e8392b,#e8392b) center/100% 3px no-repeat}
.surface-swatch.unknown{height:0;border-top:2px dashed #6b7280}
.list{list-style:none;margin:0;padding:0;font-size:13px}
.list li{display:flex;justify-content:space-between;padding:4px 2px;border-bottom:1px solid #eee}
.list li span{cursor:pointer}
.list button{border:0;background:none;cursor:pointer;color:#999}
#saved li{align-items:center;gap:6px}
#saved li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#saved button.saved-export{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid #c5d2e8;border-radius:4px;background:#fff;color:#444;font:inherit;line-height:1.2}
#saved button.saved-export:hover{background:#eef3ff;border-color:#4a7cf0}
#saved button.saved-export svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#results li{cursor:pointer}
#results li.place-result{padding:6px 8px}
#results li.place-result:hover,#results li.place-result:focus{background:#eef3ff;outline:none}
.bottom{margin-top:auto;display:flex;gap:8px}.bottom .btn{flex:1}
#profile{height:190px;border-top:1px solid #e5e5e5;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:6px;padding:6px 10px}
.tog{padding:3px 10px}
#clear-selection{padding:3px 8px;white-space:nowrap}
.bar-divider{height:20px;border-left:1px solid #ccc;margin:0 2px}
#readout{margin-left:12px;color:#555;font-size:13px}
#chart{flex:1;width:100%;min-height:0}
.wp{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #333}
.wp.start,.wp.end{border:0;border-radius:0;background:transparent}
.wp.start{width:32px;height:46px}
.wp.end{width:32px;height:38px}
.wp svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
#toast{position:fixed;bottom:210px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:8px 14px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:2000}
#toast.show{opacity:1}
#duplicate-route-dialog{width:min(440px,calc(100% - 32px));padding:24px;border:0;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.24);color:#222;text-align:center}
#duplicate-route-dialog::backdrop{background:rgba(0,0,0,.4)}
#duplicate-route-dialog h2{margin:0 0 8px;font-size:18px;text-align:center}
#duplicate-route-dialog p{margin:0 0 20px;color:#555}
.dialog-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
:focus-visible{outline:2px solid #4a7cf0;outline-offset:2px}
@media (max-width:900px){header{height:auto;min-height:56px;flex-wrap:wrap;gap:8px;padding:8px 58px 8px 12px}.logo{width:140px;height:37px}nav{font-size:13px}nav a{margin-right:8px}#modes{position:static;transform:none;width:100%;justify-content:center;overflow-x:auto}#activity-art{top:6px;right:8px;width:42px;height:42px;opacity:.8}main{grid-template-columns:1fr;overflow:auto}#center{height:75vh}aside{border:0!important}}

#map,#map *{cursor:default!important}
#map.map-is-dragging,#map.map-is-dragging *{cursor:grabbing!important}
#map .wp.start{cursor:pointer!important}
.pin svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
#chart{touch-action:none;cursor:crosshair}
#sel{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;font-size:12px;text-align:right}
#sel.muted{color:#999}
#sel b{font-weight:600}