.lm-widget { --lm-objective: #a8592b; }
.lm-map-choice { margin: 16px 0; }
.lm-map-choice label { font-size: 12px; }
.lm-surfaces { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; touch-action: pan-y; user-select: none; }
.lm-surfaces > div { min-width: 0; }
.lm-surface { border-radius: 8px; background: var(--sidebar); overflow: hidden; }
.lm-widget[data-complete='true'] .lm-surface { background: var(--tint); }
.lm-surface svg,.lm-surface img { display: block; width: 100%; height: auto; }
.lm-widget .lm-surface-title { margin: 0 0 6px; font-size: 13px; text-align: center; }
.lm-svg .lm-floor { fill: var(--paper); fill-opacity: .75; stroke: var(--line); stroke-width: .7; }
.lm-svg .lm-surface-face { stroke-width: .4; stroke-opacity: .2; }
.lm-svg .lm-face-f { fill: #ead6c5; stroke: var(--lm-objective); }
.lm-svg .lm-face-g { fill: #c7dacc; stroke: var(--green); }
.lm-svg .lm-plane-f { fill: var(--lm-objective); }
.lm-svg .lm-plane-g { fill: var(--green); }
.lm-svg .lm-height-plane { fill-opacity: .08; stroke: none; }
.lm-svg .lm-height-contour { fill: none; stroke-width: 1.2; opacity: .55; }
.lm-svg .lm-selected-contour { fill: none; stroke-width: 2; }
.lm-svg .lm-line-f { stroke: var(--lm-objective); }
.lm-svg .lm-line-g { stroke: var(--green); }
.lm-svg .lm-ground-gradient { fill: none; stroke-width: 2; stroke-dasharray: 4 3; }
.lm-svg .lm-lifted-gradient { fill: none; stroke-width: 2.8; }
.lm-svg .lm-chosen-direction { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.lm-svg .lm-ink-fill { fill: var(--ink); }
.lm-svg .lm-floor-constraint { fill: none; stroke: var(--green); stroke-width: 1.1; stroke-dasharray: 4 3; opacity: .5; }
.lm-svg .lm-feasible-path { fill: none; stroke: var(--green); stroke-width: 2.3; }
.lm-svg .lm-vertical-guide { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.lm-svg .lm-g-contour { fill: none; stroke: var(--green); stroke-width: 1; stroke-dasharray: 4 3; opacity: .25; }
.lm-ascent-actions { display: flex; gap: 8px; margin: 6px 0 14px; }
.lm-ascent-actions > button { flex: 1; }
.lm-camera-settings .widget-slider-setting { margin-bottom: 12px; }
.lm-widget .lm-plan { margin-top: 16px; border-radius: 8px; background: var(--sidebar); touch-action: pan-y; user-select: none; }
.lm-widget[data-complete='true'] .lm-plan { background: var(--tint); }
.lm-plan svg, .lm-plan img { display: block; width: 100%; height: auto; }
.lm-svg { overflow: hidden; }
.lm-svg text { fill: var(--muted); font: 12px var(--sans); }
.lm-svg .lm-axis { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .45; }
.lm-svg .lm-contour { fill: none; stroke: var(--lm-objective); stroke-width: 1; opacity: .22; }
.lm-svg .lm-level { fill: none; stroke: var(--lm-objective); stroke-width: 1.6; opacity: .7; }
.lm-svg .lm-constraint { fill: none; stroke: var(--green); stroke-width: 2.5; }
.lm-svg .lm-direction { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .6; }
.lm-svg .lm-gradient-f { stroke: var(--lm-objective); stroke-width: 2.5; }
.lm-svg .lm-gradient-g { stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 5 3; }
.lm-svg .lm-f-fill { fill: var(--lm-objective); }
.lm-svg .lm-g-fill { fill: var(--green); }
.lm-svg .lm-point { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.lm-svg .lm-centre { fill: var(--muted); }
.lm-widget .lm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 12px; margin: 10px 0 18px; }
.lm-key-f::before, .lm-key-g::before { content: ''; display: inline-block; width: 15px; margin: 0 6px 3px 0; border-top: 2px solid var(--lm-objective); }
.lm-key-g::before { border-color: var(--green); border-top-style: dashed; }
.lm-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 18px; }
.lm-values dt { color: var(--muted); font-size: 12px; }
.lm-values dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lm-primary-actions { display: flex; gap: 8px; margin: 8px 0 20px; }
.lm-primary-actions > button { flex: 1; }
.lm-widget .activity-result { margin: 8px 0; padding: 0; }
.lm-widget .widget-slider-heading { flex-wrap: wrap; gap: 0 12px; }
@media (max-width: 540px) { .lm-surfaces { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 360px) {
  .lm-primary-actions { flex-direction: column; }
  .lm-values { gap: 12px; }
}