.planner-panel {
  position: absolute; z-index: 700; top: 62px; left: 64px; width: 400px;
  max-height: calc(100vh - 84px); display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dbe3db; border-radius: 16px;
  box-shadow: 0 16px 44px #1630212e; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.planner-panel[hidden] { display: none; }
.planner-title { display: flex; align-items: center; padding: 14px 15px 10px; border-bottom: 1px solid #edf1ed; }
.planner-title > div { min-width: 0; flex: 1; }
.planner-title span, .palette-label span, .route-list-head { font-size: 9px; letter-spacing: 1.1px; font-weight: 900; color: #6a776f; }
.planner-title input { display: block; width: 100%; border: 0; outline: 0; padding: 2px 0; font: 700 18px/1.3 inherit; color: #17211e; }
.planner-title button { background: transparent; color: #66736b; font-size: 25px; }
.route-library-panel { padding: 10px 12px 11px; background: #f4f7f3; border-bottom: 1px solid #dfe7df; }
.route-library-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.route-library-head > span { font-size: 9px; letter-spacing: 1.1px; font-weight: 900; color: #6a776f; }
.route-library-head > button { border-radius: 8px; padding: 6px 9px; background: #20744a; color: #fff; font-size: 10px; font-weight: 900; }
.planner-routes { display: grid; gap: 6px; max-height: 176px; overflow: auto; scrollbar-width: thin; }
.planner-route-card { --route-color: #168cc2; display: grid; grid-template-columns: 5px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 52px; padding: 8px 8px 8px 0; border: 1px solid #dfe6df; border-radius: 10px; background: #fff; cursor: pointer; transition: .16s; }
.planner-route-card::before { content: ""; align-self: stretch; border-radius: 0 5px 5px 0; background: var(--route-color); }
.planner-route-card:hover { border-color: #b9cbbf; box-shadow: 0 4px 13px #17352510; }
.planner-route-card.active { border-color: var(--route-color); box-shadow: 0 0 0 1px var(--route-color); }
.planner-route-copy { min-width: 0; }
.planner-route-copy b,.planner-route-copy small { display: block; }
.planner-route-copy b { overflow: hidden; color: #233129; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.planner-route-copy small { margin-top: 2px; color: #78837c; font-size: 9px; }
.planner-route-tools { display: flex; gap: 3px; align-items: center; }
.planner-route-tools button,.planner-route-tools a { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: #eef3ef; color: #55635a; text-decoration: none; font-size: 12px; font-weight: 800; }
.planner-route-tools button.route-hidden { color: #a3aca6; background: #f5f6f5; }
.planner-route-tools a { width: auto; padding: 0 7px; font-size: 9px; }
.planner-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #e4eae5; border-bottom: 1px solid #e4eae5; }
.planner-stats div { background: #f7faf7; text-align: center; padding: 9px 2px; }
.planner-stats b { display: block; font-size: 14px; }
.planner-stats span { font-size: 8px; color: #758078; }
.analysis-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 13px 0; gap: 5px; background: #fff; }
.analysis-tabs button { height: 28px; border-radius: 7px; background: #eef3ef; color: #66736b; font-size: 10px; font-weight: 800; }
.analysis-tabs button.active { background: #dff2e7; color: #20744a; }
.route-analysis { flex: 0 0 auto; padding: 7px 13px 9px; border-bottom: 1px solid #edf1ed; background: #fff; }
.analysis-view { display: none; min-height: 64px; }
.analysis-view.active { display: block; }
.route-stage-list { display: grid; gap: 5px; }
.route-stage-card { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: #f5f8f5; }
.route-stage-color { width: 7px; height: 30px; border-radius: 5px; background: var(--stage-color); }
.route-stage-card b,.route-stage-card small { display: block; }
.route-stage-card b { font-size: 10px; }.route-stage-card small { color: #7b867f; font-size: 9px; }
.route-stage-card strong { color: #263b30; font-size: 11px; white-space: nowrap; }
.elevation-profile { height: 88px; border-radius: 8px; overflow: hidden; background: linear-gradient(#eef7f9,#f8faf8); }
.elevation-profile svg { display: block; width: 100%; height: 100%; }
.elevation-profile .profile-label { fill: #60736a; font: 8px system-ui,sans-serif; }
.analysis-empty { display: grid; place-items: center; min-height: 64px; padding: 8px; border-radius: 8px; background: #f5f8f5; color: #7b867f; text-align: center; font-size: 10px; }
.surface-bar { display: flex; height: 12px; overflow: hidden; border-radius: 8px; background: #e8ece9; }
.surface-bar span { height: 100%; min-width: 2px; }
.surface-legend { display: flex; flex-wrap: wrap; gap: 5px 9px; padding-top: 8px; }
.surface-legend span { font-size: 9px; color: #65736b; }.surface-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: var(--surface-color); }
.planner-settings { display: grid; grid-template-columns: 1fr 110px; gap: 8px; padding: 10px 13px 6px; }
.planner-settings label { font-size: 9px; font-weight: 800; color: #748078; }
.planner-settings select, .planner-settings input { width: 100%; height: 33px; margin-top: 3px; border: 1px solid #dbe3db; border-radius: 7px; background: #fff; padding: 0 8px; font: 700 12px inherit; color: #26362d; }
.planner-settings label:last-child { position: relative; }
.planner-settings label:last-child span { position: absolute; right: 7px; bottom: 8px; font-size: 10px; }
.planner-settings input { padding-right: 34px; }
.edit-toolbar { display: flex; align-items: center; gap: 5px; padding: 3px 13px 5px; flex-wrap: wrap; }
.edit-toolbar button { height: 30px; padding: 0 9px; border-radius: 7px; background: #eef4ef; color: #3f5146; font-size: 11px; font-weight: 800; }
.edit-toolbar button:disabled { opacity: .38; }
.route-display-options { display: flex; gap: 14px; padding: 0 13px 8px; color: #617067; font-size: 10px; }
.route-display-options label { display: flex; align-items: center; gap: 4px; }
.planner-help { margin: 0 13px 8px; padding: 8px 9px; border-radius: 7px; background: #eaf6fb; color: #256782; font-size: 11px; }
.palette-label, .route-list-head { display: flex; justify-content: space-between; align-items: center; padding: 0 13px 5px; }
.palette-label button { background: transparent; color: #20744a; font-size: 10px; }
.route-node-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 13px 9px; }
.route-node-tools button { height: 32px; border-radius: 8px; background: #eef4ef; color: #405148; font-size: 10px; font-weight: 800; }
.route-node-tools button.active { background: #20744a; color: #fff; box-shadow: 0 3px 9px #20744a38; }
.planner-panel .point-palette { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 13px 10px; height: 96px; flex: 0 0 96px; overflow: hidden; }
.planner-panel .point-palette.expanded { height: 246px; flex-basis: 246px; overflow-y: auto; scrollbar-width: thin; }
.planner-panel .point-palette button { width: auto; height: 42px; border-radius: 10px; background: #f0f4f1; font-size: 21px; line-height: 1; transition: transform .12s ease, background .12s ease; }
.planner-panel .point-palette button:hover { transform: translateY(-1px); background: #e3eee7; }
.planner-panel .point-palette button.active { background: #20744a; color: #fff; box-shadow: 0 3px 9px #20744a38; }
.route-list-head { padding-top: 7px; border-top: 1px solid #edf1ed; }
.route-list-head #dirty-state { letter-spacing: 0; color: #4e956a; }
.route-list-head #dirty-state.dirty { color: #d17234; }
.route-points-list { min-height: 70px; overflow: auto; padding: 0 8px 4px; }
.route-point-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 6px 5px; border-radius: 8px; }
.route-point-row:hover, .route-point-row.selected { background: #edf7f1; }
.route-point-row.poi { opacity: .78; }
.route-point-symbol { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--point-color, #20744a); color: #fff; }
.route-point-copy { min-width: 0; cursor: pointer; }
.route-point-copy b, .route-point-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-point-copy b { font-size: 11px; }
.route-point-copy small { font-size: 9px; color: #7a857e; }
.route-point-controls { display: flex; }
.route-point-controls button { width: 23px; height: 25px; padding: 0; background: transparent; color: #657168; }
.planner-actions { position: sticky; z-index: 4; bottom: 0; display: grid !important; grid-template-columns: 1fr auto auto; padding: 10px 12px !important; margin-top: 0 !important; border-top: 1px solid #e5ebe6; background: #fff; }
.planner-actions .build-route { background: #20744a !important; color: #fff !important; }
.planner-actions a { display: grid; place-items: center; }
.point-dialog { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: 18px; background: #14201880; }
.point-dialog[hidden] { display: none; }
.point-dialog form { position: relative; width: min(390px, 100%); padding: 25px; background: #fff; border-radius: 15px; box-shadow: 0 20px 65px #0005; }
.point-dialog h2 { margin: 5px 0 14px; }
.point-dialog label { display: block; margin-top: 10px; color: #5e6c64; font-size: 11px; font-weight: 700; }
.point-dialog input, .point-dialog select, .point-dialog textarea { display: block; width: 100%; margin-top: 4px; border: 1px solid #d7dfd8; border-radius: 8px; padding: 9px; font: 13px inherit; }
.point-behavior { margin-top: 9px; padding: 9px 10px; border-radius: 8px; background: #e9f6ed; color: #20744a; font-size: 11px; font-weight: 800; }
.point-behavior.poi { background: #f2f3f4; color: #647078; }
.route-point-options { display: grid; gap: 7px; margin-top: 10px; }
.route-point-options[hidden] { display: none; }
.point-relative-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.point-relative-actions[hidden] { display: none; }
.point-relative-actions button { min-height: 40px; border: 1px solid #cfe0d5; border-radius: 10px; background: #f2f8f4; color: #175c3b; font-weight: 750; }
.point-relative-actions button:hover { border-color: #68aa82; background: #e8f4ec; }
.route-point-options label { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 9px; border-radius: 8px; background: #f4f7f5; }
.route-point-options input { width: 16px; height: 16px; flex: 0 0 auto; margin: 2px 0 0; }
.route-point-options span,.route-point-options b,.route-point-options small { display: block; }.route-point-options small { margin-top: 2px; color: #77837c; font-weight: 500; }
.point-dialog .route-through { display: flex; align-items: flex-start; gap: 9px; padding: 10px; margin-top: 12px; border-radius: 9px; background: #f1f7f3; color: #31463a; }
.point-dialog .route-through input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; }
.point-dialog .route-through span, .point-dialog .route-through b, .point-dialog .route-through small { display: block; }
.point-dialog .route-through small { margin-top: 2px; color: #718078; font-weight: 500; }
.point-coordinates { margin-top: 9px; color: #839087; font-size: 10px; }
.point-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.point-form-actions button { padding: 8px 12px; border-radius: 7px; background: #20744a; color: #fff; font-weight: 700; }
.point-form-actions button:first-child { margin-right: auto; background: #fff1ed; color: #bd4d34; }
.map-tools > #river-mode.active { background: #20744a; color: #fff; }
.river-stop { --pin: #18a35c; width: 40px !important; height: 60px !important; position: relative; display: block !important; overflow: visible !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.river-stop::after { content: ""; position: absolute; z-index: 0; left: 19px; top: 34px; width: 2px; height: 24px; border-radius: 0 0 2px 2px; background: var(--pin); box-shadow: 0 1px 2px #12251c44; }
.river-stop::before { content: none; }
.river-stop .pin-head { position: absolute; z-index: 1; top: 0; left: 2px; width: 36px; height: 36px; display: grid; place-items: center; margin: 0; border: 2px solid #fff; border-radius: 50%; background: var(--pin); color: #fff; box-shadow: 0 3px 9px #12251c66; font-size: 17px; line-height: 1; }
.river-stop.waypoint { --pin: #24845a; }
.river-stop.rapids { --pin: #0879a8; }
.river-stop.dock { --pin: #326580; }
.river-stop.bridge { --pin: #795b4c; }
.river-stop.parking { --pin: #315db0; }
.river-stop.shelter { --pin: #827247; }
.river-stop.medical { --pin: #df3e52; }
.river-stop.photo { --pin: #525b67; }
.river-stop.drinkingWater { --pin: #168cc2; }.river-stop.spring { --pin: #159bc1; }.river-stop.waterfall { --pin: #227fac; }.river-stop.swimming { --pin: #159bc1; }
.river-stop.fire { --pin: #e2642d; }.river-stop.picnic { --pin: #bf7650; }.river-stop.hut { --pin: #84623f; }.river-stop.hotel { --pin: #6657b8; }
.river-stop.toilet { --pin: #66747c; }.river-stop.shower { --pin: #3c91ae; }.river-stop.shop { --pin: #b84f7a; }.river-stop.cafe { --pin: #8b5a3c; }
.river-stop.fuel { --pin: #d95745; }.river-stop.repair { --pin: #59666e; }.river-stop.charge { --pin: #43a047; }.river-stop.signal { --pin: #4f68b3; }
.river-stop.phone { --pin: #56636b; }.river-stop.info { --pin: #3479b9; }.river-stop.boat { --pin: #237f99; }.river-stop.ferry { --pin: #326580; }
.river-stop.dam { --pin: #8d5b43; }.river-stop.ford { --pin: #477d9a; }.river-stop.fallenTree { --pin: #76543b; }.river-stop.gate { --pin: #835444; }
.river-stop.cave { --pin: #4f5559; }.river-stop.summit { --pin: #6f7780; }.river-stop.steep { --pin: #d06b35; }.river-stop.stairs { --pin: #8a6848; }
.river-stop.wildlife { --pin: #7a6a3d; }.river-stop.insects { --pin: #75623c; }.river-stop.rescue { --pin: #d93b45; }.river-stop.border { --pin: #4c6684; }
.river-stop.trash { --pin: #65726a; }.river-stop.monument { --pin: #756a62; }
.river-stop.route-poi .pin-head { border-style: dashed; filter: saturate(.72); }
.route-km-marker { display: grid !important; place-items: center !important; border: 2px solid #fff; border-radius: 10px; background: #168cc2; color: #fff; box-shadow: 0 2px 7px #17354a55; font: 800 9px/1 system-ui, sans-serif; white-space: nowrap; }
@media (max-width: 720px) {
  .planner-panel { top: 109px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 120px); }
  .planner-title { padding-top: 10px; }
  .planner-stats div { padding: 6px 1px; }
  .route-points-list { max-height: 24vh; }
  .route-display-options { gap: 8px; flex-wrap: wrap; }
  .planner-routes { max-height: 122px; }
  .route-library-head > button { padding: 6px 8px; }
}