/* ===== STREAK GAMIFICATION STYLES ===== */

/* Top Bar Streak Counter */
.streak-counter {
    display: flex;
    align-items: center;
    background: #374151;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.streak-counter:hover {
    background: #4B5563;
}

.streak-counter.filled .flame-icon {
    color: #F97316;
    fill: #F97316;
}

/* Streak count color changes based on filled state */
.streak-counter.filled .streak-count {
    color: #F97316; /* Orange when filled */
    font-weight: 700;
}

.streak-counter.outline .streak-count {
    color: #FFFFFF; /* White when not filled */
    font-weight: 600;
}

/* Enhanced number bounce with color transition */
.streak-counter.animating .streak-count {
    animation: numberBounceOrange 0.8s ease-out;
}

@keyframes numberBounceOrange {
    0% { 
        transform: scale(1); 
        color: #FFFFFF; 
    }
    30% { 
        transform: scale(1.3); 
        color: #FB923C; 
    }
    50% { 
        transform: scale(1.1); 
        color: #F97316; 
    }
    70% { 
        transform: scale(1.2); 
        color: #F97316; 
    }
    100% { 
        transform: scale(1.1); 
        color: #F97316; 
    }
}

.streak-counter.outline .flame-icon {
    color: #6B7280;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.flame-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.flame-icon {
    width: 16px;
    height: 16px;
    transition: all 0.7s ease;
}

.streak-count {
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
}


.streak-counter.animating .streak-count {
    color: #FB923C;
    animation: numberBounce 0.8s ease-out;
}

@keyframes numberBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

.streak-counter.animating .flame-icon {
    animation: flamePulse 0.7s ease;
}

@keyframes flamePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); filter: brightness(1.5); }
}

/* Modal Overlay Base */
.streak-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.streak-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 640px) {
    .streak-floating-badge {
        bottom: 100px; /* Account for mobile bottom nav */
    }
    
    .milestone-hint {
        font-size: 10px;
        padding-left: 6px;
    }
    
    .days-to-milestone {
        font-size: 9px;
    }
}

/* Bottom Sheet Styles */
.streak-bottom-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1F2937;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.streak-modal-overlay.active .streak-bottom-sheet {
    transform: translateY(0);
}

/* Enhanced modal overlay transition */
.streak-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.streak-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: transparent;
    border-radius: 2px;
    margin: 12px auto 24px;
}

.celebration-content {
    padding: 0 24px 24px;
    text-align: center;
}

/* Large Streak Display */
.streak-number-section {
    margin-bottom: 32px;
}

.large-streak-display {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    margin-top: 4vh;
}

.counting-number {
    font-size: 56px;
    font-weight: 700;
    color: white;
    margin-right: 12px;
    background: linear-gradient(135deg, #FB923C, #DC2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.8s ease;
}

.counting-number.animate-scale {
    transform: scale(1.25);
}

.flame-lottie {
    width: 72px;
    height: 72px;
    margin-left: -12px; /* Space between number and flame */
}

.large-flame {
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 4px 8px rgba(249, 115, 22, 0.3));
    transition: all 0.3s ease;
    margin-bottom: -12px;
}

.large-flame.animate-scale {
    transform: scale(1.1);
}

/* Glow effect behind large display */
.large-streak-display::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: scale(1.5);
    opacity: 0.6;
    z-index: -1;
}

/* Flame Progress Indicators */
.flame-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.flame-day {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flame-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: all 1s ease;
    position: relative;
    overflow: hidden;
}

.flame-day.completed .flame-circle {
    background: #F97316;
    border-color: #FB923C;
}

.flame-day.current .flame-circle {
    background: #F97316;
    border-color: #FB923C;
    transform: scale(1.1);
}

.flame-day.future .flame-circle {
    background: #374151;
    border-color: #6B7280;
}

/* Animated fill effect for current day */
.flame-day.current.animate-fill .flame-circle::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F97316;
    height: 0%;
    transition: height 1s ease-out;
}

.flame-day.current.animate-fill .flame-circle::before {
    height: 100%;
}

.mini-flame {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    transition: all 1s ease;
}

.flame-day.completed .mini-flame,
.flame-day.current .mini-flame {
    fill: white;
}

.flame-day.future .mini-flame {
    fill: #6B7280;
}

.flame-day-detailed .mini-flame {
    width: 16px;
    height: 16px;
}

.flame-day-detailed.completed .mini-flame,
.flame-day-detailed.current .mini-flame {
    fill: white;
}

.flame-day-detailed.future .mini-flame {
    fill: #6B7280;
}

.day-number {
    font-size: 1.5vh;
    margin-top: 1vh;
    transition: color 1s ease;
}

.flame-day.completed .day-number,
.flame-day.current .day-number {
    color: #FB923C;
}

.flame-day.future .day-number {
    color: #6B7280;
}

.flame-day-detailed.completed .day-number,
.flame-day-detailed.current .day-number {
    color: #FB923C;
}

.flame-day-detailed.future .day-number {
    color: #6B7280;
}

/* Celebration Text */
.celebration-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trophy {
    font-size: 32px;
    margin: 0 12px;
}

.celebration-message {
    font-size: 20px;
    color: #D1D5DB;
    font-weight: 500;
    margin-bottom: 24px;
}

.next-milestone {
    padding: 16px;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    border-top: 1px solid #374151;
}

.next-milestone strong {
    color: #60A5FA;
}

.days-remaining {
    color: #6B7280;
}

/* Stats Grid */
.stats-grid {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vh;
    margin-bottom: 24px;
}

.stat-card {
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.stat-card.articles {
    border-color: rgba(168, 85, 247, 0.3);;
}

.stat-card.topics {
    border-color: rgba(168, 85, 247, 0.3);;
}

.stat-card.time {
    border-color: rgba(168, 85, 247, 0.3);
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
    z-index: 0;
}

.stat-card > * {
    position: relative;
    z-index: 1;
}

.stat-value {
    font-size: 2.5vh;
    font-weight: 700;
}

.stat-card.articles .stat-value { color: #f54ae7; }
.stat-card.topics .stat-value { color: #f54ae7; }
.stat-card.time .stat-value { color: #f54ae7; }

.stat-label {
    font-size: 1.75vh;
    margin-top: 1vh;
    color: #D1D5DB;
}

@keyframes statPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Continue Button */
.continue-btn {
    width: 100%;
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(249, 115, 22, 0.25);
}

.continue-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.35);
}

/* Floating Badge */
.streak-floating-badge {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    z-index: 20002;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.streak-floating-badge.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Smooth exit animation to bottom */
.streak-floating-badge.hide {
    transform: translateX(-50%) translateY(150%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 1, 1);
}

.badge-content {
    background: linear-gradient(135deg, #F97316, #DC2626);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.badge-streak-number {
    font-weight: 700;
    display: inline-block;
    transition: all 0.3s ease;
}

.badge-streak-number.animate-increment {
    animation: incrementBounce 0.6s ease-out;
}

@keyframes incrementBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.4) rotate(-5deg); }
    70% { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.flame-bounce {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

.badge-text {
    font-weight: 600;
}

.milestone-hint {
    font-size: 12px;
    opacity: 0.9;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 8px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

/* Days to milestone indicator */
.days-to-milestone {
    font-size: 10px;
    opacity: 0.8;
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}


/* Details Page Styles */
.streak-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    z-index: 10002;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.details-content-wrapper {
    flex: 1;
    overflow-y: auto;
}

.share-menu-container {
    position: relative;
    display: inline-block;
}

.share-icon-btn svg{
    color: white;
}
body.light-mode .share-icon-btn svg{
    color: #6B7280;
}

.share-action-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #1F2937; /* Dark background for dark theme */
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
    min-width: 160px;
    padding: 8px 0;
    margin-top: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #374151;
}

.share-action-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.share-action-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #1F2937; /* Match dark background */
    border: 0.5px solid #374151;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #F3F4F6; /* Light text for dark theme */
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
    white-space: nowrap;
}

.share-menu-item:hover {
    background-color: #374151;
}

.share-menu-item:active {
    background-color: #4B5563;
}

.share-menu-item svg {
    width: 20px;
    height: 20px;
    color: #9CA3AF; /* Lighter gray for icons */
    flex-shrink: 0;
}

.share-menu-item:first-child {
    margin-top: 0;
}

.share-menu-item:last-child {
    margin-bottom: 0;
}

/* Android Material Design ripple effect */
.share-menu-item {
    position: relative;
    overflow: hidden;
}

.share-menu-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
}

.share-menu-item:active::after {
    width: 100px;
    height: 100px;
}

/* Share Action Menu - Light Mode */
body.light-mode .share-action-menu {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

body.light-mode .share-action-menu::before {
    background: #FFFFFF;
    border: 1px hidden #E5E7EB;
}

body.light-mode .share-menu-item {
    color: #1F2937;
}

body.light-mode .share-menu-item:hover {
    background-color: #F3F4F6;
}

body.light-mode .share-menu-item:active {
    background-color: #E5E7EB;
}

body.light-mode .share-menu-item svg {
    color: #4B5563;
}

.fixed-share-section {
    position: sticky;
    bottom: 0;
    background: #000000;
    padding: 16px 24px;
    border-top: 1px solid #374151;
}   

.streak-details-modal.active {
    transform: translateX(0);
}


.details-header {
    display: grid;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #374151;
    grid-template-columns: 32px 1fr 32px;
}

/* Header Progress Bar */
.header-progress-bar {
    width: auto;
    height: 4px;
    background-color: #374151;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    margin: 0 16px;
    opacity: 0;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8d04ff, #ff4081);
    border-radius: 2px;
    transition: width 0.3s ease-out;
    position: relative;
}

/* Indefinite progress animation */
.header-progress-bar.indefinite .progress-bar-fill {
    width: 30%;
    animation: indefiniteProgress 1.5s ease-in-out infinite;
}

@keyframes indefiniteProgress {
    0% {
        transform: translateX(-100%);
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(350%);
        opacity: 0.8;
    }
}

.details-header h1 {
    font-size: 2vh;
    font-weight: 600;
    color: white;
    margin: 0;
    text-align: center;
    opacity: 0;
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.close-btn:hover {
    background: #374151;
}

.details-content {
    padding: 0px 24px;
    text-align: center;
    padding-bottom: 20px;
}

.good-job {
    font-size: 3vh;
    font-weight: 700;
    color: white;
    margin-bottom: 0;
    
}

/* Detailed Streak Display */
.streak-display-section {
    margin-bottom: 40px;
    margin-top: 2vh;
}

.streak-display-section .large-streak-display {
    margin-bottom: 2vh;
}

.streak-display-section .streak-number {
    font-size: 8vh;
    font-weight: 700;
    color: white;
    margin-right: 8px;
}

/* Detailed Flame Progress */
.flame-progress-detailed {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

/* Animation: gradient bar extends from n-1 to n */
.flame-progress-detailed.animate-progress .gradient-bar {
    animation: extendToCurrentDay 1.5s ease-out forwards;
}

@keyframes extendToCurrentDay {
    0% {
        /* Starts at n-1 position (set by data-current-streak) */
    }
    100% {
        /* Extends by one more circle width (56px) */
        width: calc(var(--initial-width) + 56px);
    }
}

.gradient-bar {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    height: 32px; /* Thinner bar */
    background: linear-gradient(90deg, 
        rgba(249, 115, 22, 0.6), 
        rgba(249, 115, 22, 0.8), 
        rgba(249, 115, 22, 0.6)
    );
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
    z-index: 0;
    transition: all 1s ease; /* Smooth expansion animation */
}

.flame-day-detailed {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.flame-circle-detailed {
    width: 66%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
}

.flame-day-detailed.completed .flame-circle-detailed {
    background: #F97316;
    border-color: #FB923C;
}

.flame-day-detailed.current .flame-circle-detailed {
    background: #F97316;
    border-color: #FB923C;
    transform: scale(1.1);
}

.flame-day-detailed.current .flame-circle-detailed::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.9;
}

.flame-day-detailed.future .flame-circle-detailed {
    background: #374151;
    border-color: #6B7280;
}

/* Glow ring animations */
.flame-day-detailed.glow-ring-blink .flame-circle-detailed::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 4px solid #FBBF24;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
    animation: blinkGlow 0.5s ease-in-out 2; /* Blink 3 times */
}

@keyframes blinkGlow {
    0%, 100% { 
        opacity: 1;
        transform: scale(1.25);
    }
    50% { 
        opacity: 0.3;
        transform: scale(1.1);
    }
}

/* Final glow state - stays on after blinking */
.flame-day-detailed.glow-ring-final .flame-circle-detailed::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 2px solid #FBBF24;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
    opacity: 1;
    transform: scale(1.25);
    transition: all 0.3s ease;
    z-index: 10;
}

.flame-day-detailed .mini-flame {
    width: 80%;
    height: 16px;
}

.flame-day-detailed .day-number {
    font-size: 12px;
    margin-top: 4px;
}

.next-milestone-hint {
    color: #fff;
    font-size: 2vh;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1.5vh;
}

.next-milestone-hint strong {
    color: #60A5FA;
}

.days-label {
    color: #6B7280;
    font-size: 18px;
}

/* Detailed Stats */
.detailed-stats {
    display: flex;
    flex-direction: row;
    gap: 1.5vh;
    align-items: center;
    padding-top: 1vh;
}

.stat-card-detailed {
    flex: 1;
    padding: 1vh;
    border-radius: 1vh;
    position: relative;
    overflow: hidden;
    min-height: 10vh;
    align-content: center;
    border: 1px solid #6B7280;
}

.stat-card-detailed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
    z-index: 0;
}

.stat-icon {
    width: 4vh;
    height: 4vh;
    margin-top: 1vh;
    position: relative;
    z-index: 1;
    display: none;
}

.keep-reading-text {
    color: #6B7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}

.stat-content {
    position: relative;
    z-index: 1;
}

.stat-card-detailed .stat-value {
    color: #f54ae7;
    
    font-size: 2vh;
    font-weight: 500;
}

.stat-card-detailed.time-saved .stat-value { color: #f54ae7; }
.stat-card-detailed.topics .stat-value { color: #f54ae7; }
.stat-card-detailed.ranking .stat-value { color: #f54ae7; }

.stat-card-detailed.time-saved .stat-label { color: #6B7280; }
.stat-card-detailed.topics .stat-label { color: #6B7280; }
.stat-card-detailed.ranking .stat-label { color: #6B7280; }

.stat-card-detailed .stat-label {
    font-size: 1.5vh;
    font-weight: 500;
    margin-top: 1vh;
}

.stat-subtitle {
    color: #9CA3AF;
    font-size: 2vh;
    opacity: 0.75;
    display: none;
}

/* Share Button */
.share-btn {
    width: 100%;
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    border: 1px black;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 2.5vh;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    transform: scale(1.02);
}

.share-btn:hover {
    background: linear-gradient(135deg, #4B5563, #374151);
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(107, 114, 128, 0.25);
}

/* Responsive Design */
@media (max-width: 640px) {
    .counting-number {
        font-size: 6vh;
    }
    
    .flame-progress {
        gap: 8px;
    }
    
    .flame-circle {
        width: 40px;
        height: 40px;
    }
    
    .mini-flame {
        width: 70%;
        aspect-ratio: 1/1;
    }
    
    .stats-grid {
        gap: 2vh;
    }
    
    .celebration-title {
        font-size: 20px;
    }
    
    .celebration-message {
        font-size: 18px;
    }
    
    .milestone-hint {
        display: none;
    }
}

/* Utility Classes for Animation States */
.animate-glow-transfer-start .flame-circle-detailed::before {
    opacity: 1;
    transform: scale(1.25);
}

.animate-glow-transfer-end .flame-circle-detailed::before {
    opacity: 0;
    transform: scale(1);
}

/* Loading states */
.streak-loading {
    opacity: 0.6;
    pointer-events: none;
}

.streak-loading * {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.flame-svg-container {
    position: relative;
    width: 16px;
    height: 16px;
}

/* Ensure flame-outline has lower z-index and no fill */
.flame-outline {
    position: absolute;
    top: 0;
    left: 0;
    stroke: #6B7280;
    fill: none; /* Ensure no fill that could block the filled flame */
    transition: all 0.7s ease;
    z-index: 1; /* Lower z-index */
}

/* Ensure flame-filled is on top */
.flame-filled {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    z-index: 2; /* Higher z-index to appear above outline */
}

.flame-fill-path.hidden {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.flame-fill-path.visible {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
}

.flame-svg-container.animate-fill .flame-fill-path {
    animation: singleSVGWaterFill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes singleSVGWaterFill {
    0% { 
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
    20% {
        clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
    }
    40% {
        clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    }
    60% {
        clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0 100%);
    }
    80% {
        clip-path: polygon(0 15%, 100% 15%, 100% 100%, 0 100%);
    }
    100% { 
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
}

.flame-svg-container.flame-filled-state .flame-fill-path {
    filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4));
}

.flame-filled.visible {
    opacity: 1;
    transform: scale(1);
}

/* Filling animation for article read */
.flame-svg-container.animate-fill .flame-filled {
    animation: waterFilling 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


@keyframes waterFilling {
    0% { 
        opacity: 1;
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
    20% {
        clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
    }
    40% {
        clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    }
    60% {
        clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0 100%);
    }
    80% {
        clip-path: polygon(0 15%, 100% 15%, 100% 100%, 0 100%);
    }
    100% { 
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    }
}

commitment-btn {
    width: 100%;
    background: linear-gradient(135deg, #F97316, #DC2626);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px rgba(249, 115, 22, 0.25);
    margin: 0;
    position: relative;
    overflow: hidden;
}

.commitment-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.commitment-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.35);
}

.commitment-btn:hover::before {
    left: 100%;
}

.commitment-btn:active {
    transform: scale(0.98);
}

/* Add subtle animation on page load */
.commitment-btn {
    animation: commitmentPulse 3s ease-in-out infinite;
}

@keyframes commitmentPulse {
    0%, 100% { 
        box-shadow: 0 8px 16px rgba(249, 115, 22, 0.25); 
    }
    50% { 
        box-shadow: 0 8px 16px rgba(249, 115, 22, 0.4); 
    }
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .share-icon-btn {
        border: none;
        display: none;
        background: transparent;
    }
    
    .share-icon-btn svg {
        width: 24px;
        height: 24px;
    }
}

.profile-streak-badge.animating {
    animation: badgePulse 0.8s ease-out;
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(1.05); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.profile-badge-count {
    transition: color 0.3s ease;
}

.profile-streak-badge.filled .profile-badge-count {
    color: #FFFFFF;
}

.profile-streak-badge.outline .profile-badge-count {
    color: #D1D5DB;
}

/* ===== LIGHT MODE THEME OVERRIDES FOR STREAK GAMIFICATION ===== */

body.light-mode .streak-counter {
    background: #F3F4F6; /* Light grey background */
    border: 1px solid #E5E7EB;
}

body.light-mode .streak-counter:hover {
    background: #E5E7EB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .streak-counter.outline .flame-icon {
    color: #6B7280; /* Darker grey for visibility */
    stroke: #6B7280;
}

body.light-mode .streak-counter.outline .streak-count {
    color: #374151; /* Dark grey text */
}

body.light-mode .streak-counter.filled .flame-icon {
    color: #F97316; /* Keep orange for consistency */
}

body.light-mode .streak-counter.filled .streak-count {
    color: #F97316; /* Orange text when filled */
}

/* Modal Overlay - Light Mode */
body.light-mode .streak-modal-overlay {
    background: rgba(0, 0, 0, 0.4); /* Slightly lighter overlay */
}

/* Bottom Sheet - Light Mode */
body.light-mode .streak-bottom-sheet {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

/* Large Streak Display - Light Mode */
body.light-mode .counting-number {
    color: #1F2937; /* Dark text */
    background: linear-gradient(135deg, #F97316, #DC2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.light-mode .large-streak-display::after {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.1) 0%, transparent 70%);
}

/* Flame Progress Indicators - Light Mode */
body.light-mode .flame-day.future .flame-circle {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

body.light-mode .flame-day.future .mini-flame {
    fill: #9CA3AF;
}

body.light-mode .flame-day.future .day-number {
    color: #6B7280;
}

body.light-mode .flame-day-detailed.future .flame-circle-detailed {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

body.light-mode .flame-day-detailed.future .mini-flame {
    fill: #9CA3AF;
}

body.light-mode .flame-day-detailed.future .day-number {
    color: #6B7280;
}

/* Flame outline for light mode */
body.light-mode .flame-outline {
    stroke: #9CA3AF;
}

/* Celebration Text - Light Mode */
body.light-mode .celebration-title {
    color: #1F2937;
}

body.light-mode .celebration-message {
    color: #4B5563;
}

body.light-mode .good-job {
    color: #1F2937;
}

body.light-mode .next-milestone {
    color: #374151;
    border-top: 1px solid #E5E7EB;
}

body.light-mode .next-milestone-hint {
    color: #1F2937;
}

body.light-mode .days-label {
    color: #6B7280;
}

/* Stats Grid - Light Mode */
body.light-mode .stat-card {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
}

body.light-mode .stat-card::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), transparent);
}

body.light-mode .stat-card.articles {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.05);
}

body.light-mode .stat-card.topics {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.05);
}

body.light-mode .stat-card.time {
    border-color: rgba(168, 85, 247, 0.2);
    background: rgba(168, 85, 247, 0.05);
}

body.light-mode .stat-value {
    color: #6d0dbd; /* Keep brand purple */
}

body.light-mode .stat-label {
    color: #6B7280;
}

body.light-mode .stat-card-detailed {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
}

body.light-mode .stat-card-detailed::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), transparent);
}

body.light-mode .stat-card-detailed .stat-value {
    color: #6d0dbd;
}

body.light-mode .stat-card-detailed .stat-label {
    color: #6B7280;
}

body.light-mode .stat-subtitle {
    color: #9CA3AF;
}

/* Floating Badge - Light Mode */
body.light-mode .badge-content {
    background: linear-gradient(135deg, #F97316, #DC2626); /* Keep gradient for impact */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

body.light-mode .milestone-hint {
    color: rgba(255, 255, 255, 0.9); /* Keep white text on gradient background */
}

body.light-mode .days-to-milestone {
    color: rgba(255, 255, 255, 0.8);
}

/* Details Modal - Light Mode */
body.light-mode .streak-details-modal {
    background: #FFFFFF;
}

body.light-mode .streak-number {
    color: #1F2937;
}

body.light-mode .details-header {
    border-bottom: 1px solid #E5E7EB;
}

body.light-mode .details-header h1 {
    color: #1F2937;
}

body.light-mode .close-btn {
    color: #6B7280;
}

body.light-mode .close-btn:hover {
    background: #F3F4F6;
    color: #374151;
}

body.light-mode .fixed-share-section {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
}

/* Header Progress Bar - Light Mode */
body.light-mode .header-progress-bar {
    background-color: #E5E7EB;
}

body.light-mode .progress-bar-fill {
    background: linear-gradient(90deg, #8d04ff, #ff4081);
}

/* Gradient Bar - Light Mode */
body.light-mode .gradient-bar {
    background: linear-gradient(90deg, 
        rgba(249, 115, 22, 0.4), 
        rgba(249, 115, 22, 0.6), 
        rgba(249, 115, 22, 0.4)
    );
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
}

/* Interactive Elements - Light Mode */
body.light-mode .continue-btn {
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    box-shadow: 0 8px 16px rgba(141, 4, 255, 0.25);
}

body.light-mode .continue-btn:hover {
    box-shadow: 0 12px 24px rgba(141, 4, 255, 0.35);
}

body.light-mode .share-btn {
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    border: 1px solid #F5F6F9;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

body.light-mode .share-btn:hover {
    box-shadow: 0 12px 24px rgba(141, 4, 255, 0.25);
}

body.light-mode .commitment-btn {
    background: linear-gradient(135deg, #F97316, #DC2626);
    box-shadow: 0 8px 16px rgba(249, 115, 22, 0.25);
}

body.light-mode .commitment-btn:hover {
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.35);
}

/* Text and Content - Light Mode */
body.light-mode .keep-reading-text {
    color: #6B7280;
}

/* Enhanced Contrast and Accessibility - Light Mode */
body.light-mode .flame-day.completed .day-number,
body.light-mode .flame-day.current .day-number {
    color: #DC2626; /* Darker orange for better contrast */
    font-weight: 600;
}

body.light-mode .flame-day-detailed.completed .day-number,
body.light-mode .flame-day-detailed.current .day-number {
    color: #DC2626;
    font-weight: 600;
}

/* Glow effects adjusted for light mode */
body.light-mode .flame-day-detailed.glow-ring-blink .flame-circle-detailed::before {
    border: 4px solid #F59E0B; /* Slightly darker for visibility */
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

body.light-mode .flame-day-detailed.glow-ring-final .flame-circle-detailed::before {
    border: 4px solid #F59E0B;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

/* Loading states - Light Mode */
body.light-mode .streak-loading {
    opacity: 0.5;
}

/* Mobile Responsiveness Enhancements for Light Mode */
@media (max-width: 640px) {
    body.light-mode .streak-counter {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    body.light-mode .badge-content {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    body.light-mode .streak-bottom-sheet {
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
    }
}

/* ===== ENHANCED DARK MODE IMPROVEMENTS ===== */

/* Enhance existing dark mode with better contrast and depth */
.streak-bottom-sheet {
    background: #1F2937;
    border: 1px solid #374151;
}

.celebration-content {
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.95) 0%, rgba(31, 41, 55, 1) 100%);
}

.details-content {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 1) 100%);
}

body.light-mode .celebration-content {
    background: #FFFFFF !important;
}

body.light-mode .details-content {
    background: #FFFFFF !important;
}

/* Add this CSS to your existing streak styles */

/* Pulsing flame while Lottie loads */
.flame-lottie {
    width: 72px;
    height: 72px;
    margin-left: -12px;
    position: relative;
}

/* Show pulsing SVG immediately */
.flame-lottie::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='%23F97316' viewBox='0 0 256 256'%3E%3Cpath d='M143.38,17.85a8,8,0,0,0-12.63,3.41l-22,60.41L84.59,58.26a8,8,0,0,0-11.93.89C51,87.53,40,116.08,40,144a88,88,0,0,0,176,0C216,84.55,165.21,36,143.38,17.85Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: flamePulseSimple 1.5s ease-in-out infinite;
    z-index: 1;
}

/* Hide the pseudo-element when Lottie loads */
.flame-lottie.loaded::before {
    display: none;
}

@keyframes flamePulseSimple {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Same for celebration */
.celebration-lottie {
    width: auto;
    height: 20vh;
    margin: 0 auto 0px;
    position: relative;
    min-height: 16vh;
    margin-top: -2vh;
    
}

.celebration-lottie::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, #FF6B6B 2px, transparent 2px),
        radial-gradient(circle at 80% 20%, #4ECDC4 2px, transparent 2px),
        radial-gradient(circle at 60% 70%, #45B7D1 2px, transparent 2px),
        radial-gradient(circle at 30% 80%, #96CEB4 2px, transparent 2px),
        radial-gradient(circle at 90% 60%, #FFEAA7 2px, transparent 2px),
        radial-gradient(circle at 15% 60%, #DDA0DD 2px, transparent 2px),
        radial-gradient(circle at 70% 40%, #FFB347 2px, transparent 2px),
        radial-gradient(circle at 40% 20%, #87CEEB 2px, transparent 2px),
        radial-gradient(circle at 85% 85%, #F0E68C 2px, transparent 2px),
        radial-gradient(circle at 25% 50%, #FFA07A 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, #98FB98 2px, transparent 2px),
        radial-gradient(circle at 50% 10%, #DEB887 2px, transparent 2px);
    animation: sparkleSimple 2s ease-in-out infinite;
    z-index: 1;
}

.celebration-lottie.loaded::before {
    display: none;
}

@keyframes sparkleSimple {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.15);
    }
}


/* Recovery celebration specific styles */
.recovery-theme {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
}
.recovery-header {
    text-align: center;
    margin-bottom: 32px;
}
.recovery-icon-container {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
.recovery-flame-lottie {
    width: 64px;
    height: 64px;
    display: block;
    transform: scale(0.8) translateY(20px);
    opacity: 0.6;
    transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.recovery-flame-lottie.phoenix-rise {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.comeback-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1s ease;
}
.comeback-glow.active {
    opacity: 1;
}
.recovery-title {
    font-size: 3vh;
    font-weight: 700;
    color: #f54ae7;
    margin-bottom: 8px;
}
.recovery-subtitle {
    color: #D1D5DB;
    font-size: 1.75vh;
    font-style: italic;
}

.recovery-stats {
    margin-bottom: 32px;
}
.stat-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 1.5vh;
    background: rgba(167, 139, 250, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(167, 139, 250, 0.5);
}
.previous-streak, .current-streak {
    text-align: center;
}
.stat-comparison .stat-label {
    font-size: 14px;
    color: #9CA3AF;
    margin-bottom: 4px;
}
.stat-comparison .stat-value {
    font-size: 2vh;
    font-weight: 600;
    color: #f54ae7;
}
.recovery-day {
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.comeback-arrow {
    color: #f54ae7;
    transform: translateX(-10px);
    opacity: 0;
    transition: all 0.8s ease;
}
.comeback-arrow.animate-forward {
    transform: translateX(0);
    opacity: 1;
}
.recovery-message {
    text-align: center;
    margin-bottom: 20px;
}
.recovery-message p {
    color: #D1D5DB;
    font-size: 1.75vh;
    line-height: 1.5;
}
.motivation-quote {
    display: none;
}
.motivation-quote p {
    color: #F3F4F6;
    font-style: italic;
    font-size: 14px;
    margin: 0;
}
.recovery-challenge {
     background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.5);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}
.challenge-text {
    color: #f54ae7;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    font-size: 2vh;
}
.progress-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mini-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(167, 139, 250, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-right: 12px;
}
.progress-fill {
    height: 100%;
    background: rgba(167, 139, 250, 0.9);
    border-radius: 4px;
    transition: width 1.5s ease;
    transform-origin: left;
}
.progress-fill.animate-fill {
    animation: progressGrow 1.5s ease forwards;
}
@keyframes progressGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.progress-text {
    color: #f54ae7;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.recovery-continue-btn {
    width: 100%;
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.recovery-continue-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(141, 4, 255, 0.4);

}
/* Recovery badge styles */
.recovery-badge {
    background: linear-gradient(135deg, #F59E0B, #DC2626);
}
.recovery-badge-content {
    gap: 16px;
}
.recovery-flame-container {
    position: relative;
}
.comeback-flame {
    font-size: 24px;
    animation: phoenixFlicker 2s ease-in-out infinite;
}
@keyframes phoenixFlicker {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-2deg); }
    75% { transform: scale(1.1) rotate(2deg); }
}
.flame-revival-effect {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: revivalPulse 2s ease-in-out infinite;
}
@keyframes revivalPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 0.7; transform: scale(1.2); }
}
.recovery-text-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.recovery-challenge-text {
    font-size: 12px;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
/* Recovery Theme Background - Light Mode */
body.light-mode .recovery-theme {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
}
/* Recovery Header - Light Mode */
body.light-mode .recovery-title {
    color: #6d0dbd; /* Brand purple */
}
body.light-mode .recovery-subtitle {
    color: #4B5563; /* Dark grey for readability */
}
body.light-mode .comeback-glow {
    background: radial-gradient(circle, rgba(109, 13, 189, 0.15) 0%, transparent 70%);
}
/* Recovery Stats - Light Mode */
body.light-mode .stat-comparison {
    background: rgba(109, 13, 189, 0.05);
    border: 1px solid rgba(109, 13, 189, 0.2);
}
body.light-mode .stat-comparison .stat-label {
    color: #6B7280;
}
body.light-mode .stat-comparison .stat-value {
    color: #6d0dbd;
}
body.light-mode .recovery-day {
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.light-mode .comeback-arrow {
    color: #6d0dbd;
}
/* Recovery Message - Light Mode */
body.light-mode .recovery-message p {
    color: #4B5563;
}
body.light-mode .motivation-quote p {
    color: #1F2937;
}
/* Recovery Challenge - Light Mode */
body.light-mode .recovery-challenge {
    background: rgba(109, 13, 189, 0.05);
    border: 1px solid rgba(109, 13, 189, 0.2);
}
body.light-mode .challenge-text {
    color: #6d0dbd;
}
body.light-mode .mini-progress-bar {
    background: rgba(109, 13, 189, 0.15);
}
body.light-mode .progress-fill {
    background: rgba(109, 13, 189, 0.8);
}
body.light-mode .progress-text {
    color: #6d0dbd;
}
/* Recovery Button - Light Mode */
body.light-mode .recovery-continue-btn {
    background: linear-gradient(135deg, #8d04ff, #ff4081);
    box-shadow: 0 8px 16px rgba(141, 4, 255, 0.25);
}
body.light-mode .recovery-continue-btn:hover {
    box-shadow: 0 12px 24px rgba(141, 4, 255, 0.35);
}
/* Recovery Badge - Light Mode */
body.light-mode .recovery-badge {
    background: linear-gradient(135deg, #F59E0B, #DC2626); /* Keep gradient for impact */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
body.light-mode .recovery-challenge-text {
    color: rgba(255, 255, 255, 0.9); /* Keep white on gradient background */
}
body.light-mode .flame-revival-effect {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
}
/* Enhanced Recovery Animations for Light Mode */
body.light-mode .recovery-flame-lottie.phoenix-rise {
    filter: drop-shadow(0 4px 8px rgba(109, 13, 189, 0.2));
}
/* Additional contrast improvements for light mode recovery */
body.light-mode .comeback-flame {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}
/* Recovery modal overlay adjustments */
body.light-mode .recovery-theme .streak-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}
/* Ensure recovery elements have proper spacing and contrast in light mode */
body.light-mode .recovery-stats {
    border-radius: 12px;
}
body.light-mode .recovery-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E7EB;
}
body.light-mode .recovery-subtitle,
body.light-mode .recovery-message p {
    color: #333;
}
body.light-mode .recovery-title,
body.light-mode .challenge-text,
body.light-mode .progress-text {
    color: #6045d5;
}