*{box-sizing:border-box;margin:0;padding:0}:root{--important-color:#4a6bea;--important-color-05:#4a6bea88;--white-color:#fff;--dark-bg:#212529}body{background:linear-gradient(135deg,#667eeabb,#000256bb);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh}.container{margin:0 auto;padding:0}.header{color:var(--white-color);margin:0;padding:0;text-align:center}.header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.1rem;opacity:.9}.controls{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-radius:15px;box-shadow:0 8px 32px rgba(0,0,0,.1);margin-bottom:20px;padding:20px}.controls h3{color:#333;font-size:1.2rem;margin-bottom:15px}.button-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.btn{background:linear-gradient(45deg,#667eea,#764ba2);border:none;border-radius:25px;box-shadow:0 4px 15px rgba(102,126,234,.3);color:var(--white-color);cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .3s ease}.btn:hover{box-shadow:0 6px 20px rgba(102,126,234,.4);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn.success{background:linear-gradient(45deg,#2ecc71,#27ae60);box-shadow:0 4px 15px rgba(46,204,113,.3)}.btn.success:hover{box-shadow:0 6px 20px rgba(46,204,113,.4)}.btn.danger{background:linear-gradient(45deg,#ff6b6b,#ee5a24);box-shadow:0 4px 15px hsla(0,100%,71%,.3)}.btn.danger:hover{box-shadow:0 6px 20px hsla(0,100%,71%,.4)}.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.map-container{background:#fff;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,.2);overflow:hidden;padding:5px}#map{height:85vh;width:100%}#map,.info-panel{border-radius:15px}.info-panel{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);box-shadow:0 8px 32px rgba(0,0,0,.1);display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:10px;padding:15px}.info-section h3{color:#333;font-size:1.1rem;margin-bottom:10px}.info-section p{color:#666;line-height:1.6;margin-bottom:8px}.status{border:none;border-radius:20px;display:inline-block;font-size:12px;font-weight:700;margin-top:5px;padding:5px 12px}.status.active{background:#007a37;color:#fff}.status.active.big{font-size:larger}.status.stopped{background:#e74c3c;color:#fff}.status.paused{background:#f39c12;color:#fff}.connection-status{align-items:center;display:flex;gap:10px;margin-bottom:15px}.connection-dot{background:#e74c3c;border-radius:50%;height:12px;transition:background .3s ease;width:12px}.connection-dot.connected{animation:pulse 2s infinite;background:#2ecc71}.cyclist-marker{align-items:center;background:#fff;border:4px solid #003aff;border-radius:50%;box-shadow:0 2px 20px rgba(0,0,0,.3);display:flex;font-size:20px;height:40px;justify-content:center;transition:all .3s ease;width:40px}.cyclist-marker.connected{border-color:#28a745}.cyclist-marker.disconnected{border-color:#dc3545}.cyclist-marker .no-connection-text{background:rgba(220,53,69,.95);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.2);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;font-size:20px;font-weight:700;left:50%;padding:4px 8px;position:absolute;top:-40px;transform:translateX(-50%);white-space:nowrap;z-index:1000}.cyclist-marker.moving{animation:bounce 1s infinite;border-color:#27ae60}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media (max-width:768px){.header h1{font-size:2rem}.info-panel{grid-template-columns:1fr}.button-group{justify-content:center}.btn{flex:1;min-width:120px}}.leaflet-attribution-flag,.leaflet-control-attribution a{display:none!important}.start-marker{align-items:center;background:hsla(0,0%,100%,.95);border:3px solid #ff6b35;border-radius:50%;box-shadow:0 4px 12px rgba(255,107,53,.3);cursor:pointer;display:flex;font-size:20px;justify-content:center;transition:all .3s ease;z-index:999}.start-marker:hover{border-color:#ff5722;box-shadow:0 6px 16px rgba(255,107,53,.4);transform:scale(1.1)}.speed-overlay{border-radius:15px;font-size:45px!important;top:115px}.speed-overlay,.track-info-overlay{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.65);box-shadow:0 4px 12px rgba(0,0,0,.15);line-height:1.5;margin-left:12px;padding:10px 15px;position:absolute;right:12px;z-index:1000}.track-info-overlay{border-radius:12px;font-size:14px;top:12px}.trackDataDisplay{color:var(--important-color);font-size:15px;font-weight:700}.track-data-display-second{color:var(--important-color);font-size:15px;font-weight:400}.action-buttons{bottom:140px;gap:20px;position:absolute;right:20px;z-index:1001}.action-button,.action-buttons{display:flex;flex-direction:column}.action-button{align-items:center;cursor:pointer;transition:all .3s ease;user-select:none}.action-button:hover{transform:scale(1.1)}.action-icon{align-items:center;backdrop-filter:blur(10px);background:var(--important-color);border:1px solid hsla(0,0%,100%,.9);border-radius:50%;display:flex;height:50px;justify-content:center;margin-bottom:8px;transition:all .3s ease;width:50px}.action-icon i{color:#fff;font-size:22px;transition:all .3s ease}.action-count{color:var(--important-color);font-size:12px;font-weight:600;text-align:center;text-shadow:0 1px 3px hsla(0,0%,100%,.5)}.like-button.liked .action-icon{background:#fff;border-color:var(--important-color);transform:scale(1.1)}.like-button.liked .action-icon i{animation:heartBeat .6s ease;color:#ff4458}.like-button.liked .action-icon i:before{content:"\f004"}@keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(1.1)}to{transform:scale(1)}}.share-button:hover .action-icon{background:rgba(65,163,253,.9);transform:rotate(15deg)}.share-button:hover .action-icon i{color:#fff}.content-info{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border-radius:15px;bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:var(--important-color);font-size:14px;left:20px;line-height:1.5;max-width:450px;padding:15px;position:absolute;right:100px;z-index:1001}.content-title{font-size:20px;font-weight:700;line-height:1.3;margin:0;padding:0;text-shadow:0 1px 3px hsla(0,0%,100%,.5)}.content-author{gap:10px;margin-bottom:8px}.author-avatar,.content-author{align-items:center;display:flex}.author-avatar{background:var(--important-color);border:2px solid hsla(0,0%,100%,.3);border-radius:50%;height:32px;justify-content:center;width:32px}.author-avatar i{color:#fff;font-size:16px}.author-name{color:var(--important-color);font-size:14px;font-weight:600;text-shadow:0 1px 3px hsla(0,0%,100%,.5)}.content-description{margin-bottom:12px}.description-text{color:var(--important-color);font-size:14px;line-height:1.4;margin:0;text-shadow:0 1px 3px hsla(0,0%,100%,.6)}.hashtags{color:#41a3fd;font-weight:600}.content-stats{display:flex;flex-wrap:wrap;gap:20px}.stat-item{align-items:center;color:hsla(0,0%,100%,.8);display:flex;font-size:12px;gap:5px;text-shadow:0 1px 3px rgba(0,0,0,.5)}.stat-item i{font-size:11px}@media (max-width:768px){.action-buttons{gap:15px;right:15px}.action-icon i{font-size:20px}.content-info{bottom:20px;left:15px;max-width:350px;right:80px}.content-title{font-size:18px}.content-stats{gap:15px}}@media (max-width:480px){.action-icon i{font-size:18px}.action-count{font-size:11px}.content-info{bottom:20px;left:10px;max-width:280px;right:70px}.content-title{font-size:16px;line-height:1.2}.author-avatar{height:28px;width:28px}.author-name,.description-text{font-size:13px}.stat-item{font-size:11px}}.content-info{animation:slideInUp .6s ease-out}.action-buttons{animation:slideInRight .6s ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}.floating-heart{font-size:12px;left:50%;pointer-events:none;position:absolute;top:0;transform:translateX(-50%);z-index:1000}.share-overlay{align-items:center;backdrop-filter:blur(10px);background:rgba(0,0,0,.8);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:2000}.share-overlay.active{opacity:1}.share-menu{background:#fff;border-radius:20px;max-width:300px;padding:30px;position:relative;transform:scale(.9);transition:transform .3s ease;width:90%}.share-overlay.active .share-menu{transform:scale(1)}.share-menu h4{color:#333;font-weight:600;margin:0 0 20px;text-align:center}.share-option{align-items:center;border-radius:12px;cursor:pointer;display:flex;margin-bottom:8px;padding:12px;transition:background-color .2s ease}.share-option:hover{background-color:#f5f5f5}.share-icon{align-items:center;border-radius:50%;display:flex;height:40px;justify-content:center;margin-right:12px;width:40px}.share-icon i{color:#fff;font-size:18px}.share-option span{color:#333;font-weight:500}.share-close{background:none;border:none;color:#999;cursor:pointer;font-size:24px;line-height:1;padding:5px;position:absolute;right:15px;top:10px}.share-close:hover{color:#333}.notification{background:rgba(0,0,0,.8);border-radius:25px;color:#fff;font-size:14px;font-weight:500;padding:12px 20px;position:fixed;right:20px;top:20px;transform:translateX(100%);transition:transform .3s ease;z-index:1001}.notification.show{transform:translateX(0)}@media (max-width:480px){.share-menu{border-radius:15px;padding:20px}.notification{font-size:13px;padding:10px 16px;right:10px;top:10px}}.altitude-info-overlay.updating,.speed-info-overlay.updating{background:hsla(0,0%,100%,.85);box-shadow:0 6px 16px rgba(0,0,0,.2);transform:scale(1.02)}#altitudeValue,#speedValue{display:inline-block;font-weight:700;transition:all .3s ease}.speed-info-overlay.updating #speedValue{color:#007bff;transform:scale(1.1)}.altitude-info-overlay.updating #altitudeValue{color:#28a745;transform:scale(1.1)}@media (max-width:768px){.altitude-info-overlay,.speed-info-overlay{font-size:13px;left:8px;padding:8px 12px;top:8px}.altitude-info-overlay{top:60px}}.altitude-arrow{font-size:1.5em;font-weight:700;min-width:20px;text-align:center}.altitude-arrow.show{opacity:1;transform:scale(1)}.altitude-arrow.altitude-up{color:#22c55e}.altitude-arrow.altitude-down{color:#ef4444}.altitude-arrow.altitude-stable{color:#6b7280}.history-speed-range::-webkit-slider-runnable-track{background-color:#0d6efd;border-radius:1rem;height:.5rem}.history-speed-range::-moz-range-track{background-color:#0d6efd;border-radius:1rem;height:.5rem}.history-speed-range::-webkit-slider-thumb{background-color:#198754;border:none;border-radius:50%;height:1rem;margin-top:-.25rem;width:1rem}.history-speed-range::-moz-range-thumb{background-color:#198754;border:none;border-radius:50%;height:1rem;width:1rem}.history-speed-range{accent-color:#198754}.gap-spacer{height:20px}.important-link{color:var(--important-color);font-weight:700;text-decoration:none}.target-marker{align-items:center;background:hsla(0,0%,100%,.95);border:3px solid #ff6b35;border-radius:50%;box-shadow:0 0 10px #000;cursor:pointer;display:flex;font-size:20px;justify-content:center;transition:all .3s ease;z-index:999}.geo-image-marker{background:none!important;border:none!important}.geo-image-container{background:#fff;border:4px solid #fff;border-radius:6px;cursor:pointer;height:60px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;width:60px}.geo-image-container:hover{transform:scale(1.05)}.geo-image-thumb{display:block;height:100%!important;min-height:100%;min-width:100%;object-fit:cover;object-position:center;width:100%!important}.charts-panel{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-radius:15px;box-shadow:0 8px 32px rgba(0,0,0,.1);display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:10px;padding:20px}.chart-container{background:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:15px;transition:transform .3s ease,box-shadow .3s ease}.chart-container:hover{box-shadow:0 6px 20px rgba(0,0,0,.15);transform:translateY(-2px)}.chart-container h3{color:#333;font-size:1.1rem;font-weight:600;margin-bottom:15px;text-align:center}.chart-container canvas{border-radius:8px;height:200px!important;width:100%!important}@media (max-width:768px){.charts-panel{gap:15px;grid-template-columns:1fr;padding:15px}.chart-container{padding:12px}.chart-container h3{font-size:1rem;margin-bottom:12px}.chart-container canvas{height:180px!important}}@media (max-width:480px){.chart-container canvas{height:160px!important}}.scroll-to-top-btn{bottom:40px;opacity:0;pointer-events:none;position:fixed;right:40px;transition:opacity .3s;z-index:1100}.scroll-to-top-btn.visible{opacity:1;pointer-events:auto}@media (max-width:768px){.scroll-to-top-btn{bottom:20px;right:10px}.scroll-to-top-btn .action-icon{height:40px;width:40px}.scroll-to-top-btn .action-icon i{font-size:18px}}footer{background-color:var(--dark-bg);color:#fff;padding:3rem 0 2rem}.footer-container{margin:0 auto;max-width:1200px;padding:0 1.5rem}.footer-content{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;margin-bottom:2rem}.footer-column{flex:1;min-width:250px}.footer-title{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;padding-bottom:.75rem;position:relative}.footer-title:after{background-color:var(--primary-color);bottom:0;content:"";height:3px;left:0;position:absolute;width:40px}.footer-links{list-style:none;margin:0;padding:0}.footer-link{margin-bottom:.75rem}.footer-link a{color:hsla(0,0%,100%,.7);text-decoration:none;transition:var(--transition)}.footer-link a:hover{color:#fff}