.track-section{padding:20px;border:1px solid #d9e4d4;border-radius:16px;background:#f8faf4}
.track-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.track-heading h3{margin:0 0 5px}.track-heading p,.track-caption{font-size:12px;color:#61745e;line-height:1.7;margin:8px 0}
.track-map{margin:16px 0 12px}.track-map svg,.track-elevation svg{display:block;width:100%;height:auto;max-height:430px}
.track-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:15px 0}
.track-stats>div{min-width:0;background:#fff;border:1px solid #e0e7d9;padding:12px;border-radius:11px}
.track-stats small{font-size:11px;display:block;color:#61745e}.track-stats strong{font-size:19px;display:block;margin-top:4px;color:#234d39;white-space:nowrap}.track-stats strong span{font-size:11px;font-weight:500}
.track-elevation{margin-top:18px}.track-elevation h4{font-size:13px;margin:0 0 8px;color:#3e6044}
.track-warnings{font-size:12px;line-height:1.75;color:#7c6030;background:#fff6e7;border:1px solid #ead9ba;border-radius:10px;padding:12px 16px 12px 30px;margin:12px 0 0}
.track-empty{font-size:13px;color:#61745e;text-align:center;padding:20px;background:#f1f5eb;border-radius:12px}
.track-error{font-size:13px;color:#923d2f;background:#fff0e9;padding:12px;border-radius:9px}
.track-upload{margin-top:20px;border:1px solid #d9e4d4;background:#f7faf3;border-radius:13px;padding:17px}
.track-upload h3{font-size:16px;margin:0 0 8px}.track-upload p{font-size:12px;color:#61745e;line-height:1.7}.track-upload .actions{margin-top:12px}.track-upload input[type=file]{max-width:100%;font-size:12px;background:#fff}.track-upload .track-confirm{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.65;margin:16px 0}.track-confirm input{flex:none;margin-top:5px}.track-upload .track-file-name{font-size:12px;overflow-wrap:anywhere;color:#35603e;margin:10px 0}.track-upload [hidden]{display:none}
.track-style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #d9e3d1;border-radius:12px;background:#edf2e6;margin-bottom:10px}
.track-style-options>button{font:inherit;font-size:11px;line-height:1.4;min-height:42px;padding:7px 4px;border:0;border-radius:8px;background:transparent;color:#617059;cursor:pointer;white-space:nowrap}
.track-style-options>button.active{background:#fff;color:#28553c;box-shadow:0 1px 4px #284b2620;font-weight:700}
.track-style-options>button:focus-visible,.track-play-button:focus-visible,.track-scrubber input:focus-visible{outline:2px solid #3e7946;outline-offset:2px}
.detail-track-visual{min-width:0}.detail-track-heading{margin-top:10px}.detail-track-heading>p{margin:0;font-size:11px}.detail-track-heading>.btn{min-height:42px}
.detail-track-visual .track-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.detail-track-visual .track-map{margin:0;border-radius:16px;overflow:hidden}
.detail-track-visual .track-caption{font-size:11px}
.track-player .track-stats>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border-radius:9px}
.track-player .track-stats small{font-size:11px;line-height:1.45}
.track-player .track-stats strong{font-size:16px;line-height:1.4;margin:0}
.track-player-controls{padding:13px 13px 9px;border:1px solid #dce5d5;border-radius:12px;background:#f7faf3;margin-top:10px}
.track-play-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.track-play-button{border:0;background:#214b36;color:#fff;border-radius:9px;min-height:42px;padding:9px 14px;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;flex:none}
.track-play-button:disabled{opacity:.55;cursor:default}
.track-player-readout{font-size:11px;color:#4f654c;text-align:right;font-variant-numeric:tabular-nums;line-height:1.6}
.track-scrubber{display:flex;align-items:center;min-height:44px;margin:3px 0 0}
.track-scrubber input{display:block;width:100%;margin:0;accent-color:#3d714b;min-height:32px;cursor:pointer;touch-action:pan-y}
.track-player-status{font-size:10px;line-height:1.7;color:#6c795f;margin:0;min-height:17px}
.track-player svg{touch-action:pan-y;user-select:none}
@media(max-width:700px){.track-section{padding:14px}.track-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.track-stats strong{font-size:18px}.track-upload{padding:13px}.track-heading{gap:8px}.track-heading>.btn{width:100%}.detail-track-heading>.btn{width:auto}.track-upload .actions>button{flex:1;min-width:110px}.track-map svg{min-height:175px}.track-caption{font-size:11px}.track-style-options>button{min-height:44px;font-size:11px}.track-player-controls{padding:10px 11px 8px}.track-player-readout{font-size:10px}.track-player .track-elevation{margin-top:14px}.track-player .track-stats{margin:12px 0}}
@media(prefers-reduced-motion:reduce){.track-player *,.track-style-options *{animation:none;transition:none;scroll-behavior:auto}}