@media (max-width: 1300px) {

    .ultimate-icon-container { display: none !important; animation: none !important; }

    /* Hide yellow left area in ultimate-info (decorative bar or highlight) */
    .ultimate-info .ultimate-info-left,
    .ultimate-info .ultimate-info-bar,.rewards-section,
    .refresh-percentage,.ultimate-info .ultimate-info-highlight {
        display: none !important;
    }

    /* Center ultimate-content and its text for <1300px */
    .ultimate-content {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    }

    .milestones-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .milestone-card-ultimate { padding: 32px 28px; min-height: 240px; }
    .ultimate-content { gap: 28px; }
    .ultimate-icon-container { width: 120px; height: 120px; }
    .ultimate-icon { font-size: 2.6rem; }
    .ultimate-title { font-size: 2.1rem; }
        /* Compact ultimate adjustments */
        .milestone-card-ultimate { padding: 26px 18px; min-height: 220px; }
        .ultimate-icon-container { width: 90px; height: 90px; }
        .ultimate-icon { font-size: 2rem; }
        .ultimate-title { font-size: 1.5rem; }
        .ultimate-description { font-size: 0.8rem; }
        .ultimate-stats { flex-direction: column; gap: 12px; }
        .ultimate-progress-circle { width: 140px; height: 140px; }
        .ultimate-progress-text { font-size: 1.2rem; }

        .referral-modal .referral-stats-bar,
        .referral-modal .rewards-container { 
            display: none !important; 
        }
        .referral-modal { padding:0; overflow:hidden; }
        .referral-modal-content { 
            position:static; transform:none; width:100%; max-width:100%; height:100vh; max-height:100vh; 
            border-radius:0; padding:14px 10px 10px; display:flex; flex-direction:column; gap:10px; box-shadow:none; 
        }

        .referral-modal-title {
            display:flex;
            align-items:center;
            gap:10px;
            margin:0;
            padding:0;
            font-size:1.15rem !important;
            font-weight:700;
            letter-spacing:0.6px;
            line-height:1.2;
            color:#ffffff;
        }


        .referral-modal-header::after { display:none !important; }
        .referral-modal-close { width:38px; height:38px; font-size:1.1rem; }

        .referral-modal-header {
            margin:0 0 4px 0; 
            border-radius:12px; 
            border:none; 
            background:rgba(255,255,255,0.04); 
            backdrop-filter:blur(6px); 
            -webkit-backdrop-filter:blur(6px); 
            display:flex; 
            align-items:center; 
            justify-content:space-between; 
            gap:12px;
            min-height:66px;
            padding:14px 22px !important;
            box-sizing:border-box;
        }


        @keyframes refTitlePulse { 0%,100% {opacity:0.85; transform:translateY(0);} 50% {opacity:1; transform:translateY(1px);} }

        .referral-modal-close {
            position:relative;
            background:linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.02));
            border:1px solid rgba(255,255,255,0.18);
            border-radius:14px;
            width:40px !important; height:40px !important;
            display:flex; align-items:center; justify-content:center;
            color:#d7e9f5; cursor:pointer;
            transition:background .4s ease, box-shadow .35s ease, transform .35s ease, border-color .35s ease;
            box-shadow:0 2px 10px -2px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
            backdrop-filter:blur(8px) saturate(170%);
        }
        .referral-modal-close i { transition:transform .4s ease, color .35s ease; }
        .referral-modal-close::before {
            content:""; position:absolute; inset:0; border-radius:inherit;
            padding:1px; background:linear-gradient(135deg, rgba(52,152,219,0.65), rgba(46,204,113,0.5), rgba(243,156,18,0.45));
            -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
            mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
            -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s ease;
            pointer-events:none;
        }
        .referral-modal-close:hover { background:linear-gradient(145deg, rgba(52,152,219,0.25), rgba(46,204,113,0.15)); border-color:rgba(255,255,255,0.28); box-shadow:0 6px 20px -6px rgba(52,152,219,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; transform:translateY(-2px); }
        .referral-modal-close:hover::before { opacity:1; }
        .referral-modal-close:hover i { transform:rotate(20deg) scale(1.08); color:#ffffff; }
        .referral-modal-close:active { transform:translateY(0) scale(.94); }
        .referral-modal-close:focus-visible { outline:2px solid #2ecc71; outline-offset:3px; }
        .referral-modal-close:focus-visible::before { opacity:1; }


        .referral-modal-body { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding-right:4px; }
        .referral-modal-body::-webkit-scrollbar { width:4px; }
        .referral-modal-body::-webkit-scrollbar-track { background:transparent; }
        .referral-modal-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:10px; }

        .rewards-section, .rewards-container, .stats-section { margin:8px 0 10px; padding:14px 12px; border-radius:14px; }
        .rewards-section::before, .rewards-section::after, .rewards-container::before { animation:none; opacity:0.4; }
        .rewards-title { font-size:0.85rem; gap:6px; }
        .rewards-title i { font-size:0.85rem; }
        .rewards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
        .reward-card { min-height:0; padding:10px 8px 8px; border-radius:10px; }
        .reward-icon { width:48px; height:48px; margin-bottom:-8px; }
        .reward-icon i { font-size:1.5rem; }
        .reward-content { margin-top:-12px; gap:2px; }
        .reward-label { font-size:0.5rem; letter-spacing:0.25px; }
        .reward-amount { font-size:0.7rem; }
        .eth-symbol { font-size:0.55rem; }
        .withdraw-btn-small { width:26px; height:26px; }
        .withdraw-btn-small i { font-size:0.6rem; }
        .no-rewards { font-size:0.55rem; }

        .referral-stats-bar { padding:14px 10px; border-radius:14px; margin-bottom:10px; }
        .stats-title { font-size:0.9rem; gap:6px; }
        .stats-title i { font-size:0.85rem; }
        .stats-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
        .stat-item { padding:10px 8px; border-radius:10px; }
        .stat-label { font-size:0.5rem; letter-spacing:0.3px; }
        .stat-value { font-size:0.9rem; margin-bottom:4px; }
        .stat-icon { top:4px; right:4px; }
        .stat-icon i { font-size:0.6rem; }
        .stat-progress { height:3px; }

        .withdraw-section { margin-top:12px; }
        .withdraw-btn { min-width:0; width:100%; padding:10px 12px; font-size:0.7rem; border-radius:10px; gap:6px; }
        .withdraw-btn i { font-size:0.9rem; }
        .withdraw-amount { font-size:0.6rem; padding:2px 6px; }
        .withdraw-info { font-size:0.55rem; gap:4px; }
        .withdraw-info i { font-size:0.55rem; }

        .reward-notification { top:10px; right:10px; width:calc(100% - 20px); max-width:none; }
        .notification-content { padding:10px 12px; font-size:0.65rem; }
        .notification-close { padding:2px; }

        .error-container { padding:24px 10px; }
        .error-icon { font-size:2.2rem; }
        .error-container h3 { font-size:0.9rem; }
        .error-container p { font-size:0.55rem; }
        .retry-btn { padding:10px 14px; font-size:0.65rem; }

        .reward-card, .stat-item, .withdraw-btn, .retry-btn { animation:none !important; transition:transform 0.15s ease, box-shadow 0.15s ease; }
        .reward-card:hover, .stat-item:hover, .withdraw-btn:hover, .retry-btn:hover { transform:translateY(-2px); }
        .reward-card:hover::before { opacity:0.6; }
        .referral-modal-content, .referral-modal-header { animation:none !important; }

        .referral-modal-content * { max-width:100%; box-sizing:border-box; }
        .rewards-grid, .stats-grid { width:100%; }
        .reward-amount, .reward-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .reward-amount { display:flex; justify-content:center; }

        .reward-types-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:8px 0 14px; padding:0; }
        .reward-type { padding:14px 10px 12px; border-radius:12px; }
        .reward-type-header { margin-bottom:10px; }
        .reward-type-header h4 { font-size:0.75rem; margin-bottom:6px; }
        .reward-icon { width:36px; height:36px; margin-bottom:8px; box-shadow:none; }
        .reward-icon i { font-size:1.0rem; }
        .reward-badge { font-size:0.45rem; padding:3px 8px; letter-spacing:0.3px; border-radius:10px; }
        .reward-percentage { font-size:1.3rem; margin-bottom:4px; text-shadow:none; }
        .reward-type .reward-content p { font-size:0.75rem; line-height:1.25; margin:4px 0 0; }
        .reward-type .reward-content p strong { font-weight:600; }
        .reward-type * { word-break:keep-all; }

        /* Canonical mobile milestone card */
        .milestone-card-compact { position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; padding:10px 8px 52px 8px !important; border-radius:14px !important; }
        .milestone-card-compact > .milestone-icon { width:34px !important; height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin-top:2px !important; }
        .milestone-card-compact > .milestone-icon i { font-size:0.95rem !important; }
        .milestone-card-compact > .milestone-info { width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; text-align:center !important; }
        .milestone-card-compact .milestone-title-compact { font-size:0.55rem !important; letter-spacing:.3px !important; }
        .milestone-card-compact .milestone-target-compact { font-size:0.8rem !important; display:flex !important; align-items:center !important; gap:4px !important; }
        .milestone-card-compact .milestone-target-compact i { font-size:1.2rem !important; }
        .milestone-card-compact .milestone-reward-compact { display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; font-size:0.62rem !important; line-height:1 !important; align-self:center !important; margin-top:2px !important; }
        .milestone-card-compact .milestone-reward-compact i.fab.fa-ethereum { font-size:0.6rem !important; line-height:1 !important; vertical-align:middle !important; position:relative !important; top:0 !important; margin:0 !important; padding:0 !important; display:inline-block !important; flex-shrink:0 !important; }
        .milestone-card-compact .milestone-reward-compact .reward-amount-value { line-height:1 !important; vertical-align:middle !important; margin:0 !important; padding:0 !important; display:inline-block !important; flex-shrink:0 !important; white-space:nowrap !important; }
        .milestone-card-compact > .milestone-progress-compact { position:absolute !important; left:8px !important; bottom:8px !important; width:46px !important; height:46px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
        .milestone-card-compact > .milestone-progress-compact .progress-circle { width:46px !important; height:46px !important; }
        .milestone-card-compact > .milestone-progress-compact .progress-text { font-size:0.55rem !important; }
        .milestone-card-compact > .milestone-claim-btn { position:absolute !important; bottom:8px !important; right:8px !important; }
        .milestone-card-compact > .milestone-claim-btn .claim-btn-compact { width:30px !important; height:30px !important; font-size:0.55rem !important; padding:0 !important; }
        .milestone-card-compact > .milestone-status-compact { position:absolute !important; top:6px !important; right:6px !important; }
        .milestone-card-compact, .milestone-card-compact:hover { transform:none !important; }

        /* Grid columns at 780px should stay at 2 (was erroneously 3 later) */
        .milestones-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }

        .toggle-arrow { padding: 10px 20px; font-size: 0.8rem; }
        .toggle-arrow i { font-size: 0.9rem; }
        .milestone-notification { top:16px; right:16px; left:16px; width:auto; max-width:none; }
        .milestones-header { flex-direction:column; gap:12px; padding:16px 20px; margin-bottom:20px; }
        .milestones-header h3 { font-size:1.5rem; justify-content:center; flex:none; }
        .milestones-header h3 i { font-size:1.4rem; }
        .milestones-subtitle { font-size:0.8rem; flex:none; text-align:center; }
        .milestones-actions { position:absolute; top:12px; right:12px; flex-shrink:0; }
        .refresh-btn { width:32px; height:32px; padding:6px; }
        .refresh-btn i { font-size:0.9rem; }

        /* Ultimate milestone mobile adjustments (retained) */
        .milestone-card-ultimate { padding: 24px 16px; min-height: 200px; }
        .ultimate-content { flex-direction: column; gap: 24px; text-align: center; }
        .ultimate-left-section { order: 1; }
        .ultimate-right-section { order: 2; padding-left: 0; align-items: center; text-align: center; max-width: 100%; }
        .ultimate-icon-container { width: 80px; height: 80px; }
        .ultimate-icon { font-size: 2rem; }
        .ultimate-title { font-size: 1.8rem; margin-bottom: 12px; }
        .ultimate-description { font-size: 0.95rem; margin-bottom: 20px; max-width: 100%; }
        .ultimate-stats { flex-direction: column; gap: 16px; margin-bottom: 20px; }
        .ultimate-progress-text { font-size: 1rem; }
        .ultimate-claim-btn { width: 100%; max-width: 280px; margin: 0 auto; }
        .btn-text { font-size: 0.9rem; }
        .btn-subtext { font-size: 0.75rem; }
        .ultimate-status-content .status-title { font-size: 0.9rem; }
        .ultimate-status-content .status-subtitle { font-size: 0.75rem; }
		.reward-type-header h4 { font-size:0.75rem; margin-bottom:6px; }
		.reward-icon { width:36px; height:36px; margin-bottom:8px; box-shadow:none; }
		.reward-icon i { font-size:1.0rem; }
		.reward-badge { font-size:0.45rem; padding:3px 8px; letter-spacing:0.3px; border-radius:10px; }
		.reward-percentage { font-size:1.3rem; margin-bottom:4px; text-shadow:none; }
		/* Prevent overflow inside cards */
		.reward-type * { word-break:keep-all; }

			/* Final and precise code for mobile milestone cards */
.milestone-card-compact {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 10px 8px 52px 8px !important;
    border-radius: 14px !important;
}

.milestone-card-compact > .milestone-icon {
    width: 28px !important; height: 28px !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    margin-top: 2px !important;
}

.milestone-card-compact > .milestone-icon i {
    font-size: 0.8rem !important;
}

.milestone-card-compact > .milestone-info {
    width: 100% !important; display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 4px !important; text-align: center !important;
}

.milestone-card-compact .milestone-title-compact {
    font-size: 0.55rem !important; letter-spacing: .3px !important;
}

.milestone-card-compact .milestone-target-compact {
    font-size: 0.62rem !important; display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 4px !important;
}

.milestone-card-compact .milestone-target-compact i {
    font-size: 0.6rem !important;
}

/* === Definitive Fix for Icon Positioning Context === */

/* 1. Make the parent the positioning context and create space for the icon */
.milestone-card-compact .milestone-reward-compact {
    position: relative !important; /* This is the MOST CRITICAL line */
    display: inline-flex !important;
    align-items: center !important;
    /* padding-left: 12px !important;  */
    height: 1.2em; /* Gives the container a consistent height */
}

/* 2. Position the icon absolutely WITHIN its parent */
.milestone-card-compact .milestone-reward-compact i.fab.fa-ethereum {
    position: absolute !important; /* Position it relative to the parent */
    left: 0 !important;
    top: 0 !important;
    width: 12px; /* Explicit width for the icon's area */
    height: 100%; /* Make it the full height of the parent */

    /* Flexbox to center the icon glyph within its new absolute box */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the text has no extra spacing */
.milestone-card-compact .milestone-reward-compact .reward-amount-value {
    padding: 0 !important;
    margin: 0 !important;
}

.milestone-card-compact > .milestone-progress-compact {
    position: absolute !important; left: 8px !important; bottom: 8px !important;
    width: 46px !important; height: 46px !important;
}

.milestone-card-compact > .milestone-claim-btn {
    position: absolute !important; bottom: 8px !important; right: 8px !important;
}

.milestone-card-compact > .milestone-claim-btn .claim-btn-compact {
    width: 30px !important; height: 30px !important; font-size: 0.55rem !important;
    padding: 0 !important;
}
	/* Reset internal spacing */
	.milestone-card-compact * { margin:0 !important; padding:0 !important; }
	.milestone-card-compact { 
		position:relative !important; 
		display:flex !important; 
		flex-direction:column !important; 
		align-items:center !important; 
		justify-content:flex-start !important; 
		gap:6px !important; 
		padding:10px 8px 52px 8px !important; /* extra bottom room for circle + claim */
		border-radius:14px !important;
	}
	/* Top icon */
	.milestone-card-compact > .milestone-icon { width:34px !important; height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin-top:2px !important; }
	.milestone-card-compact > .milestone-icon i { font-size:0.95rem !important; }
	/* Info column */
	.milestone-card-compact > .milestone-info { width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; text-align:center !important; }
	.milestone-card-compact .milestone-title-compact { font-size:0.55rem !important; letter-spacing:.3px !important; }
	.milestone-card-compact .milestone-target-compact { font-size:0.62rem !important; display:flex !important; align-items:center !important; gap:4px !important; }
	.milestone-card-compact .milestone-target-compact i { font-size:0.6rem !important; }
	/* Reward row mirrors target row (icon + value) */
	.milestone-card-compact .milestone-reward-compact { display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; font-size:0.62rem !important; line-height:1 !important; align-self:center !important; margin-top:2px !important; }
	.milestone-card-compact .milestone-reward-compact i.fab.fa-ethereum { font-size:0.6rem !important; line-height:1 !important; vertical-align:middle !important; position:relative !important; top:0 !important; margin:0 !important; padding:0 !important; display:inline-block !important; flex-shrink:0 !important; }
	.milestone-card-compact .milestone-reward-compact .reward-amount-value { line-height:1 !important; vertical-align:middle !important; margin:0 !important; padding:0 !important; display:inline-block !important; flex-shrink:0 !important; white-space:nowrap !important; }
	/* Progress circle bottom-left */
	.milestone-card-compact > .milestone-progress-compact { position:absolute !important; left:8px !important; bottom:8px !important; width:46px !important; height:46px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
	.milestone-card-compact > .milestone-progress-compact .progress-circle { width:46px !important; height:46px !important; }
	.milestone-card-compact > .milestone-progress-compact .progress-text { font-size:0.55rem !important; }
	/* Claim button bottom-right */
	.milestone-card-compact > .milestone-claim-btn { position:absolute !important; bottom:8px !important; right:8px !important; }
	.milestone-card-compact > .milestone-claim-btn .claim-btn-compact { width:30px !important; height:30px !important; font-size:0.55rem !important; padding:0 !important; }
	/* Status badge top-right */
	.milestone-card-compact > .milestone-status-compact { position:absolute !important; top:6px !important; right:6px !important; }
	/* Remove any transforms / hover shifts */
	.milestone-card-compact, .milestone-card-compact:hover { transform:none !important; }
	/* Dense layout on very narrow */

		.toggle-arrow {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .toggle-arrow i {
        font-size: 0.9rem;
    }

    .milestone-notification {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
    
    .milestones-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
        margin-bottom: 20px;
    }
    
    .milestones-header h3 {
        font-size: 1.5rem;
        justify-content: center;
        flex: none;
    }
    
    .milestones-header h3 i {
        font-size: 1.4rem;
    }
    
    .milestones-subtitle {
        font-size: 0.8rem;
        flex: none;
        text-align: center;
    }
    
    .milestones-actions {
        position: absolute;
        top: 12px;
        right: 12px;
        flex-shrink: 0;
    }
    
    .refresh-btn {
        width: 32px;
        height: 32px;
        padding: 6px;
    }
    
    .refresh-btn i {
        font-size: 0.9rem;
    }

    .milestones-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .milestone-card-compact {
        min-height: 140px;
        padding: 16px;
    }
    
    .milestone-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }
    
    .milestone-icon i {
        font-size: 16px;
    }
    
    .milestone-title-compact {
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    .milestone-target-compact {
        font-size: 14px;
        margin-bottom: 2px;
    }
    
    .milestone-reward-compact {
        font-size: 12px;
    }
    
    .progress-circle {
        width: 40px;
        height: 40px;
    }
    
    .progress-inner {
        width: 30px;
        height: 30px;
    }
    
    .progress-text {
        font-size: 9px;
    }
    
    .claim-btn-compact {
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 6px;
    }
    
    /* Ultimate milestone mobile adjustments */
    .milestone-card-ultimate {
        padding: 24px 16px;
        min-height: 200px;
    }
    
    .ultimate-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    
    .ultimate-left-section {
        order: 1;
    }
    
    .ultimate-right-section {
        order: 2;
        padding-left: 0;
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    
    .ultimate-icon-container {
        width: 80px;
        height: 80px;
    }
    
    .ultimate-icon {
        font-size: 2rem;
    }
    
    .ultimate-title {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
    
    .ultimate-description {
        font-size: 0.95rem;
        margin-bottom: 20px;
        max-width: 100%;
    }
    
    .ultimate-stats {
        flex-direction: row;
        gap: 16px;
        margin-bottom: 20px;
    }
    
    /* .ultimate-progress-container {
        margin: 0 auto;
    } */
    
    .ultimate-progress-text {
        font-size: 1rem;
    }
    
    .ultimate-claim-btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .btn-text {
        font-size: 0.9rem;
    }
    
    .btn-subtext {
        font-size: 0.75rem;
    }
    
    .ultimate-status-content .status-title {
        font-size: 0.9rem;
    }
    
    .ultimate-status-content .status-subtitle {
        font-size: 0.75rem;
    }

}

/* Conditional progress / claim visibility for small screens */
@media (max-width: 780px) {
    /* Hide disabled (locked) claim buttons when milestone not yet complete */
    .milestone-card-compact .claim-btn-compact.disabled { display:none !important; }

    /* When progress reaches 100, hide the progress circle (attribute driven) */
    .milestone-card-compact .milestone-progress-compact .progress-circle[data-progress="100"] { display:none !important; }
    /* If :has is supported, hide the whole wrapper for cleaner layout */
    /* Remove header decorative animations and pseudo elements (requested) */
    .referral-modal-header::before { 
        display:none !important;
        animation:none !important; }

    .referral-modal-title:before  {
        animation: none !important;
    }

    .referral-modal-header, .referral-modal-title, .referral-modal-close { animation:none !important; }
    @keyframes refModalHeaderBar { from {opacity:1;} to {opacity:1;} }
    @keyframes refTitlePulse { from {opacity:1;} to {opacity:1;} }

    /* Ensure claimable / claimed buttons remain visible */
    .milestone-card-compact .claim-btn-compact.claimable,
    .milestone-card-compact .claim-btn-compact.claimed { display:flex !important; }

    /* Center the single visible action element (progress OR claim) */
    .milestone-card-compact > .milestone-progress-compact,
    .milestone-card-compact > .milestone-claim-btn { left:50% !important; right:auto !important; transform:translateX(-50%); }
    /* Minor tweak so transform reset rule earlier doesn't override */
    .milestone-card-compact > .milestone-claim-btn .claim-btn-compact { margin:0 auto; }

    /* 40% size reduction (scale to 60%) for compact action elements */
    .milestone-card-compact > .milestone-progress-compact { width:28px !important; height:28px !important; bottom:6px !important; }
    .milestone-card-compact > .milestone-progress-compact .progress-circle { width:28px !important; height:28px !important; }
    .milestone-card-compact > .milestone-progress-compact .progress-inner { width:20px !important; height:20px !important; }
    .milestone-card-compact > .milestone-progress-compact .progress-text { font-size:0.45rem !important; }
    .milestone-card-compact > .milestone-claim-btn .claim-btn-compact { width:18px !important; height:18px !important; font-size:0.45rem !important; bottom:auto; }
    /* Adjust bottom padding because action element shrank */
    .milestone-card-compact { padding-bottom:42px !important; }

    /* Make top milestone icon equal to progress circle size */
    .milestone-card-compact > .milestone-icon { width:24px !important; height:24px !important; }
    .milestone-card-compact > .milestone-icon i { font-size:0.8rem !important; line-height:1 !important; }

    /* 20% smaller title */
    .milestone-card-compact .milestone-title-compact { font-size:0.44rem !important; }

    /* Hide subtitle, last updated text, and refresh button area */
    .milestones-header .milestones-subtitle,
    .milestones-header .last-refresh,
    .milestones-header .milestones-actions,
    .milestones-header .refresh-btn { display:none !important; visibility:hidden !important; }

    /* Hide pending status badge */
    .milestone-card-compact > .milestone-status-compact.pending { display:none !important; }

    /* Keep reward type cards (instant / milestone) always on one row */
    .reward-types-overview { 
        display:flex !important; 
        flex-wrap:nowrap !important; 
        gap:8px !important; 
        align-items:stretch !important; 
    }
    .reward-types-overview .reward-type { 
        flex:1 1 0 !important; 
        min-width:0 !important; 
        padding:12px 10px 10px !important; 
    }
    .reward-types-overview .reward-icon { 
        width:42px !important; 
        height:42px !important; 
        margin-bottom:6px !important; 
    }
    .reward-types-overview .reward-icon i { font-size:1.1rem !important; }
    .reward-types-overview h4 { font-size:0.7rem !important; }
    .reward-types-overview .reward-percentage { font-size:1.15rem !important; }
    .reward-types-overview .reward-type .reward-content p { font-size:0.6rem !important; }


    .referral-flow .flow-step { min-width:70px !important; gap:1px !important; }
    .referral-flow .step-icon { width:44px !important; height:44px !important; margin-bottom:8px !important; }
    .referral-flow .step-icon i { font-size:16px !important; }
    .referral-flow .step-content h4 { font-size:11px !important; margin:0 0 2px !important; }
    .referral-flow .step-content p { font-size:10px !important; line-height:1.25 !important; margin:0 !important; }
    .referral-flow .flow-arrow { font-size:14px !important; min-width:18px !important; }
    /* Halve space between each step and arrow */
    .referral-flow { gap:4px !important; }
    .referral-flow .flow-step { margin-right:2px !important; }
    .referral-flow .flow-arrow { margin:0 2px !important; }
}

@media (max-width: 769px) {
        .referral-modal-header h2{
            margin-top: 15px;
        }  
}

@media (max-width: 640px) {

	.milestone-card-ultimate { padding: 24px 16px; min-height: 200px; }
    .ultimate-icon-container { width: 80px; height: 80px; }
    .ultimate-icon { font-size: 1.8rem; }
    .ultimate-title { font-size: 1.35rem; }
    .ultimate-description { font-size: 0.75rem; }
    .ultimate-progress-circle { width: 130px; height: 130px; }
    .ultimate-progress-text { font-size: 1.05rem; }

    .toggle-arrow {
        padding: 8px 16px;
        font-size: 0.75rem;
    }
    
    .toggle-arrow i {
        font-size: 0.8rem;
    }
    
    .toggle-text {
        display: none; /* Hide text on very small screens, show only icon */
    }

    .milestones-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .milestone-card-compact {
        min-height: 120px;
        padding: 12px;
    }
    
    .milestone-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
    }
    
    .milestone-icon i {
        font-size: 14px;
    }
    
    .milestone-title-compact {
        font-size: 10px;
        margin-bottom: 3px;
    }
    
    .milestone-target-compact {
        font-size: 12px;
        margin-bottom: 2px;
    }
    
    .milestone-reward-compact {
        font-size: 11px;
    }
    
    .progress-circle {
        width: 35px;
        height: 35px;
    }
    
    .progress-inner {
        width: 26px;
        height: 26px;
    }
    
    .progress-text {
        font-size: 7px;
    }
    
    .claim-btn-compact {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    /* Ultimate Milestone Mobile */
    .milestone-card-ultimate {
        padding: 20px;
        min-height: 180px;
    }
    
    .ultimate-icon-container {
        width: 60px;
        height: 60px;
    }
    
    .ultimate-icon {
        font-size: 2rem;
    }
    
    .ultimate-title {
        font-size: 1.5rem;
    }
    
    .ultimate-description {
        font-size: 0.8rem;
    }
    
    .ultimate-stats {
        gap: 16px;
    }
    
    .ultimate-stat .stat-value {
        font-size: 1.25rem;
    }
    
    .ultimate-stat .stat-label {
        font-size: 0.8rem;
    }
    
    .ultimate-progress-container {
        width: 80px;
        height: 80px;
    }
    
    .ultimate-progress-text {
        font-size: 1rem;
    }
    
    .ultimate-progress-label {
        font-size: 0.7rem;
    }
    
    .ultimate-claim-btn {
        min-height: 48px;
    }
    
    .btn-content i {
        font-size: 1rem;
    }
    
    .btn-text {
        font-size: 0.75rem;
    }
    
    .btn-subtext {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {

	.milestone-card-compact { gap:5px !important; padding:8px 6px 48px 6px !important; }
	.milestone-card-compact .milestone-title-compact { font-size:0.5rem !important; }
	.milestone-card-compact .milestone-target-compact { font-size:0.58rem !important; }
	.milestone-card-compact .milestone-reward-compact { font-size:0.58rem !important; gap:4px !important; }


	.milestones-header {
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }
    
    .milestones-header h3 {
        font-size: 1.25rem;
        gap: 8px;
    }
    
    .milestones-header h3 i {
        font-size: 1.2rem;
    }
    
    .milestones-subtitle {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .last-refresh {
        font-size: 0.7rem;
        margin-top: 2px;
    }
    
    .milestones-actions {
        top: 8px;
        right: 8px;
    }
    
    .refresh-btn {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
    
    .refresh-btn i {
        font-size: 0.8rem;
    }

    .milestone-card-compact {
        padding-bottom: 48px !important;
        gap: 4px !important;
    }

    .milestone-card-compact > .milestone-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .milestone-card-compact > .milestone-icon i {
        font-size: 0.6rem !important;
    }



    .reward-icon { 
        width: 24px !important; 
        height: 24px !important; 
        margin-bottom: -4px !important; 
    }
    
    .reward-icon i { 
        font-size: 0.75rem !important; 
    }
    
    .milestone-icon { 
        width: 15px !important; 
        height: 15px !important; 
    }
    
    .milestone-icon i { 
        font-size: 0.45rem !important; 
    }
    
    .rank-icon {
        width: 15px !important;
        height: 15px !important;
        font-size: 0.5rem !important;
    }
    
    .claim-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .claim-btn i {
        font-size: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .claim-btn-compact {
        font-size: 0.35rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .milestone-card-compact > .milestone-claim-btn {
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide pending status icon for milestones on very small screens */
    .milestone-card-compact > .milestone-status-compact.pending { display: none !important; }

    /* Show 3 milestones per row on very small screens */
    .milestones-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width:360px){
	.milestone-card-compact { gap:4px !important; padding:8px 4px 46px 4px !important; }
	.milestone-card-compact .milestone-title-compact { font-size:0.48rem !important; }
	.milestone-card-compact .milestone-target-compact { font-size:0.54rem !important; }
	.milestone-card-compact .milestone-reward-compact { font-size:0.54rem !important; gap:4px !important; }
}

/* Fully hide ultimate milestone section on tablets & smaller */
@media (max-width: 1024px) {
    .ultimate-milestone-toggle,.step-number,
    .ultimate-milestone-container { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; height:0 !important; margin:0 !important; padding:0 !important; }

    /* .referral-flow { zoom:0.85; } */
    /* Fallback manual size reduction */
    .referral-flow .flow-step { min-width:90px; }
    .referral-flow .step-icon { width:56px; height:56px; }
    .referral-flow .step-icon i { font-size:18px; }
    .referral-flow .step-content h4 { font-size:13px; }
    .referral-flow .step-content p { font-size:11px; }
    .referral-flow .flow-arrow { font-size:16px; }
}