:root{--bg: #0a0a0a;--surface: #141414;--border: #222222;--text: #f0f0f0;--muted: #666666;--accent: #e8ff47;--swim: #38bdf8;--bike: #fb923c;--run: #a78bfa;--radius: 12px;--radius-sm: 6px;--font: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100%;display:flex;flex-direction:column}h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}h3{font-size:1rem;font-weight:600}p{color:var(--muted);font-size:.9375rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:var(--radius);font-size:.9375rem;font-weight:600;cursor:pointer;border:none;transition:opacity .15s,transform .1s;text-decoration:none}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#0a0a0a}.btn-primary:hover{opacity:.9}.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--muted)}.btn-full{width:100%}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.page{flex:1;display:flex;flex-direction:column;padding:24px 20px;max-width:480px;margin:0 auto;width:100%}.page-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.sport-badge{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}.sport-swim{background:color-mix(in srgb,var(--swim) 15%,transparent);color:var(--swim)}.sport-bike{background:color-mix(in srgb,var(--bike) 15%,transparent);color:var(--bike)}.sport-run{background:color-mix(in srgb,var(--run) 15%,transparent);color:var(--run)}.sport-other{background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}.stat{font-family:var(--font-mono);font-size:.8125rem;color:var(--muted)}.stat span{color:var(--text);font-weight:500}.divider{height:1px;background:var(--border);margin:16px 0}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}