:root{--activum-teal: #62c0bb;--activum-teal-light: #82d0cc;--activum-teal-dark: #43aaa4;--activum-teal-glow: rgba(98, 192, 187, .25);--bg-primary: #f0f4f8;--bg-secondary: #ffffff;--bg-card: rgba(255, 255, 255, .82);--bg-card-hover:rgba(255, 255, 255, .95);--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--text-on-teal: #ffffff;--border-color: rgba(148, 163, 184, .2);--shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);--shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);--shadow-lg: 0 12px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);--shadow-teal: 0 8px 30px rgba(98, 192, 187, .3);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-display: "Racing Sans One", system-ui, sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 64px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .6s cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text-primary);background:transparent;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glass-card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-normal),transform var(--transition-normal)}.glass-card:hover{box-shadow:var(--shadow-lg)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}@keyframes countUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.stagger>*:nth-child(1){animation:fadeInUp .5s ease both;animation-delay:.05s}.stagger>*:nth-child(2){animation:fadeInUp .5s ease both;animation-delay:.15s}.stagger>*:nth-child(3){animation:fadeInUp .5s ease both;animation-delay:.25s}.stagger>*:nth-child(4){animation:fadeInUp .5s ease both;animation-delay:.35s}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--activum-teal-light);border-radius:3px}#root{width:90%;max-width:960px;margin:0 auto;padding:var(--space-xl) 0 var(--space-2xl)}.dashboard-header{text-align:center;margin-bottom:var(--space-xl);animation:fadeInUp .6s ease both}.dashboard-header .logo-badge{display:inline-flex;align-items:center;gap:var(--space-sm);background:linear-gradient(135deg,var(--activum-teal-dark),var(--activum-teal));color:var(--text-on-teal);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:var(--space-md)}.dashboard-header h1{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;color:var(--text-primary);letter-spacing:.01em;margin-bottom:var(--space-sm)}.dashboard-header .subtitle{font-size:1.05rem;color:var(--text-secondary);max-width:480px;margin:0 auto}.live-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}.counter-section{padding:var(--space-xl) var(--space-xl);margin-bottom:var(--space-lg);text-align:center;animation:fadeInUp .5s ease both;animation-delay:.1s}.counter-label{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-sm)}.counter-number{font-family:var(--font-display);font-size:clamp(4rem,12vw,8rem);line-height:1;color:var(--activum-teal);animation:countUp .8s cubic-bezier(.16,1,.3,1) both;animation-delay:.3s;text-shadow:0 2px 20px var(--activum-teal-glow)}.counter-unit{font-size:clamp(1.4rem,4vw,2.2rem);color:var(--text-secondary);margin-left:var(--space-sm);font-family:var(--font-display)}.progress-section{margin-top:var(--space-lg);padding:0 var(--space-xs)}.progress-labels{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--text-muted);margin-bottom:28px;letter-spacing:.04em}.progress-labels .goal-label{color:var(--activum-teal-dark)}.progress-track{height:12px;background:#94a3b833;border-radius:100px;position:relative;overflow:visible;margin-bottom:18px}.progress-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--activum-teal-dark),var(--activum-teal),var(--activum-teal-light));background-size:200% 100%;transition:width 1.2s cubic-bezier(.16,1,.3,1);animation:shimmer 2.5s linear infinite;position:relative;overflow:hidden}.progress-pct{margin-top:40px;font-size:.85rem;color:var(--text-secondary);text-align:right}.progress-pct strong{color:var(--activum-teal-dark)}.counter-activities-note{margin-top:var(--space-md);font-size:.85rem;color:var(--text-muted);text-align:center;letter-spacing:.02em}.section-title{display:flex;align-items:center;gap:var(--space-sm);font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md);letter-spacing:.01em}.section-title .section-icon{font-size:1.3rem}.leaderboard-section{padding:var(--space-lg);margin-bottom:var(--space-lg);animation:fadeInUp .5s ease both;animation-delay:.2s}.athlete-list{display:flex;flex-direction:column;gap:var(--space-sm)}.athlete-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:var(--space-md);padding:14px var(--space-md);border-radius:var(--radius-md);background:#f8fafcb3;border:1px solid transparent;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);cursor:default}.athlete-row:hover{background:#fffffff2;border-color:var(--activum-teal-glow);transform:translate(4px)}.athlete-row.top-1{background:linear-gradient(90deg,#ffd70014,#ffd70005)}.athlete-row.top-2{background:linear-gradient(90deg,#c0c0c01a,#c0c0c005)}.athlete-row.top-3{background:linear-gradient(90deg,#cd7f321a,#cd7f3205)}.athlete-rank{font-family:var(--font-display);font-size:1.1rem;text-align:center;color:var(--text-muted)}.athlete-rank.medal{font-size:1.4rem}.athlete-info{min-width:0}.athlete-name{font-weight:600;font-size:.95rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.athlete-increment{font-size:.78rem;color:var(--text-muted);margin-top:1px}.athlete-increment span{color:var(--activum-teal);font-weight:600}.athlete-km{text-align:right;font-family:var(--font-display);font-size:1.15rem;color:var(--activum-teal-dark);white-space:nowrap}.athlete-km-unit{font-size:.7rem;font-family:var(--font-body);font-weight:500;color:var(--text-muted);margin-left:2px}.carousel-section{margin-bottom:var(--space-xl);animation:fadeInUp .5s ease both;animation-delay:.3s}.carousel-track{display:flex;gap:var(--space-md);overflow-x:auto;padding:var(--space-sm) var(--space-xs) var(--space-md);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.activity-card{flex:0 0 220px;scroll-snap-align:start;background:var(--bg-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal),transform var(--transition-normal);cursor:default}.activity-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.activity-card-type{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:var(--activum-teal-glow);color:var(--activum-teal-dark);margin-bottom:var(--space-sm)}.activity-card-title{font-size:.92rem;font-weight:600;color:var(--text-primary);line-height:1.35;margin-bottom:var(--space-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.activity-card-athlete{font-size:.8rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}.activity-card-distance{font-family:var(--font-display);font-size:1.6rem;color:var(--activum-teal);line-height:1}.activity-card-distance-unit{font-size:.8rem;font-family:var(--font-body);color:var(--text-muted);margin-left:3px}.activity-card-date{font-size:.75rem;color:var(--text-muted);margin-top:var(--space-sm)}.skeleton{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}.skeleton-block{height:20px;margin-bottom:var(--space-sm)}.skeleton-large{height:80px;border-radius:var(--radius-md);margin-bottom:var(--space-md)}.error-state{text-align:center;padding:var(--space-xl);animation:fadeInUp .5s ease both}.error-state h2{color:var(--text-primary);margin-bottom:var(--space-sm)}.error-state p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.btn-retry{display:inline-flex;align-items:center;gap:var(--space-sm);background:linear-gradient(135deg,var(--activum-teal-dark),var(--activum-teal));color:var(--text-on-teal);border:none;border-radius:var(--radius-md);padding:12px 28px;font-size:.95rem;font-weight:600;font-family:var(--font-body);cursor:pointer;box-shadow:var(--shadow-teal);transition:opacity var(--transition-fast),transform var(--transition-fast)}.btn-retry:hover{opacity:.9;transform:translateY(-1px)}@media(max-width:768px){#root{width:94%;padding:var(--space-lg) 0 var(--space-xl)}.counter-section,.leaderboard-section{padding:var(--space-lg)}.athlete-row{grid-template-columns:32px 1fr auto;gap:var(--space-sm)}.activity-card{flex:0 0 180px}}#root.view-ranking,#root.view-activities{padding-top:var(--space-lg)}#root.view-counter{padding:16px 0 8px!important;width:100%!important;max-width:100%!important}#root.view-counter .dashboard-header{margin-bottom:var(--space-sm)!important}#root.view-counter .dashboard-header h1{font-size:clamp(1.4rem,6.5vw,2.4rem)!important}#root.view-counter .dashboard-header .subtitle{font-size:clamp(.8rem,2.8vw,1.05rem)!important;max-width:380px!important;margin:0 auto!important}#root.view-counter .counter-section{padding:16px!important;margin-bottom:0!important;border-radius:var(--radius-md)!important}#root.view-counter .counter-label{font-size:clamp(.7rem,2.2vw,.8rem)!important;margin-bottom:var(--space-xs)!important}#root.view-counter .counter-number{font-size:clamp(3rem,12vw,5.5rem)!important}#root.view-counter .counter-unit{font-size:clamp(1.1rem,4vw,1.8rem)!important;margin-left:var(--space-xs)!important}#root.view-counter .counter-activities-note{font-size:clamp(.7rem,2.2vw,.85rem)!important;margin-top:var(--space-xs)!important;color:var(--text-muted)}#root.view-counter .progress-section{margin-top:var(--space-sm)!important}#root.view-counter .progress-labels{font-size:clamp(.7rem,2.2vw,.8rem)!important;margin-bottom:24px!important}#root.view-counter .progress-pct{font-size:clamp(.7rem,2.2vw,.85rem)!important;margin-top:32px!important}#root.view-counter .checkpoint-label{font-size:clamp(.5rem,1.8vw,.6rem)!important}#root.view-counter .progress-track{margin-bottom:14px!important}#root.view-ranking .leaderboard-section,#root.view-activities .carousel-section{margin-bottom:0}.checkpoint-marker{position:absolute;top:-3px;height:calc(100% + 6px);width:2px;background:var(--text-muted);transform:translate(-50%);transition:background var(--transition-normal);z-index:2}.checkpoint-marker:before{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:var(--text-muted);border:2px solid rgba(255,255,255,.8);transition:background var(--transition-normal),box-shadow var(--transition-normal)}.checkpoint-label{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);font-size:.6rem;font-weight:700;color:var(--text-muted);white-space:nowrap;letter-spacing:.02em}.checkpoint-marker.achieved{background:var(--activum-teal)}.checkpoint-marker.achieved:before{background:var(--activum-teal);box-shadow:0 0 8px var(--activum-teal-glow);animation:checkpoint-pulse 2s ease-in-out infinite}.checkpoint-marker.achieved .checkpoint-label{color:var(--activum-teal-dark)}@keyframes checkpoint-pulse{0%,to{box-shadow:0 0 6px var(--activum-teal-glow);transform:translate(-50%) scale(1)}50%{box-shadow:0 0 14px var(--activum-teal-glow);transform:translate(-50%) scale(1.15)}}.checkpoint-flag{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-38%);width:clamp(18px,3.2vw,32px);height:auto;z-index:3;pointer-events:none;transition:filter var(--transition-normal)}.checkpoint-marker.achieved .checkpoint-flag{filter:hue-rotate(120deg) saturate(1.3) brightness(.95)}
