:root{--color-novice:#22c55e;--color-easy:#3b82f6;--color-intermediate:#ef4444;--color-advanced:#1e293b;--color-freeride:#1e293b;--color-lift:#f59e0b;--color-route:#facc15;--sidebar-width:320px;--sidebar-bg:#fff;--sidebar-border:#e2e8f0;--gap:.75rem;--radius:4px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#f1f5f9;height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px;overflow:hidden}.layout{width:100%;height:100vh;display:flex}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);height:100vh;padding:var(--gap);gap:var(--gap);z-index:10;flex-direction:column;display:flex;overflow-y:auto}.map-container{flex:1;height:100vh;position:relative}.loading{color:#64748b;justify-content:center;align-items:center;height:100%;font-size:1rem;display:flex}.mode-tabs{border-bottom:2px solid var(--sidebar-border);padding-bottom:var(--gap);gap:4px;display:flex}.tab{border:1px solid var(--sidebar-border);border-radius:var(--radius);cursor:pointer;background:#f8fafc;flex:1;padding:.4rem .5rem;font-size:13px;font-weight:500;transition:background .15s}.tab:hover:not(:disabled){background:#e2e8f0}.tab-active{color:#fff;background:#3b82f6;border-color:#3b82f6}.tab-disabled,.tab:disabled{opacity:.4;cursor:not-allowed}.filter-panel{gap:0 var(--gap);border-bottom:1px solid var(--sidebar-border);padding-bottom:var(--gap);grid-template-columns:1fr 1fr;display:grid}.filter-section{margin-bottom:.5rem}.filter-label{text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:.35rem;font-size:11px;font-weight:600}.filter-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;padding:.2rem 0;font-size:13px;display:flex}.filter-row input[type=checkbox]{cursor:pointer;width:14px;height:14px}.selector-panel{flex-direction:column;gap:.5rem;display:flex}.selector-row{flex-direction:column;gap:.2rem;display:flex}.selector-label{text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-size:11px;font-weight:600}.selector-select{border:1px solid var(--sidebar-border);border-radius:var(--radius);cursor:pointer;background:#fff;width:100%;padding:.35rem .5rem;font-size:13px}.selector-select:focus{outline-offset:-1px;outline:2px solid #3b82f6}.calculate-btn{color:#fff;border-radius:var(--radius);cursor:pointer;background:#3b82f6;border:none;width:100%;padding:.5rem;font-size:14px;font-weight:600;transition:background .15s}.calculate-btn:hover{background:#2563eb}.calculate-btn:active{background:#1d4ed8}.itinerary-panel{flex:1;overflow-y:auto}.itinerary-error{color:#ef4444;border-radius:var(--radius);background:#fef2f2;border:1px solid #fecaca;padding:.4rem;font-size:13px}.itinerary-list{flex-direction:column;gap:.2rem;padding:0;list-style:none;display:flex}.itinerary-item{border-radius:var(--radius);border:1px solid var(--sidebar-border);background:#f8fafc;flex-direction:column;padding:.35rem .5rem;display:flex}.step-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.step-meta{color:#64748b;margin-top:2px;font-size:11px}.itinerary-total{color:#1e293b;text-align:right;margin-top:.5rem;font-size:13px;font-weight:600}.not-found{color:#64748b;justify-content:center;align-items:center;height:100vh;font-size:1.25rem;display:flex}.fab{color:#fff;cursor:pointer;z-index:1001;background:#3b82f6;border:none;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.4rem;line-height:1;display:none;position:absolute;bottom:1.5rem;right:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,.3)}.fab:active{background:#1d4ed8}.sidebar-backdrop{z-index:999;background:rgba(0,0,0,.4);display:none;position:fixed;inset:0}.sidebar-handle{background:#cbd5e1;border-radius:2px;flex-shrink:0;width:36px;height:4px;margin:0 auto .5rem;display:none}@media (width<=768px){.sidebar{width:100%;min-width:unset;border-right:none;border-top:1px solid var(--sidebar-border);z-index:1000;border-radius:12px 12px 0 0;height:auto;max-height:80vh;transition:transform .3s;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%);box-shadow:0 -4px 20px rgba(0,0,0,.15)}.sidebar-open{transform:translateY(0)}.map-container{width:100%;height:100vh}.fab{display:flex;bottom:10rem}.sidebar-backdrop.active,.sidebar-handle{display:block}}.segment-popup{z-index:1002;border:1px solid var(--sidebar-border);pointer-events:auto;background:#fff;border-radius:8px;min-width:200px;max-width:280px;padding:.65rem .75rem;font-size:13px;position:absolute;bottom:1.5rem;left:1.5rem;box-shadow:0 4px 16px rgba(0,0,0,.18)}.popup-header{align-items:center;gap:.4rem;margin-bottom:.4rem;display:flex}.popup-name{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:600;overflow:hidden}.popup-badge{text-transform:uppercase;letter-spacing:.04em;border-radius:3px;flex-shrink:0;padding:2px 5px;font-size:10px;font-weight:700}.popup-badge-lift{color:#92400e;background:#fef3c7}.popup-badge-piste{color:#1e40af;background:#dbeafe}.popup-close{cursor:pointer;color:#94a3b8;background:0 0;border:none;flex-shrink:0;padding:0 2px;font-size:16px;line-height:1}.popup-close:hover{color:#1e293b}.popup-detail{color:#475569;align-items:center;gap:.4rem;margin-bottom:.3rem;display:flex}.popup-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block}.popup-coords{color:#64748b;font-variant-numeric:tabular-nums;margin-bottom:.15rem;font-size:11px}.popup-alt{color:#1e293b;font-size:13px;font-weight:600}@media (width<=768px){.segment-popup{max-width:none;inset:1rem 1rem auto}}.route-arrow{background:0 0!important;border:none!important}.route-arrow:before{content:"▲";color:#fff;text-align:center;transform-origin:50%;text-shadow:0 0 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6);pointer-events:none;font-size:14px;line-height:24px;display:block}.route-arrow-0:before{transform:rotate(0)}.route-arrow-45:before{transform:rotate(45deg)}.route-arrow-90:before{transform:rotate(90deg)}.route-arrow-135:before{transform:rotate(135deg)}.route-arrow-180:before{transform:rotate(180deg)}.route-arrow-225:before{transform:rotate(225deg)}.route-arrow-270:before{transform:rotate(270deg)}.route-arrow-315:before{transform:rotate(315deg)}