:root { --canvas: #e9e7e0; --surface: #fff; --field: #f4f3ee; --button: #f7f6f2; --hover: #ecebe4; --ink: #1d2a26; --muted: #6b756f; --line: #e2e0d8; --primary: #1f5d4c; --primary-hover: #184a3c; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 13.5px/1.35 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--canvas); }
[hidden] { display: none !important; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon circle { fill: var(--button); }
main { display: flex; height: 100%; gap: 10px; padding: 10px; }
#map-column { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#map { flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; background: #dfe3df; }
#routes { flex: none; width: 384px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pane-section, #list-section, #panel { background: var(--surface); border-radius: 14px; box-shadow: 0 1px 2px rgba(40, 40, 30, 0.08); }
.pane-section { flex: none; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
#view-section { z-index: 1; }
#search-form { position: relative; display: flex; }
#search-input { flex: 1; min-width: 0; height: 36px; padding: 0 40px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); outline: none; }
#search-input:focus { border-color: var(--primary); }
#search-input::placeholder { color: var(--muted); }
#search-input::-webkit-search-cancel-button { display: none; }
#search-form button { position: absolute; top: 3px; right: 3px; bottom: 3px; width: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
#search-form button:hover { background: var(--hover); color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#search-results { position: absolute; z-index: 1; top: 52px; left: 14px; right: 14px; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(10, 20, 30, 0.18); }
#search-results:empty { display: none; }
#search-results li { padding: 7px 8px; }
#search-results li:has(button) { padding: 0; }
#search-results button { width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: none; text-align: left; }
#search-results button:hover { background: var(--hover); }
#overlays { display: flex; flex-direction: column; gap: 2px; }
#overlays h2 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
#overlays label { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 2px; cursor: pointer; }
#overlays input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: inherit; }
#element-types { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding-left: 24px; }
#snap-field { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 2px; cursor: pointer; }
#snap-to-trails { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: inherit; }
#snap-field.disabled { color: var(--muted); cursor: not-allowed; }
#snap-hint { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
#popup { position: absolute; z-index: 1; left: 10px; bottom: 44px; padding: 6px 10px; border-radius: 8px; color: #fff; background: var(--ink); }
#draw-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#draw-section button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--button); white-space: nowrap; }
#draw-buttons button { flex-direction: column; gap: 4px; height: 62px; border-color: transparent; }
#draw-buttons .icon { width: 20px; height: 20px; color: var(--primary); }
#draw-section button:hover:not(:disabled) { background: var(--hover); }
#draw-section button:disabled { opacity: 0.4; }
#draft-controls { display: flex; gap: 6px; }
#draft-controls button { flex: 1; }
#draw-section #save { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
#draw-section #save:hover:not(:disabled) { background: var(--primary-hover); }
#list-section { flex: 1; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; padding: 0 10px 10px; }
#list-section h2 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 6px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
#list-section ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
#list-section li { display: flex; flex-wrap: wrap; gap: 5px 3px; padding: 8px 10px; border-radius: 10px; background: var(--button); }
#list-section li.displayed { box-shadow: inset 3px 0 0 #000; }
#list-section .name { order: -1; flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; font-weight: 650; }
#list-section li button { height: 24px; padding: 0 7px; border: 0; border-radius: 6px; font-size: 12px; color: #48524c; background: var(--hover); white-space: nowrap; }
#list-section li button:hover:not(:disabled) { background: #dfddd4; }
#list-section li button:disabled { opacity: 0.3; }
#list-section li .blocked-by-draft { order: 1; }
#list-section li.displayed > button:first-of-type { background: var(--primary); color: #fff; }
#list-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding: 12px 6px 0; font-size: 12px; color: var(--muted); }
#list-footer p { margin: 0; }
#panel { flex: none; padding: 12px 14px 8px; }
#panel-text { display: flow-root; }
#panel-text b { font-size: 15px; font-weight: 600; line-height: 26px; }
.stats { float: right; display: flex; gap: 6px; }
.stat { display: flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--field); }
.stat small { font-size: 11px; color: var(--muted); }
.stat strong { font-weight: 650; font-variant-numeric: tabular-nums; }
#plot { display: block; width: 100%; height: 150px; margin-top: 6px; }
#plot .axis { stroke: #a7aca5; }
#plot .grid { stroke: #eeece6; }
#plot .tick { font-size: 11px; fill: #5e665f; }
#plot-line { fill: none; stroke: #000; stroke-width: 1.75; stroke-linejoin: round; }
#plot-slider { appearance: none; display: block; height: 18px; margin-top: 2px; background: transparent; outline: none; cursor: pointer; }
#plot-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
#plot-slider::-webkit-slider-thumb { appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -6px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
#click-popup { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; background: var(--surface); box-shadow: 0 2px 8px rgba(10, 20, 30, 0.25); }
#legend { position: absolute; left: 10px; bottom: 40px; }
.legend { display: grid; gap: 2px; padding: 5px 7px; border-radius: 6px; font-size: 11px; color: #2b3034; background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; border: 1px solid #2b3034; opacity: 0.6; }
.ol-scale-line { left: 10px; bottom: 10px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.ol-scale-line-inner { color: #2b3034; border-color: #2b3034; font-size: 11px; }
.ol-attribution.ol-uncollapsible { right: 10px; bottom: 10px; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.86); font-size: 11px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.ol-attribution a { color: #2b3034; }
#site-links a { color: inherit; }
.statistics-settings { padding: 0; border: 0; background: none; font-size: inherit; text-decoration: underline; }
#statistics-banner { position: fixed; z-index: 2; left: 20px; bottom: 20px; width: 360px; max-width: calc(100% - 40px); padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(10, 20, 30, 0.25); }
#statistics-banner p { margin: 0 0 10px; }
#statistics-banner a { color: var(--primary); }
#statistics-banner div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#statistics-banner button { height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--button); }
#statistics-banner button:hover { background: var(--hover); }
#print-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: center; }
#print-controls label { display: flex; align-items: center; gap: 6px; min-width: 0; }
#print-controls select { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
#print-grid { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
#print-go { grid-column: 1 / -1; }
#print-status { grid-column: 1 / -1; color: var(--muted); }
#print-status:empty { display: none; }
#print-sheet { position: fixed; left: -100000px; top: 0; padding: 10mm 12mm 0; color: #000; background: #fff; print-color-adjust: exact; font: 11px/1.2 "Segoe UI", system-ui, sans-serif; }
#print-map-wrap { position: relative; }
#print-map { position: absolute; left: 0; top: 0; }
#print-overlay { position: absolute; left: 0; top: 0; overflow: visible; }
.print-grid { stroke: #000; stroke-opacity: 0.3; stroke-width: 0.5; }
.print-grid-label { font-size: 8.5px; fill: #000; }
.print-map-edge { fill: none; stroke: #000; stroke-width: 1; }
.print-line { fill: none; stroke: #000; stroke-linejoin: round; }
.print-point { fill: #000; stroke: #fff; stroke-width: 2; }
.print-point-name { font: bold 13px "Segoe UI", system-ui, sans-serif; fill: #000; stroke: #fff; stroke-width: 3; paint-order: stroke; text-anchor: middle; }
#print-plot-text { display: flow-root; height: 7mm; margin-top: 4mm; }
#print-plot-text b { font-size: 15px; font-weight: 600; }
#print-plot { display: block; width: 100%; height: 36mm; }
#print-plot .axis { stroke: #a7aca5; }
#print-plot .grid { stroke: #cfcfc8; }
#print-plot .tick { font-size: 11px; fill: #000; }
#print-plot path { fill: none; stroke: #000; stroke-width: 1.75; stroke-linejoin: round; }
#print-scale-text { position: absolute; left: 12mm; bottom: 5mm; font-size: 2mm; }
#print-credit { position: absolute; right: 12mm; bottom: 5mm; font-size: 2mm; }
#print-credit a { color: inherit; text-decoration: none; }
#about { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
#about a, #about .statistics-settings { color: var(--primary); }
#about pre { padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 11.5px; white-space: pre-wrap; }
@media print {
  body.printing { background: #fff; }
  body.printing main { display: none; }
  body.printing #print-sheet { position: absolute; left: 0; top: 0; overflow: hidden; }
}