*{box-sizing:border-box}body{margin:0;background:#101820;color:#fff;font-family:Arial,sans-serif}header{text-align:center;padding:18px}header p,.hint{color:#b5c9d1}main{max-width:760px;margin:auto;padding:12px}.panel{background:#1e2b35;border:1px solid #3c5260;border-radius:14px;padding:15px;margin-bottom:14px}h2{margin:0 0 12px;font-size:20px}label{display:block;margin:12px 0}select{display:block;width:100%;margin-top:5px;padding:12px;background:#0e1a21;color:white;border:1px solid #66808e;border-radius:9px}button{padding:12px;border:0;border-radius:9px;background:#17d37d;color:#07170f;font-size:16px;font-weight:bold}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.actions button{flex:1 1 105px}.cameraContainer{position:relative;width:100%;aspect-ratio:3/4;max-height:65vh;overflow:hidden;border-radius:12px;background:#080d11}.cameraContainer video{width:100%;height:100%;object-fit:cover}#navigationArrow{position:absolute;left:50%;bottom:18%;width:clamp(95px,28vw,180px);height:clamp(125px,38vw,230px);transform-origin:50% 65%;pointer-events:none;filter:drop-shadow(0 8px 5px #0009) drop-shadow(0 0 8px #00ff6680)}#navigationArrow svg{width:100%;height:100%}.arrow-shadow{fill:#0008;transform:translate(4px,8px)}.arrow-body{fill:#00e85c;stroke:#baffd1;stroke-width:3}.arrow-highlight{fill:#ffffff45}.overlay{position:absolute;bottom:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:8px}.overlay span{background:#07131be0;padding:8px;border-radius:8px;font-size:13px}#motionStatus{color:#76f3ae}#motionData,.hint,#qrStatus{font-size:13px;overflow-wrap:anywhere}#routeSteps{line-height:2}#routeSteps .active{color:#70f4a5;font-weight:bold}#qrLinks{display:flex;flex-wrap:wrap;gap:8px}#qrLinks a{color:#8feaff;background:#304650;padding:8px;border-radius:8px}#qrReader{max-width:400px;margin:auto}#qrReader[hidden]{display:none}
.stepCounter{margin:12px 0;padding:18px;border:2px solid #17d37d;border-radius:14px;text-align:center;background:#102c24}.stepCounter strong{display:block;font-size:58px;line-height:1.3;color:#78ffc0;font-variant-numeric:tabular-nums}.stepCounter #stepSensorStatus{font-size:13px;color:#c3dfd2;margin:8px 0}.stepCounter button{background:#334f45;color:white;font-size:14px;padding:9px 16px}

.trackingPanel{background:#14252d;border:1px solid #46646d;border-radius:14px;padding:14px;margin-top:14px}.trackingPanel h3{margin:0 0 12px}.trackingPanel input{display:block;margin-top:6px;width:100%;padding:10px;border-radius:8px;background:#0c1920;border:1px solid #64828a;color:white;font-size:18px}.trackingStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.trackingStats>div{background:#243c43;padding:10px 5px;border-radius:10px;text-align:center}.trackingStats small{display:block;font-size:12px;color:#b6d1d8}.trackingStats strong{display:block;font-size:19px;margin-top:8px;overflow-wrap:anywhere}.progressTrack{height:14px;background:#38505a;border-radius:12px;overflow:hidden}#routeProgressBar{width:0%;height:100%;background:#18d27a;transition:width .25s}#trackingHint{color:#c5d8dd;font-size:13px}#recalibrateButton{background:#3b5560;color:white;width:100%}@media(max-width:390px){.trackingStats strong{font-size:16px}}

#mappingOverlay{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:manipulation}#mappingOverlay[hidden]{display:none}.mapLine{fill:none;stroke:#c1cbd2;stroke-width:1.6;stroke-dasharray:2 1.2;vector-effect:non-scaling-stroke;pointer-events:none;filter:drop-shadow(0 0 2px #000)}.mapLine.confirmed{stroke:#00f57c;stroke-width:3;stroke-dasharray:none}.mapHit{fill:none;stroke:transparent;stroke-width:14;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}.mappingTools{border:1px solid #536b75;border-radius:12px;padding:12px;margin-top:10px}.mappingToggle{display:flex;align-items:center;gap:8px;font-weight:bold}.mappingToggle input{width:22px;height:22px;accent-color:#17d37d}.mappingTools button{font-size:14px}.mappingTools #mappingStatus{color:#a6ffd0;font-size:14px}.cameraContainer.mappingActive #navigationArrow{display:none}.cameraContainer.mappingActive .overlay{pointer-events:none;z-index:4}

#mappingOverlay .mapHit{stroke-width:18}#mappingOverlay .mapLine{stroke-width:2}#mappingOverlay .mapLine.confirmed{stroke-width:3.5}

/* Canvas draws confirmed and proposed lines above the live camera. */
#mappingOverlay{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;z-index:8!important;pointer-events:auto;touch-action:manipulation}#mappingOverlay[hidden]{display:none!important}.cameraContainer.mappingActive .overlay{z-index:9}

/* HTML segments use percentages of the visible camera, no canvas sizing needed. */
#mappingOverlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:20!important;pointer-events:none;overflow:hidden}#mappingOverlay[hidden]{display:none!important}.detectedLine{position:absolute;height:0;border-top:4px dashed #f8f8f8;transform-origin:0 0;filter:drop-shadow(0 1px 3px #000);pointer-events:auto;cursor:pointer;touch-action:manipulation}.detectedLine.approved{border-top:5px solid #00f86a}.mappingActive #navigationArrow{display:none}.cameraContainer:not(.mappingActive) #navigationArrow{display:block}

/* Keep the overlay clickable while allowing touches outside lines to pass through. */
#mappingOverlay{pointer-events:none!important}.detectedLine{pointer-events:auto!important;min-height:12px;border-top-width:5px!important}.detectedLine.approved{border-top-style:solid!important}

.roomMapPanel{margin-top:14px;padding:14px;border:1px solid #536b75;border-radius:12px;background:#12232b}.roomMapPanel h3{margin:0 0 10px}.roomMapPanel svg{display:block;width:100%;height:250px;background:#0b1820;border:1px solid #38525f;border-radius:10px}.roomMapPanel line{stroke:#00f57c;stroke-width:1.1;stroke-linecap:round}.roomMapPanel #roomMapSummary{font-size:14px;color:#9feec8}

#vectorEditorPanel input:not([type=file]){display:block;width:100%;padding:12px;margin-top:6px;background:#0e1a21;border:1px solid #66808e;color:white;border-radius:9px}#vectorCanvas{display:block;width:100%;aspect-ratio:1;background:#102029;border:1px solid #607784;border-radius:12px;touch-action:none}#vectorCanvas .gridline{stroke:#36505b;stroke-width:.7}#vectorCanvas .vectorLine{stroke-width:4;stroke-linecap:round}#vectorCanvas .draftLine{stroke:#ffde7a;stroke-width:3;stroke-dasharray:6 5}#vectorCanvas .anchor{fill:#ffde7a}#vectorItems{display:grid;gap:7px}#vectorItems .vectorItem{background:#243a43;border-radius:8px;padding:10px;font-size:13px;display:flex;justify-content:space-between;gap:8px;align-items:center}#vectorItems button{padding:6px 10px;font-size:13px;background:#405965;color:white}