.milestone-tracker{width:100%;padding:var(--space-6);background:linear-gradient(135deg, var(--color-warm-50) 0%, var(--color-cream-100) 100%);border-radius:var(--radius-2xl);border:1px solid var(--color-warm-400)}.milestone-tracker--compact{padding:var(--space-4)}.milestone-tracker__header{margin-bottom:var(--space-8);justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.milestone-tracker__stats{flex-direction:column;display:flex}.milestone-tracker__count{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--weight-bold);background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;line-height:1.1}.milestone-tracker__count-label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--weight-medium);margin-top:2px}.milestone-tracker__next-info{align-items:center;gap:var(--space-3);background:var(--surface-card);padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);display:flex}.milestone-tracker__next-emoji{font-size:28px;line-height:1;animation:2s ease-in-out infinite milestone-emoji-bounce}@keyframes milestone-emoji-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.milestone-tracker__next-text{flex-direction:column;display:flex}.milestone-tracker__next-remaining{font-size:var(--text-xs);color:var(--text-tertiary);font-weight:var(--weight-medium)}.milestone-tracker__next-name{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text-primary)}.milestone-tracker__all-complete{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#f59e0b}.milestone-tracker__all-complete .milestone-tracker__next-name{color:#92400e}.milestone-tracker__path{margin-bottom:var(--space-6);grid-template-columns:repeat(3,1fr);gap:0;display:grid;position:relative}.milestone-tracker__item{padding:var(--space-3) 0;animation:.5s ease-out backwards milestone-item-appear;animation-delay:var(--animation-delay);justify-content:center;align-items:center;display:flex;position:relative}@keyframes milestone-item-appear{0%{opacity:0;transform:scale(.7)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.milestone-tracker__path>.milestone-tracker__item:nth-child(4){order:6}.milestone-tracker__path>.milestone-tracker__item:nth-child(5){order:5}.milestone-tracker__path>.milestone-tracker__item:nth-child(6){order:4}.milestone-node{align-items:center;gap:var(--space-2);z-index:2;flex-direction:column;display:flex;position:relative}.milestone-node__circle{width:64px;height:64px;transition:all var(--transition-base);font-weight:var(--weight-bold);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.milestone-node--achieved .milestone-node__circle{background:linear-gradient(145deg, color-mix(in srgb, var(--node-color) 90%, white) 0%, var(--node-color) 100%);border:3px solid color-mix(in srgb, var(--node-color) 70%, white);box-shadow:0 4px 16px color-mix(in srgb, var(--node-color) 35%, transparent), inset 0 2px 4px #ffffff4d;color:#fff}.milestone-node--achieved .milestone-node__emoji{filter:drop-shadow(0 1px 2px #0003);font-size:26px;line-height:1}.milestone-node--current .milestone-node__circle{animation:2.5s ease-in-out infinite node-pulse}@keyframes node-pulse{0%,to{box-shadow:0 4px 16px color-mix(in srgb, var(--node-color) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--node-color) 30%, transparent)}50%{box-shadow:0 4px 16px color-mix(in srgb, var(--node-color) 35%, transparent), 0 0 0 12px color-mix(in srgb, var(--node-color) 0%, transparent)}}.milestone-node__pulse{border:2px solid var(--node-color);opacity:0;border-radius:50%;animation:2.5s ease-out infinite pulse-ring;position:absolute;inset:-6px}@keyframes pulse-ring{0%{opacity:.8;transform:scale(.9)}to{opacity:0;transform:scale(1.4)}}.milestone-node__sparkle{color:var(--node-color);text-shadow:0 0 8px var(--node-color);font-size:16px;animation:3s linear infinite sparkle-rotate;position:absolute;top:-8px;right:-4px}@keyframes sparkle-rotate{0%{opacity:1;transform:rotate(0)scale(1)}50%{opacity:.7;transform:rotate(180deg)scale(1.2)}to{opacity:1;transform:rotate(360deg)scale(1)}}.milestone-node--next .milestone-node__circle{background:var(--surface-card);border:2.5px dashed color-mix(in srgb, var(--node-color) 50%, var(--border-color));color:var(--node-color);animation:3s ease-in-out infinite node-next-glow}@keyframes node-next-glow{0%,to{border-color:color-mix(in srgb, var(--node-color) 30%, var(--border-color));box-shadow:0 0 #0000}50%{border-color:color-mix(in srgb, var(--node-color) 60%, var(--border-color));box-shadow:0 0 16px color-mix(in srgb, var(--node-color) 15%, transparent)}}.milestone-node--locked .milestone-node__circle{background:var(--color-gray-100);border:2.5px solid var(--color-gray-300);color:var(--color-gray-400)}.milestone-node__threshold{font-size:var(--text-sm);font-weight:var(--weight-bold);font-family:var(--font-body)}.milestone-node__label{text-align:center;flex-direction:column;align-items:center;gap:1px;max-width:100px;display:flex}.milestone-node__name{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1.2}.milestone-node--locked .milestone-node__name{color:var(--text-muted)}.milestone-node__desc{color:var(--text-tertiary);font-size:10px;line-height:1.3}.milestone-connector{z-index:1;position:absolute}.milestone-connector--horizontal{border-radius:2px;width:40%;height:4px;top:calc(50% - 18px);right:-20%}.milestone-connector__line{border-radius:inherit;background:var(--color-gray-200);width:100%;height:100%}.milestone-connector--active .milestone-connector__line{background:linear-gradient(90deg,#4ade80 0%,#22d3ee 100%)}.milestone-connector--progress .milestone-connector__line{background:var(--color-gray-200)}.milestone-connector__progress-fill{height:100%;width:var(--progress,0%);border-radius:inherit;background:linear-gradient(90deg,#4ade80 0%,#22d3ee 100%);transition:width 1s ease-out;position:absolute;top:0;left:0}.milestone-connector__glow-trail{background:radial-gradient(#4ade8099 0%,#0000 70%);border-radius:50%;width:20px;height:10px;animation:3s ease-in-out infinite glow-travel;position:absolute;top:-3px;left:0}@keyframes glow-travel{0%{opacity:0;left:-10px}15%{opacity:1}85%{opacity:1}to{opacity:0;left:calc(100% - 10px)}}.milestone-tracker__item--reversed .milestone-connector--horizontal{left:-20%;right:auto}.milestone-tracker__item--reversed .milestone-connector__progress-fill{background:linear-gradient(-90deg,#4ade80 0%,#22d3ee 100%);left:auto;right:0}.milestone-tracker__item--reversed .milestone-connector__glow-trail{animation:3s ease-in-out infinite glow-travel-reversed}@keyframes glow-travel-reversed{0%{opacity:0;left:auto;right:-10px}15%{opacity:1}85%{opacity:1}to{opacity:0;left:auto;right:calc(100% - 10px)}}.milestone-connector--bend{border-radius:2px;width:4px;height:32px;bottom:-16px;left:50%;transform:translate(-50%)}.milestone-connector--bend .milestone-connector__line{width:100%;height:100%}.milestone-connector--bend .milestone-connector__progress-fill{width:100%;height:var(--progress,0%)}.milestone-tracker__progress-bar{margin-top:var(--space-4)}.milestone-tracker__progress-track{background:var(--color-gray-200);border-radius:var(--radius-full);width:100%;height:8px;position:relative;overflow:hidden}.milestone-tracker__progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#4ade80 0%,#22d3ee 25%,#818cf8 50%,#f59e0b 75%,#f43f5e 90%,#a855f7 100%) 0 0/200% 100%;height:100%;transition:width 1.5s cubic-bezier(.34,1.56,.64,1);animation:4s infinite progress-gradient;position:relative}@keyframes progress-gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.milestone-tracker__progress-glow{border-radius:var(--radius-full);background:radial-gradient(at 100%,#ffffffb3 0%,#0000 70%);width:24px;height:100%;position:absolute;top:0;right:0}.milestone-tracker__progress-labels{margin-top:var(--space-1);color:var(--text-muted);font-size:10px;font-weight:var(--weight-medium);justify-content:space-between;display:flex}@media (max-width:768px){.milestone-tracker{padding:var(--space-4)}.milestone-tracker__header{align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column}.milestone-tracker__count{font-size:var(--text-3xl)}.milestone-tracker__path{gap:var(--space-2);grid-template-columns:repeat(2,1fr)}.milestone-tracker__path>.milestone-tracker__item:nth-child(4),.milestone-tracker__path>.milestone-tracker__item:nth-child(5),.milestone-tracker__path>.milestone-tracker__item:nth-child(6){order:unset}.milestone-tracker__path>.milestone-tracker__item:nth-child(3){order:4}.milestone-tracker__path>.milestone-tracker__item:nth-child(4){order:3}.milestone-node__circle{width:52px;height:52px}.milestone-node--achieved .milestone-node__emoji{font-size:22px}.milestone-connector--horizontal{display:none}}@media (max-width:480px){.milestone-tracker__path{grid-template-columns:1fr 1fr}.milestone-node__circle{width:48px;height:48px}.milestone-node--achieved .milestone-node__emoji{font-size:20px}.milestone-node__label{max-width:80px}.milestone-node__name{font-size:10px}.milestone-node__desc{font-size:9px}}.milestone-tracker--compact .milestone-tracker__header{margin-bottom:var(--space-4)}.milestone-tracker--compact .milestone-tracker__count{font-size:var(--text-2xl)}.milestone-tracker--compact .milestone-node__circle{width:48px;height:48px}.milestone-tracker--compact .milestone-node--achieved .milestone-node__emoji{font-size:20px}