:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#0c1712; color:#f2f5ee; }
* { box-sizing:border-box; }
html, body, main { height:100%; margin:0; }
#map { position:absolute; inset:0; background:#ced7cb; }
.panel { position:absolute; z-index:1000; top:16px; left:16px; bottom:16px; width:min(390px,calc(100% - 32px)); padding:10px 20px 20px; overflow:auto; border:1px solid #ffffff1f; border-radius:22px; background:#10251ddd; backdrop-filter:blur(16px); box-shadow:0 20px 70px #0008; }
.sheet-toggle { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; width:100%; padding:4px 0 10px; border-radius:0; color:#f2f5ee; background:transparent; text-align:left; }
.sheet-grabber { display:none; }
.sheet-heading { display:grid; }
.sheet-title { font-size:30px; font-weight:800; letter-spacing:-1px; }
.sheet-label { color:#b9c5bc; font-size:13px; }
.sheet-chevron { font-size:22px; transition:transform .2s ease; }
.panel.is-collapsed .sheet-chevron { transform:rotate(180deg); }
.eyebrow { color:#9ed086; font-size:11px; font-weight:800; letter-spacing:2px; }
.instruction { color:#c5d0c8; line-height:1.4; }
.map-locate { position:absolute; z-index:900; top:96px; right:10px; width:52px; height:52px; padding:0; border:3px solid #fff; border-radius:50%; box-shadow:0 8px 24px #0006; font-size:28px; }
.map-locate.is-locating { animation:locate-pulse .8s ease-in-out infinite alternate; }
.map-locate.is-following { background:#e7ff65; box-shadow:0 0 0 4px #e7ff6555,0 8px 24px #0006; }
.map-orientation { position:absolute; z-index:900; top:158px; right:10px; display:grid; place-items:center; width:52px; height:52px; padding:4px; border:3px solid #fff; border-radius:50%; box-shadow:0 8px 24px #0006; background:#173c2d; color:#fff; font-size:11px; line-height:1; }
.map-orientation .compass-arrow { display:block; color:#ff7651; font-size:23px; line-height:18px; transform:rotate(var(--compass-north, 0deg)); }
.map-orientation.is-heading { background:#e7ff65; color:#102014; }
.map-orientation.is-heading .compass-arrow { color:#e64022; }
.map-record { position:absolute; z-index:900; top:220px; right:10px; display:grid; place-items:center; width:52px; height:52px; padding:5px; border:3px solid #fff; border-radius:50%; box-shadow:0 8px 24px #0006; background:#321d1d; color:#fff; font-size:10px; line-height:1; }
.record-dot { width:15px; height:15px; border-radius:50%; background:#ff4b3e; }
.map-record.is-recording { background:#8f1f1a; }
.map-record.is-recording .record-dot { animation:record-pulse .9s ease-in-out infinite alternate; }
.gps-signal { position:absolute; z-index:900; top:282px; right:10px; display:flex; align-items:flex-end; gap:5px; min-width:52px; padding:7px 8px; border:2px solid #fff; border-radius:12px; box-shadow:0 8px 24px #0006; background:#173c2dee; color:#fff; font-size:10px; font-weight:800; }
.gps-bars { display:flex; align-items:flex-end; gap:2px; height:15px; }
.gps-bars i { display:block; width:3px; background:#8a968e; border-radius:2px; }
.gps-bars i:nth-child(1) { height:4px; }.gps-bars i:nth-child(2) { height:7px; }.gps-bars i:nth-child(3) { height:11px; }.gps-bars i:nth-child(4) { height:15px; }
.gps-signal.is-poor .gps-bars i:nth-child(1), .gps-signal.is-weak .gps-bars i:nth-child(-n+2), .gps-signal.is-fair .gps-bars i:nth-child(-n+3), .gps-signal.is-strong .gps-bars i { background:#91d36f; }
.gps-signal.is-poor .gps-bars i:nth-child(1) { background:#ff7651; }
.gps-signal.is-weak .gps-bars i:nth-child(-n+2) { background:#ffcb75; }
.gps-signal.is-waiting { opacity:.72; }
@keyframes record-pulse { to { opacity:.3; transform:scale(.75); } }
@keyframes locate-pulse { to { transform:scale(.9); opacity:.75; } }
.navigation-hud { position:absolute; z-index:850; top:16px; left:422px; width:min(420px,calc(100% - 510px)); padding:15px 16px; border:1px solid #ffffff24; border-radius:18px; background:#10251dee; backdrop-filter:blur(14px); box-shadow:0 12px 40px #0007; }
.navigation-hud[hidden] { display:none; }
.navigation-hud strong { display:block; margin:5px 0 10px; font-size:18px; line-height:1.25; }
.navigation-status { color:#a9dc91; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.navigation-status.off-route { color:#ffcb75; }
.navigation-status.rerouting { color:#ff9b75; }
.navigation-stats { display:flex; justify-content:space-between; gap:12px; color:#b9c5bc; font-size:12px; }
.navigation-actions { display:grid; grid-template-columns:1fr 2fr; gap:8px; margin-top:12px; }
.navigation-hud .secondary { width:100%; padding:9px 12px; }
button, select { border:0; border-radius:12px; padding:13px 16px; background:#91d36f; color:#102014; font:inherit; font-weight:750; }
button:disabled { opacity:.4; }
button.secondary { background:#ffffff12; color:#eaf2e8; border:1px solid #ffffff18; }
.points { display:grid; gap:7px; margin:12px 0; font-variant-numeric:tabular-nums; font-size:13px; color:#b9c5bc; }
details { border-top:1px solid #ffffff17; border-bottom:1px solid #ffffff17; padding:14px 0; }
summary { cursor:pointer; font-weight:750; }
.map-key { border-bottom:0; }
.legend-items { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-top:16px; color:#d8e1da; font-size:12px; }
.legend-items > div { display:flex; align-items:center; gap:9px; min-width:0; }
.legend-line { position:relative; flex:0 0 34px; height:14px; }
.legend-line::before, .legend-line::after { content:""; position:absolute; left:0; right:0; top:6px; }
.legend-line.calculated::before { border-top:6px solid #283329; }
.legend-line.calculated::after { border-top:4px solid #ff4b1f; }
.legend-line.path::before { border-top:2px dotted #e9e9e1; }
.legend-line.track::before { border-top:4px double #d5d5cc; }
.legend-line.local-road::before { border-top:6px solid #575b57; }
.legend-line.local-road::after { border-top:3px solid #f5f3e8; }
.legend-line.main-road::before { border-top:7px solid #6d5943; }
.legend-line.main-road::after { border-top:4px solid #f4d76f; }
.legend-line.boundary::before { border-top:3px dashed #bf72ce; }
.legend-line.water::before { border-top:3px solid #64bce9; }
.legend-line.contour::before { border-top:1px solid #b08b68; }
.legend-note { margin:14px 0 0; color:#8f9c93; font-size:11px; line-height:1.4; }
.recordings summary { display:flex; justify-content:space-between; align-items:center; }
.recordings summary span { min-width:24px; padding:3px 7px; border-radius:999px; background:#ffffff12; color:#9ed086; text-align:center; font-size:11px; }
.recording-list { display:grid; gap:10px; margin-top:12px; }
.recording-empty { color:#8f9c93; font-size:12px; }
.recording-item { padding:11px; border-radius:12px; background:#ffffff0b; }
.recording-item strong { display:block; margin-bottom:4px; font-size:13px; }
.recording-meta { color:#aebbb1; font-size:11px; }
.recording-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-top:9px; }
.recording-actions button { padding:8px 9px; border-radius:9px; font-size:11px; }
.recording-actions .delete-recording { color:#ffaaa2; }
.controls { display:grid; gap:15px; margin-top:18px; }
label { display:grid; grid-template-columns:1fr auto; gap:7px; font-size:14px; }
output { color:#9ed086; font-weight:700; }
input[type=range], select { grid-column:1 / -1; width:100%; accent-color:#91d36f; }
.actions { display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:16px; }
.actions .export { grid-column:1 / -1; border-color:#91d36f66; color:#bde9a8; }
.actions .navigate { grid-column:1 / -1; background:#e7ff65; }
.summary { margin-top:15px; padding:14px; border-radius:14px; background:#ffffff0d; }
.summary strong { font-size:23px; }
footer { margin-top:14px; color:#85938a; font-size:11px; }
.leaflet-control-attribution { font-size:9px; }
@media (max-width:650px) {
  .panel { display:flex; flex-direction:column; top:auto; max-height:72%; overflow:hidden; border-radius:22px 22px 0 0; left:0; bottom:0; width:100%; padding:8px 20px max(18px,env(safe-area-inset-bottom)); transition:max-height .22s ease; }
  .panel.is-collapsed { height:82px; max-height:82px; overflow:hidden; }
  .panel.is-collapsed .panel-content { display:none; }
  .panel-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .sheet-toggle { position:relative; flex:0 0 auto; z-index:1; grid-template-columns:1fr auto auto; min-height:64px; padding:14px 0 6px; }
  .sheet-grabber { position:absolute; display:block; top:0; left:50%; width:42px; height:4px; border-radius:4px; background:#ffffff55; transform:translateX(-50%); }
  .sheet-title { font-size:24px; }
  .map-locate { top:96px; right:10px; }
  .map-orientation { top:158px; right:10px; }
  .map-record { top:220px; right:10px; }
  .gps-signal { top:282px; right:10px; }
  .navigation-hud { top:10px; left:10px; right:74px; width:auto; padding:12px 14px; }
  .navigation-hud strong { font-size:16px; }
}