.streak-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.streak-badge:hover{transform:scale(1.05)}.streak-badge:focus{outline:none}.streak-badge:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;border-radius:var(--radius-md)}.streak-badge--loading{opacity:.6;pointer-events:none}.streak-badge--small .streak-badge-inner{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}.streak-badge--small .streak-badge-fire-icon{width:20px;height:20px}.streak-badge--small .streak-badge-count{font-size:var(--font-size-sm)}.streak-badge--medium .streak-badge-inner{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.streak-badge--medium .streak-badge-fire-icon{width:28px;height:28px}.streak-badge--medium .streak-badge-count{font-size:var(--font-size-lg)}.streak-badge--large .streak-badge-inner{padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-sm)}.streak-badge--large .streak-badge-fire-icon{width:36px;height:36px}.streak-badge--large .streak-badge-count{font-size:var(--font-size-2xl)}.streak-badge-inner{display:flex;align-items:center;background:linear-gradient(135deg,var(--color-surface) 0,var(--color-background) 100%);border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}.streak-badge:hover .streak-badge-inner{box-shadow:var(--shadow-md);border-color:var(--color-primary)}.streak-badge-fire-icon{flex-shrink:0;transition:transform var(--transition-fast),color var(--transition-fast)}.streak-badge--cool .streak-badge-fire-icon{color:#94a3b8}.streak-badge--warm .streak-badge-fire-icon{color:#f59e0b}.streak-badge--hot .streak-badge-fire-icon{color:#f97316}.streak-badge--blazing .streak-badge-fire-icon{color:#ef4444}.streak-badge-fire-icon--animating{animation:flameFlicker .5s ease-in-out infinite alternate}@keyframes flameFlicker{0%{transform:scale(1) rotate(-2deg)}to{transform:scale(1.1) rotate(2deg)}}.streak-badge-count{font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--color-text);line-height:1}.streak-badge--warm .streak-badge-inner{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24}.streak-badge--hot .streak-badge-inner{background:linear-gradient(135deg,#fed7aa,#fdba74);border-color:#f97316}.streak-badge--blazing .streak-badge-inner{background:linear-gradient(135deg,#fecaca,#fca5a5);border-color:#ef4444}.streak-badge--celebrating{animation:celebratePulse .6s ease-in-out 3}@keyframes celebratePulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.streak-badge--new-record .streak-badge-inner{background:linear-gradient(135deg,#fef3c7,#fde047 50%,#fbbf24);border-color:#eab308;box-shadow:0 0 20px rgba(234,179,8,.5)}.streak-badge-celebration-text{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:var(--font-size-sm);font-weight:600;color:#eab308;white-space:nowrap;animation:celebrationTextBounce .6s ease-out}@keyframes celebrationTextBounce{0%{opacity:0;transform:translateX(-50%) translateY(10px)}50%{opacity:1;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.streak-badge-sparkles{position:absolute;inset:-20px;pointer-events:none}.streak-badge-sparkle{position:absolute;width:8px;height:8px;background:#fbbf24;border-radius:50%;animation:sparkleFloat 1.5s ease-out forwards}.streak-badge-sparkle--1{top:0;left:50%;animation-delay:0s}.streak-badge-sparkle--2{top:15%;right:15%;animation-delay:.1s}.streak-badge-sparkle--3{top:50%;right:0;animation-delay:.2s}.streak-badge-sparkle--4{bottom:15%;right:15%;animation-delay:.3s}.streak-badge-sparkle--5{bottom:0;left:50%;animation-delay:.4s}.streak-badge-sparkle--6{bottom:15%;left:15%;animation-delay:.5s}.streak-badge-sparkle--7{top:50%;left:0;animation-delay:.6s}.streak-badge-sparkle--8{top:15%;left:15%;animation-delay:.7s}@keyframes sparkleFloat{0%{opacity:1;transform:scale(0) translate(0)}50%{opacity:1;transform:scale(1) translate(var(--sparkle-x,10px),var(--sparkle-y,-10px))}to{opacity:0;transform:scale(.5) translate(calc(var(--sparkle-x, 10px) * 2),calc(var(--sparkle-y, -10px) * 2))}}.streak-badge-sparkle--1{--sparkle-x:0;--sparkle-y:-20px}.streak-badge-sparkle--2{--sparkle-x:15px;--sparkle-y:-15px}.streak-badge-sparkle--3{--sparkle-x:20px;--sparkle-y:0}.streak-badge-sparkle--4{--sparkle-x:15px;--sparkle-y:15px}.streak-badge-sparkle--5{--sparkle-x:0;--sparkle-y:20px}.streak-badge-sparkle--6{--sparkle-x:-15px;--sparkle-y:15px}.streak-badge-sparkle--7{--sparkle-x:-20px;--sparkle-y:0}.streak-badge-sparkle--8{--sparkle-x:-15px;--sparkle-y:-15px}.streak-badge-tooltip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:1000;animation:tooltipFadeIn var(--transition-fast) ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateX(-50%) translateY(5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.streak-badge-tooltip-content{background-color:var(--color-text);color:var(--color-background);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:180px;font-size:var(--font-size-sm)}.streak-badge-tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background-color:var(--color-text)}.streak-badge-tooltip-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) 0}.streak-badge-tooltip-row:first-child{padding-top:0}.streak-badge-tooltip-label{color:rgba(255,255,255,.7)}.streak-badge-tooltip-value{font-weight:600;display:flex;align-items:center;gap:var(--spacing-xs)}.streak-badge-record-badge{display:inline-block;padding:2px 6px;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1e293b;font-size:var(--font-size-xs);font-weight:700;border-radius:var(--radius-sm);text-transform:uppercase}.streak-badge-tooltip-date{padding-top:var(--spacing-xs);border-top:1px solid rgba(255,255,255,.1);margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:rgba(255,255,255,.6)}.streak-badge-tooltip-milestone{margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.2));border-radius:var(--radius-sm);text-align:center;color:#fbbf24;font-weight:500}@media (prefers-color-scheme:dark){.streak-badge-inner{background:linear-gradient(135deg,var(--color-surface) 0,#0f172a 100%)}.streak-badge--warm .streak-badge-inner{background:linear-gradient(135deg,#78350f,#92400e);border-color:#d97706}.streak-badge--hot .streak-badge-inner{background:linear-gradient(135deg,#7c2d12,#9a3412);border-color:#ea580c}.streak-badge--blazing .streak-badge-inner{background:linear-gradient(135deg,#7f1d1d,#991b1b);border-color:#dc2626}.streak-badge--new-record .streak-badge-inner{background:linear-gradient(135deg,#78350f,#92400e 50%,#a16207)}.streak-badge-tooltip-content{background-color:#1e293b;color:#f1f5f9}.streak-badge-tooltip-arrow{background-color:#1e293b}}@media (prefers-reduced-motion:reduce){.streak-badge,.streak-badge-fire-icon,.streak-badge-inner{transition:none}.streak-badge--celebrating,.streak-badge-fire-icon--animating{animation:none}.streak-badge-sparkle{animation:none;display:none}.streak-badge-celebration-text,.streak-badge-tooltip{animation:none}}@media (min-width:640px){.streak-badge--medium .streak-badge-fire-icon{width:32px;height:32px}.streak-badge--large .streak-badge-fire-icon{width:40px;height:40px}.streak-badge--large .streak-badge-count{font-size:var(--font-size-3xl)}}