/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-umelm00bbx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-umelm00bbx] {
    flex: 1;
}

.sidebar[b-umelm00bbx] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-umelm00bbx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-umelm00bbx]  a, .top-row[b-umelm00bbx]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-umelm00bbx]  a:hover, .top-row[b-umelm00bbx]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-umelm00bbx]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-umelm00bbx] {
        justify-content: space-between;
    }

    .top-row[b-umelm00bbx]  a, .top-row[b-umelm00bbx]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-umelm00bbx] {
        flex-direction: row;
    }

    .sidebar[b-umelm00bbx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-umelm00bbx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-umelm00bbx]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-umelm00bbx], article[b-umelm00bbx] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/OnboardingLayout.razor.rz.scp.css */
.onboarding-layout[b-bxq4zoce2y] {
    height: 100dvh;
}
/* /Pages/Challenge.razor.rz.scp.css */
/* Challenge Page Styles */
.challenge-page[b-gezcp7z6q4] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Header */
.page-header[b-gezcp7z6q4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    position: relative;
    flex-shrink: 0;
}

.header-title[b-gezcp7z6q4] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.notification-btn[b-gezcp7z6q4] {
    position: absolute;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.notification-btn:hover[b-gezcp7z6q4] {
    background: #f3f4f6;
}

.notification-btn svg[b-gezcp7z6q4] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Main Tabs */
.main-tabs[b-gezcp7z6q4] {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.main-tab[b-gezcp7z6q4] {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.main-tab:hover[b-gezcp7z6q4] {
    color: #374151;
}

.main-tab.active[b-gezcp7z6q4] {
    color: #f97316;
    border-bottom-color: #f97316;
    font-weight: 600;
}

/* Category Tabs */
.category-tabs[b-gezcp7z6q4] {
    display: flex;
    gap: 8px;
    padding: 16px;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}

.category-tabs[b-gezcp7z6q4]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-gezcp7z6q4] {
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-tab:hover[b-gezcp7z6q4] {
    border-color: #d1d5db;
}

.category-tab.active[b-gezcp7z6q4] {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

/* Cards Container - Scrollable */
.cards-container[b-gezcp7z6q4] {
    flex: 1;
    min-height: 0;
    /* Important for flex scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Challenge Card */
.challenge-card[b-gezcp7z6q4] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.challenge-card:hover[b-gezcp7z6q4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Card Image */
.card-image[b-gezcp7z6q4] {
    position: relative;
    height: 140px;
    overflow: hidden;
    background: #f3f4f6;
}

.card-image img[b-gezcp7z6q4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-badge[b-gezcp7z6q4] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-badge.joined[b-gezcp7z6q4] {
    background: #10b981;
    color: #fff;
}

.status-badge.active[b-gezcp7z6q4] {
    background: #f97316;
    color: #fff;
}

.status-badge.ended[b-gezcp7z6q4] {
    background: #6b7280;
    color: #fff;
}

/* Card Body */
.card-body[b-gezcp7z6q4] {
    padding: 16px;
}

.card-title[b-gezcp7z6q4] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.card-subtitle[b-gezcp7z6q4] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px 0;
}

/* Card Meta */
.card-meta[b-gezcp7z6q4] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.meta-item[b-gezcp7z6q4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.meta-item svg[b-gezcp7z6q4] {
    width: 14px;
    height: 14px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Progress Section */
.progress-section[b-gezcp7z6q4] {
    margin-top: 8px;
}

.progress-header[b-gezcp7z6q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: #6b7280;
}

.progress-value[b-gezcp7z6q4] {
    font-weight: 600;
    color: #111827;
}

.progress-bar[b-gezcp7z6q4] {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-gezcp7z6q4] {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #ea580c);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Card Footer */
.card-footer[b-gezcp7z6q4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.reward-info[b-gezcp7z6q4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reward-info span:first-child[b-gezcp7z6q4] {
    font-size: 11px;
    color: #9ca3af;
}

.reward-value[b-gezcp7z6q4] {
    font-size: 15px;
    font-weight: 700;
    color: #f97316;
}

.join-btn[b-gezcp7z6q4] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
}

.join-btn:hover[b-gezcp7z6q4] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}

/* Rewards Container */
.rewards-container[b-gezcp7z6q4] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 100px;
}

/* Points Card */
.points-card[b-gezcp7z6q4] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    margin-bottom: 20px;
}

.points-header[b-gezcp7z6q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}

.my-reward-btn[b-gezcp7z6q4] {
    padding: 8px 16px;
    background: #fff;
    color: #f97316;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.my-reward-btn:hover[b-gezcp7z6q4] {
    background: #f3f4f6;
}

.points-value[b-gezcp7z6q4] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.points-number[b-gezcp7z6q4] {
    font-size: 36px;
    font-weight: 700;
}

.points-unit[b-gezcp7z6q4] {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.8;
}

.points-info[b-gezcp7z6q4] {
    font-size: 13px;
    opacity: 0.8;
}

/* Badges Section */
.badges-section[b-gezcp7z6q4] {
    margin-bottom: 24px;
}

.section-header[b-gezcp7z6q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.see-all-btn[b-gezcp7z6q4] {
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: #f97316;
    cursor: pointer;
    padding: 0;
}

.see-all-btn:hover[b-gezcp7z6q4] {
    text-decoration: underline;
}

.badges-grid[b-gezcp7z6q4] {
    display: flex;
    gap: 16px;
}

.badge-item[b-gezcp7z6q4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.badge-icon[b-gezcp7z6q4] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    border-radius: 12px;
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.badge-item.locked .badge-icon[b-gezcp7z6q4] {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    box-shadow: none;
}

.badge-name[b-gezcp7z6q4] {
    font-size: 11px;
    color: #374151;
    text-align: center;
}

.badge-item.locked .badge-name[b-gezcp7z6q4] {
    color: #9ca3af;
}

/* Redeem Section */
.redeem-section[b-gezcp7z6q4] {
    margin-bottom: 20px;
}

.section-title[b-gezcp7z6q4] {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
}

/* Redeem Card */
.redeem-card[b-gezcp7z6q4] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.redeem-card:hover[b-gezcp7z6q4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.redeem-image[b-gezcp7z6q4] {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
}

.redeem-image img[b-gezcp7z6q4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.redeem-info[b-gezcp7z6q4] {
    flex: 1;
    min-width: 0;
}

.redeem-brand[b-gezcp7z6q4] {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-bottom: 2px;
}

.redeem-title[b-gezcp7z6q4] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.redeem-points[b-gezcp7z6q4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.redeem-points .points-value[b-gezcp7z6q4] {
    font-weight: 700;
    color: #f97316;
}

.gift-emoji[b-gezcp7z6q4] {
    font-size: 14px;
}

.redeem-btn[b-gezcp7z6q4] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.redeem-btn:hover[b-gezcp7z6q4] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
}

/* Reward Cards */
.reward-cards[b-gezcp7z6q4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reward-card[b-gezcp7z6q4] {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.reward-thumb[b-gezcp7z6q4] {
    width: 80px;
    flex-shrink: 0;
}

.reward-body[b-gezcp7z6q4] {
    flex: 1;
    padding: 12px;
}

.reward-header[b-gezcp7z6q4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.reward-title[b-gezcp7z6q4] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.reward-points[b-gezcp7z6q4] {
    font-size: 12px;
    font-weight: 600;
    color: #f97316;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 10px;
}

.reward-desc[b-gezcp7z6q4] {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.reward-footer[b-gezcp7z6q4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.expires[b-gezcp7z6q4] {
    font-size: 11px;
    color: #9ca3af;
}

.redeem-btn[b-gezcp7z6q4] {
    padding: 6px 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.redeem-btn:hover[b-gezcp7z6q4] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
}

/* Modal Overlay */
.modal-overlay[b-gezcp7z6q4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.modal-content[b-gezcp7z6q4] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    width: calc(100% - 40px);
    max-width: 360px;
    z-index: 2001;
    text-align: center;
}

.modal-icon[b-gezcp7z6q4] {
    font-size: 48px;
    margin-bottom: 16px;
}

.modal-content h3[b-gezcp7z6q4] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.modal-content p[b-gezcp7z6q4] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.modal-table[b-gezcp7z6q4] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.table-row[b-gezcp7z6q4] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.table-row span[b-gezcp7z6q4] {
    color: #6b7280;
}

.table-row b[b-gezcp7z6q4] {
    color: #111827;
}

.modal-actions[b-gezcp7z6q4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.confirm-btn[b-gezcp7z6q4] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

.confirm-btn:disabled[b-gezcp7z6q4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.warn-text[b-gezcp7z6q4] {
    font-size: 12px;
    color: #ef4444;
}

.cancel-btn[b-gezcp7z6q4] {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
}

/* Success Modal */
.success-modal[b-gezcp7z6q4] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    width: calc(100% - 40px);
    max-width: 360px;
    z-index: 2001;
    text-align: center;
}

.success-icon[b-gezcp7z6q4] {
    font-size: 56px;
    margin-bottom: 16px;
}

.success-modal h3[b-gezcp7z6q4] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.success-modal p[b-gezcp7z6q4] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

.primary-btn[b-gezcp7z6q4] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-bottom: 8px;
}

.link-btn[b-gezcp7z6q4] {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
}

/* Bottom Navigation */
.bottom-nav[b-gezcp7z6q4] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 1000;
    
    margin: 0 auto;
}

.nav-item[b-gezcp7z6q4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.nav-item svg[b-gezcp7z6q4] {
    width: 22px;
    height: 22px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 0.2s ease;
}

.nav-item span[b-gezcp7z6q4] {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.nav-item:hover svg[b-gezcp7z6q4],
.nav-item:hover span[b-gezcp7z6q4] {
    color: #6b7280;
}

.nav-item.active svg[b-gezcp7z6q4] {
    color: #f97316;
}

.nav-item.active span[b-gezcp7z6q4] {
    color: #f97316;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 360px) {
    .card-image[b-gezcp7z6q4] {
        height: 120px;
    }

    .card-body[b-gezcp7z6q4] {
        padding: 14px;
    }

    .card-title[b-gezcp7z6q4] {
        font-size: 15px;
    }

    .category-tab[b-gezcp7z6q4] {
        padding: 6px 12px;
        font-size: 12px;
    }

    .nav-item[b-gezcp7z6q4] {
        padding: 6px 8px;
        min-width: 50px;
    }

    .nav-item svg[b-gezcp7z6q4] {
        width: 20px;
        height: 20px;
    }

    .nav-item span[b-gezcp7z6q4] {
        font-size: 9px;
    }
}
/* /Pages/ChallengeCongrats.razor.rz.scp.css */
.congrats[b-dsy59ukeqs] { padding: 16px }
.hero[b-dsy59ukeqs] { display:flex; justify-content:center; align-items:center; height:160px; background:linear-gradient(135deg,#ffe6d1,#e3f1ff); border-radius:24px; margin-bottom:16px }
.trophy[b-dsy59ukeqs] { font-size:38px }
h2[b-dsy59ukeqs] { text-align:center; margin: 8px 0 0 }
.highlight[b-dsy59ukeqs] { text-align:center; color:#FF7A00; margin: 6px 0 12px }
p[b-dsy59ukeqs] { text-align:center; color:#666 }
.earned[b-dsy59ukeqs] { margin:16px 0; padding:12px; background:#f7f8fb; border-radius:16px }
.earned-title[b-dsy59ukeqs] { color:#777; font-weight:700 }
.earned-detail[b-dsy59ukeqs] { font-weight:700; margin-bottom:8px }
.badge-card[b-dsy59ukeqs] { display:grid; grid-template-columns: 40px 1fr; gap:10px; align-items:center; background:#fff; border-radius:12px; padding:10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05) }
.badge[b-dsy59ukeqs] { font-size:22px }
.badge-title[b-dsy59ukeqs] { font-weight:700 }
.badge-sub[b-dsy59ukeqs] { color:#777 }
.actions[b-dsy59ukeqs] { display:flex; flex-direction:column; gap:10px; margin-top:12px }
button.primary[b-dsy59ukeqs] { background:#FF7A00; color:#fff; border:none; border-radius:12px; padding:12px; font-weight:700 }
button.link[b-dsy59ukeqs] { background:none; border:none; color:#FF7A00; font-weight:700 }
/* /Pages/Coach/AskCoach.razor.rz.scp.css */
/* Ask Coach Page Styles */
.coach-page[b-eo1kczllee] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  
  margin: 0 auto;
  background: #fff;
  padding-bottom: 80px;
}

/* Header */
.page-header[b-eo1kczllee] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
}

.page-title[b-eo1kczllee] {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.header-spacer[b-eo1kczllee] {
  width: 40px;
}

.notification-btn[b-eo1kczllee] {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.notification-btn svg[b-eo1kczllee] {
  width: 24px;
  height: 24px;
  color: #374151;
}

/* Main Tabs */
.main-tabs[b-eo1kczllee] {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
}

.main-tab[b-eo1kczllee] {
  flex: 1;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.main-tab.active[b-eo1kczllee] {
  color: #f97316;
  border-bottom-color: #f97316;
}

/* Placeholders */
.insight-placeholder[b-eo1kczllee] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 14px;
}

/* Bottom Navigation */
.bottom-nav[b-eo1kczllee] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  background: #fff;
  border-top: 1px solid #f3f4f6;
  
  margin: 0 auto;
}

.nav-item[b-eo1kczllee] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-item svg[b-eo1kczllee] {
  width: 24px;
  height: 24px;
  color: #9ca3af;
}

.nav-item span[b-eo1kczllee] {
  font-size: 10px;
  color: #9ca3af;
}

.nav-item.active svg[b-eo1kczllee] {
  color: #f97316;
}

.nav-item.active span[b-eo1kczllee] {
  color: #f97316;
}

/* Responsive */
@media (max-width: 360px) {
  .main-tab[b-eo1kczllee] {
    font-size: 13px;
    padding: 10px 6px;
  }
}
/* /Pages/Coach/SettingEatPlan.razor.rz.scp.css */
/* Setting Eat Plan Page Styles */
.setting-plan-page[b-q5iv981qrv] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-q5iv981qrv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-q5iv981qrv] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-q5iv981qrv] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-q5iv981qrv] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.notification-btn[b-q5iv981qrv] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notification-btn svg[b-q5iv981qrv] {
    width: 24px;
    height: 24px;
    color: #374151;
}

/* Content */
.content[b-q5iv981qrv] {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
}

.section-title[b-q5iv981qrv] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px 0;
}

/* Goal Grid */
.goal-grid[b-q5iv981qrv] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.goal-btn[b-q5iv981qrv] {
    padding: 12px 20px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.goal-btn:hover[b-q5iv981qrv] {
    border-color: #f97316;
}

.goal-btn.selected[b-q5iv981qrv] {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

/* Target Section */
.target-section[b-q5iv981qrv] {
    margin-bottom: 24px;
}

.target-label[b-q5iv981qrv] {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.target-input-row[b-q5iv981qrv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.target-input[b-q5iv981qrv] {
    width: 70px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    text-align: center;
    outline: none;
}

.target-input.wide[b-q5iv981qrv] {
    width: 100px;
}

.target-input:focus[b-q5iv981qrv] {
    border-color: #f97316;
    background: #fff;
}

.target-select[b-q5iv981qrv] {
    padding: 12px 14px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    outline: none;
}

.target-select:focus[b-q5iv981qrv] {
    border-color: #f97316;
}

.input-separator[b-q5iv981qrv] {
    font-size: 14px;
    color: #6b7280;
}

.input-unit[b-q5iv981qrv] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

/* Button Section */
.button-section[b-q5iv981qrv] {
    padding: 16px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.confirm-btn[b-q5iv981qrv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.confirm-btn:hover:not(:disabled)[b-q5iv981qrv] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.confirm-btn:disabled[b-q5iv981qrv] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 360px) {
    .content[b-q5iv981qrv] {
        padding: 20px 12px;
    }

    .goal-grid[b-q5iv981qrv] {
        gap: 8px;
    }

    .goal-btn[b-q5iv981qrv] {
        padding: 10px 16px;
        font-size: 13px;
    }

    .target-input[b-q5iv981qrv] {
        width: 60px;
        padding: 10px 12px;
        font-size: 14px;
    }
}
/* /Pages/Coach/SettingPlan.razor.rz.scp.css */
/* Setting Plan Page Styles */
.setting-plan-page[b-gvp4mzno42] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-gvp4mzno42] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-gvp4mzno42] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-gvp4mzno42] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-gvp4mzno42] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.notification-btn[b-gvp4mzno42] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notification-btn svg[b-gvp4mzno42] {
    width: 24px;
    height: 24px;
    color: #374151;
}

/* Content */
.content[b-gvp4mzno42] {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
}

.section-title[b-gvp4mzno42] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
}

.section-subtitle[b-gvp4mzno42] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

/* Activity Grid */
.activity-grid[b-gvp4mzno42] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Activity Card */
.activity-card[b-gvp4mzno42] {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-card:hover[b-gvp4mzno42] {
    border-color: #d1d5db;
}

.activity-card.selected[b-gvp4mzno42] {
    border-color: #f97316;
}

/* Activity Image */
.activity-image[b-gvp4mzno42] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.activity-image img[b-gvp4mzno42] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkbox-overlay[b-gvp4mzno42] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #f97316;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-overlay svg[b-gvp4mzno42] {
    width: 16px;
    height: 16px;
    color: #fff;
}

/* Activity Label */
.activity-label[b-gvp4mzno42] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fff;
}

.checkbox[b-gvp4mzno42] {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox.checked[b-gvp4mzno42] {
    background: #f97316;
    border-color: #f97316;
}

.checkbox svg[b-gvp4mzno42] {
    width: 12px;
    height: 12px;
    color: #fff;
}

.activity-name[b-gvp4mzno42] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

/* Button Section */
.button-section[b-gvp4mzno42] {
    padding: 16px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.continue-btn[b-gvp4mzno42] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.continue-btn:hover:not(:disabled)[b-gvp4mzno42] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.continue-btn:disabled[b-gvp4mzno42] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 360px) {
    .content[b-gvp4mzno42] {
        padding: 20px 12px;
    }

    .activity-grid[b-gvp4mzno42] {
        gap: 12px;
    }

    .activity-label[b-gvp4mzno42] {
        padding: 10px;
    }

    .activity-name[b-gvp4mzno42] {
        font-size: 13px;
    }
}
/* /Pages/CommunityPage.razor.rz.scp.css */
/* Community Page Styles */
.community-page[b-q6v25cl4kz] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
    position: relative;
}

/* Header */
.community-header[b-q6v25cl4kz] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    position: relative;
    flex-shrink: 0;
}

.header-title[b-q6v25cl4kz] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.notification-btn[b-q6v25cl4kz] {
    position: absolute;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.notification-btn:hover[b-q6v25cl4kz] {
    background: #f3f4f6;
}

.notification-btn svg[b-q6v25cl4kz] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tabs */
.community-tabs[b-q6v25cl4kz] {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.tab-btn[b-q6v25cl4kz] {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-q6v25cl4kz] {
    color: #374151;
}

.tab-btn.active[b-q6v25cl4kz] {
    color: #f97316;
    border-bottom-color: #f97316;
    font-weight: 600;
}

/* Content Area - Scrollable */
.community-content[b-q6v25cl4kz] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 100px;
    /* Space for bottom nav */
}

/* Bottom Navigation */
.bottom-nav[b-q6v25cl4kz] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 1000;
    
    margin: 0 auto;
}

.nav-item[b-q6v25cl4kz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.nav-item svg[b-q6v25cl4kz] {
    width: 22px;
    height: 22px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 0.2s ease;
}

.nav-item span[b-q6v25cl4kz] {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.nav-item:hover svg[b-q6v25cl4kz],
.nav-item:hover span[b-q6v25cl4kz] {
    color: #6b7280;
}

.nav-item.active svg[b-q6v25cl4kz] {
    color: #f97316;
}

.nav-item.active span[b-q6v25cl4kz] {
    color: #f97316;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 360px) {
    .tab-btn[b-q6v25cl4kz] {
        font-size: 12px;
        padding: 10px 4px;
    }

    .nav-item[b-q6v25cl4kz] {
        padding: 6px 8px;
        min-width: 50px;
    }

    .nav-item svg[b-q6v25cl4kz] {
        width: 20px;
        height: 20px;
    }

    .nav-item span[b-q6v25cl4kz] {
        font-size: 9px;
    }
}
/* /Pages/Community/ClubsView.razor.rz.scp.css */
/* Clubs View Styles */
.clubs-container[b-b4zqm1bvly] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Club Card */
.club-card[b-b4zqm1bvly] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.club-card:hover[b-b4zqm1bvly] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Cover Image */
.club-cover[b-b4zqm1bvly] {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #f3f4f6;
}

.joined-badge[b-b4zqm1bvly] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    background: #10b981;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Club Info */
.club-info[b-b4zqm1bvly] {
    padding: 16px;
    padding-bottom: 8px;
}

.club-name[b-b4zqm1bvly] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.club-description[b-b4zqm1bvly] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.club-meta[b-b4zqm1bvly] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.members-icon[b-b4zqm1bvly] {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.members-count[b-b4zqm1bvly] {
    font-size: 13px;
    color: #6b7280;
}

/* Club Action */
.club-action[b-b4zqm1bvly] {
    padding: 12px 16px 16px;
}

.btn-join[b-b4zqm1bvly],
.btn-joined[b-b4zqm1bvly] {
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-join[b-b4zqm1bvly] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.btn-join:hover[b-b4zqm1bvly] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
    transform: translateY(-1px);
}

.btn-join:active[b-b4zqm1bvly] {
    transform: translateY(0);
}

.btn-joined[b-b4zqm1bvly] {
    background: #fff;
    color: #6b7280;
    border: 1.5px solid #e5e7eb;
}

.btn-joined:hover[b-b4zqm1bvly] {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Responsive */
@media (max-width: 360px) {
    .club-cover[b-b4zqm1bvly] {
        height: 120px;
    }

    .club-info[b-b4zqm1bvly] {
        padding: 12px;
        padding-bottom: 6px;
    }

    .club-name[b-b4zqm1bvly] {
        font-size: 15px;
    }

    .club-description[b-b4zqm1bvly] {
        font-size: 12px;
    }

    .club-action[b-b4zqm1bvly] {
        padding: 10px 12px 14px;
    }

    .btn-join[b-b4zqm1bvly],
    .btn-joined[b-b4zqm1bvly] {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Create Club FAB */
.create-club-fab[b-b4zqm1bvly] {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
    transition: all 0.2s ease;
    z-index: 1000;
}

.create-club-fab:hover[b-b4zqm1bvly] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

.create-club-fab:active[b-b4zqm1bvly] {
    transform: scale(0.95);
}

.create-club-fab svg[b-b4zqm1bvly] {
    width: 24px;
    height: 24px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Loading State */
.loading-container[b-b4zqm1bvly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
}

.loading-container p[b-b4zqm1bvly] {
    margin-top: 12px;
    font-size: 14px;
}

.spinner[b-b4zqm1bvly] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-b4zqm1bvly 0.8s linear infinite;
}

@keyframes spin-b-b4zqm1bvly {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-b4zqm1bvly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
    text-align: center;
}

.empty-state svg[b-b4zqm1bvly] {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3[b-b4zqm1bvly] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.empty-state p[b-b4zqm1bvly] {
    margin: 0;
    font-size: 14px;
}

/* Owner Badge */
.owner-badge[b-b4zqm1bvly] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Club Category Tag */
.club-category[b-b4zqm1bvly] {
    margin-left: auto;
    padding: 4px 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
}

/* Owner & Disabled Buttons */
.btn-owner[b-b4zqm1bvly] {
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    cursor: default;
}

.btn-join:disabled[b-b4zqm1bvly],
.btn-joined:disabled[b-b4zqm1bvly] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Button Spinner */
.btn-spinner[b-b4zqm1bvly] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-b4zqm1bvly 0.6s linear infinite;
}
/* /Pages/Community/CreateClub.razor.rz.scp.css */
/* Create Club Page Styles */
.create-club-page[b-7rjflqaicy] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Page Header */
.page-header[b-7rjflqaicy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.back-btn[b-7rjflqaicy] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-7rjflqaicy] {
    background: #f3f4f6;
}

.back-btn svg[b-7rjflqaicy] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-7rjflqaicy] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-7rjflqaicy] {
    width: 40px;
}

/* Form Content */
.form-content[b-7rjflqaicy] {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
}

/* Form Section */
.form-section[b-7rjflqaicy] {
    margin-bottom: 24px;
}

.section-label[b-7rjflqaicy] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

/* Image Upload Area */
.image-upload-area[b-7rjflqaicy] {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    background: #f9fafb;
}

.image-upload-area:hover[b-7rjflqaicy] {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.02);
}

.upload-placeholder[b-7rjflqaicy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.upload-placeholder svg[b-7rjflqaicy] {
    width: 32px;
    height: 32px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.upload-text[b-7rjflqaicy] {
    font-size: 14px;
    font-weight: 600;
    color: #f97316;
}

.upload-hint[b-7rjflqaicy] {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

.preview-image[b-7rjflqaicy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-image-btn[b-7rjflqaicy] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-image-btn:hover[b-7rjflqaicy] {
    background: rgba(0, 0, 0, 0.8);
}

.remove-image-btn svg[b-7rjflqaicy] {
    width: 16px;
    height: 16px;
    color: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.image-url-input[b-7rjflqaicy] {
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
}

.image-url-input:focus[b-7rjflqaicy] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.image-url-input[b-7rjflqaicy]::placeholder {
    color: #9ca3af;
}

/* Form Input */
.form-input[b-7rjflqaicy] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
}

.form-input:focus[b-7rjflqaicy] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.form-input[b-7rjflqaicy]::placeholder {
    color: #9ca3af;
}

/* Form Textarea */
.form-textarea[b-7rjflqaicy] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
    resize: none;
    font-family: inherit;
}

.form-textarea:focus[b-7rjflqaicy] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.form-textarea[b-7rjflqaicy]::placeholder {
    color: #9ca3af;
}

/* Type Selector */
.type-selector[b-7rjflqaicy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.type-btn[b-7rjflqaicy] {
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-btn:hover[b-7rjflqaicy] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.type-btn.selected[b-7rjflqaicy] {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

/* Button Section */
.button-section[b-7rjflqaicy] {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.create-btn[b-7rjflqaicy] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.create-btn:hover:not(:disabled)[b-7rjflqaicy] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.create-btn:active:not(:disabled)[b-7rjflqaicy] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.create-btn:disabled[b-7rjflqaicy] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 360px) {
    .form-content[b-7rjflqaicy] {
        padding: 20px 16px;
    }

    .page-title[b-7rjflqaicy] {
        font-size: 16px;
    }

    .form-input[b-7rjflqaicy],
    .form-textarea[b-7rjflqaicy] {
        padding: 12px 14px;
        font-size: 13px;
    }

    .type-btn[b-7rjflqaicy] {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Upload Loading State */
.image-upload-area.uploading[b-7rjflqaicy] {
    pointer-events: none;
    border-color: #f97316;
}

.upload-loading[b-7rjflqaicy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #6b7280;
}

.upload-loading span[b-7rjflqaicy] {
    font-size: 14px;
}

.spinner[b-7rjflqaicy] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-7rjflqaicy 0.8s linear infinite;
}

@keyframes spin-b-7rjflqaicy {
    to {
        transform: rotate(360deg);
    }
}

/* Error Message */
.error-message[b-7rjflqaicy] {
    margin: 0 20px 16px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 14px;
}

/* Button Spinner */
.btn-spinner[b-7rjflqaicy] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-7rjflqaicy 0.6s linear infinite;
    margin-right: 8px;
}

.create-btn[b-7rjflqaicy] {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Community/CreateEvent.razor.rz.scp.css */
/* Create Event Page Styles */
.create-event-page[b-bbjrj89wo6] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Page Header */
.page-header[b-bbjrj89wo6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.back-btn[b-bbjrj89wo6] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-bbjrj89wo6] {
    background: #f3f4f6;
}

.back-btn svg[b-bbjrj89wo6] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-bbjrj89wo6] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-bbjrj89wo6] {
    width: 40px;
}

/* Form Content */
.form-content[b-bbjrj89wo6] {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
}

/* Form Section */
.form-section[b-bbjrj89wo6] {
    margin-bottom: 24px;
}

.section-label[b-bbjrj89wo6] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

/* Form Input */
.form-input[b-bbjrj89wo6] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
}

.form-input:focus[b-bbjrj89wo6] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.form-input[b-bbjrj89wo6]::placeholder {
    color: #9ca3af;
}

/* Date Input */
input[type="date"].form-input[b-bbjrj89wo6] {
    cursor: pointer;
}

input[type="date"].form-input[b-bbjrj89wo6]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

/* Form Textarea */
.form-textarea[b-bbjrj89wo6] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
    resize: none;
    font-family: inherit;
}

.form-textarea:focus[b-bbjrj89wo6] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.form-textarea[b-bbjrj89wo6]::placeholder {
    color: #9ca3af;
}

/* Type Selector */
.type-selector[b-bbjrj89wo6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.type-btn[b-bbjrj89wo6] {
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-btn:hover[b-bbjrj89wo6] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.type-btn.selected[b-bbjrj89wo6] {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

/* Button Section */
.button-section[b-bbjrj89wo6] {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.create-btn[b-bbjrj89wo6] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.create-btn:hover:not(:disabled)[b-bbjrj89wo6] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.create-btn:active:not(:disabled)[b-bbjrj89wo6] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.create-btn:disabled[b-bbjrj89wo6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 360px) {
    .form-content[b-bbjrj89wo6] {
        padding: 20px 16px;
    }

    .page-title[b-bbjrj89wo6] {
        font-size: 16px;
    }

    .form-input[b-bbjrj89wo6],
    .form-textarea[b-bbjrj89wo6] {
        padding: 12px 14px;
        font-size: 13px;
    }

    .type-btn[b-bbjrj89wo6] {
        padding: 10px 12px;
        font-size: 13px;
    }
}
/* /Pages/Community/CreateListing.razor.rz.scp.css */
/* Create Listing Page Styles */
.create-listing-page[b-7kln4r5jii] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;

    margin: 0 auto;
    background: #fff;
}

/* Page Header */
.page-header[b-7kln4r5jii] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.back-btn[b-7kln4r5jii] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-7kln4r5jii] {
    background: #f3f4f6;
}

.back-btn svg[b-7kln4r5jii] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-7kln4r5jii] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    text-align: center;
    flex: 1;
}

.header-spacer[b-7kln4r5jii] {
    width: 40px;
}

/* Form Content */
.form-content[b-7kln4r5jii] {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
}

/* Page Intro */
.page-intro[b-7kln4r5jii] {
    margin-bottom: 24px;
}

.intro-title[b-7kln4r5jii] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.intro-text[b-7kln4r5jii] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Form Section */
.form-section[b-7kln4r5jii] {
    margin-bottom: 20px;
}

.section-label[b-7kln4r5jii] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

/* Image Upload Area */
.image-upload-area[b-7kln4r5jii] {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    background: #f9fafb;
}

.image-upload-area:hover[b-7kln4r5jii] {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.02);
}

.upload-placeholder[b-7kln4r5jii] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.upload-placeholder svg[b-7kln4r5jii] {
    width: 32px;
    height: 32px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.upload-text[b-7kln4r5jii] {
    font-size: 14px;
    font-weight: 600;
    color: #f97316;
}

.upload-hint[b-7kln4r5jii] {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

.preview-image[b-7kln4r5jii] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-image-btn[b-7kln4r5jii] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-image-btn:hover[b-7kln4r5jii] {
    background: rgba(0, 0, 0, 0.8);
}

.remove-image-btn svg[b-7kln4r5jii] {
    width: 16px;
    height: 16px;
    color: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Form Input */
.form-input[b-7kln4r5jii] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
}

.form-input:focus[b-7kln4r5jii] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.form-input[b-7kln4r5jii]::placeholder {
    color: #9ca3af;
}

/* Form Textarea */
.form-textarea[b-7kln4r5jii] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
    resize: none;
    font-family: inherit;
}

.form-textarea:focus[b-7kln4r5jii] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.form-textarea[b-7kln4r5jii]::placeholder {
    color: #9ca3af;
}

/* Button Section */
.button-section[b-7kln4r5jii] {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.create-btn[b-7kln4r5jii] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.create-btn:hover:not(:disabled)[b-7kln4r5jii] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.create-btn:active:not(:disabled)[b-7kln4r5jii] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.create-btn:disabled[b-7kln4r5jii] {
    cursor: not-allowed;
}

/* Loading state - pulse animation */
.create-btn.loading[b-7kln4r5jii] {
    animation: pulse-bg-b-7kln4r5jii 1.5s ease-in-out infinite;
}

@keyframes pulse-bg-b-7kln4r5jii {

    0%,
    100% {
        background: linear-gradient(135deg, #f97316, #ea580c);
        box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    }

    50% {
        background: linear-gradient(135deg, #fb923c, #f97316);
        box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5);
    }
}

/* Spinner Animation */
.spinner-small[b-7kln4r5jii] {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinner-rotate-b-7kln4r5jii 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spinner-rotate-b-7kln4r5jii {
    to {
        transform: rotate(360deg);
    }
}

/* Loading text animation - fade between states */
.loading-text[b-7kln4r5jii] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading-dots[b-7kln4r5jii] {
    display: inline-flex;
    gap: 2px;
}

.loading-dots span[b-7kln4r5jii] {
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    animation: dot-bounce-b-7kln4r5jii 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1)[b-7kln4r5jii] {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2)[b-7kln4r5jii] {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3)[b-7kln4r5jii] {
    animation-delay: 0.4s;
}

@keyframes dot-bounce-b-7kln4r5jii {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 360px) {
    .form-content[b-7kln4r5jii] {
        padding: 20px 16px;
    }

    .page-title[b-7kln4r5jii] {
        font-size: 14px;
    }

    .intro-title[b-7kln4r5jii] {
        font-size: 18px;
    }

    .form-input[b-7kln4r5jii],
    .form-textarea[b-7kln4r5jii] {
        padding: 12px 14px;
        font-size: 13px;
    }
}
/* /Pages/Community/EventSuccess.razor.rz.scp.css */
/* Event Success Page Styles */
.success-page[b-592uh7kis2] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Decorative Background */
.decorative-bg[b-592uh7kis2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    pointer-events: none;
    overflow: hidden;
}

.blob[b-592uh7kis2] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
}

.blob-1[b-592uh7kis2] {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #fcd9b6, #f9a8d4);
    top: -60px;
    right: -40px;
}

.blob-2[b-592uh7kis2] {
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, #bfdbfe, #c4b5fd);
    top: 40px;
    right: 60px;
}

/* Success Content */
.success-content[b-592uh7kis2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Success Icon */
.success-icon[b-592uh7kis2] {
    margin-bottom: 32px;
}

.icon-bg[b-592uh7kis2] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #67e8f9, #38bdf8, #f97316);
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(249, 115, 22, 0.25);
    animation: pulse-b-592uh7kis2 2s ease-in-out infinite;
}

.icon-bg svg[b-592uh7kis2] {
    width: 48px;
    height: 48px;
    color: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes pulse-b-592uh7kis2 {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 12px 40px rgba(249, 115, 22, 0.25);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 16px 50px rgba(249, 115, 22, 0.35);
    }
}

/* Success Message */
.success-title[b-592uh7kis2] {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.success-message[b-592uh7kis2] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
    max-width: 320px;
}

.admin-email[b-592uh7kis2] {
    color: #f97316;
    text-decoration: none;
    font-weight: 500;
}

.admin-email:hover[b-592uh7kis2] {
    text-decoration: underline;
}

/* Button Section */
.button-section[b-592uh7kis2] {
    padding: 24px 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    position: relative;
    z-index: 1;
}

.done-btn[b-592uh7kis2] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.done-btn:hover[b-592uh7kis2] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.done-btn:active[b-592uh7kis2] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* Responsive */
@media (max-width: 360px) {
    .success-title[b-592uh7kis2] {
        font-size: 20px;
    }

    .success-message[b-592uh7kis2] {
        font-size: 13px;
    }

    .icon-bg[b-592uh7kis2] {
        width: 88px;
        height: 88px;
        border-radius: 20px;
    }

    .icon-bg svg[b-592uh7kis2] {
        width: 42px;
        height: 42px;
    }
}
/* /Pages/Community/EventsView.razor.rz.scp.css */
/* Events View Styles */
.events-container[b-on5efy4p32] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* Filter Tabs */
.filter-tabs[b-on5efy4p32] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-btn[b-on5efy4p32] {
    flex: 1;
    padding: 10px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover[b-on5efy4p32] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.filter-btn.active[b-on5efy4p32] {
    border-color: #111827;
    color: #111827;
    background: #fff;
    font-weight: 600;
}

/* Events List */
.events-list[b-on5efy4p32] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Event Card */
.event-card[b-on5efy4p32] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.event-card:hover[b-on5efy4p32] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Date Badge */
.date-badge[b-on5efy4p32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 10px 8px;
    background: #fef3c7;
    border-radius: 12px;
    flex-shrink: 0;
}

.date-badge .month[b-on5efy4p32] {
    font-size: 11px;
    font-weight: 700;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-badge .day[b-on5efy4p32] {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.date-badge .weekday[b-on5efy4p32] {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

/* Event Content */
.event-content[b-on5efy4p32] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.event-title[b-on5efy4p32] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.event-description[b-on5efy4p32] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Event Meta */
.event-meta[b-on5efy4p32] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.meta-item[b-on5efy4p32] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.meta-item svg[b-on5efy4p32] {
    width: 14px;
    height: 14px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Event Action */
.event-action[b-on5efy4p32] {
    margin-top: auto;
}

.btn-rsvp[b-on5efy4p32],
.btn-going[b-on5efy4p32] {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-rsvp[b-on5efy4p32] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
}

.btn-rsvp:hover[b-on5efy4p32] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}

.btn-going[b-on5efy4p32] {
    background: #fff;
    color: #f97316;
    border: 1.5px solid #f97316;
}

.btn-going:hover[b-on5efy4p32] {
    background: rgba(249, 115, 22, 0.05);
}

/* Create Event FAB */
.create-event-fab[b-on5efy4p32] {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
    transition: all 0.2s ease;
    z-index: 1000;
}

.create-event-fab:hover[b-on5efy4p32] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

.create-event-fab:active[b-on5efy4p32] {
    transform: scale(0.95);
}

.create-event-fab svg[b-on5efy4p32] {
    width: 24px;
    height: 24px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Responsive */
@media (max-width: 360px) {
    .event-card[b-on5efy4p32] {
        padding: 14px;
        gap: 12px;
    }

    .date-badge[b-on5efy4p32] {
        min-width: 50px;
        padding: 8px 6px;
    }

    .date-badge .day[b-on5efy4p32] {
        font-size: 20px;
    }

    .event-title[b-on5efy4p32] {
        font-size: 15px;
    }

    .event-description[b-on5efy4p32] {
        font-size: 12px;
    }

    .filter-btn[b-on5efy4p32] {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Loading State */
.loading-state[b-on5efy4p32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
}

.loading-state p[b-on5efy4p32] {
    margin-top: 12px;
    font-size: 14px;
}

.spinner[b-on5efy4p32] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-on5efy4p32 0.8s linear infinite;
}

@keyframes spin-b-on5efy4p32 {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-on5efy4p32] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
    text-align: center;
}

.empty-state svg[b-on5efy4p32] {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-on5efy4p32] {
    margin: 0;
    font-size: 14px;
}

.empty-state h3[b-on5efy4p32] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}
/* /Pages/Community/FeedsView.razor.rz.scp.css */
/* Feeds View Styles */
.feeds-container[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Composer Section */
.composer-section[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.composer-input-wrapper[b-z4eb2302y4] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-z4eb2302y4] {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #9ca3af;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.composer-input[b-z4eb2302y4] {
    width: 100%;
    padding: 12px 14px 12px 44px;
    border: 1.5px solid #e5e7eb;
    border-radius: 25px;
    font-size: 14px;
    color: #111827;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.composer-input:focus[b-z4eb2302y4] {
    outline: none;
    border-color: #f97316;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.composer-input[b-z4eb2302y4]::placeholder {
    color: #9ca3af;
}

/* Composer Actions */
.composer-actions[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-btn[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.composer-btn svg[b-z4eb2302y4] {
    width: 16px;
    height: 16px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.composer-btn:hover[b-z4eb2302y4] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.composer-btn.active[b-z4eb2302y4] {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

.post-btn[b-z4eb2302y4] {
    margin-left: auto;
    padding: 8px 20px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

.post-btn:hover[b-z4eb2302y4] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

/* Feeds List */
.feeds-list[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Feed Card */
.feed-card[b-z4eb2302y4] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

/* Post Header */
.post-header[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.avatar[b-z4eb2302y4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.post-meta[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name[b-z4eb2302y4] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.post-time[b-z4eb2302y4] {
    font-size: 12px;
    color: #9ca3af;
}

/* Post Content */
.post-content[b-z4eb2302y4] {
    padding: 0 16px 14px;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.post-content.quote-style[b-z4eb2302y4] {
    background: #fef3c7;
    margin: 0 16px 14px;
    padding: 16px;
    border-radius: 12px;
    font-style: italic;
    color: #92400e;
}

.quote-author[b-z4eb2302y4] {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-weight: 500;
    color: #b45309;
}

/* Post Image */
.post-image[b-z4eb2302y4] {
    width: 100%;
    overflow: hidden;
}

.post-image img[b-z4eb2302y4] {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 280px;
}

/* Activity Stats */
.activity-stats[b-z4eb2302y4] {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.stat-item[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-label[b-z4eb2302y4] {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-z4eb2302y4] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* Post Actions */
.post-actions[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
}

.action-btn[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.action-btn:hover[b-z4eb2302y4] {
    background: #f3f4f6;
}

.action-btn svg[b-z4eb2302y4] {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-btn.liked[b-z4eb2302y4] {
    color: #ef4444;
}

.action-btn.liked svg[b-z4eb2302y4] {
    fill: #ef4444;
    stroke: #ef4444;
}

/* Responsive */
@media (max-width: 360px) {
    .post-header[b-z4eb2302y4] {
        padding: 12px 14px;
    }

    .avatar[b-z4eb2302y4] {
        width: 40px;
        height: 40px;
    }

    .author-name[b-z4eb2302y4] {
        font-size: 14px;
    }

    .post-content[b-z4eb2302y4] {
        padding: 0 14px 12px;
        font-size: 13px;
    }

    .stat-value[b-z4eb2302y4] {
        font-size: 16px;
    }

    .composer-btn[b-z4eb2302y4] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .post-btn[b-z4eb2302y4] {
        padding: 6px 16px;
    }
}

/* Loading State */
.loading-state[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.loading-state p[b-z4eb2302y4] {
    margin-top: 12px;
    font-size: 14px;
}

.spinner[b-z4eb2302y4] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-z4eb2302y4 0.8s linear infinite;
}

.spinner-tiny[b-z4eb2302y4] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-z4eb2302y4 0.6s linear infinite;
}

@keyframes spin-b-z4eb2302y4 {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-z4eb2302y4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state svg[b-z4eb2302y4] {
    width: 48px;
    height: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.empty-state h3[b-z4eb2302y4] {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.empty-state p[b-z4eb2302y4] {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
}

/* Composer Image Preview */
.composer-image-preview[b-z4eb2302y4] {
    position: relative;
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    max-height: 200px;
}

.composer-image-preview img[b-z4eb2302y4] {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.remove-preview[b-z4eb2302y4] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.remove-preview:hover[b-z4eb2302y4] {
    background: rgba(0, 0, 0, 0.8);
}

/* Upload Prompt */
.upload-prompt[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    margin-top: 8px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    color: #9ca3af;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-prompt:hover[b-z4eb2302y4] {
    border-color: #f97316;
    color: #f97316;
    background: rgba(249, 115, 22, 0.02);
}

.upload-prompt svg[b-z4eb2302y4] {
    width: 24px;
    height: 24px;
}

/* Load More */
.load-more-section[b-z4eb2302y4] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.load-more-btn[b-z4eb2302y4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.load-more-btn:hover:not(:disabled)[b-z4eb2302y4] {
    border-color: #f97316;
    color: #f97316;
}

.load-more-btn:disabled[b-z4eb2302y4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Post button disabled state */
.post-btn:disabled[b-z4eb2302y4] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
/* /Pages/Community/InviteToClub.razor.rz.scp.css */
/* Invite to Club Page Styles */
.invite-page[b-v9mangzkjv] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Page Header */
.page-header[b-v9mangzkjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.back-btn[b-v9mangzkjv] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-v9mangzkjv] {
    background: #f3f4f6;
}

.back-btn svg[b-v9mangzkjv] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-v9mangzkjv] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-v9mangzkjv] {
    width: 40px;
}

/* Users List */
.users-list[b-v9mangzkjv] {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* User Card */
.user-card[b-v9mangzkjv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-card:hover[b-v9mangzkjv] {
    border-color: #d1d5db;
    background: #fafafa;
}

.user-card.selected[b-v9mangzkjv] {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.02);
}

/* User Avatar */
.user-avatar[b-v9mangzkjv] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* User Info */
.user-info[b-v9mangzkjv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-name[b-v9mangzkjv] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.user-handle[b-v9mangzkjv] {
    font-size: 13px;
    color: #6b7280;
}

/* Checkbox */
.checkbox-wrapper[b-v9mangzkjv] {
    flex-shrink: 0;
}

.custom-checkbox[b-v9mangzkjv] {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.custom-checkbox.checked[b-v9mangzkjv] {
    background: #f97316;
    border-color: #f97316;
}

.custom-checkbox svg[b-v9mangzkjv] {
    width: 14px;
    height: 14px;
    color: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Button Section */
.button-section[b-v9mangzkjv] {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.send-btn[b-v9mangzkjv] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.send-btn:hover:not(:disabled)[b-v9mangzkjv] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.send-btn:active:not(:disabled)[b-v9mangzkjv] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.send-btn:disabled[b-v9mangzkjv] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 360px) {
    .users-list[b-v9mangzkjv] {
        padding: 12px 16px;
        gap: 10px;
    }

    .user-card[b-v9mangzkjv] {
        padding: 12px 14px;
        gap: 12px;
    }

    .user-avatar[b-v9mangzkjv] {
        width: 44px;
        height: 44px;
    }

    .user-name[b-v9mangzkjv] {
        font-size: 14px;
    }

    .user-handle[b-v9mangzkjv] {
        font-size: 12px;
    }
}
/* /Pages/Community/MarketplaceView.razor.rz.scp.css */
/* Marketplace View Styles */
.marketplace-container[b-lxxxn40dpg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* Products List */
.products-list[b-lxxxn40dpg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Product Card */
.product-card[b-lxxxn40dpg] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.product-card:hover[b-lxxxn40dpg] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Product Image */
.product-image[b-lxxxn40dpg] {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}

.product-image img[b-lxxxn40dpg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img[b-lxxxn40dpg] {
    transform: scale(1.02);
}

/* Product Info */
.product-info[b-lxxxn40dpg] {
    padding: 16px;
}

.product-name[b-lxxxn40dpg] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.product-description[b-lxxxn40dpg] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 14px 0;
    line-height: 1.4;
}

/* Product Footer */
.product-footer[b-lxxxn40dpg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.price-section[b-lxxxn40dpg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.price-label[b-lxxxn40dpg] {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-value[b-lxxxn40dpg] {
    font-size: 18px;
    font-weight: 700;
    color: #f97316;
}

/* Contact Button */
.contact-btn[b-lxxxn40dpg] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
}

.contact-btn:hover[b-lxxxn40dpg] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}

/* Create Listing FAB */
.create-listing-fab[b-lxxxn40dpg] {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
    transition: all 0.2s ease;
    z-index: 1000;
}

.create-listing-fab:hover[b-lxxxn40dpg] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

.create-listing-fab:active[b-lxxxn40dpg] {
    transform: scale(0.95);
}

.create-listing-fab svg[b-lxxxn40dpg] {
    width: 24px;
    height: 24px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Responsive */
@media (max-width: 360px) {
    .product-info[b-lxxxn40dpg] {
        padding: 14px;
    }

    .product-name[b-lxxxn40dpg] {
        font-size: 15px;
    }

    .product-description[b-lxxxn40dpg] {
        font-size: 12px;
    }

    .price-value[b-lxxxn40dpg] {
        font-size: 16px;
    }

    .contact-btn[b-lxxxn40dpg] {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Loading State */
.loading-state[b-lxxxn40dpg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
}

.loading-state p[b-lxxxn40dpg] {
    margin-top: 12px;
    font-size: 14px;
}

.spinner[b-lxxxn40dpg] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-lxxxn40dpg 0.8s linear infinite;
}

@keyframes spin-b-lxxxn40dpg {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-lxxxn40dpg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6b7280;
    text-align: center;
}

.empty-state svg[b-lxxxn40dpg] {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-lxxxn40dpg] {
    margin: 0;
    font-size: 14px;
}

.empty-state h3[b-lxxxn40dpg] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

/* No Image Placeholder */
.no-image[b-lxxxn40dpg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f3f4f6;
}

.no-image svg[b-lxxxn40dpg] {
    width: 48px;
    height: 48px;
    color: #d1d5db;
}
/* /Pages/Community/PostDetail.razor.rz.scp.css */
/* Post Detail Page Styles */
.post-detail-page[b-h52zqwzc0f] {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #f9fafb;
	padding-bottom: 80px;
}

/* Header */
.detail-header[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	position: sticky;
	top: 0;
	z-index: 10;
}

.back-btn[b-h52zqwzc0f],
.more-btn[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: #374151;
	cursor: pointer;
	transition: background 0.2s;
}

.back-btn:hover[b-h52zqwzc0f],
.more-btn:hover[b-h52zqwzc0f] {
	background: #f3f4f6;
}

.back-btn svg[b-h52zqwzc0f],
.more-btn svg[b-h52zqwzc0f] {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.header-title[b-h52zqwzc0f] {
	font-size: 18px;
	font-weight: 600;
	color: #111827;
	margin: 0;
}

/* Post Card */
.post-card[b-h52zqwzc0f] {
	background: #fff;
	margin: 16px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.post-header[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
}

.avatar[b-h52zqwzc0f] {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.post-meta[b-h52zqwzc0f] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.author-name[b-h52zqwzc0f] {
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}

.post-time[b-h52zqwzc0f] {
	font-size: 13px;
	color: #6b7280;
}

/* Post Content */
.post-content[b-h52zqwzc0f] {
	padding: 0 16px 16px;
	font-size: 15px;
	color: #374151;
	line-height: 1.6;
}

.post-image[b-h52zqwzc0f] {
	width: 100%;
}

.post-image img[b-h52zqwzc0f] {
	width: 100%;
	display: block;
	max-height: 400px;
	object-fit: cover;
}

/* Activity Stats */
.activity-stats[b-h52zqwzc0f] {
	display: flex;
	justify-content: space-around;
	padding: 20px 16px;
	background: #f9fafb;
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
}

.stat-item[b-h52zqwzc0f] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.stat-label[b-h52zqwzc0f] {
	font-size: 12px;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-value[b-h52zqwzc0f] {
	font-size: 20px;
	font-weight: 700;
	color: #111827;
}

/* Post Actions */
.post-actions[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #e5e7eb;
}

.action-btn[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: transparent;
	border: none;
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s;
}

.action-btn:hover[b-h52zqwzc0f] {
	background: #f3f4f6;
}

.action-btn svg[b-h52zqwzc0f] {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.action-btn.liked[b-h52zqwzc0f] {
	color: #ef4444;
}

.action-btn.liked svg[b-h52zqwzc0f] {
	fill: #ef4444;
	stroke: #ef4444;
}

.share-btn[b-h52zqwzc0f] {
	margin-left: auto;
}

/* Comments Section */
.comments-section[b-h52zqwzc0f] {
	background: #fff;
	margin: 0 16px 16px;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.comments-title[b-h52zqwzc0f] {
	font-size: 16px;
	font-weight: 600;
	color: #111827;
	margin: 0 0 16px;
}

.comments-list[b-h52zqwzc0f] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comment-item[b-h52zqwzc0f] {
	display: flex;
	gap: 12px;
}

.comment-avatar[b-h52zqwzc0f] {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.comment-body[b-h52zqwzc0f] {
	flex: 1;
	min-width: 0;
}

.comment-header[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.comment-author[b-h52zqwzc0f] {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
}

.comment-time[b-h52zqwzc0f] {
	font-size: 12px;
	color: #9ca3af;
}

.comment-text[b-h52zqwzc0f] {
	font-size: 14px;
	color: #374151;
	line-height: 1.5;
	margin: 0 0 8px;
	word-wrap: break-word;
}

.comment-actions[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 12px;
}

.comment-action-btn[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: transparent;
	border: none;
	font-size: 12px;
	color: #6b7280;
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.2s;
}

.comment-action-btn:hover[b-h52zqwzc0f] {
	background: #f3f4f6;
	color: #374151;
}

.comment-action-btn svg[b-h52zqwzc0f] {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.comment-action-btn.liked[b-h52zqwzc0f] {
	color: #ef4444;
}

.comment-action-btn.liked svg[b-h52zqwzc0f] {
	fill: #ef4444;
	stroke: #ef4444;
}

.no-comments[b-h52zqwzc0f] {
	text-align: center;
	padding: 24px;
	color: #9ca3af;
	font-size: 14px;
}

/* Comment Input */
.comment-input-container[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: #fff;
	border-top: 1px solid #e5e7eb;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.input-avatar[b-h52zqwzc0f] {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.comment-input-wrapper[b-h52zqwzc0f] {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f3f4f6;
	border-radius: 24px;
	padding: 8px 12px;
}

.comment-input[b-h52zqwzc0f] {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	color: #111827;
	outline: none;
}

.comment-input[b-h52zqwzc0f]::placeholder {
	color: #9ca3af;
}

.send-btn[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #f97316, #ea580c);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s;
}

.send-btn:hover:not(:disabled)[b-h52zqwzc0f] {
	background: linear-gradient(135deg, #ea580c, #dc2626);
	transform: scale(1.05);
}

.send-btn:disabled[b-h52zqwzc0f] {
	background: #d1d5db;
	cursor: not-allowed;
}

.send-btn svg[b-h52zqwzc0f] {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Loading State */
.loading-state[b-h52zqwzc0f] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	color: #6b7280;
}

/* Responsive */
@media (max-width: 360px) {
	.post-card[b-h52zqwzc0f] {
		margin: 12px;
	}

	.post-header[b-h52zqwzc0f] {
		padding: 12px;
	}

	.avatar[b-h52zqwzc0f] {
		width: 40px;
		height: 40px;
	}

	.author-name[b-h52zqwzc0f] {
		font-size: 15px;
	}

	.post-content[b-h52zqwzc0f] {
		padding: 0 12px 12px;
		font-size: 14px;
	}

	.stat-value[b-h52zqwzc0f] {
		font-size: 18px;
	}

	.comments-section[b-h52zqwzc0f] {
		margin: 0 12px 12px;
		padding: 12px;
	}
}
/* /Pages/Components/CoachChatView.razor.rz.scp.css */
/* Chat Container */
.chat-container[b-jj565pd09y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Messages */
.chat-messages[b-jj565pd09y] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message[b-jj565pd09y] {
    display: flex;
    max-width: 85%;
}

.message.user[b-jj565pd09y] {
    align-self: flex-end;
}

.message.coach[b-jj565pd09y] {
    align-self: flex-start;
}

.message-bubble[b-jj565pd09y] {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.message.user .message-bubble[b-jj565pd09y] {
    background: #f3f4f6;
    color: #374151;
    border-bottom-right-radius: 4px;
}

.message.coach .message-bubble[b-jj565pd09y] {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    border-bottom-left-radius: 4px;
}

/* Typing Indicator */
.message-bubble.loading[b-jj565pd09y] {
    padding: 16px 20px;
}

.typing-indicator[b-jj565pd09y] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-indicator span[b-jj565pd09y] {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: typing-bounce-b-jj565pd09y 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1)[b-jj565pd09y] {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2)[b-jj565pd09y] {
    animation-delay: -0.16s;
}

@keyframes typing-bounce-b-jj565pd09y {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Quick Suggestions */
.quick-suggestions[b-jj565pd09y] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quick-suggestions[b-jj565pd09y]::-webkit-scrollbar {
    display: none;
}

.suggestion-chip[b-jj565pd09y] {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.suggestion-chip:hover:not(:disabled)[b-jj565pd09y] {
    border-color: #f97316;
    color: #f97316;
}

.suggestion-chip:disabled[b-jj565pd09y] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chat Input */
.chat-input-container[b-jj565pd09y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.chat-input[b-jj565pd09y] {
    flex: 1;
    padding: 12px 16px;
    background: #f3f4f6;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    color: #111827;
    outline: none;
}

.chat-input[b-jj565pd09y]::placeholder {
    color: #9ca3af;
}

.chat-input:focus[b-jj565pd09y] {
    background: #e5e7eb;
}

.chat-input:disabled[b-jj565pd09y] {
    opacity: 0.6;
    cursor: not-allowed;
}

.send-btn[b-jj565pd09y] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.send-btn svg[b-jj565pd09y] {
    width: 20px;
    height: 20px;
    color: #fff;
}

.send-btn:hover:not(:disabled)[b-jj565pd09y] {
    background: #2563eb;
    transform: scale(1.05);
}

.send-btn:disabled[b-jj565pd09y] {
    background: #d1d5db;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 360px) {
    .chat-messages[b-jj565pd09y] {
        padding: 12px;
    }

    .message-bubble[b-jj565pd09y] {
        padding: 10px 14px;
        font-size: 13px;
    }

    .quick-suggestions[b-jj565pd09y] {
        padding: 10px 12px;
    }

    .suggestion-chip[b-jj565pd09y] {
        padding: 6px 12px;
        font-size: 12px;
    }
}
/* /Pages/Components/LatestInsightView.razor.rz.scp.css */
/* Latest Insight Content */
.latest-insight-content[b-l9w9s9onf8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
}

/* Featured Insight Card */
.featured-insight[b-l9w9s9onf8] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #fef3c7 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid #e0f2fe;
}

.featured-label[b-l9w9s9onf8] {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.featured-title[b-l9w9s9onf8] {
    font-size: 18px;
    font-weight: 700;
    color: #f97316;
    margin: 0 0 8px 0;
}

.featured-desc[b-l9w9s9onf8] {
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
    margin: 0;
}

/* Previous Insights Section */
.previous-insights[b-l9w9s9onf8] {
    flex: 1;
}

.section-title[b-l9w9s9onf8] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px 0;
}

/* Insights List */
.insights-list[b-l9w9s9onf8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insight-card[b-l9w9s9onf8] {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
}

.insight-icon[b-l9w9s9onf8] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-icon svg[b-l9w9s9onf8] {
    width: 20px;
    height: 20px;
}

.insight-icon.blue[b-l9w9s9onf8] {
    background: #dbeafe;
    color: #3b82f6;
}

.insight-icon.orange[b-l9w9s9onf8] {
    background: #fed7aa;
    color: #f97316;
}

.insight-icon.green[b-l9w9s9onf8] {
    background: #d1fae5;
    color: #10b981;
}

.insight-content[b-l9w9s9onf8] {
    flex: 1;
}

.insight-time[b-l9w9s9onf8] {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 2px;
}

.insight-title[b-l9w9s9onf8] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.insight-desc[b-l9w9s9onf8] {
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
    margin: 0;
}

/* Responsive */
@media (max-width: 360px) {
    .latest-insight-content[b-l9w9s9onf8] {
        padding: 12px;
    }

    .featured-insight[b-l9w9s9onf8] {
        padding: 16px;
    }

    .featured-title[b-l9w9s9onf8] {
        font-size: 16px;
    }

    .featured-desc[b-l9w9s9onf8] {
        font-size: 13px;
    }

    .insight-card[b-l9w9s9onf8] {
        padding: 12px;
        gap: 10px;
    }

    .insight-icon[b-l9w9s9onf8] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .insight-title[b-l9w9s9onf8] {
        font-size: 14px;
    }

    .insight-desc[b-l9w9s9onf8] {
        font-size: 12px;
    }
}
/* /Pages/Components/WeeklyPlanView.razor.rz.scp.css */
/* Weekly Plan Content */
.weekly-plan-content[b-zqeqhcug36] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Category Tabs */
.category-tabs[b-zqeqhcug36] {
    display: flex;
    gap: 8px;
    padding: 16px;
}

.category-tab[b-zqeqhcug36] {
    padding: 10px 20px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-tab.active[b-zqeqhcug36] {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

/* Week Calendar */
.week-calendar[b-zqeqhcug36] {
    display: flex;
    justify-content: space-between;
    padding: 0 16px 16px;
    gap: 4px;
}

.calendar-day[b-zqeqhcug36] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-day:hover[b-zqeqhcug36] {
    background: #f3f4f6;
}

.calendar-day.selected[b-zqeqhcug36] {
    background: #f97316;
}

.calendar-day.selected .day-name[b-zqeqhcug36],
.calendar-day.selected .day-number[b-zqeqhcug36] {
    color: #fff;
}

.day-name[b-zqeqhcug36] {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 4px;
}

.day-number[b-zqeqhcug36] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Before Start Section */
.before-start-section[b-zqeqhcug36] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
}

.pencil-icon[b-zqeqhcug36] {
    width: 64px;
    height: 64px;
    background: #f3f4f6;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pencil-icon svg[b-zqeqhcug36] {
    width: 28px;
    height: 28px;
    color: #f97316;
}

.before-start-title[b-zqeqhcug36] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.before-start-desc[b-zqeqhcug36] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 32px 0;
    line-height: 1.6;
    max-width: 280px;
}

.start-planning-btn[b-zqeqhcug36] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.start-planning-btn svg[b-zqeqhcug36] {
    width: 16px;
    height: 16px;
}

.start-planning-btn:hover[b-zqeqhcug36] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

/* Activities List */
.activities-list[b-zqeqhcug36] {
    flex: 1;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Activity Card */
.activity-card[b-zqeqhcug36] {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.activity-card.today[b-zqeqhcug36] {
    border: 1px solid #e5e7eb;
}

.activity-header[b-zqeqhcug36] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.activity-day[b-zqeqhcug36] {
    font-size: 12px;
    color: #6b7280;
}

.activity-duration[b-zqeqhcug36] {
    font-size: 12px;
    color: #9ca3af;
}

.activity-content[b-zqeqhcug36] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.activity-icon[b-zqeqhcug36] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f97316;
}

.activity-icon svg[b-zqeqhcug36] {
    width: 24px;
    height: 24px;
}

.activity-info[b-zqeqhcug36] {
    flex: 1;
}

.activity-title[b-zqeqhcug36] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.activity-desc[b-zqeqhcug36] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.edit-planning-btn[b-zqeqhcug36] {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border: 1.5px solid #f97316;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #f97316;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-planning-btn:hover[b-zqeqhcug36] {
    background: #fff7ed;
}

/* Play Button */
.play-btn[b-zqeqhcug36] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.play-btn svg[b-zqeqhcug36] {
    width: 16px;
    height: 16px;
}

.play-btn:hover[b-zqeqhcug36] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

/* Icon Colors for Different Tabs */
.activity-icon.rest[b-zqeqhcug36] {
    color: #3b82f6;
}

.activity-icon.breathe[b-zqeqhcug36] {
    color: #f97316;
}

/* Daily Target Section */
.daily-target[b-zqeqhcug36] {
    padding: 0 16px 16px;
}

.target-title[b-zqeqhcug36] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.target-cards[b-zqeqhcug36] {
    display: flex;
    gap: 12px;
}

.target-card[b-zqeqhcug36] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
}

.target-icon[b-zqeqhcug36] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.target-icon svg[b-zqeqhcug36] {
    width: 22px;
    height: 22px;
}

.target-icon.calories[b-zqeqhcug36] {
    background: #fef3c7;
}

.target-icon.calories svg[b-zqeqhcug36] {
    color: #f59e0b;
}

.target-icon.protein[b-zqeqhcug36] {
    background: #fee2e2;
}

.target-icon.protein svg[b-zqeqhcug36] {
    color: #ef4444;
}

.target-icon.water[b-zqeqhcug36] {
    background: #dbeafe;
}

.target-icon.water svg[b-zqeqhcug36] {
    color: #3b82f6;
}

.target-value[b-zqeqhcug36] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2px;
}

.target-label[b-zqeqhcug36] {
    font-size: 12px;
    color: #6b7280;
}

/* Today's Plan Section */
.todays-plan[b-zqeqhcug36] {
    flex: 1;
    padding: 0 16px 16px;
}

.plan-title[b-zqeqhcug36] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.meal-list[b-zqeqhcug36] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meal-card[b-zqeqhcug36] {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 14px 16px;
}

.meal-time[b-zqeqhcug36] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.meal-type[b-zqeqhcug36] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.meal-hour[b-zqeqhcug36] {
    font-size: 12px;
    color: #9ca3af;
}

.meal-name[b-zqeqhcug36] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.meal-macros[b-zqeqhcug36] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.macro[b-zqeqhcug36] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.macro.calories[b-zqeqhcug36] {
    background: #fef3c7;
    color: #b45309;
}

.macro.protein[b-zqeqhcug36] {
    background: #fee2e2;
    color: #b91c1c;
}

.macro.carbs[b-zqeqhcug36] {
    background: #d1fae5;
    color: #047857;
}

/* Responsive */
@media (max-width: 360px) {
    .category-tabs[b-zqeqhcug36] {
        padding: 12px;
        gap: 6px;
    }

    .category-tab[b-zqeqhcug36] {
        padding: 8px 14px;
        font-size: 13px;
    }

    .day-name[b-zqeqhcug36] {
        font-size: 10px;
    }

    .day-number[b-zqeqhcug36] {
        font-size: 14px;
    }

    .before-start-section[b-zqeqhcug36] {
        padding: 30px 20px;
    }

    .activities-list[b-zqeqhcug36] {
        padding: 0 12px;
    }

    .target-cards[b-zqeqhcug36] {
        gap: 8px;
    }

    .target-card[b-zqeqhcug36] {
        padding: 12px 8px;
    }

    .target-value[b-zqeqhcug36] {
        font-size: 16px;
    }

    .meal-macros[b-zqeqhcug36] {
        gap: 6px;
    }

    .macro[b-zqeqhcug36] {
        padding: 3px 8px;
        font-size: 10px;
    }
}
/* /Pages/Events.razor.rz.scp.css */
/* Events Page Styles */
.events-page[b-egnz6n02z8] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #f9fafb;
    padding-bottom: 80px;
}

/* Header */
.page-header[b-egnz6n02z8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
}

.back-btn[b-egnz6n02z8] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-egnz6n02z8] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-egnz6n02z8] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-egnz6n02z8] {
    width: 40px;
}

/* Tabs */
.tabs[b-egnz6n02z8] {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.tab[b-egnz6n02z8] {
    flex: 1;
    padding: 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.tab.active[b-egnz6n02z8] {
    border-bottom-color: #f97316;
    color: #f97316;
}

/* Content */
.content[b-egnz6n02z8] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Event Card */
.event-card[b-egnz6n02z8] {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.event-date[b-egnz6n02z8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 8px;
    background: #fff7ed;
    border-radius: 8px;
}

.date-month[b-egnz6n02z8] {
    font-size: 10px;
    font-weight: 600;
    color: #ea580c;
    text-transform: uppercase;
}

.date-day[b-egnz6n02z8] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.date-weekday[b-egnz6n02z8] {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
}

.event-info[b-egnz6n02z8] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-title[b-egnz6n02z8] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.event-desc[b-egnz6n02z8] {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.event-meta[b-egnz6n02z8] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.meta-item[b-egnz6n02z8] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.meta-item svg[b-egnz6n02z8] {
    width: 14px;
    height: 14px;
}

.view-btn[b-egnz6n02z8] {
    align-self: flex-end;
    padding: 8px 20px;
    background: #fff;
    border: 1.5px solid #f97316;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #f97316;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn:hover[b-egnz6n02z8] {
    background: #fff7ed;
}

/* Floating Action Button */
.fab[b-egnz6n02z8] {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
    transition: all 0.2s;
}

.fab svg[b-egnz6n02z8] {
    width: 24px;
    height: 24px;
    color: #fff;
}

.fab:hover[b-egnz6n02z8] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}
/* /Pages/History.razor.rz.scp.css */
/* History Page Styles */
.history-page[b-8qffdhzl54] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-8qffdhzl54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-8qffdhzl54] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-8qffdhzl54] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-8qffdhzl54] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.notification-btn[b-8qffdhzl54] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notification-btn svg[b-8qffdhzl54] {
    width: 24px;
    height: 24px;
    color: #374151;
}

/* Content */
.content[b-8qffdhzl54] {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
}

.section-title[b-8qffdhzl54] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
}

/* Controls Row */
.controls-row[b-8qffdhzl54] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* Dropdown */
.dropdown-container[b-8qffdhzl54] {
    position: relative;
}

.dropdown-btn[b-8qffdhzl54] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

.dropdown-btn svg[b-8qffdhzl54] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.dropdown-btn svg.rotate[b-8qffdhzl54] {
    transform: rotate(180deg);
}

.dropdown-menu[b-8qffdhzl54] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #1f2937;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.dropdown-item[b-8qffdhzl54] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.dropdown-item:hover[b-8qffdhzl54] {
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-item.active[b-8qffdhzl54] {
    color: #60a5fa;
}

.dropdown-item.active[b-8qffdhzl54]::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
}

/* Period Toggle */
.period-toggle[b-8qffdhzl54] {
    display: flex;
    background: #f3f4f6;
    border-radius: 20px;
    padding: 4px;
}

.toggle-btn[b-8qffdhzl54] {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn.active[b-8qffdhzl54] {
    background: #f97316;
    color: #fff;
}

/* Total Display */
.total-row[b-8qffdhzl54] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.total-display[b-8qffdhzl54] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 50px;
    width: fit-content;
}

.info-btn[b-8qffdhzl54] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fce7f3;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.info-btn svg[b-8qffdhzl54] {
    width: 20px;
    height: 20px;
    color: #9ca3af;
}

.info-btn:hover[b-8qffdhzl54] {
    background: #fbcfe8;
}

.total-display.score[b-8qffdhzl54] {
    background: #fef3c7;
    color: #b45309;
}

.total-display.calories[b-8qffdhzl54] {
    background: #ffedd5;
    color: #ea580c;
}

.total-display.moving[b-8qffdhzl54] {
    background: #dbeafe;
    color: #2563eb;
}

.total-display.sleep[b-8qffdhzl54] {
    background: #dbeafe;
    color: #2563eb;
}

.total-display.hr[b-8qffdhzl54] {
    background: #fce7f3;
    color: #db2777;
}

.total-icon svg[b-8qffdhzl54] {
    width: 16px;
    height: 16px;
}

.total-value[b-8qffdhzl54] {
    font-size: 16px;
    font-weight: 700;
}

.total-label[b-8qffdhzl54] {
    font-size: 14px;
    font-weight: 500;
}

/* Month/Year Navigation */
.month-nav[b-8qffdhzl54],
.year-nav[b-8qffdhzl54] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.nav-arrow[b-8qffdhzl54] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280;
}

.nav-arrow svg[b-8qffdhzl54] {
    width: 20px;
    height: 20px;
}

.month-label[b-8qffdhzl54],
.year-label[b-8qffdhzl54] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Calendar Grid */
.calendar-grid[b-8qffdhzl54] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.day-header[b-8qffdhzl54] {
    font-size: 10px;
    color: #9ca3af;
    text-align: center;
    padding-bottom: 8px;
}

.calendar-cell[b-8qffdhzl54] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
}

.calendar-cell.empty[b-8qffdhzl54] {
    background: transparent;
}

/* Score colors (orange) */
.calendar-cell.score[b-8qffdhzl54] {
    background: #fed7aa;
    color: #9a3412;
}

.calendar-cell.score.highlight[b-8qffdhzl54] {
    background: #f97316;
    color: #fff;
}

/* Calories colors (orange) */
.calendar-cell.calories[b-8qffdhzl54] {
    background: #fed7aa;
    color: #9a3412;
}

.calendar-cell.calories.highlight[b-8qffdhzl54] {
    background: #ea580c;
    color: #fff;
}

/* Moving colors (blue) */
.calendar-cell.moving[b-8qffdhzl54] {
    background: #bfdbfe;
    color: #1e40af;
}

.calendar-cell.moving.highlight[b-8qffdhzl54] {
    background: #3b82f6;
    color: #fff;
}

/* Sleep colors (blue) */
.calendar-cell.sleep[b-8qffdhzl54] {
    background: #bfdbfe;
    color: #1e40af;
}

.calendar-cell.sleep.highlight[b-8qffdhzl54] {
    background: #3b82f6;
    color: #fff;
}

/* HR colors (red/pink) */
.calendar-cell.hr[b-8qffdhzl54] {
    background: #fecdd3;
    color: #be123c;
}

.calendar-cell.hr.highlight[b-8qffdhzl54] {
    background: #e11d48;
    color: #fff;
}

.cell-value[b-8qffdhzl54] {
    font-size: 10px;
}

/* Yearly Grid */
.yearly-grid[b-8qffdhzl54] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
}

.month-block[b-8qffdhzl54] {
    text-align: center;
}

.month-name[b-8qffdhzl54] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
}

.month-dots[b-8qffdhzl54] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.dot[b-8qffdhzl54] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
}

.dot.filled.score[b-8qffdhzl54] {
    background: #f97316;
}

.dot.filled.calories[b-8qffdhzl54] {
    background: #ea580c;
}

.dot.filled.moving[b-8qffdhzl54] {
    background: #3b82f6;
}

.dot.filled.sleep[b-8qffdhzl54] {
    background: #3b82f6;
}

.dot.filled.hr[b-8qffdhzl54] {
    background: #e11d48;
}

/* Responsive */
@media (max-width: 360px) {
    .controls-row[b-8qffdhzl54] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .calendar-cell[b-8qffdhzl54] {
        font-size: 9px;
    }

    .cell-value[b-8qffdhzl54] {
        font-size: 8px;
    }

    .day-header[b-8qffdhzl54] {
        font-size: 9px;
    }
}
/* /Pages/HistoryInfo.razor.rz.scp.css */
/* History Info Page Styles */
.info-page[b-pwb1cquo7m] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-pwb1cquo7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-pwb1cquo7m] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-pwb1cquo7m] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-pwb1cquo7m] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.notification-btn[b-pwb1cquo7m] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notification-btn svg[b-pwb1cquo7m] {
    width: 24px;
    height: 24px;
    color: #374151;
}

/* Content */
.content[b-pwb1cquo7m] {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
}

.section-title[b-pwb1cquo7m] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
}

.intro-text[b-pwb1cquo7m] {
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 24px 0;
}

/* Info Cards */
.info-cards[b-pwb1cquo7m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-card[b-pwb1cquo7m] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
}

.card-icon[b-pwb1cquo7m] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon svg[b-pwb1cquo7m] {
    width: 22px;
    height: 22px;
}

.card-icon.orange[b-pwb1cquo7m] {
    background: #ffedd5;
    color: #ea580c;
}

.card-icon.blue[b-pwb1cquo7m] {
    background: #dbeafe;
    color: #2563eb;
}

.card-icon.red[b-pwb1cquo7m] {
    background: #fce7f3;
    color: #db2777;
}

.card-icon.teal[b-pwb1cquo7m] {
    background: #ccfbf1;
    color: #0d9488;
}

.card-icon.green[b-pwb1cquo7m] {
    background: #d1fae5;
    color: #059669;
}

.card-content[b-pwb1cquo7m] {
    flex: 1;
}

.card-title[b-pwb1cquo7m] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.card-desc[b-pwb1cquo7m] {
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
    margin: 0;
}

/* Bottom Action */
.bottom-action[b-pwb1cquo7m] {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.got-it-btn[b-pwb1cquo7m] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.got-it-btn:hover[b-pwb1cquo7m] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    transform: translateY(-1px);
}
/* /Pages/Home.razor.rz.scp.css */
/* Home page isolated styles – align with global theme variables */
.home[b-hay72lenqz] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	padding-bottom: 80px;
	background-color: #F2F4F7;
	margin: 0 auto;
	overflow-x: hidden;
}

/* Hero */
.hero[b-hay72lenqz] {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hero-left[b-hay72lenqz] {
	display: flex;
	gap: .75rem;
	align-items: center;
}

.hero .avatar[b-hay72lenqz] {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px rgba(0, 0, 0, .06);
}

.hero .avatar.clickable[b-hay72lenqz] {
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.hero .avatar.clickable:hover[b-hay72lenqz] {
	transform: scale(1.05);
	box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px rgba(249, 115, 22, 0.3);
}

.hero .date[b-hay72lenqz] {
	font-size: .75rem;
	font-weight: 500;
	color: #6c7b85;
	letter-spacing: .5px;
}

.hero .greeting[b-hay72lenqz] {
	font-size: 1rem;
	margin: 0;
	font-weight: 600;
	color: #1d2730;
}

.bell[b-hay72lenqz] {
	background: transparent;
	border: none;
	color: #6c7b85;
	font-size: 1.2rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.bell:hover[b-hay72lenqz] {
	background: rgba(0, 0, 0, .05);
}

/* Card base */
.card[b-hay72lenqz] {
	background: #fff;
	border-radius: 12px;
	padding: 0.9rem 1rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
	display: flex;
	flex-direction: column;
	position: relative;
}

.card.dashboard[b-hay72lenqz] {
	border: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.card.dashboard:hover[b-hay72lenqz] {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

.card.link[b-hay72lenqz] {
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	border: solid 1px #EAB386;
	transition: ease 0.3s;
}

.card.link:hover[b-hay72lenqz] {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.icon-circle[b-hay72lenqz] {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	background-color: rgba(253, 116, 0, 0.1);
	color: #FF7A00;
	flex-shrink: 0;
	margin-right: auto;
}

.manual .icon-circle[b-hay72lenqz] {
	background-color: rgba(253, 116, 0, 0.1);
}

.integrations .icon-circle[b-hay72lenqz] {
	background-color: rgba(253, 116, 0, 0.1);
}

.link-content .title[b-hay72lenqz] {
	font-size: .9rem;
	font-weight: 600;
	color: #1d2730;
}

.link-content .subtitle[b-hay72lenqz] {
	font-size: .7rem;
	color: #556470;
}

.chev[b-hay72lenqz] {
	margin-left: auto;
	background: transparent;
	border: none;
	color: #6c7b85;
	font-size: .95rem;
	display: grid;
	place-items: center;
}

.chev i[b-hay72lenqz] {
	font-size: .85rem;
}

/* Points card */
.dashboard[b-hay72lenqz] {
	padding-top: .8rem;
}

.dashboard .week[b-hay72lenqz] {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	font-size: .55rem;
	font-weight: 500;
	color: #5d6b76;
}

.dashboard .week .day[b-hay72lenqz] {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 2px;
}

.dashboard .week .day .date-label[b-hay72lenqz] {
	font-size: .6rem;
	font-weight: 500;
	color: #6c7b85;
}

.dashboard .week .day.highlight .date-label[b-hay72lenqz] {
	color: #FF7A00;
	font-weight: 600;
}

.dashboard .week .day .point-circle[b-hay72lenqz] {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #e0e0e0;
	padding: 3px;
}

.dashboard .week .day .point-circle.highlight[b-hay72lenqz] {
	background-image: linear-gradient(to bottom, #FD7400, #ffc688);
}

.dashboard .week .day .point-circle .val[b-hay72lenqz] {
	font-size: 10px;
	font-weight: 900;
	color: #6c7b85;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.dashboard .week .day .point-circle.highlight .val[b-hay72lenqz] {
	color: #FF7A00;
}

.delta-row[b-hay72lenqz] {
	background: #FFF5EC;
	padding: .6rem .8rem;
	border-radius: 8px;
	margin-top: .25rem;
}

.dashboard .delta[b-hay72lenqz] {
	font-size: .7rem;
	color: #FF7A00;
	background: transparent;
	padding: 0;
	display: block;
}

.dashboard .delta strong[b-hay72lenqz] {
	font-weight: 700;
}

.delta-subtitle[b-hay72lenqz] {
	font-size: .6rem;
	color: #6c7b85;
	margin-top: 2px;
}

.score-section[b-hay72lenqz] {
	text-align: center;
}

.score-label[b-hay72lenqz] {
	font-size: .85rem;
	font-weight: 600;
	color: #1d2730;
	margin-bottom: .5rem;
}

.score-circle[b-hay72lenqz] {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin: 0 auto;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to bottom, #FD7400, #ffc688);
}

.circle-inner[b-hay72lenqz] {
	text-align: center;
	background-color: white;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.circle-inner .value[b-hay72lenqz] {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	color: #1d2730;
}

.circle-inner .unit[b-hay72lenqz] {
	font-size: .7rem;
	letter-spacing: .5px;
	font-weight: 500;
	color: #6c7b85;
}

img.connection-line[b-hay72lenqz] {
	width: 77%;
	margin: 0 auto;
}

.metrics-row[b-hay72lenqz] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6rem;
}

.metric[b-hay72lenqz] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: .55rem;
}

.metric .val[b-hay72lenqz] {
	font-size: .65rem;
	font-weight: 600;
	color: #1d2730;
}

.metric .label[b-hay72lenqz] {
	font-size: .5rem;
	color: #6c7b85;
	text-align: center;
}

.icon-sm[b-hay72lenqz] {
	width: 45px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: .9rem;
	margin-bottom: 5px;
}

.icon-sm.kcal[b-hay72lenqz] {
	background: #FFF0E1;
	color: #FF7A00;
}

.icon-sm.move[b-hay72lenqz] {
	background: #E8F5FF;
	color: var(--bs-primary);
}

.icon-sm.sleep[b-hay72lenqz] {
	background: #EEF4FF;
	color: var(--bs-primary);
}

.icon-sm.hr[b-hay72lenqz] {
	background: #FFE6EC;
	color: var(--bs-danger);
}

/* Coach card */
.coach[b-hay72lenqz] {
	border-top: 4px solid #FF7A00;
	padding-top: .9rem;
	gap: .75rem;
}

.coach .head[b-hay72lenqz] {
	display: flex;
	gap: .65rem;
	align-items: center;
}

.icon-square[b-hay72lenqz] {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #F1F7FF;
	display: grid;
	place-items: center;
	color: var(--bs-primary);
	font-size: 1.1rem;
}

.coach .title[b-hay72lenqz] {
	font-size: .75rem;
	font-weight: 600;
	color: #6c7b85;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.coach .suggestion[b-hay72lenqz] {
	font-size: .9rem;
	font-weight: 600;
	color: #1d2730;
}

.coach .desc[b-hay72lenqz] {
	font-size: .65rem;
	color: #556470;
	line-height: 1.2;
}

.coach .primary[b-hay72lenqz] {
	background: #FF7A00;
	color: #fff;
	border: none;
	padding: .75rem 1.1rem;
	font-size: .8rem;
	font-weight: 600;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.coach .primary:hover[b-hay72lenqz] {
	filter: brightness(1.05);
}

/* Quick actions */
.quick[b-hay72lenqz] {
	flex-direction: row;
	gap: .75rem;
}

.quick-item[b-hay72lenqz] {
	flex: 1;
	border-radius: 10px;
	padding: .75rem .8rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	cursor: pointer;
}

.quick-item.challenge[b-hay72lenqz] {
	background-color: rgba(72, 202, 237, 0.1);
}

.quick-item.events[b-hay72lenqz] {
	background-color: rgba(255, 243, 244, 1);
}

.quick-item.challenge .title[b-hay72lenqz] {
	color: #48CAED;
}

.quick-item.events .title[b-hay72lenqz] {
	color: #C60524;
}

.qi-icon[b-hay72lenqz] {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #E8F5FF;
	display: grid;
	place-items: center;
	color: var(--bs-primary);
	font-size: .85rem;
}

.qi-icon.orange[b-hay72lenqz] {
	background: #FFF0E1;
	color: #FF7A00;
}

.qi-icon.purple[b-hay72lenqz] {
	background: #EDE9FE;
	color: #8B5CF6;
}

.quick-item.friends .qi-icon[b-hay72lenqz] {
	background: #E9EEFF;
}

.qi-text .title[b-hay72lenqz] {
	font-size: .75rem;
	font-weight: 600;
	color: #1d2730;
}

.qi-text .subtitle[b-hay72lenqz] {
	font-size: .55rem;
	color: #6c7b85;
}

/* Feed */
.card.feed[b-hay72lenqz] {
	gap: 1rem
	;
}

.feed .head[b-hay72lenqz] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.feed .title[b-hay72lenqz] {
	font-size: .85rem;
	font-weight: 600;
	color: #1d2730;
}

.feed .see-all[b-hay72lenqz] {
	font-size: .6rem;
	text-decoration: none;
	color: #667085;
	font-weight: 400;
}

.post[b-hay72lenqz] {
	display: flex;
	flex-direction: column;
	border: 1px solid #edf0f3;
	border-radius: 10px;
	background: #fff;
	gap: .6rem;
	transition: transform 0.2s, box-shadow 0.2s;
}

.post.clickable[b-hay72lenqz] {
	cursor: pointer;
}

.post.clickable:hover[b-hay72lenqz] {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.post.clickable:active[b-hay72lenqz] {
	transform: translateY(0);
}

.post .user[b-hay72lenqz] {
	display: flex;
	gap: .6rem;
	align-items: center;
}

.post .user img[b-hay72lenqz] {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.post .name[b-hay72lenqz] {
	font-size: .75rem;
	font-weight: 600;
	color: #1d2730;
}

.post .meta[b-hay72lenqz] {
	font-size: .55rem;
	color: #6c7b85;
}

.post .card-footer[b-hay72lenqz] {
	border: 1px solid #edf0f3;
	border-radius: 0px 0px 12px 12px;
}

.metrics[b-hay72lenqz] {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 1.2rem;
	padding: .4rem .2rem;
	width: 85%;
	margin-left: auto;
	background-color: #F9FAFB;
	border-radius: 12px;
	padding: 12px;
}

.metrics .m[b-hay72lenqz] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}

.metrics label[b-hay72lenqz] {
	font-size: .5rem;
	color: #6c7b85;
}

.metrics span[b-hay72lenqz] {
	font-size: .65rem;
	font-weight: 600;
	color: #1d2730;
}

/* Status post styles */
.status-text[b-hay72lenqz] {
	font-size: .8rem;
	color: #374151;
	line-height: 1.5;
	padding: .5rem 0;
	word-wrap: break-word;
}

.status-image[b-hay72lenqz] {
	width: 100%;
	margin-top: .5rem;
	border-radius: 8px;
	overflow: hidden;
}

.status-image img[b-hay72lenqz] {
	width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: cover;
	display: block;
}

.comment-preview[b-hay72lenqz] {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	padding: .5rem 0;
}

.comment-preview img[b-hay72lenqz] {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.comment-text[b-hay72lenqz] {
	font-size: .65rem;
	color: #374151;
	line-height: 1.4;
}

.comment-text strong[b-hay72lenqz] {
	font-weight: 600;
	color: #1d2730;
}

.actions[b-hay72lenqz] {
	display: flex;
	gap: .75rem;
}

.act[b-hay72lenqz] {
	background: transparent;
	border: none;
	font-size: .6rem;
	color: #6c7b85;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .4rem;
	border-radius: 6px;
}

.act:hover[b-hay72lenqz] {
	background: #f2f5f7;
	color: #1d2730;
}

/* Accessibility focus */
.card:focus[b-hay72lenqz],
.act:focus[b-hay72lenqz],
.quick-item:focus[b-hay72lenqz],
.bell:focus[b-hay72lenqz],
.chev:focus[b-hay72lenqz],
.primary:focus[b-hay72lenqz] {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

@media (min-width: 500px) {
	.home[b-hay72lenqz] {
		padding: 1.25rem 1.25rem 5rem;
	}

	.score-circle[b-hay72lenqz] {
		width: 220px;
		height: 220px;
	}

	.circle-inner .value[b-hay72lenqz] {
		font-size: 2.4rem;
	}
}
/* /Pages/Notifications/NotificationCongrats.razor.rz.scp.css */
/* Notification Congrats Page Styles */
.congrats-page[b-hgbezd4wwz] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Blobs */
.decorative-blobs[b-hgbezd4wwz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    pointer-events: none;
    overflow: hidden;
}

.blob[b-hgbezd4wwz] {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
}

.blob-peach[b-hgbezd4wwz] {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #fcd5c0 0%, #fbb99a 100%);
    top: -40px;
    right: 20%;
    transform: rotate(-15deg);
    border-radius: 60% 40% 50% 50%;
}

.blob-pink[b-hgbezd4wwz] {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #fce4e8 0%, #f8d0d8 100%);
    top: -20px;
    right: -20px;
    border-radius: 50% 60% 40% 50%;
}

.blob-blue[b-hgbezd4wwz] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dbeafe 0%, #c7d9f7 100%);
    top: 60px;
    right: 10%;
    border-radius: 50%;
}

/* Header */
.page-header[b-hgbezd4wwz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
}

.back-btn[b-hgbezd4wwz] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-hgbezd4wwz] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.header-spacer[b-hgbezd4wwz] {
    width: 40px;
}

/* Content Section */
.content-section[b-hgbezd4wwz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Icon Wrapper */
.icon-wrapper[b-hgbezd4wwz] {
    margin-bottom: 24px;
}

.icon-background[b-hgbezd4wwz] {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    background: linear-gradient(145deg, #fcd5c0 0%, #a8e4f0 50%, #7dd3e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 8px 32px rgba(249, 115, 22, 0.15),
        0 4px 16px rgba(125, 211, 232, 0.15);
}

.icon-background[b-hgbezd4wwz]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

.trophy-icon[b-hgbezd4wwz] {
    width: 48px;
    height: 48px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Title */
.title[b-hgbezd4wwz] {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* Challenge Name */
.challenge-name[b-hgbezd4wwz] {
    font-size: 18px;
    font-weight: 600;
    color: #f97316;
    margin: 0 0 12px 0;
}

/* Description */
.description[b-hgbezd4wwz] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* Reward Card */
.reward-card[b-hgbezd4wwz] {
    width: 100%;
    background: #f9fafb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.reward-title[b-hgbezd4wwz] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.reward-value[b-hgbezd4wwz] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

/* Badge Item */
.badge-item[b-hgbezd4wwz] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.badge-icon[b-hgbezd4wwz] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-icon svg[b-hgbezd4wwz] {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.badge-info[b-hgbezd4wwz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.badge-name[b-hgbezd4wwz] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.badge-tier[b-hgbezd4wwz] {
    font-size: 12px;
    color: #6b7280;
}

/* Button Section */
.button-section[b-hgbezd4wwz] {
    padding: 16px 20px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.share-btn[b-hgbezd4wwz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.share-btn svg[b-hgbezd4wwz] {
    width: 20px;
    height: 20px;
}

.share-btn:hover[b-hgbezd4wwz] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.view-reward-btn[b-hgbezd4wwz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    color: #f97316;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-reward-btn svg[b-hgbezd4wwz] {
    width: 20px;
    height: 20px;
}

.view-reward-btn:hover[b-hgbezd4wwz] {
    color: #ea580c;
}

/* Responsive */
@media (max-width: 360px) {
    .congrats-page[b-hgbezd4wwz] {
        padding: 0;
    }

    .icon-background[b-hgbezd4wwz] {
        width: 88px;
        height: 88px;
        border-radius: 20px;
    }

    .trophy-icon[b-hgbezd4wwz] {
        width: 42px;
        height: 42px;
    }

    .title[b-hgbezd4wwz] {
        font-size: 24px;
    }

    .challenge-name[b-hgbezd4wwz] {
        font-size: 16px;
    }
}
/* /Pages/Notifications/Notifications.razor.rz.scp.css */
/* Notifications Page Styles */
.notifications-page[b-xmf7vlpy0h] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #f9fafb;
}

/* Header */
.page-header[b-xmf7vlpy0h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-btn[b-xmf7vlpy0h] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-xmf7vlpy0h] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-xmf7vlpy0h] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-xmf7vlpy0h] {
    width: 40px;
}

/* Notifications List */
.notifications-list[b-xmf7vlpy0h] {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #e5e7eb;
}

/* Notification Item */
.notif-item[b-xmf7vlpy0h] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.notif-item:first-child[b-xmf7vlpy0h] {
    border-radius: 12px 12px 0 0;
}

.notif-item:last-child[b-xmf7vlpy0h] {
    border-radius: 0 0 12px 12px;
}

.notif-item:only-child[b-xmf7vlpy0h] {
    border-radius: 12px;
}

.notif-item:hover[b-xmf7vlpy0h] {
    background: #f9fafb;
}

/* Notification Icon */
.notif-icon[b-xmf7vlpy0h] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-icon svg[b-xmf7vlpy0h] {
    width: 20px;
    height: 20px;
}

.notif-icon.icon-orange[b-xmf7vlpy0h] {
    background: #fff7ed;
    color: #f97316;
}

.notif-icon.icon-gray[b-xmf7vlpy0h] {
    background: #f3f4f6;
    color: #6b7280;
}

/* Notification Content */
.notif-content[b-xmf7vlpy0h] {
    flex: 1;
    min-width: 0;
}

.notif-title[b-xmf7vlpy0h] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.notif-subtitle[b-xmf7vlpy0h] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Notification Time */
.notif-time[b-xmf7vlpy0h] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 8px;
}

/* Responsive */
@media (max-width: 360px) {
    .notifications-list[b-xmf7vlpy0h] {
        padding: 12px;
    }

    .notif-item[b-xmf7vlpy0h] {
        padding: 14px;
    }

    .notif-title[b-xmf7vlpy0h] {
        font-size: 13px;
    }

    .notif-subtitle[b-xmf7vlpy0h] {
        font-size: 12px;
    }
}
/* /Pages/Onboarding.razor.rz.scp.css */
.onboard[b-zm2bj9r25x] {
    
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    text-align: center;
}

.onboard-header[b-zm2bj9r25x] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
    position: relative;
}

.lang select[b-zm2bj9r25x] {
    border: 1px solid #d0d7dd;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: .9rem;
    background: #fff;
}

.slide img.art[b-zm2bj9r25x] {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
}

.slide h2[b-zm2bj9r25x] {
    font-size: 1.45rem;
    font-weight: 600;
    margin-bottom: .75rem;
    color: #0d1117;
}

.slide p[b-zm2bj9r25x] {
    font-size: .95rem;
    line-height: 1.4rem;
    color: #4b5563;
    margin: 0 auto 1.25rem;
    max-width: 360px;
}

.slide button[b-zm2bj9r25x] {
    display: block;
    width: 100%;
    padding: .85rem 2.25rem;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    margin-top: .5rem;
    transition: background .2s ease;
    cursor: pointer;
    border-radius: .6rem;
}

button.primary[b-zm2bj9r25x] {
    background: var(--bs-warning);
    color: #fff;
}

button.primary:hover[b-zm2bj9r25x],
button.primary:focus[b-zm2bj9r25x] {
    background: #e16500;
}

button.skip[b-zm2bj9r25x] {
    background: none;
    border: none;
    color: #374151;
}

.onb-progress[b-zm2bj9r25x] {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 1.4rem 0;
}

.onb-bar[b-zm2bj9r25x] {
    height: 6px;
    width: 48px;
    border-radius: 999px;
    background: #e9edf3;
    opacity: .65;
    position: relative;
    overflow: hidden;
    transition: opacity .35s ease, box-shadow .35s ease;
}

.onb-bar.active[b-zm2bj9r25x] {
    opacity: 1;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.12);
    animation: onbPulse-b-zm2bj9r25x 1.2s ease-out 1;
}

/* Animated fill using pseudo-element */
.onb-bar[b-zm2bj9r25x]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-warning);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(.65,.05,.36,1);
}

.onb-bar.active[b-zm2bj9r25x]::before {
    transform: scaleX(1);
}

/* Shine sweep on activation */
.onb-bar.active[b-zm2bj9r25x]::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -30%;
    width: 30%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
    animation: onbShine-b-zm2bj9r25x .9s ease-out .15s forwards;
    pointer-events: none;
}

@keyframes onbPulse-b-zm2bj9r25x {
    0% { box-shadow: 0 0 0 0 rgba(253,116,0,.4); }
    60% { box-shadow: 0 0 0 6px rgba(253,116,0,0); }
    100% { box-shadow: 0 2px 4px -1px rgba(0,0,0,.12); }
}

@keyframes onbShine-b-zm2bj9r25x {
    0% { transform: translateX(0); opacity: .9; }
    70% { opacity: .4; }
    100% { transform: translateX(160%); opacity: 0; }
}

/* Slide fade for step content */
.slide[b-zm2bj9r25x] {
    animation: slideFade-b-zm2bj9r25x .5s ease both;
}

@keyframes slideFade-b-zm2bj9r25x {
    0% { opacity: 0; transform: translateY(12px); }
    60% { opacity: 1; }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .onb-bar[b-zm2bj9r25x]::before { transition: none; transform: scaleX(1); }
    .onb-bar.active[b-zm2bj9r25x] { animation: none; }
    .onb-bar.active[b-zm2bj9r25x]::after { animation: none; }
    .slide[b-zm2bj9r25x] { animation: none; }
}

/* Language dropdown trigger */
.lang-select[b-zm2bj9r25x] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    padding: .4rem .65rem;
    border-radius: .6rem;
    cursor: pointer;
    font-size: .85rem;
    user-select: none;
}

.lang-select .flag[b-zm2bj9r25x] {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.lang-menu[b-zm2bj9r25x] {
    position: absolute;
    top: 2.8rem;
    right: 0;
    background: #fff;
    border: 1px solid #d0d7dd;
    border-radius: .6rem;
    padding: .35rem 0;
    list-style: none;
    margin: 0;
    width: 160px;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .15);
    z-index: 10;
}

.lang-menu li[b-zm2bj9r25x] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    cursor: pointer;
    font-size: .85rem;
}

.lang-menu li:hover[b-zm2bj9r25x] {
    background: #f3f4f6;
}

.lang-menu li[aria-selected="true"][b-zm2bj9r25x] {
    background: #fffbe6;
}

.lang-menu .flag[b-zm2bj9r25x] {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

@media (min-width: 540px) {
    .onboard[b-zm2bj9r25x] {
        padding-top: 2rem;
    }

    .slide h2[b-zm2bj9r25x] {
        font-size: 1.6rem;
    }
}
/* /Pages/Onboarding/Complete.razor.rz.scp.css */
/* Complete Page Styles */
.complete-page[b-9svii5lqk0] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 16px 20px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Content Section */
.content-section[b-9svii5lqk0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.content-section img.complete-logo[b-9svii5lqk0] {
    height: 130px;
}

/* Icon Wrapper */
.content-section .icon-wrapper[b-9svii5lqk0] {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 2px white;
    border-radius: 1rem;
    padding: 1.5rem;
    aspect-ratio: 1 / 1;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.7);
    animation: iconPopIn-b-9svii5lqk0 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               iconWrapperFadeOut-b-9svii5lqk0 0.5s ease-in 2.4s forwards;
}

/* Icon entrance animation */
@keyframes iconPopIn-b-9svii5lqk0 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Icon wrapper fade out animation */
@keyframes iconWrapperFadeOut-b-9svii5lqk0 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Check icon drawing animation */
.content-section .icon-wrapper .check-complete[b-9svii5lqk0] {
    overflow: visible;
}

/* Circle path - draws around */
.content-section .icon-wrapper .check-complete .check-circle[b-9svii5lqk0] {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: drawCircle-b-9svii5lqk0 0.8s ease-out 0.4s forwards;
}

@keyframes drawCircle-b-9svii5lqk0 {
    to {
        stroke-dashoffset: 0;
    }
}

/* Checkmark path - draws in opposite direction (from tip to start) */
.content-section .icon-wrapper .check-complete .check-mark[b-9svii5lqk0] {
    stroke-dasharray: 40;
    stroke-dashoffset: -40;
    animation: drawCheckReverse-b-9svii5lqk0 0.4s ease-out 1s forwards;
}

@keyframes drawCheckReverse-b-9svii5lqk0 {
    to {
        stroke-dashoffset: 0;
    }
}

/* Title */
.title[b-9svii5lqk0] {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

/* Subtitle */
.subtitle[b-9svii5lqk0] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Button Section */
.button-section[b-9svii5lqk0] {
    padding: 16px 0;
    position: relative;
    z-index: 1;
}

.btn-continue[b-9svii5lqk0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: #FD7400;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.btn-continue:hover[b-9svii5lqk0] {
    background: #FD7400;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.btn-continue:active[b-9svii5lqk0] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .complete-page[b-9svii5lqk0] {
        padding: 12px 16px;
    }

    .icon-background[b-9svii5lqk0] {
        width: 88px;
        height: 88px;
        border-radius: 20px;
    }

    .checkmark-icon[b-9svii5lqk0] {
        width: 42px;
        height: 42px;
    }

    .title[b-9svii5lqk0] {
        font-size: 24px;
    }

    .subtitle[b-9svii5lqk0] {
        font-size: 15px;
    }
}
/* /Pages/Onboarding/ConnectApps.razor.rz.scp.css */
/* Connect Apps Page Styles */
.connect-apps-page[b-99r67hzlua] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 16px 20px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    margin: 0 auto;
    background: #fff;
}

/* Progress Section */
.progress-section[b-99r67hzlua] {
    margin-bottom: 24px;
}

.step-label[b-99r67hzlua] {
    display: block;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.progress-steps[b-99r67hzlua] {
    height: 6px;
    background: #e5e7eb;
}

.progress-steps.active[b-99r67hzlua] {
    background: #FD7400;
}

/* Header Section */
.header-section[b-99r67hzlua] {
    margin-bottom: 24px;
}

.header-section h1[b-99r67hzlua] {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.subtitle[b-99r67hzlua] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Apps List */
.apps-list[b-99r67hzlua] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* App Card */
.app-card[b-99r67hzlua] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.app-card:hover[b-99r67hzlua] {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* App Icon */
.app-icon[b-99r67hzlua] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
}

.app-icon svg[b-99r67hzlua] {
    width: 28px;
    height: 28px;
}

.strava-icon[b-99r67hzlua] {
    background: linear-gradient(135deg, #fc4c02, #ff6b35);
    color: #fff;
}

.garmin-icon[b-99r67hzlua] {
    background: linear-gradient(135deg, #007cc2, #0096d6);
    color: #fff;
}

/* App Content */
.app-content[b-99r67hzlua] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.app-title[b-99r67hzlua] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.app-description[b-99r67hzlua] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Toggle Switch */
.toggle-switch[b-99r67hzlua] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input[b-99r67hzlua] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-99r67hzlua] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    border-radius: 28px;
    transition: all 0.3s ease;
}

.toggle-slider[b-99r67hzlua]::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked+.toggle-slider[b-99r67hzlua] {
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.toggle-switch input:checked+.toggle-slider[b-99r67hzlua]::before {
    transform: translateX(22px);
}

/* Button Section */
.button-section[b-99r67hzlua] {
    padding-top: 16px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-continue[b-99r67hzlua] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: #FD7400;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.btn-continue:hover[b-99r67hzlua] {
    background: #FD7400;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.btn-continue:active[b-99r67hzlua] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.btn-skip[b-99r67hzlua] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    color: #6b7280;
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-skip:hover[b-99r67hzlua] {
    color: #374151;
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .connect-apps-page[b-99r67hzlua] {
        padding: 12px 16px;
    }

    .header-section h1[b-99r67hzlua] {
        font-size: 22px;
    }

    .app-card[b-99r67hzlua] {
        padding: 14px;
        gap: 12px;
    }

    .app-icon[b-99r67hzlua] {
        width: 44px;
        height: 44px;
    }

    .app-icon svg[b-99r67hzlua] {
        width: 24px;
        height: 24px;
    }

    .app-title[b-99r67hzlua] {
        font-size: 15px;
    }

    .app-description[b-99r67hzlua] {
        font-size: 12px;
    }
}
/* /Pages/Onboarding/Goals.razor.rz.scp.css */
/* Goals Page Styles */
.goals-page[b-ki26gy9vss] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 16px 20px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    margin: 0 auto;
    background: #fff;
}

/* Progress Section */
.progress-section[b-ki26gy9vss] {
    margin-bottom: 24px;
}

.step-label[b-ki26gy9vss] {
    display: block;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.progress-steps[b-ki26gy9vss] {
    height: 6px;
    background: #e5e7eb;
}

.progress-steps.active[b-ki26gy9vss] {
    background: #FD7400;
}

/* Header Section */
.header-section[b-ki26gy9vss] {
    margin-bottom: 24px;
}

.header-section h1[b-ki26gy9vss] {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.subtitle[b-ki26gy9vss] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Goals List */
.goals-list[b-ki26gy9vss] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 16px;
}

/* Goal Card */
.goal-card[b-ki26gy9vss] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.goal-card:hover[b-ki26gy9vss] {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.goal-card.selected[b-ki26gy9vss] {
    border-color: #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.03), rgba(251, 146, 60, 0.06));
    box-shadow: 0 2px 12px rgba(249, 115, 22, 0.12);
}

/* Checkbox Wrapper */
.checkbox-wrapper[b-ki26gy9vss] {
    position: relative;
    flex-shrink: 0;
}

.checkbox-wrapper input[type="checkbox"][b-ki26gy9vss] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-checkbox[b-ki26gy9vss] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    transition: all 0.2s ease;
}

.goal-card.selected .custom-checkbox[b-ki26gy9vss] {
    background: #f97316;
    border-color: #f97316;
}

.custom-checkbox svg[b-ki26gy9vss] {
    width: 14px;
    height: 14px;
    color: #fff;
}

/* Goal Content */
.goal-content[b-ki26gy9vss] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.goal-title[b-ki26gy9vss] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
}

.goal-icon[b-ki26gy9vss] {
    font-size: 20px;
    line-height: 1;
}

.goal-description[b-ki26gy9vss] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

/* Button Section */
.button-section[b-ki26gy9vss] {
    padding-top: 16px;
    margin-top: auto;
}

.btn-continue[b-ki26gy9vss] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: #FD7400;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.btn-continue:hover[b-ki26gy9vss] {
    background: #FD7400;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.btn-continue:active[b-ki26gy9vss] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.arrow-icon[b-ki26gy9vss] {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .goals-page[b-ki26gy9vss] {
        padding: 12px 16px;
    }

    .header-section h1[b-ki26gy9vss] {
        font-size: 22px;
    }

    .goal-card[b-ki26gy9vss] {
        padding: 14px;
        gap: 12px;
    }

    .goal-title[b-ki26gy9vss] {
        font-size: 15px;
    }

    .goal-description[b-ki26gy9vss] {
        font-size: 12px;
    }
}
/* /Pages/Onboarding/Profile.razor.rz.scp.css */
/* Profile Page Styles */
.profile-page[b-c3w7kp0pp6] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 16px 20px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    
    margin: 0 auto;
    background: #fff;
}

/* Progress Section */
.progress-section[b-c3w7kp0pp6] {
    margin-bottom: 24px;
}

.step-label[b-c3w7kp0pp6] {
    display: block;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.progress-steps[b-c3w7kp0pp6] {
    height: 6px;
    background: #e5e7eb;
}

.progress-steps.active[b-c3w7kp0pp6] {
    background: #FD7400;
}

/* Header Section */
.header-section[b-c3w7kp0pp6] {
    margin-bottom: 24px;
}

.header-section h1[b-c3w7kp0pp6] {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.subtitle[b-c3w7kp0pp6] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Profile Form */
.profile-form[b-c3w7kp0pp6] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Form Group */
.form-group[b-c3w7kp0pp6] {
    margin-bottom: 20px;
}

.form-label[b-c3w7kp0pp6] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

/* Gender Selector */
.gender-selector[b-c3w7kp0pp6] {
    display: flex;
    gap: 0;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.gender-btn[b-c3w7kp0pp6] {
    flex: 1;
    padding: 12px 16px;
    background: #fff;
    border: none;
    border-right: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gender-btn:last-child[b-c3w7kp0pp6] {
    border-right: none;
}

.gender-btn:hover[b-c3w7kp0pp6] {
    background: #f9fafb;
}

.gender-btn.selected[b-c3w7kp0pp6] {
    background: #f97316;
    color: #fff;
}

/* Date Input */
.date-input-wrapper[b-c3w7kp0pp6] {
    position: relative;
    display: flex;
    align-items: center;
}

.calendar-icon[b-c3w7kp0pp6] {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.date-input[b-c3w7kp0pp6] {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: all 0.2s ease;
}

.date-input:focus[b-c3w7kp0pp6] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.date-input[b-c3w7kp0pp6]::placeholder {
    color: #9ca3af;
}

/* Measurement Row */
.measurement-row[b-c3w7kp0pp6] {
    display: flex;
    gap: 16px;
}

.measurement-group[b-c3w7kp0pp6] {
    flex: 1;
}

/* Measurement Input Wrapper */
.measurement-input-wrapper[b-c3w7kp0pp6] {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.measurement-input-wrapper:focus-within[b-c3w7kp0pp6] {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.measurement-input[b-c3w7kp0pp6] {
    flex: 1;
    width: 0;
    /* Prevent input from expanding beyond flex container */
    padding: 14px;
    border: none;
    font-size: 14px;
    color: #111827;
    background: #fff;
    min-width: 0;
}

.measurement-input:focus[b-c3w7kp0pp6] {
    outline: none;
}

.measurement-input[b-c3w7kp0pp6]::placeholder {
    color: #9ca3af;
}

/* Remove spinner from number inputs */
.measurement-input[b-c3w7kp0pp6]::-webkit-outer-spin-button,
.measurement-input[b-c3w7kp0pp6]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.measurement-input[type=number][b-c3w7kp0pp6] {
    -moz-appearance: textfield;
}

/* Unit Selector */
.unit-selector[b-c3w7kp0pp6] {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 8px;
    background: #fff;
}

.unit-select[b-c3w7kp0pp6] {
    appearance: none;
    padding: 14px 28px 14px 12px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: transparent;
    cursor: pointer;
}

.unit-select:focus[b-c3w7kp0pp6] {
    outline: none;
}

.dropdown-icon[b-c3w7kp0pp6] {
    position: absolute;
    right: 12px;
    width: 14px;
    height: 14px;
    color: #9ca3af;
    pointer-events: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Button Section */
.button-section[b-c3w7kp0pp6] {
    padding-top: 16px;
    margin-top: auto;
}

.btn-confirm[b-c3w7kp0pp6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: #FD7400;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.btn-confirm:hover[b-c3w7kp0pp6] {
    background: #FD7400;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.btn-confirm:active[b-c3w7kp0pp6] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* Validation Styles */
.validation-message[b-c3w7kp0pp6] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .profile-page[b-c3w7kp0pp6] {
        padding: 12px 16px;
    }

    .header-section h1[b-c3w7kp0pp6] {
        font-size: 22px;
    }

    .gender-btn[b-c3w7kp0pp6] {
        padding: 10px 12px;
        font-size: 13px;
    }

    .measurement-row[b-c3w7kp0pp6] {
        gap: 12px;
    }

    .measurement-input[b-c3w7kp0pp6],
    .unit-select[b-c3w7kp0pp6] {
        padding: 12px;
    }
}
/* /Pages/Onboarding/Terms.razor.rz.scp.css */
 .terms[b-57g3jv5jo5] {
     display: flex;
     flex-direction: column;
     gap: 12px;
     padding: 16px;
 }

 .terms .scroll-wrapper[b-57g3jv5jo5] {
     position: relative;
 }

 .terms .scroll[b-57g3jv5jo5] {
     max-height: 62vh;
     min-height: 200px;
     font-size: 14px;
     color: #667085;
     overflow-y: auto;
     padding: 12px;
     border: 1px solid #eaeaea;
     border-radius: 12px;
     -webkit-overflow-scrolling: touch;
     backdrop-filter: blur(5px);
 }

 .terms .scroll-wrapper .btn-scroll-bottom[b-57g3jv5jo5] {
     position: absolute;
     left: 50%;
     bottom: 12px;
     transform: translateX(-50%);
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid #FF7A00;
     border-radius: 20px;
     padding: 6px 12px;
     font-size: 12px;
     color: #FF7A00;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.18);
    z-index: 3;
    opacity: 1;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
 }

 .terms .scroll-wrapper .btn-scroll-bottom:hover[b-57g3jv5jo5] {
     background: #FF7A00;
     color: #fff;
     border-color: #FF7A00;
     box-shadow: 0 6px 14px rgba(255, 122, 0, 0.28);
     transform: translate(-50%, -1px);
 }

 .terms .scroll-wrapper .btn-scroll-bottom:focus-visible[b-57g3jv5jo5] {
     outline: 2px solid #FF7A00;
     outline-offset: 2px;
     box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.25), 0 6px 14px rgba(255, 122, 0, 0.28);
 }

 .terms .scroll h2[b-57g3jv5jo5] {
     font-size: 18px;
     font-weight: 600;
 }

 .terms .scroll[b-57g3jv5jo5]::-webkit-scrollbar {
     width: 8px;
 }

 .terms .scroll[b-57g3jv5jo5]::-webkit-scrollbar-thumb {
     background: #cfcfcf;
     border-radius: 8px;
 }

 .terms label[b-57g3jv5jo5] {
     display: flex;
     gap: 8px;
     align-items: flex-start;
     color: #555;
 }

 .terms label input[b-57g3jv5jo5] {
     margin-top: 5px;
     appearance: none;
     width: 18px;
     height: 18px;
     aspect-ratio: 1/1;
     border: 1.5px solid #d0d5dd;
     border-radius: 4px;
     background: #fff;
     position: relative;
    cursor: pointer;
 }

.terms label input:disabled[b-57g3jv5jo5] {
    opacity: 0.5;
    cursor: not-allowed;
}

 .terms label input:checked[b-57g3jv5jo5] {
     background: #FF7A00;
     border-color: #FF7A00;
 }

 .terms label input:checked[b-57g3jv5jo5]::after {
     content: "\f00c";
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
     font-weight: 900;
     font-size: 12px;
     color: #fff;
     line-height: 1;
 }

.confirm-hint[b-57g3jv5jo5] {
    margin: 0 0 4px 26px;
    font-size: 12px;
    color: #98A2B3;
}

 button.primary[b-57g3jv5jo5] {
     background: #FF7A00;
     color: #fff;
     border: 0;
     border-radius: 12px;
     padding: 12px 16px;
     font-weight: 700;
 }

 button.primary:disabled[b-57g3jv5jo5] {
     opacity: .5;
     cursor: not-allowed;
 }
/* /Pages/Profile.razor.rz.scp.css */
/* Profile Page Styles */
.profile-page[b-k0qcqrqagj] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-k0qcqrqagj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
}

.back-btn[b-k0qcqrqagj],
.settings-btn[b-k0qcqrqagj] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-k0qcqrqagj],
.settings-btn svg[b-k0qcqrqagj] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-k0qcqrqagj] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Profile Info */
.profile-info[b-k0qcqrqagj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 24px;
}

.avatar-container[b-k0qcqrqagj] {
    position: relative;
    margin-bottom: 12px;
}

.profile-avatar[b-k0qcqrqagj] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-container[b-k0qcqrqagj] {
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
}

.default-avatar[b-k0qcqrqagj] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.default-avatar svg[b-k0qcqrqagj] {
    width: 40px;
    height: 40px;
    color: #9ca3af;
}

.avatar-edit-overlay[b-k0qcqrqagj] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: #f97316;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.avatar-edit-overlay svg[b-k0qcqrqagj] {
    width: 12px;
    height: 12px;
    color: #fff;
}

.default-avatar-small[b-k0qcqrqagj] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.default-avatar-small svg[b-k0qcqrqagj] {
    width: 20px;
    height: 20px;
    color: #9ca3af;
}

.avatar-container.uploading[b-k0qcqrqagj] {
    pointer-events: none;
}

.avatar-loading-overlay[b-k0qcqrqagj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner[b-k0qcqrqagj] {
    width: 24px;
    height: 24px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-k0qcqrqagj 0.8s linear infinite;
}

@keyframes spin-b-k0qcqrqagj {
    to {
        transform: rotate(360deg);
    }
}

.profile-name[b-k0qcqrqagj] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px 0;
}

.profile-username[b-k0qcqrqagj] {
    font-size: 14px;
    color: #6b7280;
}

/* Stats Row */
.stats-row[b-k0qcqrqagj] {
    display: flex;
    gap: 48px;
    margin-top: 20px;
}

.stat[b-k0qcqrqagj] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label[b-k0qcqrqagj] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
}

.stat-value[b-k0qcqrqagj] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

/* Event Tab */
.event-tab-container[b-k0qcqrqagj] {
    display: flex;
    justify-content: center;
    padding: 0 16px 16px;
}

.event-tab-btn[b-k0qcqrqagj] {
    padding: 12px 32px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
}

.event-tab-btn.active[b-k0qcqrqagj] {
    border-color: #111827;
}

/* Content */
.content[b-k0qcqrqagj] {
    flex: 1;
    padding: 0 16px 24px;
    overflow-y: auto;
}

/* Streak Card */
.streak-card[b-k0qcqrqagj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fffbeb;
    border-radius: 12px;
    margin-bottom: 20px;
}

.streak-icon[b-k0qcqrqagj] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-icon svg[b-k0qcqrqagj] {
    width: 24px;
    height: 24px;
    color: #f97316;
}

.streak-content[b-k0qcqrqagj] {
    flex: 1;
}

.streak-title[b-k0qcqrqagj] {
    font-size: 16px;
    font-weight: 600;
    color: #ea580c;
    margin: 0 0 2px 0;
}

.streak-desc[b-k0qcqrqagj] {
    font-size: 13px;
    color: #92400e;
    margin: 0;
}

/* Activity Feed */
.activity-feed[b-k0qcqrqagj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.activity-item[b-k0qcqrqagj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-header[b-k0qcqrqagj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.activity-avatar[b-k0qcqrqagj] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.activity-user[b-k0qcqrqagj] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.activity-name[b-k0qcqrqagj] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.activity-desc[b-k0qcqrqagj] {
    font-size: 12px;
    color: #6b7280;
}

.activity-time[b-k0qcqrqagj] {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Reward Card */
.reward-card[b-k0qcqrqagj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    margin-left: 46px;
}

.reward-icon[b-k0qcqrqagj] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-icon svg[b-k0qcqrqagj] {
    width: 22px;
    height: 22px;
}

.reward-icon.gift[b-k0qcqrqagj] {
    background: #fef3c7;
    color: #d97706;
}

.reward-icon.badge[b-k0qcqrqagj] {
    background: #dbeafe;
    color: #2563eb;
}

.reward-info[b-k0qcqrqagj] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.reward-title[b-k0qcqrqagj] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.reward-desc[b-k0qcqrqagj] {
    font-size: 12px;
    color: #6b7280;
}
/* /Pages/Rewards/EarnedBadges.razor.rz.scp.css */
/* Earned Badges Page Styles */
.badges-page[b-dp3x19ozak] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-dp3x19ozak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.back-btn[b-dp3x19ozak] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-dp3x19ozak] {
    background: #f3f4f6;
}

.back-btn svg[b-dp3x19ozak] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-dp3x19ozak] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    text-align: center;
    flex: 1;
}

.header-spacer[b-dp3x19ozak] {
    width: 40px;
}

/* Badges Content */
.badges-content[b-dp3x19ozak] {
    flex: 1;
    padding: 24px 20px;
}

.section-title[b-dp3x19ozak] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px 0;
}

/* Badges Grid */
.badges-grid[b-dp3x19ozak] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.badge-item[b-dp3x19ozak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.badge-icon[b-dp3x19ozak] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    border-radius: 16px;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.badge-item.locked .badge-icon[b-dp3x19ozak] {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    box-shadow: none;
}

.badge-name[b-dp3x19ozak] {
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    text-align: center;
}

.badge-item.locked .badge-name[b-dp3x19ozak] {
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 360px) {
    .badges-grid[b-dp3x19ozak] {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .badge-icon[b-dp3x19ozak] {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}
/* /Pages/Rewards/MyRewardDetail.razor.rz.scp.css */
/* My Reward Detail Page Styles */
.my-reward-detail-page[b-wf6so3ys06] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-wf6so3ys06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-wf6so3ys06] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-wf6so3ys06] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-wf6so3ys06] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-wf6so3ys06] {
    width: 40px;
}

/* Content */
.reward-content[b-wf6so3ys06] {
    flex: 1;
    padding: 0 16px 16px;
    overflow-y: auto;
}

/* Reward Image */
.reward-image[b-wf6so3ys06] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.reward-image img[b-wf6so3ys06] {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.status-badge[b-wf6so3ys06] {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.available[b-wf6so3ys06] {
    background: #dcfce7;
    color: #16a34a;
}

.status-badge.used[b-wf6so3ys06] {
    background: #f3f4f6;
    color: #6b7280;
}

.status-badge.expired[b-wf6so3ys06] {
    background: #fee2e2;
    color: #dc2626;
}

/* Reward Info */
.reward-info[b-wf6so3ys06] {
    margin-bottom: 20px;
}

.reward-brand[b-wf6so3ys06] {
    font-size: 14px;
    color: #f97316;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.reward-title[b-wf6so3ys06] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

/* About Section */
.about-section[b-wf6so3ys06] {
    margin-bottom: 20px;
}

.section-title[b-wf6so3ys06] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.about-text[b-wf6so3ys06] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.see-more-btn[b-wf6so3ys06] {
    background: transparent;
    border: none;
    color: #f97316;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
}

/* Info Section */
.info-section[b-wf6so3ys06] {
    margin-bottom: 20px;
}

.info-table[b-wf6so3ys06] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
}

.info-row[b-wf6so3ys06] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child[b-wf6so3ys06] {
    border-bottom: none;
}

.info-label[b-wf6so3ys06] {
    font-size: 14px;
    color: #6b7280;
}

.info-value[b-wf6so3ys06] {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

/* Button Section */
.button-section[b-wf6so3ys06] {
    padding: 16px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    background: #fff;
}

.action-btn[b-wf6so3ys06] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn.active[b-wf6so3ys06] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.action-btn.active:hover[b-wf6so3ys06] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.action-btn.disabled[b-wf6so3ys06] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 360px) {
    .reward-image img[b-wf6so3ys06] {
        height: 180px;
    }

    .reward-title[b-wf6so3ys06] {
        font-size: 18px;
    }
}
/* /Pages/Rewards/MyRewards.razor.rz.scp.css */
/* My Rewards Page Styles */
.my-rewards-page[b-tz54bqk22z] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-tz54bqk22z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    flex-shrink: 0;
}

.back-btn[b-tz54bqk22z] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-tz54bqk22z] {
    background: #f3f4f6;
}

.back-btn svg[b-tz54bqk22z] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-tz54bqk22z] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    text-align: center;
    flex: 1;
}

.header-spacer[b-tz54bqk22z] {
    width: 40px;
}

/* Tabs */
.tabs[b-tz54bqk22z] {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.tab[b-tz54bqk22z] {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab:hover[b-tz54bqk22z] {
    color: #374151;
}

.tab.active[b-tz54bqk22z] {
    color: #f97316;
    border-bottom-color: #f97316;
    font-weight: 600;
}

/* Rewards List */
.rewards-list[b-tz54bqk22z] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Reward Card */
.reward-card[b-tz54bqk22z] {
    display: flex;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.reward-card:hover[b-tz54bqk22z] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Reward Image */
.reward-image[b-tz54bqk22z] {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    background: #f3f4f6;
}

.reward-image img[b-tz54bqk22z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-badge[b-tz54bqk22z] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
}

.status-badge.available[b-tz54bqk22z] {
    background: #10b981;
    color: #fff;
}

.status-badge.used[b-tz54bqk22z] {
    background: #6b7280;
    color: #fff;
}

.status-badge.expired[b-tz54bqk22z] {
    background: #ef4444;
    color: #fff;
}

/* Reward Info */
.reward-info[b-tz54bqk22z] {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.reward-brand[b-tz54bqk22z] {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

.reward-title[b-tz54bqk22z] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.reward-points[b-tz54bqk22z] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
}

.reward-points .points-value[b-tz54bqk22z] {
    font-weight: 700;
    color: #f97316;
}

.gift-emoji[b-tz54bqk22z] {
    font-size: 14px;
}

.view-btn[b-tz54bqk22z] {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.view-btn:hover[b-tz54bqk22z] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
}

/* Empty State */
.empty-state[b-tz54bqk22z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.empty-icon[b-tz54bqk22z] {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state p[b-tz54bqk22z] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}
/* /Pages/Rewards/PointsDetail.razor.rz.scp.css */
.points-detail[b-vra567ogc1]{background:#F6F7F9;min-height:100dvh;padding-bottom:64px}
.head[b-vra567ogc1]{display:flex;align-items:center;justify-content:space-between;padding:12px;position:sticky;top:0;background:#F6F7F9;z-index:6}
.back[b-vra567ogc1]{border:none;background:#fff;border-radius:8px;padding:6px 10px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.card[b-vra567ogc1]{background:#fff;border-radius:14px;border:1px solid #eee;box-shadow:0 2px 14px rgba(0,0,0,.06);overflow:hidden;margin:8px 12px;padding:12px}
.score[b-vra567ogc1]{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.value[b-vra567ogc1]{font-size:28px;font-weight:900;color:#FF7A00}
.unit[b-vra567ogc1]{font-weight:700;color:#FF7A00}
.delta[b-vra567ogc1]{color:#666;font-size:12px;margin-top:4px}
.history[b-vra567ogc1]{padding:8px 12px}
.history .row[b-vra567ogc1]{display:flex;gap:8px;justify-content:space-between;background:#fff;border:1px solid #eee;border-radius:10px;padding:8px 10px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin-bottom:8px}
/* /Pages/Rewards/RedeemConfirm.razor.rz.scp.css */
/* Redeem Confirm Page Styles */
.redeem-confirm-page[b-vko4faexcg] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Decorative Blobs */
.decorative-blobs[b-vko4faexcg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    pointer-events: none;
    overflow: hidden;
}

.blob[b-vko4faexcg] {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.6;
}

.blob-1[b-vko4faexcg] {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #fcd9b6, #fed7aa);
    top: -60px;
    right: -40px;
}

.blob-2[b-vko4faexcg] {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #c4b5fd, #ddd6fe);
    top: 60px;
    right: 80px;
}

.blob-3[b-vko4faexcg] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #bfdbfe, #93c5fd);
    top: 20px;
    left: -30px;
}

/* Content */
.confirm-content[b-vko4faexcg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    z-index: 1;
}

/* Icon */
.confirm-icon[b-vko4faexcg] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 115, 22, 0.1);
    border-radius: 20px;
    margin-bottom: 24px;
}

.confirm-icon svg[b-vko4faexcg] {
    width: 40px;
    height: 40px;
    color: #f97316;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Title */
.confirm-title[b-vko4faexcg] {
    font-size: 24px;
    font-weight: 700;
    color: #f97316;
    margin: 0 0 12px 0;
    text-align: center;
}

.confirm-subtitle[b-vko4faexcg] {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    margin: 0 0 32px 0;
    line-height: 1.5;
    max-width: 280px;
}

/* Points Table */
.points-table[b-vko4faexcg] {
    width: 100%;
    max-width: 320px;
    background: #f9fafb;
    border-radius: 16px;
    padding: 16px 20px;
}

.table-row[b-vko4faexcg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.table-row:not(:last-child)[b-vko4faexcg] {
    border-bottom: 1px solid #e5e7eb;
}

.table-row .label[b-vko4faexcg] {
    font-size: 14px;
    color: #6b7280;
}

.table-row .value[b-vko4faexcg] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.table-row .value.available[b-vko4faexcg] {
    color: #10b981;
}

/* Button Section */
.button-section[b-vko4faexcg] {
    padding: 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    position: relative;
    z-index: 1;
}

.confirm-btn[b-vko4faexcg] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    margin-bottom: 12px;
}

.confirm-btn:hover[b-vko4faexcg] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
}

.confirm-btn:disabled[b-vko4faexcg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.warn-text[b-vko4faexcg] {
    font-size: 12px;
    color: #ef4444;
    text-align: center;
    margin: 0 0 12px 0;
}

.cancel-btn[b-vko4faexcg] {
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cancel-btn:hover[b-vko4faexcg] {
    color: #374151;
}
/* /Pages/Rewards/RedeemSuccess.razor.rz.scp.css */
/* Redeem Success Page Styles */
.redeem-success-page[b-0akkxbso5b] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 16px 20px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Blobs */
.decorative-blobs[b-0akkxbso5b] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    pointer-events: none;
    overflow: hidden;
}

.blob[b-0akkxbso5b] {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
}

.blob-peach[b-0akkxbso5b] {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #fcd5c0 0%, #fbb99a 100%);
    top: -40px;
    right: 20%;
    transform: rotate(-15deg);
    border-radius: 60% 40% 50% 50%;
}

.blob-pink[b-0akkxbso5b] {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #fce4e8 0%, #f8d0d8 100%);
    top: -20px;
    right: -20px;
    border-radius: 50% 60% 40% 50%;
}

.blob-blue[b-0akkxbso5b] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dbeafe 0%, #c7d9f7 100%);
    top: 60px;
    right: 10%;
    border-radius: 50%;
}

/* Content Section */
.content-section[b-0akkxbso5b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Icon Wrapper */
.icon-wrapper[b-0akkxbso5b] {
    margin-bottom: 24px;
}

.icon-background[b-0akkxbso5b] {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    background: linear-gradient(145deg, #fcd5c0 0%, #a8e4f0 50%, #7dd3e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 8px 32px rgba(249, 115, 22, 0.15),
        0 4px 16px rgba(125, 211, 232, 0.15);
}

.icon-background[b-0akkxbso5b]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

.checkmark-icon[b-0akkxbso5b] {
    width: 48px;
    height: 48px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Title */
.title[b-0akkxbso5b] {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

/* Subtitle */
.subtitle[b-0akkxbso5b] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    max-width: 280px;
}

/* Button Section */
.button-section[b-0akkxbso5b] {
    padding: 16px 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.primary-btn[b-0akkxbso5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.primary-btn:hover[b-0akkxbso5b] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.primary-btn:active[b-0akkxbso5b] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

.secondary-btn[b-0akkxbso5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    color: #374151;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-btn:hover[b-0akkxbso5b] {
    color: #f97316;
}

.secondary-btn:active[b-0akkxbso5b] {
    color: #ea580c;
}

/* Responsive adjustments */
@media (max-width: 360px) {
    .redeem-success-page[b-0akkxbso5b] {
        padding: 12px 16px;
    }

    .icon-background[b-0akkxbso5b] {
        width: 88px;
        height: 88px;
        border-radius: 20px;
    }

    .checkmark-icon[b-0akkxbso5b] {
        width: 42px;
        height: 42px;
    }

    .title[b-0akkxbso5b] {
        font-size: 24px;
    }

    .subtitle[b-0akkxbso5b] {
        font-size: 15px;
    }
}
/* /Pages/Rewards/RewardDetail.razor.rz.scp.css */
/* Reward Detail Page Styles */
.reward-detail-page[b-ejvi69lxag] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-ejvi69lxag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.back-btn[b-ejvi69lxag] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.back-btn:hover[b-ejvi69lxag] {
    background: #f3f4f6;
}

.back-btn svg[b-ejvi69lxag] {
    width: 24px;
    height: 24px;
    color: #374151;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-title[b-ejvi69lxag] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    text-align: center;
    flex: 1;
}

.header-spacer[b-ejvi69lxag] {
    width: 40px;
}

/* Reward Content */
.reward-content[b-ejvi69lxag] {
    flex: 1;
    overflow-y: auto;
}

/* Reward Image */
.reward-image[b-ejvi69lxag] {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f3f4f6;
}

.reward-image img[b-ejvi69lxag] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reward Info */
.reward-info[b-ejvi69lxag] {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.reward-brand[b-ejvi69lxag] {
    font-size: 13px;
    font-weight: 500;
    color: #f97316;
    display: block;
    margin-bottom: 4px;
}

.reward-title[b-ejvi69lxag] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
}

.reward-points-row[b-ejvi69lxag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.points-label[b-ejvi69lxag] {
    font-size: 14px;
    color: #6b7280;
}

.points-value[b-ejvi69lxag] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.points-value .pts[b-ejvi69lxag] {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

.gift-icon[b-ejvi69lxag] {
    font-size: 18px;
    margin-left: 4px;
}

/* About Section */
.about-section[b-ejvi69lxag] {
    padding: 20px;
}

.about-title[b-ejvi69lxag] {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
}

.about-text[b-ejvi69lxag] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.see-more-btn[b-ejvi69lxag] {
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #f97316;
    padding: 0;
    cursor: pointer;
}

.see-more-btn:hover[b-ejvi69lxag] {
    text-decoration: underline;
}

/* Button Section */
.button-section[b-ejvi69lxag] {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.redeem-btn[b-ejvi69lxag] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.redeem-btn:hover[b-ejvi69lxag] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
}
/* /Pages/Rewards/UseReward.razor.rz.scp.css */
/* Use Reward Page Styles */
.use-reward-page[b-hctt471592] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-hctt471592] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-hctt471592] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-hctt471592] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-hctt471592] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.header-spacer[b-hctt471592] {
    width: 40px;
}

/* QR Content */
.qr-content[b-hctt471592] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.qr-wrapper[b-hctt471592] {
    text-align: center;
    max-width: 300px;
}

.reward-title[b-hctt471592] {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.reward-date[b-hctt471592] {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 0 32px 0;
}

/* QR Code Container */
.qr-code-container[b-hctt471592] {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
    display: inline-block;
}

.qr-code[b-hctt471592] {
    width: 180px;
    height: 180px;
}

.ref-number[b-hctt471592] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Button Section */
.button-section[b-hctt471592] {
    padding: 16px;
    padding-bottom: env(safe-area-inset-bottom, 24px);
    background: #fff;
}

.back-button[b-hctt471592] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.back-button:hover[b-hctt471592] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.back-button:active[b-hctt471592] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* Responsive */
@media (max-width: 360px) {
    .qr-code[b-hctt471592] {
        width: 150px;
        height: 150px;
    }

    .reward-title[b-hctt471592] {
        font-size: 20px;
    }
}
/* /Pages/Settings/ConnectionDetail.razor.rz.scp.css */
/* Connection Detail Page Styles */
.connection-detail-page[b-83xx2rehah] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-83xx2rehah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-83xx2rehah] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-83xx2rehah] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-83xx2rehah] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-83xx2rehah] {
    width: 40px;
}

/* Content */
.content[b-83xx2rehah] {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
}

/* Section */
.section[b-83xx2rehah] {
    margin-bottom: 24px;
}

.section-title[b-83xx2rehah] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

/* Setting Card */
.setting-card[b-83xx2rehah] {
    padding: 16px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
}

.setting-header[b-83xx2rehah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.setting-label[b-83xx2rehah] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.setting-desc[b-83xx2rehah] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* Toggle Switch */
.toggle[b-83xx2rehah] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle input[b-83xx2rehah] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-83xx2rehah] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider[b-83xx2rehah]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle input:checked+.toggle-slider[b-83xx2rehah] {
    background-color: #f97316;
}

.toggle input:checked+.toggle-slider[b-83xx2rehah]:before {
    transform: translateX(22px);
}

/* Disconnect Button */
.disconnect-btn[b-83xx2rehah] {
    width: 100%;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #f97316;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #f97316;
    cursor: pointer;
    transition: all 0.2s;
}

.disconnect-btn:hover[b-83xx2rehah] {
    background: #fff7ed;
}
/* /Pages/Settings/EditProfile.razor.rz.scp.css */
/* Edit Profile Page Styles */
.edit-profile-page[b-m9m0qppi5x] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-m9m0qppi5x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-m9m0qppi5x] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-m9m0qppi5x] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-m9m0qppi5x] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.save-btn[b-m9m0qppi5x] {
    padding: 8px 16px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #f97316;
    cursor: pointer;
}

/* Tabs */
.tabs[b-m9m0qppi5x] {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    padding: 0 16px;
}

.tab[b-m9m0qppi5x] {
    flex: 1;
    padding: 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
}

.tab.active[b-m9m0qppi5x] {
    border-bottom-color: #f97316;
    color: #f97316;
}

/* Content */
.content[b-m9m0qppi5x] {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
}

/* Form Section */
.form-section[b-m9m0qppi5x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-m9m0qppi5x] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.section-desc[b-m9m0qppi5x] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.form-group[b-m9m0qppi5x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row[b-m9m0qppi5x] {
    display: flex;
    gap: 12px;
}

.flex-1[b-m9m0qppi5x] {
    flex: 1;
}

.form-label[b-m9m0qppi5x] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-input[b-m9m0qppi5x] {
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    color: #111827;
    outline: none;
    width: 100%;
}

.form-input:focus[b-m9m0qppi5x] {
    border-color: #f97316;
}

.input-with-icon[b-m9m0qppi5x] {
    position: relative;
}

.input-with-icon svg[b-m9m0qppi5x] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.input-with-unit[b-m9m0qppi5x] {
    display: flex;
    gap: 8px;
}

.input-with-unit .form-input[b-m9m0qppi5x] {
    flex: 1;
}

.unit-select[b-m9m0qppi5x] {
    padding: 12px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    min-width: 60px;
}

/* Gender Options */
.gender-options[b-m9m0qppi5x] {
    display: flex;
    gap: 10px;
}

.gender-btn[b-m9m0qppi5x] {
    flex: 1;
    padding: 12px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.gender-btn.active[b-m9m0qppi5x] {
    border-color: #f97316;
    background: #fff7ed;
    color: #f97316;
}

/* Goal List */
.goal-list[b-m9m0qppi5x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.goal-item[b-m9m0qppi5x] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.goal-item.selected[b-m9m0qppi5x] {
    border-color: #f97316;
    background: #fff7ed;
}

.goal-content[b-m9m0qppi5x] {
    flex: 1;
}

.goal-title[b-m9m0qppi5x] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.goal-icon[b-m9m0qppi5x] {
    font-size: 18px;
    line-height: 1;
}

.goal-desc[b-m9m0qppi5x] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.goal-check[b-m9m0qppi5x] {
    width: 24px;
    height: 24px;
    background: #f97316;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-check svg[b-m9m0qppi5x] {
    width: 14px;
    height: 14px;
    color: #fff;
}

/* Loading State */
.loading-container[b-m9m0qppi5x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.loading-spinner[b-m9m0qppi5x] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f4f6;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: spin-b-m9m0qppi5x 0.8s linear infinite;
}

@keyframes spin-b-m9m0qppi5x {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-m9m0qppi5x] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Toast Notifications */
.error-toast[b-m9m0qppi5x],
.success-toast[b-m9m0qppi5x] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    animation: slideUp-b-m9m0qppi5x 0.3s ease-out;
}

.error-toast[b-m9m0qppi5x] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.success-toast[b-m9m0qppi5x] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

@keyframes slideUp-b-m9m0qppi5x {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Disabled States */
.save-btn:disabled[b-m9m0qppi5x] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-input:disabled[b-m9m0qppi5x] {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Form Hint */
.form-hint[b-m9m0qppi5x] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}
/* /Pages/Settings/HealthConnection.razor.rz.scp.css */
/* Health Connection Page Styles */
.health-page[b-8iu71urkb3] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-8iu71urkb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-8iu71urkb3] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-8iu71urkb3] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-8iu71urkb3] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-8iu71urkb3] {
    width: 40px;
}

/* Content */
.content[b-8iu71urkb3] {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
}

/* Section */
.section[b-8iu71urkb3] {
    margin-bottom: 28px;
}

.section-title[b-8iu71urkb3] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

/* Connection List */
.connection-list[b-8iu71urkb3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.connection-item[b-8iu71urkb3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
}

.connection-item.clickable[b-8iu71urkb3] {
    cursor: pointer;
    transition: all 0.2s;
}

.connection-item.clickable:hover[b-8iu71urkb3] {
    background: #f9fafb;
}

.connection-icon[b-8iu71urkb3] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-icon svg[b-8iu71urkb3] {
    width: 20px;
    height: 20px;
}

.connection-icon.garmin[b-8iu71urkb3] {
    background: #e0f2fe;
    color: #0284c7;
}

.connection-icon.strava[b-8iu71urkb3] {
    background: #ffedd5;
    color: #ea580c;
}

.connection-name[b-8iu71urkb3] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.connection-status[b-8iu71urkb3] {
    font-size: 13px;
    color: #6b7280;
}

.connection-status.enabled[b-8iu71urkb3] {
    color: #059669;
}

.menu-arrow[b-8iu71urkb3] {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

.connect-btn[b-8iu71urkb3] {
    padding: 8px 16px;
    background: #f97316;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.connect-btn:hover[b-8iu71urkb3] {
    background: #ea580c;
}
/* /Pages/Settings/Privacy.razor.rz.scp.css */
/* Privacy Page Styles */
.privacy-page[b-ts46thmloe] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-ts46thmloe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-ts46thmloe] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-ts46thmloe] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-ts46thmloe] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-ts46thmloe] {
    width: 40px;
}

/* Content */
.content[b-ts46thmloe] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* Menu List */
.menu-list[b-ts46thmloe] {
    display: flex;
    flex-direction: column;
}

.menu-item[b-ts46thmloe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.menu-item:last-child[b-ts46thmloe] {
    border-bottom: none;
}

.menu-icon[b-ts46thmloe] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-icon svg[b-ts46thmloe] {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.menu-label[b-ts46thmloe] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.menu-value[b-ts46thmloe] {
    font-size: 14px;
    color: #6b7280;
}

.menu-arrow[b-ts46thmloe] {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}
/* /Pages/Settings/ProfileView.razor.rz.scp.css */
/* Profile View Page Styles */
.profile-view-page[b-qpk9a4mwyu] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-qpk9a4mwyu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-qpk9a4mwyu] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-qpk9a4mwyu] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-qpk9a4mwyu] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.edit-btn[b-qpk9a4mwyu] {
    padding: 8px 16px;
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #f97316;
    cursor: pointer;
}

/* Content */
.content[b-qpk9a4mwyu] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* Info List */
.info-list[b-qpk9a4mwyu] {
    display: flex;
    flex-direction: column;
}

.info-item[b-qpk9a4mwyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.info-item:last-child[b-qpk9a4mwyu] {
    border-bottom: none;
}

.info-icon[b-qpk9a4mwyu] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon svg[b-qpk9a4mwyu] {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.info-label[b-qpk9a4mwyu] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.info-value[b-qpk9a4mwyu] {
    font-size: 14px;
    color: #6b7280;
}

.chevron[b-qpk9a4mwyu] {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    margin-left: 4px;
}

/* Bottom Action */
.bottom-action[b-qpk9a4mwyu] {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.delete-btn[b-qpk9a4mwyu] {
    width: 100%;
    padding: 16px;
    background: #fff;
    border: 1.5px solid #ef4444;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-btn:hover[b-qpk9a4mwyu] {
    background: #fef2f2;
}
/* /Pages/Settings/Settings.razor.rz.scp.css */
/* Settings Page Styles */
.settings-page[b-7fet2fzz3q] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-7fet2fzz3q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-7fet2fzz3q] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-7fet2fzz3q] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-7fet2fzz3q] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-7fet2fzz3q] {
    width: 40px;
}

/* Content */
.content[b-7fet2fzz3q] {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
}

/* Section */
.section[b-7fet2fzz3q] {
    margin-bottom: 28px;
}

.section-title[b-7fet2fzz3q] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

/* Menu List */
.menu-list[b-7fet2fzz3q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-item[b-7fet2fzz3q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.menu-item:last-child[b-7fet2fzz3q] {
    border-bottom: none;
}

.menu-icon[b-7fet2fzz3q] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-icon svg[b-7fet2fzz3q] {
    width: 20px;
    height: 20px;
    color: #374151;
}

.menu-label[b-7fet2fzz3q] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.menu-value[b-7fet2fzz3q] {
    font-size: 14px;
    color: #6b7280;
}

.menu-arrow[b-7fet2fzz3q] {
    width: 16px;
    height: 16px;
    color: #9ca3af;
}

/* Bottom Action */
.bottom-action[b-7fet2fzz3q] {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.logout-btn[b-7fet2fzz3q] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover[b-7fet2fzz3q] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    transform: translateY(-1px);
}
/* /Pages/Settings/ViewProfileSetting.razor.rz.scp.css */
/* Selection Page Styles */
.selection-page[b-r94pwcyxfy] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-r94pwcyxfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-r94pwcyxfy] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-r94pwcyxfy] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-r94pwcyxfy] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-r94pwcyxfy] {
    width: 40px;
}

/* Content */
.content[b-r94pwcyxfy] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* Option List */
.option-list[b-r94pwcyxfy] {
    display: flex;
    flex-direction: column;
}

.option-item[b-r94pwcyxfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.option-item:last-child[b-r94pwcyxfy] {
    border-bottom: none;
}

.option-label[b-r94pwcyxfy] {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.check-icon[b-r94pwcyxfy] {
    width: 20px;
    height: 20px;
    color: #111827;
}
/* /Pages/SignIn.razor.rz.scp.css */
.signin-shell[b-77nvr1wuoa] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-image: linear-gradient(to bottom, var(--bs-warning) 50%, white 50%);
}

.hero[b-77nvr1wuoa] {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 85%;
}

.card[b-77nvr1wuoa] {
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	border: none;
	width: 85%;
	border-radius: 24px;
}

.divider[b-77nvr1wuoa] {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	color: #666;
	font-size: 13px;
	margin: 16px 0;
}

.divider[b-77nvr1wuoa]::before,
.divider[b-77nvr1wuoa]::after {
	content: "";
	height: 1px;
	background: #e0e0e0;
	flex: 1;
}

.socials[b-77nvr1wuoa] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.btn[b-77nvr1wuoa] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	border-radius: 12px;
	border: 1px solid #dadce0;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	background: #fff;
	color: #333;
}

/* Icon container sizing */
.btn .icon[b-77nvr1wuoa] {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ensure raster/svg icons scale uniformly */
.btn .icon img[b-77nvr1wuoa],
.btn .icon svg[b-77nvr1wuoa] {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.btn-google[b-77nvr1wuoa] {
	background: #fff;
}

.btn-facebook[b-77nvr1wuoa] {
	background: #1877f2;
	color: #fff;
	border-color: #1877f2;
}

.btn-apple[b-77nvr1wuoa] {
	background: #000;
	color: #fff;
	border-color: #000;
}

.btn-line[b-77nvr1wuoa] {
	background: #52B946;
	color: #fff;
	border-color: #52B946;
}

/* Form layout */
.grid-2[b-77nvr1wuoa] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.field[b-77nvr1wuoa] {
	margin-bottom: 12px;
}

/* Base input look to match visual spec */
.input[b-77nvr1wuoa] {
	width: 100%;
	height: 56px;
	border-radius: 14px;
	border: 1px solid #e6e8ec;
	background: #fff;
	padding: 14px 14px;
	font-size: 16px;
	color: #1f2937;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.input[b-77nvr1wuoa]::placeholder {
	color: #9aa3af;
}

.input:focus[b-77nvr1wuoa] {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(42, 139, 234, 0.15);
}

/* Input with inline icon/suffix (calendar/eye) */
.field.input[b-77nvr1wuoa] {
	position: relative;
}

.field.input .icon[b-77nvr1wuoa] {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: #999;
	pointer-events: none;
}

/* When a left icon exists, add left padding */
.field.input .icon+.input[b-77nvr1wuoa] {
	padding-left: 44px;
}

.field.input .suffix[b-77nvr1wuoa] {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	color: #999;
}

.field.input .suffix svg[b-77nvr1wuoa],
.field.input .icon svg[b-77nvr1wuoa] {
	width: 20px;
	height: 20px;
}

/* Phone input with country code selector */
.field.phone[b-77nvr1wuoa] {
	display: flex;
	align-items: stretch;
}

.field.phone .code[b-77nvr1wuoa] {
	display: flex;
	align-items: center;
	padding: 0 12px 0 36px;
	border: 1px solid #e6e8ec;
	border-right: none;
	border-radius: 14px 0 0 14px;
	background: #fff url('/img/flags/gb.svg') no-repeat 10px center / 18px 18px;
}

.field.phone .code select[b-77nvr1wuoa] {
	border: none;
	background: transparent;
	outline: none;
	font-size: 15px;
	appearance: none;
}

.field.phone .input[b-77nvr1wuoa] {
	border-left: none;
	border-radius: 0 14px 14px 0;
	flex: 1 1 auto;
}

button.primary[b-77nvr1wuoa] {
	display: block;
	width: 100%;
	padding: .85rem 2.25rem;
	border: none;
	font-size: 1rem;
	font-weight: 600;
	margin-top: .5rem;
	transition: background .2s ease;
	cursor: pointer;
	border-radius: .6rem;
}

button.primary[b-77nvr1wuoa] {
	background: var(--bs-warning);
	color: #fff;
}

button.primary:hover[b-77nvr1wuoa],
button.primary:focus[b-77nvr1wuoa] {
	background: #e16500;
}

/* Removed id-based rule; use the .date-control class below */

/* Password toggle icon styling */
.toggle-password svg path[b-77nvr1wuoa],
.toggle-password svg circle[b-77nvr1wuoa] {
	stroke: #999;
}

/* Make password eye reliably clickable and aligned */
/* Ensure the floating container is a positioning context */
.form-floating[b-77nvr1wuoa] {
	position: relative;
}

.form-floating .toggle-password[b-77nvr1wuoa],
.form-floating :deep(.toggle-password)[b-77nvr1wuoa] {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	z-index: 3;
}

/* Add extra right padding when using pe-5 on the input */
.form-floating :deep(.form-control.pe-5)[b-77nvr1wuoa] {
	padding-right: 3rem;
}

/* Combined phone group */
.phone-combined[b-77nvr1wuoa] {
	display: flex;
	align-items: center;
	height: 56px;
	border: 1px solid #e6e8ec;
	border-radius: 14px;
	background: #fff;
}

.phone-combined:focus-within[b-77nvr1wuoa] {
	box-shadow: 0 0 0 3px rgba(42, 139, 234, 0.15);
	border-color: var(--bs-primary);
}

.phone-combined .code[b-77nvr1wuoa] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px 0 12px;
	border-right: 1px solid #e6e8ec;
}

.phone-combined .flag[b-77nvr1wuoa] {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.phone-combined .flag img[b-77nvr1wuoa] {
	width: 20px;
	height: 20px;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}

.btn-link[b-77nvr1wuoa] {
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	width: 50px;
}

/* Custom code chooser */
.code-toggle[b-77nvr1wuoa] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 15px;
	cursor: pointer;
}

.code-toggle .chev[b-77nvr1wuoa] {
	font-size: 14px;
	color: #6b7280;
}

.code-menu[b-77nvr1wuoa] {
	position: absolute;
	z-index: 5;
	margin-top: 8px;
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	padding: 6px 0;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.code-menu .form-control.form-control-sm[b-77nvr1wuoa] {
	height: 36px;
	border-radius: 10px;
}

.code-menu .no-results[b-77nvr1wuoa] {
	font-size: 13px;
}

.phone-combined[b-77nvr1wuoa] {
	position: relative;
}

/* Removed id-based fallbacks; ::deep selectors handle child inputs */

.code-menu li[b-77nvr1wuoa] {
	list-style: none;
}

.code-item[b-77nvr1wuoa] {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
}

.code-item:hover[b-77nvr1wuoa] {
	background: #f7f7f7;
}

.code-item img[b-77nvr1wuoa] {
	width: 18px;
	height: 18px;
	border-radius: 2px;
}

.form-control[b-77nvr1wuoa],
.form-floating>.form-control[b-77nvr1wuoa],
.form-floating>.form-control-plaintext[b-77nvr1wuoa],
.form-floating>.form-select[b-77nvr1wuoa] {
	border-radius: 14px;
	border-color: #EDF1F3;
}

.phone-input.form-control[b-77nvr1wuoa] {
	border: 0;
	height: 100%;
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	padding-left: 14px;
}

.phone-input.form-control:focus[b-77nvr1wuoa] {
	box-shadow: none;
}

input#dob[b-77nvr1wuoa] {
	height: 58px;
}

.date-field .suffix[b-77nvr1wuoa] {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	pointer-events: none;
}
/* /Pages/SignUp.razor.rz.scp.css */
.signin-shell[b-ezu1wk8fxu] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-image: linear-gradient(to bottom, var(--bs-warning) 50%, white 50%);
}

.hero[b-ezu1wk8fxu] {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 85%;
}

.card[b-ezu1wk8fxu] {
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	border: none;
	width: 85%;
	border-radius: 24px;
}

.divider[b-ezu1wk8fxu] {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	color: #666;
	font-size: 13px;
	margin: 16px 0;
}

.divider[b-ezu1wk8fxu]::before,
.divider[b-ezu1wk8fxu]::after {
	content: "";
	height: 1px;
	background: #e0e0e0;
	flex: 1;
}

.socials[b-ezu1wk8fxu] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.btn[b-ezu1wk8fxu] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 50px;
	border-radius: 12px;
	border: 1px solid #dadce0;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	background: #fff;
	color: #333;
}

/* Icon container sizing */
.btn .icon[b-ezu1wk8fxu] {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ensure raster/svg icons scale uniformly */
.btn .icon img[b-ezu1wk8fxu],
.btn .icon svg[b-ezu1wk8fxu] {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.btn-google[b-ezu1wk8fxu] {
	background: #fff;
}

.btn-facebook[b-ezu1wk8fxu] {
	background: #1877f2;
	color: #fff;
	border-color: #1877f2;
}

.btn-apple[b-ezu1wk8fxu] {
	background: #000;
	color: #fff;
	border-color: #000;
}

.btn-line[b-ezu1wk8fxu] {
	background: #52B946;
	color: #fff;
	border-color: #52B946;
}

/* Form layout */
.grid-2[b-ezu1wk8fxu] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.field[b-ezu1wk8fxu] {
	margin-bottom: 12px;
}

/* Base input look to match visual spec */
.input[b-ezu1wk8fxu] {
	width: 100%;
	height: 56px;
	border-radius: 14px;
	border: 1px solid #e6e8ec;
	background: #fff;
	padding: 14px 14px;
	font-size: 16px;
	color: #1f2937;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.input[b-ezu1wk8fxu]::placeholder {
	color: #9aa3af;
}

.input:focus[b-ezu1wk8fxu] {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(42, 139, 234, 0.15);
}

/* Input with inline icon/suffix (calendar/eye) */
.field.input[b-ezu1wk8fxu] {
	position: relative;
}

.field.input .icon[b-ezu1wk8fxu] {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: #999;
	pointer-events: none;
}

/* When a left icon exists, add left padding */
.field.input .icon+.input[b-ezu1wk8fxu] {
	padding-left: 44px;
}

.field.input .suffix[b-ezu1wk8fxu] {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	color: #999;
}

.field.input .suffix svg[b-ezu1wk8fxu],
.field.input .icon svg[b-ezu1wk8fxu] {
	width: 20px;
	height: 20px;
}

/* Phone input with country code selector */
.field.phone[b-ezu1wk8fxu] {
	display: flex;
	align-items: stretch;
}

.field.phone .code[b-ezu1wk8fxu] {
	display: flex;
	align-items: center;
	padding: 0 12px 0 36px;
	border: 1px solid #e6e8ec;
	border-right: none;
	border-radius: 14px 0 0 14px;
	background: #fff url('/img/flags/gb.svg') no-repeat 10px center / 18px 18px;
}

.field.phone .code select[b-ezu1wk8fxu] {
	border: none;
	background: transparent;
	outline: none;
	font-size: 15px;
	appearance: none;
}

.field.phone .input[b-ezu1wk8fxu] {
	border-left: none;
	border-radius: 0 14px 14px 0;
	flex: 1 1 auto;
}

button.primary[b-ezu1wk8fxu] {
	display: block;
	width: 100%;
	padding: .85rem 2.25rem;
	border: none;
	font-size: 1rem;
	font-weight: 600;
	margin-top: .5rem;
	transition: background .2s ease;
	cursor: pointer;
	border-radius: .6rem;
}

button.primary[b-ezu1wk8fxu] {
	background: var(--bs-warning);
	color: #fff;
}

button.primary:hover[b-ezu1wk8fxu],
button.primary:focus[b-ezu1wk8fxu] {
	background: #e16500;
}

/* Removed id-based rule; use the .date-control class below */

/* Password toggle icon styling */
.toggle-password svg path[b-ezu1wk8fxu],
.toggle-password svg circle[b-ezu1wk8fxu] {
	stroke: #999;
}

/* Make password eye reliably clickable and aligned */
/* Ensure the floating container is a positioning context */
.form-floating[b-ezu1wk8fxu] {
	position: relative;
}

.form-floating .toggle-password[b-ezu1wk8fxu],
.form-floating :deep(.toggle-password)[b-ezu1wk8fxu] {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	z-index: 3;
}

/* Add extra right padding when using pe-5 on the input */
.form-floating :deep(.form-control.pe-5)[b-ezu1wk8fxu] {
	padding-right: 3rem;
}

/* Combined phone group */
.phone-combined[b-ezu1wk8fxu] {
	display: flex;
	align-items: center;
	height: 56px;
	border: 1px solid #e6e8ec;
	border-radius: 14px;
	background: #fff;
}

.phone-combined:focus-within[b-ezu1wk8fxu] {
	box-shadow: 0 0 0 3px rgba(42, 139, 234, 0.15);
	border-color: var(--bs-primary);
}

.phone-combined .code[b-ezu1wk8fxu] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px 0 12px;
	border-right: 1px solid #e6e8ec;
}

.phone-combined .flag[b-ezu1wk8fxu] {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.phone-combined .flag img[b-ezu1wk8fxu] {
	width: 20px;
	height: 20px;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}

.btn-link[b-ezu1wk8fxu] {
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	width: 50px;
}

/* Custom code chooser */
.code-toggle[b-ezu1wk8fxu] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 15px;
	cursor: pointer;
}

.code-toggle .chev[b-ezu1wk8fxu] {
	font-size: 14px;
	color: #6b7280;
}

.code-menu[b-ezu1wk8fxu] {
	position: absolute;
	z-index: 5;
	margin-top: 8px;
	background: #fff;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	padding: 6px 0;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.code-menu .form-control.form-control-sm[b-ezu1wk8fxu] {
	height: 36px;
	border-radius: 10px;
}

.code-menu .no-results[b-ezu1wk8fxu] {
	font-size: 13px;
}

.phone-combined[b-ezu1wk8fxu] {
	position: relative;
}

/* Removed id-based fallbacks; ::deep selectors handle child inputs */

.code-menu li[b-ezu1wk8fxu] {
	list-style: none;
}

.code-item[b-ezu1wk8fxu] {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
}

.code-item:hover[b-ezu1wk8fxu] {
	background: #f7f7f7;
}

.code-item img[b-ezu1wk8fxu] {
	width: 18px;
	height: 18px;
	border-radius: 2px;
}

.form-control[b-ezu1wk8fxu],
.form-floating>.form-control[b-ezu1wk8fxu],
.form-floating>.form-control-plaintext[b-ezu1wk8fxu],
.form-floating>.form-select[b-ezu1wk8fxu] {
	border-radius: 14px;
	border-color: #EDF1F3;
}

.phone-input.form-control[b-ezu1wk8fxu] {
	border: 0;
	height: 100%;
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	padding-left: 14px;
}

.phone-input.form-control:focus[b-ezu1wk8fxu] {
	box-shadow: none;
}

input#dob[b-ezu1wk8fxu] {
	height: 58px;
}

.date-field .suffix[b-ezu1wk8fxu] {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	pointer-events: none;
}
/* /Pages/TodayProgress.razor.rz.scp.css */
/* Today Progress Page Styles */
.progress-page[b-hur9k0899x] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    
    margin: 0 auto;
    background: #fff;
}

/* Header */
.page-header[b-hur9k0899x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}

.back-btn[b-hur9k0899x] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.back-btn svg[b-hur9k0899x] {
    width: 24px;
    height: 24px;
    color: #374151;
}

.page-title[b-hur9k0899x] {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.header-spacer[b-hur9k0899x] {
    width: 40px;
}

/* Content */
.content[b-hur9k0899x] {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
}

/* Form Sections */
.form-section[b-hur9k0899x] {
    margin-bottom: 24px;
}

.section-label[b-hur9k0899x] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.input-row[b-hur9k0899x] {
    display: flex;
    gap: 12px;
}

.form-input[b-hur9k0899x] {
    flex: 1;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    color: #111827;
    outline: none;
    transition: border-color 0.2s;
}

.form-input:focus[b-hur9k0899x] {
    border-color: #f97316;
}

.form-input[b-hur9k0899x]::placeholder {
    color: #9ca3af;
}

.flex-1[b-hur9k0899x] {
    flex: 1;
}

/* Unit Selector */
.unit-selector[b-hur9k0899x] {
    position: relative;
    min-width: 80px;
}

.unit-select[b-hur9k0899x] {
    width: 100%;
    padding: 14px 32px 14px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    color: #111827;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.unit-select:focus[b-hur9k0899x] {
    border-color: #f97316;
}

.select-arrow[b-hur9k0899x] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #6b7280;
    pointer-events: none;
}

/* Time Input */
.time-input[b-hur9k0899x] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
}

.time-input .form-input[b-hur9k0899x] {
    flex: 1;
    padding: 0;
    border: none;
    font-size: 16px;
    min-width: 40px;
}

.time-input .form-input:focus[b-hur9k0899x] {
    border: none;
}

.time-label[b-hur9k0899x] {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

/* Upload Area */
.upload-area[b-hur9k0899x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: #fff;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-area:hover[b-hur9k0899x] {
    border-color: #f97316;
    background: #fffbeb;
}

.upload-icon[b-hur9k0899x] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.upload-icon svg[b-hur9k0899x] {
    width: 32px;
    height: 32px;
    color: #9ca3af;
}

.upload-text[b-hur9k0899x] {
    font-size: 14px;
    font-weight: 600;
    color: #f97316;
    margin-bottom: 4px;
}

.upload-hint[b-hur9k0899x] {
    font-size: 12px;
    color: #9ca3af;
}

.upload-success[b-hur9k0899x] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #059669;
}

.upload-success svg[b-hur9k0899x] {
    width: 24px;
    height: 24px;
}

/* Bottom Action */
.bottom-action[b-hur9k0899x] {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
}

.confirm-btn[b-hur9k0899x] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-btn:hover[b-hur9k0899x] {
    background: linear-gradient(135deg, #ea580c, #dc2626);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 360px) {
    .input-row[b-hur9k0899x] {
        flex-direction: column;
        gap: 10px;
    }

    .time-input[b-hur9k0899x] {
        width: 100%;
    }
}
/* /Shared/BottomNav.razor.rz.scp.css */
.tabbar[b-hmgx2txrow] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 1000;
    padding: 0.5rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
}

.tabbar a[b-hmgx2txrow] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    text-decoration: none;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: #667085;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.tabbar a i[b-hmgx2txrow] {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.tabbar a.active[b-hmgx2txrow],
.tabbar a:hover[b-hmgx2txrow] {
    color: #FF7A00;
}

.tabbar a.active i[b-hmgx2txrow] {
    transform: scale(1.1);
}

@media all and (display-mode: standalone),
all and (display-mode: fullscreen) {
    .tabbar[b-hmgx2txrow] {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}
/* /Shared/FeedPostModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-506kryyacg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.show[b-506kryyacg] {
    opacity: 1;
    visibility: visible;
}

/* Modal Content */
.modal-content[b-506kryyacg] {
    background: #fff;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

.modal-overlay.show .modal-content[b-506kryyacg] {
    transform: translateY(0);
}

/* Modal Header */
.modal-header[b-506kryyacg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.user-info[b-506kryyacg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar[b-506kryyacg] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-details .name[b-506kryyacg] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1d2730;
}

.user-details .meta[b-506kryyacg] {
    font-size: 0.75rem;
    color: #6c7b85;
}

.close-btn[b-506kryyacg] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f2f4f7;
    color: #6c7b85;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.close-btn:hover[b-506kryyacg] {
    background: #e5e7eb;
    color: #1d2730;
}

/* Modal Body */
.modal-body[b-506kryyacg] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.status-text[b-506kryyacg] {
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 1rem;
    word-wrap: break-word;
}

.post-image[b-506kryyacg] {
    width: calc(100% + 2.5rem);
    margin-left: -1.25rem;
    margin-bottom: 1rem;
}

.post-image img[b-506kryyacg] {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    display: block;
}

/* Activity Metrics */
.activity-metrics[b-506kryyacg] {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, #FFF5EC 0%, #FFF0E1 100%);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.metric[b-506kryyacg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.metric-icon[b-506kryyacg] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.metric-icon.distance[b-506kryyacg] {
    color: #FF7A00;
}

.metric-icon.time[b-506kryyacg] {
    color: #3B82F6;
}

.metric-icon.pace[b-506kryyacg] {
    color: #8B5CF6;
}

.metric-data[b-506kryyacg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.metric-data .value[b-506kryyacg] {
    font-size: 1rem;
    font-weight: 700;
    color: #1d2730;
}

.metric-data .label[b-506kryyacg] {
    font-size: 0.65rem;
    color: #6c7b85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Actions Bar */
.actions-bar[b-506kryyacg] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid #edf0f3;
    border-bottom: 1px solid #edf0f3;
    margin-bottom: 1rem;
}

.action-btn[b-506kryyacg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    background: #f9fafb;
    border: none;
    border-radius: 10px;
    color: #6c7b85;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-506kryyacg] {
    background: #f2f4f7;
    color: #1d2730;
}

.action-btn.liked[b-506kryyacg] {
    background: #FEE2E2;
    color: #DC2626;
}

.action-btn.share[b-506kryyacg] {
    flex: 0.8;
}

/* Comments Section */
.comments-section[b-506kryyacg] {
    padding-top: 0.5rem;
}

.comments-title[b-506kryyacg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d2730;
    margin: 0 0 0.75rem;
}

.comments-list[b-506kryyacg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment[b-506kryyacg] {
    display: flex;
    gap: 0.65rem;
    padding: 0.5rem;
    border-radius: 12px;
    transition: background 0.2s;
}

.comment:hover[b-506kryyacg] {
    background: #f9fafb;
}

.comment-avatar[b-506kryyacg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-content[b-506kryyacg] {
    flex: 1;
    min-width: 0;
}

.comment-header[b-506kryyacg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.comment-user[b-506kryyacg] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1d2730;
}

.comment-time[b-506kryyacg] {
    font-size: 0.65rem;
    color: #9ca3af;
}

.comment-text[b-506kryyacg] {
    font-size: 0.8rem;
    color: #4b5563;
    line-height: 1.4;
    margin: 0;
    word-wrap: break-word;
}

.no-comments[b-506kryyacg] {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
}

.no-comments p[b-506kryyacg] {
    margin: 0;
    font-size: 0.85rem;
}

/* Modal Footer - Comment Input */
.modal-footer[b-506kryyacg] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #edf0f3;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.comment-input-wrapper[b-506kryyacg] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #f2f4f7;
    border-radius: 24px;
    padding: 0.5rem 0.75rem;
}

.input-avatar[b-506kryyacg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-input[b-506kryyacg] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: #1d2730;
    outline: none;
}

.comment-input[b-506kryyacg]::placeholder {
    color: #9ca3af;
}

.send-btn[b-506kryyacg] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #FF7A00;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled)[b-506kryyacg] {
    background: #e66d00;
    transform: scale(1.05);
}

.send-btn:disabled[b-506kryyacg] {
    background: #d1d5db;
    cursor: not-allowed;
}

/* Desktop styles */
@media (min-width: 640px) {
    .modal-overlay[b-506kryyacg] {
        align-items: center;
    }

    .modal-content[b-506kryyacg] {
        border-radius: 24px;
        max-height: 85vh;
        margin: 2rem;
    }

    .modal-overlay.show .modal-content[b-506kryyacg] {
        animation: slideUp-b-506kryyacg 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes slideUp-b-506kryyacg {
        from {
            transform: translateY(30px);
            opacity: 0.8;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}