.route-shell { max-width: 1120px; }
.route-view { display: block; padding: 12px 0 48px; }
.route-view h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.4rem); }
.route-view p { line-height: 1.55; }
.route-view button { min-height: 44px; padding: 9px 14px; border: 1.5px solid #171713; border-radius: 12px; background: #fff; color: #171713; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.route-view button:hover:not(:disabled) { background: #eee9ff; }
.route-view button:disabled { opacity: .45; cursor: default; }
.route-view button:focus-visible, .route-view input:focus-visible, .route-view summary:focus-visible { outline: 3px solid #43089f; outline-offset: 3px; }
.route-view .route-primary { background: #c1b0ff; }
.route-view .route-danger { color: #a92335; border-color: #a92335; margin-top: 12px; }
.route-heading, .route-toolbar, .route-actions, .route-date, .route-stats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.route-heading, .route-toolbar { justify-content: space-between; }
.route-controls { padding: 18px 20px; border: 1.5px solid #171713; border-radius: 18px; background: #fff; margin: 18px 0 24px; }
.route-controls p { margin: 6px 0; }
.route-controls summary { margin-top: 14px; cursor: pointer; font-weight: 800; }
.recording-options { padding-top: 8px; max-width: 760px; }
.recording-options p { margin-bottom: 14px; }
.route-actions { gap: 8px; }
.route-date label { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.route-date > button { min-width: 44px; font-size: 1.25rem; }
.route-date input { min-width: 0; max-width: 160px; padding: 8px; border: 1.5px solid #171713; border-radius: 10px; font: inherit; background: white; color: #171713; }
.route-color { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 800; }
.route-color input { width: 44px; height: 44px; padding: 3px; border: 1.5px solid #171713; border-radius: 12px; background: #fff; cursor: pointer; }
.route-stats { padding: 16px 0; gap: 12px 24px; font-size: .9rem; }
.route-stats strong { font-size: 1.25rem; }
.battery-card { margin: 0 0 18px; padding: 20px; border: 1.5px solid #171713; border-radius: 20px; background: linear-gradient(145deg, #fff 45%, #f5f1ff); box-shadow: 0 4px 0 rgba(23,23,19,.08); }
.battery-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.battery-heading h2, .battery-heading p { margin: 0; }
.battery-heading h2 { font-size: 1.3rem; }
.battery-heading > strong { padding: 5px 11px; border: 1.5px solid #171713; border-radius: 999px; background: #84e7a5; font-size: 1.1rem; }
.battery-summary { margin: 6px 0 12px; color: #575550; font-size: .875rem; }
.battery-chart-wrap { overflow-x: auto; }
#battery-chart { display: block; width: 100%; min-width: 600px; height: auto; }
.battery-grid { stroke: #171713; stroke-width: 1; stroke-dasharray: 3 7; opacity: .15; }
.battery-axis { fill: #575550; font: 700 12px Nunito, sans-serif; }
.battery-line { fill: none; stroke: #43089f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.battery-section { opacity: .2; }
.battery-section.charging { fill: #84e7a5; }
.battery-section.movement { fill: #f8cc65; }
.battery-event.opened { stroke: #fc7081; stroke-width: 2; stroke-dasharray: 4 5; opacity: .7; }
.battery-event-dot.opened { fill: #fc7081; }
.battery-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: #575550; font-size: .78rem; font-weight: 800; }
.battery-legend span { display: inline-flex; align-items: center; gap: 6px; }
.battery-legend i { display: inline-block; width: 16px; height: 4px; border-radius: 4px; background: #43089f; }
.battery-legend .legend-opened { background: #fc7081; }
.battery-legend .legend-movement { height: 12px; background: color-mix(in srgb, #f8cc65 35%, white); border: 1px solid #d0b779; }
.battery-legend .legend-charge { height: 12px; background: color-mix(in srgb, #84e7a5 35%, white); border: 1px solid #84a98f; }
.route-map-wrap { position: relative; overflow: hidden; border: 1.5px solid #171713; border-radius: 20px; isolation: isolate; }
#map { height: clamp(340px, 53vh, 580px); background: #e8e9ee; z-index: 0; }
.route-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 32px; background: #f0edf7; font-size: 1rem; line-height: 1.8; pointer-events: none; }
.route-empty[hidden] { display: none; }
.route-timeline { padding: 20px; margin-top: 14px; background: #fff; border: 1.5px solid #171713; border-radius: 18px; }
.route-selection { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
#point-detail { font-size: .9rem; overflow-wrap: anywhere; }
.route-timeline label { font-size: .875rem; }
.route-timeline input { display: block; width: 100%; margin: 8px 0 18px; accent-color: #43089f; min-height: 32px; }
.route-muted { font-size: .875rem; color: #575550; }
#notice { min-height: 1.5em; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 12px; }
.route-point-icon { background: var(--route-point, #ff5095); border: 3px solid #fff; border-radius: 100%; box-shadow: 0 0 0 2px var(--route-point, #ff5095); }
@media (max-width: 600px) { .route-toolbar { align-items: stretch; } .route-date { gap: 6px; } .route-view button { padding: 8px 11px; } .route-stats { gap: 8px 16px; } #time-range { width: 100%; } .route-controls, .route-timeline { padding: 16px; } }