@import '_content/TrackerShared/TrackerShared.df2dvjdx0i.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-rbwz5hgu9h] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-rbwz5hgu9h] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Modals/AddFoodToDiaryModal.razor.rz.scp.css */
/* Main Modal Layout */
.modal-backdrop[b-u5uge5ywd7] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overscroll-behavior: contain;
}

.modal-dialog[b-u5uge5ywd7] {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.modal-content[b-u5uge5ywd7] {
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-light);
}

.modal-content.list-view[b-u5uge5ywd7] {
    max-height: 85vh;
}

.modal-content.detail-view[b-u5uge5ywd7] {
    max-height: fit-content;
}

/* Header */
.modal-header[b-u5uge5ywd7] {
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--card-bg);
    z-index: 10;
}

.header-text h2[b-u5uge5ywd7] {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
}

.subtitle[b-u5uge5ywd7] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: block;
}

.btn-close[b-u5uge5ywd7] {
    background: transparent;
    border: none;
    font-size: 1.35rem;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

@media (hover: hover) {
    .btn-close:hover[b-u5uge5ywd7] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

/* Search */
.search-container[b-u5uge5ywd7] {
    padding: 0 1.5rem 1rem;
}

.search-box[b-u5uge5ywd7] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-u5uge5ywd7] {
    position: absolute;
    left: 1rem;
    color: var(--text-tertiary);
    font-size: 1.25rem;
}

.search-input[b-u5uge5ywd7] {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 1.0625rem;
    transition: all 0.2s;
}

.search-input:focus[b-u5uge5ywd7] {
    background: var(--card-bg);
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.search-input[b-u5uge5ywd7]::placeholder {
    color: var(--text-tertiary);
}

.btn-clear-search[b-u5uge5ywd7] {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    font-size: 1.125rem;
}

@media (hover: hover) {
    .btn-clear-search:hover[b-u5uge5ywd7] {
        color: var(--text-secondary);
    }
}

/* Quick Actions */
.quick-actions[b-u5uge5ywd7] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.625rem;
    padding: 0 1.5rem 1rem;
}

.action-btn[b-u5uge5ywd7] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.875rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

@media (hover: hover) {
    .action-btn:hover[b-u5uge5ywd7] {
        background: var(--card-bg);
        border-color: var(--accent-primary);
        transform: translateY(-1px);
    }
}

.icon-circle[b-u5uge5ywd7] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.action-btn.scan .icon-circle[b-u5uge5ywd7] {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-primary);
}

.action-btn.create .icon-circle[b-u5uge5ywd7] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.icon-circle .bi[b-u5uge5ywd7] {
    font-size: 1.25rem;
}

.action-btn > span:last-child[b-u5uge5ywd7] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Scan Button Loading States */
.action-btn.scan.processing .icon-circle[b-u5uge5ywd7] {
    background: rgba(var(--accent-rgb), 0.15);
}

.action-btn.scan.processing .spinner-border[b-u5uge5ywd7] {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
    color: var(--accent-primary);
}

.action-btn.scan.has-result[b-u5uge5ywd7] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(var(--accent-rgb), 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.3);
    animation: scan-result-pulse-b-u5uge5ywd7 2s ease-in-out infinite;
}

.action-btn.scan.has-result .icon-circle[b-u5uge5ywd7] {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

@keyframes scan-result-pulse-b-u5uge5ywd7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

.action-btn .spinner-border[b-u5uge5ywd7] {
    animation: spinner-border-b-u5uge5ywd7 0.75s linear infinite;
}

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

/* Tabs */
.tabs-container[b-u5uge5ywd7] {
    padding: 0 1.5rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1rem;
}

.tabs-container[b-u5uge5ywd7]::-webkit-scrollbar {
    display: none;
}

.tab-btn[b-u5uge5ywd7] {
    padding: 0.625rem 1.125rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

@media (hover: hover) {
    .tab-btn:hover[b-u5uge5ywd7] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

.tab-btn.active[b-u5uge5ywd7] {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* List Body */
.modal-body.list-body[b-u5uge5ywd7] {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
    min-height: 200px;
    max-height: 45vh;
}

/* Empty & Loading States */
.empty-state[b-u5uge5ywd7],
.loading-state[b-u5uge5ywd7] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    text-align: center;
    min-height: 150px;
}

.empty-icon[b-u5uge5ywd7] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--bg-tertiary);
}

.empty-state p[b-u5uge5ywd7] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-sub[b-u5uge5ywd7] {
    font-size: 1rem;
}

.spinner[b-u5uge5ywd7] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-u5uge5ywd7 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Results List */
.results-list[b-u5uge5ywd7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-item[b-u5uge5ywd7] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .result-item:hover[b-u5uge5ywd7] {
        background: var(--card-bg);
        border-color: var(--accent-primary);
    }
}

.item-icon[b-u5uge5ywd7] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.item-icon.food[b-u5uge5ywd7] {
    background: rgba(255, 166, 0, 0.1);
    color: orange;
}

.item-icon.recipe[b-u5uge5ywd7] {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.item-icon.meal[b-u5uge5ywd7] {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.item-details[b-u5uge5ywd7] {
    flex: 1;
    min-width: 0;
}

.item-name[b-u5uge5ywd7] {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sub[b-u5uge5ywd7] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.btn-add-indicator[b-u5uge5ywd7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--border-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (hover: hover) {
    .result-item:hover .btn-add-indicator[b-u5uge5ywd7] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: white;
    }
}

/* ================================
   DETAIL VIEW - Compact Design
   ================================ */

.detail-view[b-u5uge5ywd7] {
    background: var(--card-bg);
}

.detail-header[b-u5uge5ywd7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.btn-back[b-u5uge5ywd7] {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-back:hover[b-u5uge5ywd7] {
        background: var(--bg-tertiary);
    }
}

.detail-title[b-u5uge5ywd7] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.detail-icon[b-u5uge5ywd7] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.detail-icon.food[b-u5uge5ywd7] {
    background: rgba(255, 166, 0, 0.1);
    color: orange;
}

.detail-icon.recipe[b-u5uge5ywd7] {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.detail-icon.meal[b-u5uge5ywd7] {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.detail-title h3[b-u5uge5ywd7] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-header .btn-close[b-u5uge5ywd7] {
    flex-shrink: 0;
}

/* Detail Body */
.detail-body[b-u5uge5ywd7] {
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Calorie Hero */
.calorie-hero[b-u5uge5ywd7] {
    text-align: center;
    padding: 1.25rem 0;
}

.calorie-value[b-u5uge5ywd7] {
    font-size: 4rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1;
}

.calorie-unit[b-u5uge5ywd7] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 0.375rem;
}

/* Macro Pills */
.macro-pills[b-u5uge5ywd7] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.macro-pill[b-u5uge5ywd7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 14px;
    min-width: 90px;
}

.macro-pill.protein[b-u5uge5ywd7] {
    background: rgba(239, 68, 68, 0.08);
}

.macro-pill.carbs[b-u5uge5ywd7] {
    background: rgba(59, 130, 246, 0.08);
}

.macro-pill.fat[b-u5uge5ywd7] {
    background: rgba(245, 158, 11, 0.08);
}

.macro-value[b-u5uge5ywd7] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.macro-pill.protein .macro-value[b-u5uge5ywd7] {
    color: #EF4444;
}

.macro-pill.carbs .macro-value[b-u5uge5ywd7] {
    color: #3B82F6;
}

.macro-pill.fat .macro-value[b-u5uge5ywd7] {
    color: #F59E0B;
}

.macro-label[b-u5uge5ywd7] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.25rem;
}

/* Controls Section */
.controls-section[b-u5uge5ywd7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-tertiary);
    padding: 1.25rem;
    border-radius: 16px;
}

.control-row[b-u5uge5ywd7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.control-row label[b-u5uge5ywd7] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.control-select[b-u5uge5ywd7] {
    flex: 1;
    max-width: 220px;
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

@media (hover: hover) {
    .control-select:hover[b-u5uge5ywd7] {
        border-color: var(--accent-primary);
    }
}

.control-select:focus[b-u5uge5ywd7] {
    outline: none;
    border-color: var(--accent-primary);
}

.servings-control[b-u5uge5ywd7] {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border-radius: 10px;
    padding: 0.375rem;
    border: 1px solid var(--border-light);
}

.btn-step[b-u5uge5ywd7] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-step:hover[b-u5uge5ywd7] {
        background: var(--accent-primary);
        color: white;
    }
}

.servings-input[b-u5uge5ywd7] {
    width: 70px;
    border: none;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
}

.servings-input:focus[b-u5uge5ywd7] {
    outline: none;
}

/* Hide number input spinners */
.servings-input[b-u5uge5ywd7]::-webkit-outer-spin-button,
.servings-input[b-u5uge5ywd7]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.servings-input[type=number][b-u5uge5ywd7] {
    -moz-appearance: textfield;
}

/* Footer */
.detail-footer[b-u5uge5ywd7] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-light);
}

.btn-confirm-add[b-u5uge5ywd7] {
    width: 100%;
    padding: 1.125rem;
    border: none;
    border-radius: 14px;
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(124, 105, 239, 0.3);
}

@media (hover: hover) {
    .btn-confirm-add:hover[b-u5uge5ywd7] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(124, 105, 239, 0.4);
    }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (768px and below) */
@media (max-width: 767px) {
    .modal-dialog[b-u5uge5ywd7] {
        max-width: 95%;
    }

    .modal-body.list-body[b-u5uge5ywd7] {
        max-height: 50vh;
    }

    /* Larger touch targets */
    .btn-step[b-u5uge5ywd7] {
        width: 44px;
        height: 44px;
    }

    .servings-input[b-u5uge5ywd7] {
        width: 80px;
        font-size: 1.375rem;
    }

    .btn-close[b-u5uge5ywd7] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .btn-back[b-u5uge5ywd7] {
        width: 48px;
        height: 48px;
    }

    .tab-btn[b-u5uge5ywd7] {
        padding: 0.625rem 1.125rem;
        min-height: 48px;
    }

    .result-item[b-u5uge5ywd7] {
        padding: 1rem;
        min-height: 64px;
    }

    .item-icon[b-u5uge5ywd7] {
        width: 48px;
        height: 48px;
    }

    .btn-add-indicator[b-u5uge5ywd7] {
        width: 40px;
        height: 40px;
    }
}

/* Phone (480px and below) - Fullscreen modal */
@media (max-width: 480px) {
    .modal-backdrop[b-u5uge5ywd7] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-dialog[b-u5uge5ywd7] {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        padding: 0;
    }

    .modal-content[b-u5uge5ywd7] {
        border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
    }

    .modal-content.list-view[b-u5uge5ywd7] {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
    }

    .modal-content.detail-view[b-u5uge5ywd7] {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
    }

    .modal-header[b-u5uge5ywd7] {
        padding: 1.25rem;
    }

    .header-text h2[b-u5uge5ywd7] {
        font-size: 1.5rem;
    }

    .subtitle[b-u5uge5ywd7] {
        font-size: 0.9375rem;
    }

    .search-container[b-u5uge5ywd7] {
        padding: 0 1.25rem 0.75rem;
    }

    .search-input[b-u5uge5ywd7] {
        font-size: 1rem;
        padding: 0.875rem 0.875rem 0.875rem 2.75rem;
    }

    .quick-actions[b-u5uge5ywd7] {
        padding: 0 1.25rem 0.75rem;
        gap: 0.5rem;
    }

    .action-btn[b-u5uge5ywd7] {
        padding: 0.75rem 0.375rem;
    }

    .icon-circle[b-u5uge5ywd7] {
        width: 36px;
        height: 36px;
    }

    .icon-circle .bi[b-u5uge5ywd7] {
        font-size: 1.125rem;
    }

    .action-btn > span:last-child[b-u5uge5ywd7] {
        font-size: 0.8125rem;
    }

    .tabs-container[b-u5uge5ywd7] {
        padding: 0 1.25rem;
    }

    .tab-btn[b-u5uge5ywd7] {
        font-size: 0.9375rem;
        padding: 0.5rem 1rem;
    }

    .modal-body.list-body[b-u5uge5ywd7] {
        padding: 0 1.25rem 1.25rem;
        max-height: none;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-body[b-u5uge5ywd7] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .detail-footer[b-u5uge5ywd7] {
        margin-top: auto;
    }

    .item-name[b-u5uge5ywd7] {
        font-size: 1rem;
    }

    .item-sub[b-u5uge5ywd7] {
        font-size: 0.875rem;
    }

    .calorie-value[b-u5uge5ywd7] {
        font-size: 3.25rem;
    }

    .macro-pills[b-u5uge5ywd7] {
        gap: 0.5rem;
    }

    .macro-pill[b-u5uge5ywd7] {
        min-width: 70px;
        padding: 0.625rem 0.875rem;
    }

    .macro-value[b-u5uge5ywd7] {
        font-size: 1.125rem;
    }

    .macro-label[b-u5uge5ywd7] {
        font-size: 0.75rem;
    }

    .detail-body[b-u5uge5ywd7] {
        padding: 1.5rem 1.25rem;
    }

    .controls-section[b-u5uge5ywd7] {
        padding: 1rem;
    }

    .control-row[b-u5uge5ywd7] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .control-row label[b-u5uge5ywd7] {
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .control-select[b-u5uge5ywd7] {
        max-width: 100%;
        font-size: 1rem;
        padding: 0.75rem 2rem 0.75rem 1rem;
    }

    .servings-control[b-u5uge5ywd7] {
        justify-content: center;
    }

    .detail-footer[b-u5uge5ywd7] {
        padding: 1rem 1.25rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .btn-confirm-add[b-u5uge5ywd7] {
        padding: 1.125rem;
        font-size: 1.0625rem;
    }
}

/* Small phone (380px and below) */
@media (max-width: 379px) {
    .header-text h2[b-u5uge5ywd7] {
        font-size: 1.375rem;
    }

    .subtitle[b-u5uge5ywd7] {
        font-size: 0.875rem;
    }

    .quick-actions[b-u5uge5ywd7] {
        grid-template-columns: 1fr 1fr;
    }

    .action-btn.create[b-u5uge5ywd7] {
        grid-column: span 2;
    }

    .calorie-value[b-u5uge5ywd7] {
        font-size: 2.75rem;
    }

    .macro-pill[b-u5uge5ywd7] {
        min-width: 65px;
        padding: 0.5rem 0.75rem;
    }

    .macro-value[b-u5uge5ywd7] {
        font-size: 1rem;
    }

    .item-name[b-u5uge5ywd7] {
        font-size: 0.9375rem;
    }

    .item-sub[b-u5uge5ywd7] {
        font-size: 0.8125rem;
    }
}
/* /Components/Modals/ConfirmDeleteModal.razor.rz.scp.css */
/* Modal Layout */
.modal-backdrop[b-vfrlclp9oq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    animation: fadeIn-b-vfrlclp9oq 0.2s ease-in-out;
    overscroll-behavior: contain;
}

.confirm-dialog[b-vfrlclp9oq] {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-vfrlclp9oq 0.3s ease-out;
}

@keyframes fadeIn-b-vfrlclp9oq {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-vfrlclp9oq {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.modal-header[b-vfrlclp9oq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-vfrlclp9oq] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close[b-vfrlclp9oq] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-close:hover[b-vfrlclp9oq] {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
}

.btn-close .bi[b-vfrlclp9oq] {
    font-size: 1.25rem;
}

/* Body */
.modal-body[b-vfrlclp9oq] {
    padding: 1.5rem;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
}

.modal-body p[b-vfrlclp9oq] {
    margin: 0;
}

/* Footer */
.modal-footer[b-vfrlclp9oq] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn[b-vfrlclp9oq] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.btn-secondary[b-vfrlclp9oq] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-vfrlclp9oq] {
        background: var(--bg-tertiary);
    }
}

.btn-danger[b-vfrlclp9oq] {
    background: #ef4444;
    color: white;
}

@media (hover: hover) {
    .btn-danger:hover[b-vfrlclp9oq] {
        background: #dc2626;
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-backdrop[b-vfrlclp9oq] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .confirm-dialog[b-vfrlclp9oq] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-vfrlclp9oq] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-vfrlclp9oq] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-vfrlclp9oq] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-vfrlclp9oq] {
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
    }

    .btn[b-vfrlclp9oq] {
        min-height: 48px;
    }
}
/* /Components/Modals/CreateFoodModal.razor.rz.scp.css */
/* Create Food Modal Styles - Matching TaskModal Design */
.modal-overlay[b-6gl60lrftz] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-6gl60lrftz 0.2s ease-out;
    margin: 0;
    padding: 0;
    overscroll-behavior: contain;
}

@keyframes fadeIn-b-6gl60lrftz {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-6gl60lrftz] {
    position: relative;
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-6gl60lrftz 0.3s ease-out;
    margin: 0;
}

@keyframes slideUp-b-6gl60lrftz {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-6gl60lrftz] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-6gl60lrftz] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-6gl60lrftz] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-6gl60lrftz] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.modal-body[b-6gl60lrftz] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-6gl60lrftz] {
    margin-bottom: 2rem;
}

.form-section:last-child[b-6gl60lrftz] {
    margin-bottom: 0;
}

.section-header[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}

.section-header .bi[b-6gl60lrftz] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-6gl60lrftz] {
    margin-bottom: 1.25rem;
}

.form-group label[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-group label .bi[b-6gl60lrftz] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-6gl60lrftz] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-6gl60lrftz] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(232, 155, 126, 0.1);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-6gl60lrftz] {
        border-color: var(--accent-primary);
    }
}

.field-error[b-6gl60lrftz] {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #dc3545;
}

.form-row[b-6gl60lrftz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-footer[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

.btn[b-6gl60lrftz] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .btn:hover[b-6gl60lrftz] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-6gl60lrftz] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-6gl60lrftz] {
    background: var(--accent-gradient);
    color: var(--accent-contrast);
    box-shadow: var(--accent-glow);
}

@media (hover: hover) {
    .btn-primary:hover[b-6gl60lrftz] {
        background: var(--accent-gradient-reverse);
        box-shadow: var(--accent-glow);
    }
}

.btn-secondary[b-6gl60lrftz] {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-secondary:hover[b-6gl60lrftz] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

/* Section Hint */
.section-hint[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--input-bg);
    border-radius: 6px;
}

.section-hint .bi[b-6gl60lrftz] {
    color: var(--accent-primary);
}

/* Serving Size Suggestions */
.serving-suggestions[b-6gl60lrftz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.serving-chip[b-6gl60lrftz] {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

@media (hover: hover) {
    .serving-chip:hover[b-6gl60lrftz] {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: rgba(232, 155, 126, 0.08);
    }
}

.serving-chip.active[b-6gl60lrftz] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--accent-contrast, #fff);
}

.serving-chip:focus[b-6gl60lrftz] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(232, 155, 126, 0.2);
}

/* Nutrition Grid */
.nutrition-grid[b-6gl60lrftz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .nutrition-grid[b-6gl60lrftz] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Quick Log Section */
.quick-log-section[b-6gl60lrftz] {
    background: var(--input-bg);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px dashed var(--border-color);
}

.quick-log-section .section-header[b-6gl60lrftz] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

.badge-optional[b-6gl60lrftz] {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--border-color);
    color: var(--text-secondary);
    margin-left: auto;
}

.quick-log-explanation[b-6gl60lrftz] {
    margin-bottom: 1rem;
}

.quick-log-explanation p[b-6gl60lrftz] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.quick-log-input[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-log-prefix[b-6gl60lrftz],
.quick-log-equals[b-6gl60lrftz],
.quick-log-suffix[b-6gl60lrftz] {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
}

.quick-log-equals[b-6gl60lrftz] {
    color: var(--text-secondary);
}

.piece-name-input[b-6gl60lrftz] {
    flex: 1;
    min-width: 100px;
    max-width: 140px;
}

.piece-weight-input[b-6gl60lrftz] {
    width: 80px;
}

.quick-log-preview[b-6gl60lrftz] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 6px;
    color: #28a745;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-log-preview .bi[b-6gl60lrftz] {
    font-size: 0.9rem;
}

/* Multiple Quick Log Units */
.quick-log-item[b-6gl60lrftz] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border-color);
}

.quick-log-item:last-of-type[b-6gl60lrftz] {
    border-bottom: none;
    margin-bottom: 0.75rem;
    padding-bottom: 0;
}

.quick-log-input[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-remove-unit[b-6gl60lrftz] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-remove-unit:hover[b-6gl60lrftz] {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }
}

.btn-add-unit[b-6gl60lrftz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px dashed var(--accent-primary);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

@media (hover: hover) {
    .btn-add-unit:hover[b-6gl60lrftz] {
        background: rgba(232, 155, 126, 0.1);
        border-style: solid;
    }
}

/* Optional Fields */
.btn-expand[b-6gl60lrftz] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .btn-expand:hover[b-6gl60lrftz] {
        color: var(--accent-secondary);
        opacity: 0.9;
    }
}

.optional-fields[b-6gl60lrftz] {
    animation: slideDown-b-6gl60lrftz 0.2s ease-out;
}

@keyframes slideDown-b-6gl60lrftz {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet and Phone (768px and below) */
@media (max-width: 767px) {
    .modal-content[b-6gl60lrftz] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-overlay[b-6gl60lrftz] {
        padding: 0;
        touch-action: none;
        align-items: stretch;
    }

    .form-row[b-6gl60lrftz] {
        grid-template-columns: 1fr;
    }

    .modal-header[b-6gl60lrftz] {
        padding: 1.25rem 1.25rem;
        flex-shrink: 0;
    }

    .modal-body[b-6gl60lrftz] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem;
        min-height: 0;
    }

    .modal-footer[b-6gl60lrftz] {
        padding: 1rem 1.25rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
    }

    .close-button[b-6gl60lrftz] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 1.25rem;
    }

    .btn[b-6gl60lrftz] {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }

    .serving-chip[b-6gl60lrftz] {
        min-height: 36px;
        padding: 0.5rem 0.875rem;
    }
}

/* Small phone (480px and below) */
@media (max-width: 479px) {
    .modal-header[b-6gl60lrftz] {
        padding: 1rem;
    }

    .modal-header h3[b-6gl60lrftz] {
        font-size: 1.125rem;
    }

    .modal-body[b-6gl60lrftz] {
        padding: 1rem;
    }

    .modal-footer[b-6gl60lrftz] {
        padding: 0.875rem 1rem;
        padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
    }

    .modal-footer .btn[b-6gl60lrftz] {
        width: 100%;
    }

    .nutrition-grid[b-6gl60lrftz] {
        grid-template-columns: 1fr;
    }

    .form-section[b-6gl60lrftz] {
        margin-bottom: 1.5rem;
    }

    .section-header[b-6gl60lrftz] {
        font-size: 0.938rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .form-group label[b-6gl60lrftz] {
        font-size: 0.813rem;
    }

    .form-control[b-6gl60lrftz] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.75rem;
    }

    .serving-suggestions[b-6gl60lrftz] {
        gap: 0.375rem;
    }

    .serving-chip[b-6gl60lrftz] {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }

    .quick-log-section[b-6gl60lrftz] {
        padding: 1rem;
    }

    .quick-log-input[b-6gl60lrftz] {
        gap: 0.375rem;
    }

    .piece-name-input[b-6gl60lrftz] {
        min-width: 80px;
        max-width: 120px;
    }

    .piece-weight-input[b-6gl60lrftz] {
        width: 70px;
    }

    .btn-add-unit[b-6gl60lrftz] {
        font-size: 0.813rem;
        padding: 0.75rem;
    }
}
/* /Components/Modals/CreateMealModal.razor.rz.scp.css */
.modal-backdrop[b-ez2b0336wu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1100;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog[b-ez2b0336wu] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: auto 0;
    pointer-events: all;
}

.modal-dialog.modal-lg[b-ez2b0336wu] {
    max-width: 800px;
}

.modal-header[b-ez2b0336wu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-ez2b0336wu] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-close[b-ez2b0336wu] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-ez2b0336wu] {
        color: var(--text-primary);
    }
}

.modal-body[b-ez2b0336wu] {
    padding: 1.5rem;
    overflow-y: auto;
}

/* Form Styles */
.form-section[b-ez2b0336wu] {
    margin-bottom: 1.5rem;
}

.section-header[b-ez2b0336wu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title[b-ez2b0336wu] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.form-label[b-ez2b0336wu] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input[b-ez2b0336wu],
.form-select[b-ez2b0336wu] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--body-bg);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-input:focus[b-ez2b0336wu],
.form-select:focus[b-ez2b0336wu] {
    outline: none;
    border-color: var(--accent-primary);
}

/* Foods List */
.empty-foods[b-ez2b0336wu] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--body-bg);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

.foods-list[b-ez2b0336wu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.food-row[b-ez2b0336wu] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.food-fields[b-ez2b0336wu] {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0.5rem;
}

.food-name[b-ez2b0336wu] {
    grid-column: span 1;
}

.food-servings[b-ez2b0336wu],
.food-unit[b-ez2b0336wu],
.food-calories[b-ez2b0336wu] {
    font-size: 0.875rem;
}

.btn-remove[b-ez2b0336wu] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .btn-remove:hover[b-ez2b0336wu] {
        background: var(--hover-bg);
        color: #dc3545;
    }
}

/* Nutrition Summary */
.nutrition-summary[b-ez2b0336wu] {
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.nutrition-item[b-ez2b0336wu] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.nutrition-item:last-child[b-ez2b0336wu] {
    border-bottom: none;
}

.nutrition-label[b-ez2b0336wu] {
    font-weight: 500;
    color: var(--text-secondary);
}

.nutrition-value[b-ez2b0336wu] {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 1.125rem;
}

/* Checkbox */
.checkbox-label[b-ez2b0336wu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"][b-ez2b0336wu] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.checkbox-label span[b-ez2b0336wu] {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

/* Button Styles */
.btn[b-ez2b0336wu] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-sm[b-ez2b0336wu] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-primary[b-ez2b0336wu] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-ez2b0336wu] {
        background: var(--accent-secondary);
    }
}

/* Action Buttons */
.modal-actions[b-ez2b0336wu] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.modal-actions .btn[b-ez2b0336wu] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-actions .btn-secondary[b-ez2b0336wu] {
    background: var(--border-color);
    color: var(--text-primary);
}

@media (hover: hover) {
    .modal-actions .btn-secondary:hover[b-ez2b0336wu] {
        background: var(--text-tertiary);
    }
}

.modal-actions .btn-primary[b-ez2b0336wu] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .modal-actions .btn-primary:hover[b-ez2b0336wu] {
        background: var(--accent-secondary);
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-backdrop[b-ez2b0336wu] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-dialog[b-ez2b0336wu] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-ez2b0336wu] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-ez2b0336wu] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-ez2b0336wu] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-actions[b-ez2b0336wu] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        margin-top: 0;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }

    .modal-actions .btn[b-ez2b0336wu] {
        min-height: 48px;
    }

    .food-fields[b-ez2b0336wu] {
        grid-template-columns: 1fr;
    }

    .food-row[b-ez2b0336wu] {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        background: var(--body-bg);
        border-radius: 8px;
    }

    .btn-remove[b-ez2b0336wu] {
        align-self: flex-end;
    }
}
/* /Components/Modals/CreateRecipeModal.razor.rz.scp.css */
.modal-backdrop[b-c2o9vezehv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1100;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog[b-c2o9vezehv] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: auto 0;
    pointer-events: all;
}

.modal-dialog.modal-lg[b-c2o9vezehv] {
    max-width: 800px;
}

.modal-header[b-c2o9vezehv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-c2o9vezehv] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-close[b-c2o9vezehv] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-c2o9vezehv] {
        color: var(--text-primary);
    }
}

.modal-body[b-c2o9vezehv] {
    padding: 1.5rem;
    overflow-y: auto;
}

/* Form Styles */
.form-section[b-c2o9vezehv] {
    margin-bottom: 1.5rem;
}

.section-header[b-c2o9vezehv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title[b-c2o9vezehv] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.form-label[b-c2o9vezehv] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input[b-c2o9vezehv],
.form-select[b-c2o9vezehv],
.form-textarea[b-c2o9vezehv] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--body-bg);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-input:focus[b-c2o9vezehv],
.form-select:focus[b-c2o9vezehv],
.form-textarea:focus[b-c2o9vezehv] {
    outline: none;
    border-color: var(--accent-primary);
}

.form-textarea[b-c2o9vezehv] {
    resize: vertical;
    font-family: inherit;
}

.form-row[b-c2o9vezehv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-c2o9vezehv] {
    margin-bottom: 1rem;
}

/* Ingredients List */
.empty-ingredients[b-c2o9vezehv] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--body-bg);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

.ingredients-list[b-c2o9vezehv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ingredient-row[b-c2o9vezehv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ingredient-fields[b-c2o9vezehv] {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0.5rem;
}

.ingredient-name[b-c2o9vezehv] {
    grid-column: span 1;
}

.ingredient-quantity[b-c2o9vezehv],
.ingredient-unit[b-c2o9vezehv],
.ingredient-calories[b-c2o9vezehv] {
    font-size: 0.875rem;
}

.btn-remove[b-c2o9vezehv] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .btn-remove:hover[b-c2o9vezehv] {
        background: var(--hover-bg);
        color: #dc3545;
    }
}

/* Nutrition Summary */
.nutrition-summary[b-c2o9vezehv] {
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.nutrition-item[b-c2o9vezehv] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.nutrition-item:last-child[b-c2o9vezehv] {
    border-bottom: none;
}

.nutrition-label[b-c2o9vezehv] {
    font-weight: 500;
    color: var(--text-secondary);
}

.nutrition-value[b-c2o9vezehv] {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 1.125rem;
}

.help-text[b-c2o9vezehv] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Button Styles */
.btn[b-c2o9vezehv] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-sm[b-c2o9vezehv] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-primary[b-c2o9vezehv] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-c2o9vezehv] {
        background: var(--accent-secondary);
    }
}

.btn-expand[b-c2o9vezehv] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .btn-expand:hover[b-c2o9vezehv] {
        opacity: 0.8;
    }
}

.optional-fields[b-c2o9vezehv] {
    animation: slideDown-b-c2o9vezehv 0.2s ease-out;
}

@keyframes slideDown-b-c2o9vezehv {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Action Buttons */
.modal-actions[b-c2o9vezehv] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.modal-actions .btn[b-c2o9vezehv] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-actions .btn-secondary[b-c2o9vezehv] {
    background: var(--border-color);
    color: var(--text-primary);
}

@media (hover: hover) {
    .modal-actions .btn-secondary:hover[b-c2o9vezehv] {
        background: var(--text-tertiary);
    }
}

.modal-actions .btn-primary[b-c2o9vezehv] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .modal-actions .btn-primary:hover[b-c2o9vezehv] {
        background: var(--accent-secondary);
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-backdrop[b-c2o9vezehv] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-dialog[b-c2o9vezehv] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-c2o9vezehv] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-c2o9vezehv] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-c2o9vezehv] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-actions[b-c2o9vezehv] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        margin-top: 0;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }

    .modal-actions .btn[b-c2o9vezehv] {
        min-height: 48px;
    }

    .form-row[b-c2o9vezehv] {
        grid-template-columns: 1fr;
    }

    .ingredient-fields[b-c2o9vezehv] {
        grid-template-columns: 1fr;
    }

    .ingredient-row[b-c2o9vezehv] {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        background: var(--body-bg);
        border-radius: 8px;
    }

    .btn-remove[b-c2o9vezehv] {
        align-self: flex-end;
    }
}
/* /Components/Modals/EditMealModal.razor.rz.scp.css */
.modal-backdrop[b-4piu9ksm2h] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1100;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog[b-4piu9ksm2h] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: auto 0;
    pointer-events: all;
}

.modal-dialog.modal-lg[b-4piu9ksm2h] {
    max-width: 800px;
}

.modal-header[b-4piu9ksm2h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-4piu9ksm2h] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-close[b-4piu9ksm2h] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-4piu9ksm2h] {
        color: var(--text-primary);
    }
}

.modal-body[b-4piu9ksm2h] {
    padding: 1.5rem;
    overflow-y: auto;
}

/* Form Styles */
.form-section[b-4piu9ksm2h] {
    margin-bottom: 1.5rem;
}

.section-header[b-4piu9ksm2h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title[b-4piu9ksm2h] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.form-label[b-4piu9ksm2h] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input[b-4piu9ksm2h],
.form-select[b-4piu9ksm2h] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--body-bg);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-input:focus[b-4piu9ksm2h],
.form-select:focus[b-4piu9ksm2h] {
    outline: none;
    border-color: var(--accent-primary);
}

/* Foods List */
.empty-foods[b-4piu9ksm2h] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--body-bg);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

.foods-list[b-4piu9ksm2h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.food-row[b-4piu9ksm2h] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.food-fields[b-4piu9ksm2h] {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0.5rem;
}

.food-name[b-4piu9ksm2h],
.food-servings[b-4piu9ksm2h],
.food-unit[b-4piu9ksm2h],
.food-calories[b-4piu9ksm2h] {
    min-width: 0;
}

.btn-remove[b-4piu9ksm2h] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.75rem;
    font-size: 1.125rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-remove:hover[b-4piu9ksm2h] {
        color: #dc3545;
    }
}

/* Nutrition Summary */
.nutrition-summary[b-4piu9ksm2h] {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--body-bg);
    border-radius: 8px;
}

.nutrition-item[b-4piu9ksm2h] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nutrition-label[b-4piu9ksm2h] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.nutrition-value[b-4piu9ksm2h] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Checkbox */
.checkbox-label[b-4piu9ksm2h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"][b-4piu9ksm2h] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
}

/* Action Buttons */
.modal-actions[b-4piu9ksm2h] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.modal-actions .btn[b-4piu9ksm2h],
.btn-sm[b-4piu9ksm2h] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sm[b-4piu9ksm2h] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.modal-actions .btn-secondary[b-4piu9ksm2h] {
    background: var(--border-color);
    color: var(--text-primary);
}

@media (hover: hover) {
    .modal-actions .btn-secondary:hover[b-4piu9ksm2h] {
        background: var(--text-tertiary);
    }
}

.modal-actions .btn-primary[b-4piu9ksm2h],
.btn-primary[b-4piu9ksm2h] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .modal-actions .btn-primary:hover[b-4piu9ksm2h],
    .btn-primary:hover[b-4piu9ksm2h] {
        background: var(--accent-secondary);
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-backdrop[b-4piu9ksm2h] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-dialog[b-4piu9ksm2h] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-4piu9ksm2h] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-4piu9ksm2h] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-4piu9ksm2h] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-actions[b-4piu9ksm2h] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        margin-top: 0;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }

    .modal-actions .btn[b-4piu9ksm2h] {
        min-height: 48px;
    }

    .food-fields[b-4piu9ksm2h] {
        grid-template-columns: 1fr;
    }

    .nutrition-summary[b-4piu9ksm2h] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Components/Modals/EditRecipeModal.razor.rz.scp.css */
.modal-backdrop[b-6oe3q06b8i] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1100;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog[b-6oe3q06b8i] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin: auto 0;
    pointer-events: all;
}

.modal-dialog.modal-lg[b-6oe3q06b8i] {
    max-width: 800px;
}

.modal-header[b-6oe3q06b8i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-6oe3q06b8i] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-close[b-6oe3q06b8i] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-6oe3q06b8i] {
        color: var(--text-primary);
    }
}

.modal-body[b-6oe3q06b8i] {
    padding: 1.5rem;
    overflow-y: auto;
}

/* Form Styles */
.form-section[b-6oe3q06b8i] {
    margin-bottom: 1.5rem;
}

.section-header[b-6oe3q06b8i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title[b-6oe3q06b8i] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.form-label[b-6oe3q06b8i] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-input[b-6oe3q06b8i],
.form-select[b-6oe3q06b8i],
.form-textarea[b-6oe3q06b8i] {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--body-bg);
    color: var(--text-primary);
    transition: border-color 0.2s;
    font-family: inherit;
}

.form-input:focus[b-6oe3q06b8i],
.form-select:focus[b-6oe3q06b8i],
.form-textarea:focus[b-6oe3q06b8i] {
    outline: none;
    border-color: var(--accent-primary);
}

.form-textarea[b-6oe3q06b8i] {
    resize: vertical;
    min-height: 100px;
}

.form-row[b-6oe3q06b8i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-6oe3q06b8i] {
    margin-bottom: 1rem;
}

/* Ingredients List */
.empty-ingredients[b-6oe3q06b8i] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--body-bg);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
}

.ingredients-list[b-6oe3q06b8i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ingredient-row[b-6oe3q06b8i] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.ingredient-fields[b-6oe3q06b8i] {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0.5rem;
}

.ingredient-name[b-6oe3q06b8i] {
    min-width: 0;
}

.ingredient-quantity[b-6oe3q06b8i],
.ingredient-unit[b-6oe3q06b8i],
.ingredient-calories[b-6oe3q06b8i] {
    min-width: 0;
}

.btn-remove[b-6oe3q06b8i] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.75rem;
    font-size: 1.125rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-remove:hover[b-6oe3q06b8i] {
        color: #dc3545;
    }
}

/* Nutrition Summary */
.nutrition-summary[b-6oe3q06b8i] {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--body-bg);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.nutrition-item[b-6oe3q06b8i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nutrition-label[b-6oe3q06b8i] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.nutrition-value[b-6oe3q06b8i] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.help-text[b-6oe3q06b8i] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Optional Fields */
.btn-expand[b-6oe3q06b8i] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .btn-expand:hover[b-6oe3q06b8i] {
        opacity: 0.8;
    }
}

.optional-fields[b-6oe3q06b8i] {
    animation: slideDown-b-6oe3q06b8i 0.2s ease-out;
}

@keyframes slideDown-b-6oe3q06b8i {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Action Buttons */
.modal-actions[b-6oe3q06b8i] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.modal-actions .btn[b-6oe3q06b8i],
.btn-sm[b-6oe3q06b8i] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sm[b-6oe3q06b8i] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.modal-actions .btn-secondary[b-6oe3q06b8i] {
    background: var(--border-color);
    color: var(--text-primary);
}

@media (hover: hover) {
    .modal-actions .btn-secondary:hover[b-6oe3q06b8i] {
        background: var(--text-tertiary);
    }
}

.modal-actions .btn-primary[b-6oe3q06b8i],
.btn-primary[b-6oe3q06b8i] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .modal-actions .btn-primary:hover[b-6oe3q06b8i],
    .btn-primary:hover[b-6oe3q06b8i] {
        background: var(--accent-secondary);
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-backdrop[b-6oe3q06b8i] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-dialog[b-6oe3q06b8i] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-6oe3q06b8i] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-6oe3q06b8i] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-6oe3q06b8i] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-actions[b-6oe3q06b8i] {
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        margin-top: 0;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }

    .modal-actions .btn[b-6oe3q06b8i] {
        min-height: 48px;
    }

    .form-row[b-6oe3q06b8i] {
        grid-template-columns: 1fr;
    }

    .ingredient-fields[b-6oe3q06b8i] {
        grid-template-columns: 1fr;
    }

    .nutrition-summary[b-6oe3q06b8i] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Components/Modals/FastingInfoModal.razor.rz.scp.css */
.modal-overlay[b-sm4fspk0xq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}

.fasting-info-modal[b-sm4fspk0xq] {
    background: var(--card-bg);
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.modal-header[b-sm4fspk0xq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-light);
}

.modal-header h2[b-sm4fspk0xq] {
    margin: 0;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header h2 i[b-sm4fspk0xq] {
    color: var(--accent-primary);
}

.btn-close[b-sm4fspk0xq] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}

@media (hover: hover) {
    .btn-close:hover[b-sm4fspk0xq] {
        color: var(--text-primary);
    }
}

.modal-body[b-sm4fspk0xq] {
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

.intro-text[b-sm4fspk0xq] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.timeline[b-sm4fspk0xq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stage[b-sm4fspk0xq] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 12px;
    border-left: 3px solid var(--accent-primary);
}

.stage-time[b-sm4fspk0xq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding-right: 1rem;
    border-right: 1px solid var(--border-light);
}

.stage-time .hours[b-sm4fspk0xq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.stage-time .label[b-sm4fspk0xq] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.stage-content h4[b-sm4fspk0xq] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.stage-content p[b-sm4fspk0xq] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.benefits[b-sm4fspk0xq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.benefit-tag[b-sm4fspk0xq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--hover-bg);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--accent-secondary);
}

.benefit-tag i[b-sm4fspk0xq] {
    font-size: 0.7rem;
}

.disclaimer[b-sm4fspk0xq] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1.5rem;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.disclaimer i[b-sm4fspk0xq] {
    color: #ffc107;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.disclaimer p[b-sm4fspk0xq] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .fasting-info-modal[b-sm4fspk0xq] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header[b-sm4fspk0xq] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .modal-body[b-sm4fspk0xq] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-sm4fspk0xq] {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
    }

    .stage[b-sm4fspk0xq] {
        flex-direction: column;
    }

    .stage-time[b-sm4fspk0xq] {
        flex-direction: row;
        gap: 0.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 0 0 0.75rem 0;
        margin-bottom: 0.5rem;
    }

    .btn-close[b-sm4fspk0xq] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }
}
/* /Components/Modals/FoodDetailsModal.razor.rz.scp.css */
/* Modal Layout */
.modal-backdrop[b-ec1i05d5nw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    animation: fadeIn-b-ec1i05d5nw 0.2s ease-in-out;
    overscroll-behavior: contain;
}

.modal-dialog[b-ec1i05d5nw] {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-ec1i05d5nw 0.3s ease-out;
}

@keyframes fadeIn-b-ec1i05d5nw {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-ec1i05d5nw {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.modal-header[b-ec1i05d5nw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-ec1i05d5nw] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close[b-ec1i05d5nw] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-ec1i05d5nw] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.btn-close span[b-ec1i05d5nw] {
    font-size: 1.25rem;
}

/* Modal Body */
.modal-body[b-ec1i05d5nw] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Detail Sections */
.detail-section[b-ec1i05d5nw] {
    margin-bottom: 1.5rem;
}

.detail-section:last-child[b-ec1i05d5nw] {
    margin-bottom: 0;
}

.section-title[b-ec1i05d5nw] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.subsection-title[b-ec1i05d5nw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.detail-divider[b-ec1i05d5nw] {
    height: 1px;
    background: var(--border-color);
    margin: 1rem 0;
}

/* Detail Rows */
.detail-row[b-ec1i05d5nw] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child[b-ec1i05d5nw] {
    border-bottom: none;
}

.detail-label[b-ec1i05d5nw] {
    font-weight: 500;
    color: var(--text-muted);
}

.detail-value[b-ec1i05d5nw] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Nutrition Grid */
.nutrition-grid[b-ec1i05d5nw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.nutrition-item[b-ec1i05d5nw] {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-color);
}

.nutrition-label[b-ec1i05d5nw] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.nutrition-value[b-ec1i05d5nw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Highlighted values (for calculated totals) */
.highlight[b-ec1i05d5nw] {
    color: var(--accent-secondary, #e89b7e) !important;
}

.highlight-grid .nutrition-item[b-ec1i05d5nw] {
    background: linear-gradient(135deg, rgba(232, 155, 126, 0.1), rgba(232, 155, 126, 0.05));
    border-color: var(--accent-primary);
}

.highlight-grid .nutrition-value[b-ec1i05d5nw] {
    color: var(--accent-secondary, #e89b7e);
}

.detail-value.highlight[b-ec1i05d5nw] {
    color: var(--accent-secondary, #e89b7e);
}

/* Ingredients List */
.ingredients-list[b-ec1i05d5nw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ingredient-item[b-ec1i05d5nw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.ingredient-name[b-ec1i05d5nw] {
    font-weight: 500;
    color: var(--text-primary);
}

.ingredient-amount[b-ec1i05d5nw] {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Instructions */
.instructions-text[b-ec1i05d5nw] {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Modal Footer */
.modal-footer[b-ec1i05d5nw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn[b-ec1i05d5nw] {
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary[b-ec1i05d5nw] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .btn-secondary:hover[b-ec1i05d5nw] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-backdrop[b-ec1i05d5nw] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-dialog[b-ec1i05d5nw] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-ec1i05d5nw] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .modal-header h2[b-ec1i05d5nw] {
        font-size: 1.25rem;
    }

    .btn-close[b-ec1i05d5nw] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-ec1i05d5nw] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    .modal-footer[b-ec1i05d5nw] {
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
    }

    .modal-footer .btn[b-ec1i05d5nw] {
        min-height: 48px;
    }

    .nutrition-grid[b-ec1i05d5nw] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Modals/ProfileOnboardingModal.razor.rz.scp.css */
/* Main Modal Layout */
.modal-backdrop[b-u2i6mby4z1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: fadeIn-b-u2i6mby4z1 0.2s ease-out;
    overscroll-behavior: contain;
}

.modal-dialog.onboarding-modal[b-u2i6mby4z1] {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    animation: slideUp-b-u2i6mby4z1 0.3s ease-out;
    transition: max-width 0.3s ease;
}

/* Expanded modal for Step 2 */
.modal-dialog.onboarding-modal.step-2-expanded[b-u2i6mby4z1] {
    max-width: 680px;
}

.modal-content[b-u2i6mby4z1] {
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

/* Header */
.modal-header[b-u2i6mby4z1] {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    border-bottom: 1px solid var(--border-light);
}

.header-content[b-u2i6mby4z1] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.header-icon[b-u2i6mby4z1] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-icon .bi[b-u2i6mby4z1] {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.modal-header h2[b-u2i6mby4z1] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Stepper Container */
.stepper-container[b-u2i6mby4z1] {
    padding: 1rem 2rem 1.25rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-light);
}

.stepper[b-u2i6mby4z1] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.step[b-u2i6mby4z1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: default;
    transition: all 0.2s;
}

.step.completed[b-u2i6mby4z1] {
    cursor: pointer;
}

@media (hover: hover) {
    .step.completed:hover .step-circle[b-u2i6mby4z1] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
}

.step-circle[b-u2i6mby4z1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    color: var(--text-tertiary);
}

.step.active .step-circle[b-u2i6mby4z1] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

.step.completed .step-circle[b-u2i6mby4z1] {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
}

.step.completed .step-circle .bi[b-u2i6mby4z1] {
    font-size: 1rem;
}

.step-label[b-u2i6mby4z1] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.step.active .step-label[b-u2i6mby4z1] {
    color: var(--accent-primary);
    font-weight: 600;
}

.step.completed .step-label[b-u2i6mby4z1] {
    color: #10b981;
}

/* Progress Line */
.step-line[b-u2i6mby4z1] {
    flex: 1;
    max-width: 80px;
    height: 3px;
    background: var(--border-light);
    margin: 17px 0.75rem 0;
    border-radius: 2px;
    overflow: hidden;
}

.step-line-fill[b-u2i6mby4z1] {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #10b981, var(--accent-primary));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.step-line-fill.filled[b-u2i6mby4z1] {
    width: 100%;
}

.btn-close[b-u2i6mby4z1] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-close:hover[b-u2i6mby4z1] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

/* Modal Body */
.modal-body[b-u2i6mby4z1] {
    padding: 1.25rem 2rem;
    overflow-y: auto;
    max-height: 58vh;
}

/* Sections */
.onboarding-section[b-u2i6mby4z1] {
    margin-bottom: 1.5rem;
}

.onboarding-section:last-of-type[b-u2i6mby4z1] {
    margin-bottom: 0;
}

.section-label[b-u2i6mby4z1] {
    font-size: 0.813rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

/* Form Elements */
.form-row-three[b-u2i6mby4z1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.form-group[b-u2i6mby4z1] {
    display: flex;
    flex-direction: column;
}

.form-label[b-u2i6mby4z1] {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.form-input[b-u2i6mby4z1] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.2s;
}

.form-input:focus[b-u2i6mby4z1] {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--card-bg);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.activity-select[b-u2i6mby4z1] {
    width: 100%;
    cursor: pointer;
}

/* Gender Selector */
.gender-selector[b-u2i6mby4z1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.gender-btn[b-u2i6mby4z1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .gender-btn:hover[b-u2i6mby4z1] {
        border-color: var(--accent-primary);
        color: var(--text-primary);
    }
}

.gender-btn.selected[b-u2i6mby4z1] {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-primary);
}

.gender-btn .bi[b-u2i6mby4z1] {
    font-size: 1.25rem;
}

/* Goal Cards */
.goal-cards[b-u2i6mby4z1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.goal-card[b-u2i6mby4z1] {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .goal-card:hover[b-u2i6mby4z1] {
        border-color: var(--accent-primary);
        transform: translateY(-2px);
    }
}

.goal-card.selected[b-u2i6mby4z1] {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.1);
}

.goal-icon[b-u2i6mby4z1] {
    font-size: 2rem;
}

.goal-icon.lose[b-u2i6mby4z1] {
    color: #3b82f6;
}

.goal-icon.maintain[b-u2i6mby4z1] {
    color: #10b981;
}

.goal-icon.gain[b-u2i6mby4z1] {
    color: #f59e0b;
}

.goal-title[b-u2i6mby4z1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Targets Preview */
.targets-preview[b-u2i6mby4z1] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    margin-top: 1.5rem;
    animation: fadeIn-b-u2i6mby4z1 0.3s ease;
}

.targets-preview .section-label[b-u2i6mby4z1] {
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.targets-grid[b-u2i6mby4z1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.target-item[b-u2i6mby4z1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--card-bg);
    border-radius: 10px;
}

.target-item.calories[b-u2i6mby4z1] {
    background: rgba(var(--accent-rgb), 0.15);
}

.target-item.calories .target-value[b-u2i6mby4z1] {
    color: var(--accent-primary);
}

.target-value[b-u2i6mby4z1] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.target-label[b-u2i6mby4z1] {
    font-size: 0.688rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Step 2: Modern Sliding Goal Selector */
.goal-section[b-u2i6mby4z1] {
    margin-bottom: 1.5rem;
}

.goal-slider-container[b-u2i6mby4z1] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    background: var(--bg-tertiary);
    padding: 0.375rem;
    border-radius: 14px;
    gap: 0;
}

/* Sliding background indicator */
.goal-slider-bg[b-u2i6mby4z1] {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    width: calc(20% - 0.15rem);
    height: calc(100% - 0.75rem);
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.goal-slider-btn[b-u2i6mby4z1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0.25rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
}

.goal-icon-slider[b-u2i6mby4z1] {
    font-size: 1.25rem;
    transition: all 0.2s;
}

.goal-icon-slider.lose[b-u2i6mby4z1] {
    color: #3b82f6;
}

.goal-icon-slider.maintain[b-u2i6mby4z1] {
    color: #10b981;
}

.goal-icon-slider.gain[b-u2i6mby4z1] {
    color: #f59e0b;
}

.goal-name[b-u2i6mby4z1] {
    font-size: 0.813rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: color 0.2s;
    white-space: nowrap;
}

.goal-change[b-u2i6mby4z1] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
    transition: color 0.2s;
    white-space: nowrap;
}

@media (hover: hover) {
    .goal-slider-btn:hover .goal-name[b-u2i6mby4z1] {
        color: var(--text-primary);
    }
}

/* Selected state */
.goal-slider-btn.selected .goal-name[b-u2i6mby4z1] {
    color: var(--text-primary);
}

.goal-slider-btn.selected .goal-icon-slider.lose[b-u2i6mby4z1],
.goal-slider-btn.selected .goal-change[b-u2i6mby4z1] {
    color: #3b82f6;
}

.goal-slider-btn.selected .goal-icon-slider.maintain[b-u2i6mby4z1] {
    color: #10b981;
}

.goal-slider-btn.selected .goal-icon-slider.gain[b-u2i6mby4z1] {
    color: #f59e0b;
}

/* Match change color to goal type */
.goal-slider-btn.selected:nth-child(2) .goal-change[b-u2i6mby4z1],
.goal-slider-btn.selected:nth-child(3) .goal-change[b-u2i6mby4z1] {
    color: #3b82f6;
}

.goal-slider-btn.selected:nth-child(4) .goal-change[b-u2i6mby4z1] {
    color: #10b981;
}

.goal-slider-btn.selected:nth-child(5) .goal-change[b-u2i6mby4z1],
.goal-slider-btn.selected:nth-child(6) .goal-change[b-u2i6mby4z1] {
    color: #f59e0b;
}

/* Step 2: Forecast Stats Cards (matching Settings page) */
.forecast-header-modal[b-u2i6mby4z1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.forecast-stat-modal[b-u2i6mby4z1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: all 0.2s;
}

@media (hover: hover) {
    .forecast-stat-modal:hover[b-u2i6mby4z1] {
        border-color: var(--accent-primary);
        transform: translateY(-2px);
    }
}

.stat-icon-modal[b-u2i6mby4z1] {
    font-size: 1.75rem;
    line-height: 1;
}

.stat-content-modal[b-u2i6mby4z1] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-label-modal[b-u2i6mby4z1] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value-modal[b-u2i6mby4z1] {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-value-modal.current[b-u2i6mby4z1] {
    color: #3b82f6;
}

.stat-value-modal.projected[b-u2i6mby4z1] {
    color: #8b5cf6;
}

.stat-value-modal.loss[b-u2i6mby4z1] {
    color: #3b82f6;
}

.stat-value-modal.gain[b-u2i6mby4z1] {
    color: #f59e0b;
}

.stat-value-modal.maintain[b-u2i6mby4z1] {
    color: #10b981;
}

/* Projection Chart Container */
.projection-chart-container[b-u2i6mby4z1] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-light);
}

.daily-targets-compact[b-u2i6mby4z1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.target-pill[b-u2i6mby4z1] {
    display: inline-flex;
    padding: 0.375rem 0.875rem;
    background: var(--card-bg);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.target-pill.calories[b-u2i6mby4z1] {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-rgb), 0.2);
    font-weight: 600;
}

/* Modal Footer */
.modal-footer[b-u2i6mby4z1] {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 1rem;
    background: var(--card-bg);
}

.btn-skip[b-u2i6mby4z1] {
    flex: 1;
    padding: 0.875rem 1rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-skip:hover[b-u2i6mby4z1] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

.btn-save[b-u2i6mby4z1] {
    flex: 2;
    padding: 0.875rem 1.5rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 12px;
    font-size: 0.938rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

@media (hover: hover) {
    .btn-save:hover[b-u2i6mby4z1] {
        background: #6366f1;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    }
}

.btn-save .bi[b-u2i6mby4z1] {
    font-size: 1.125rem;
}

/* Step Navigation Buttons */
.btn-next[b-u2i6mby4z1] {
    flex: 2;
    padding: 0.875rem 1.5rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 12px;
    font-size: 0.938rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

@media (hover: hover) {
    .btn-next:hover[b-u2i6mby4z1] {
        background: #6366f1;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    }
}

.btn-next .bi[b-u2i6mby4z1] {
    font-size: 1rem;
}

.btn-back[b-u2i6mby4z1] {
    padding: 0.875rem 1rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-back:hover[b-u2i6mby4z1] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
}

.btn-back .bi[b-u2i6mby4z1] {
    font-size: 1rem;
}

/* Projection Section */
.projection-section[b-u2i6mby4z1] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.projection-summary-text[b-u2i6mby4z1] {
    margin-top: 0.875rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

/* Pre-populated Notice */
.pre-populated-notice[b-u2i6mby4z1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: #059669;
    animation: fadeIn-b-u2i6mby4z1 0.3s ease-out;
}

.pre-populated-notice .bi[b-u2i6mby4z1] {
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Dark mode */
:root[data-theme="dark"] .pre-populated-notice[b-u2i6mby4z1] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.1));
    color: #34d399;
}

/* Animations */
@keyframes fadeIn-b-u2i6mby4z1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-u2i6mby4z1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive - Tablet */
@media (max-width: 720px) {
    .modal-dialog.onboarding-modal.step-2-expanded[b-u2i6mby4z1] {
        max-width: 95%;
    }
}

/* Responsive - Mobile - Fullscreen modal */
@media (max-width: 560px) {
    .modal-backdrop[b-u2i6mby4z1] {
        padding: 0;
        touch-action: none;
    }

    .modal-dialog.onboarding-modal[b-u2i6mby4z1] {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
    }

    .modal-dialog.onboarding-modal.step-2-expanded[b-u2i6mby4z1] {
        max-width: 100%;
    }

    .modal-content[b-u2i6mby4z1] {
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-u2i6mby4z1] {
        padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .modal-body[b-u2i6mby4z1],
    .modal-footer[b-u2i6mby4z1] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .btn-close[b-u2i6mby4z1] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-u2i6mby4z1] {
        flex: 1;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer[b-u2i6mby4z1] {
        margin-top: auto;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .stepper-container[b-u2i6mby4z1] {
        padding: 0.875rem 1.25rem 1rem;
    }

    .step-circle[b-u2i6mby4z1] {
        width: 32px;
        height: 32px;
        font-size: 0.813rem;
    }

    .step-label[b-u2i6mby4z1] {
        font-size: 0.688rem;
    }

    .step-line[b-u2i6mby4z1] {
        max-width: 60px;
        margin: 15px 0.5rem 0;
    }

    .form-row-three[b-u2i6mby4z1] {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .goal-cards[b-u2i6mby4z1] {
        gap: 0.5rem;
    }

    .targets-grid[b-u2i6mby4z1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .modal-footer[b-u2i6mby4z1] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .btn-skip[b-u2i6mby4z1] {
        order: 2;
        flex: 1;
    }

    .btn-save[b-u2i6mby4z1] {
        order: 3;
        flex: 2;
    }

    .btn-next[b-u2i6mby4z1] {
        order: 2;
        flex: 2;
    }

    .btn-back[b-u2i6mby4z1] {
        order: 1;
        flex: 1;
    }

    /* Step 2 responsive - sliding goal selector */
    .goal-slider-container[b-u2i6mby4z1] {
        padding: 0.25rem;
    }

    .goal-slider-bg[b-u2i6mby4z1] {
        top: 0.25rem;
        left: 0.25rem;
        width: calc(20% - 0.1rem);
        height: calc(100% - 0.5rem);
    }

    .goal-slider-btn[b-u2i6mby4z1] {
        padding: 0.5rem 0.125rem;
    }

    .goal-icon-slider[b-u2i6mby4z1] {
        font-size: 1rem;
    }

    .goal-name[b-u2i6mby4z1] {
        font-size: 0.625rem;
    }

    .goal-change[b-u2i6mby4z1] {
        font-size: 0.5rem;
    }

    /* Forecast stat cards responsive */
    .forecast-header-modal[b-u2i6mby4z1] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .forecast-stat-modal[b-u2i6mby4z1] {
        padding: 0.75rem 0.5rem;
        gap: 0.5rem;
        flex-direction: column;
        text-align: center;
    }

    .stat-icon-modal[b-u2i6mby4z1] {
        font-size: 1.5rem;
    }

    .stat-label-modal[b-u2i6mby4z1] {
        font-size: 0.625rem;
    }

    .stat-value-modal[b-u2i6mby4z1] {
        font-size: 1rem;
    }

    .projection-chart-container[b-u2i6mby4z1] {
        padding: 0.75rem;
    }

    .daily-targets-compact[b-u2i6mby4z1] {
        gap: 0.375rem;
    }

    .target-pill[b-u2i6mby4z1] {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }
}

/* Small phone (380px and below) */
@media (max-width: 379px) {
    .modal-header[b-u2i6mby4z1],
    .modal-body[b-u2i6mby4z1],
    .modal-footer[b-u2i6mby4z1] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header-icon[b-u2i6mby4z1] {
        width: 36px;
        height: 36px;
    }

    .modal-header h2[b-u2i6mby4z1] {
        font-size: 1rem;
    }

    .step-circle[b-u2i6mby4z1] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .step-label[b-u2i6mby4z1] {
        font-size: 0.625rem;
    }

    .step-line[b-u2i6mby4z1] {
        max-width: 40px;
        margin: 13px 0.375rem 0;
    }

    .form-row-three[b-u2i6mby4z1] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .gender-selector[b-u2i6mby4z1] {
        grid-template-columns: 1fr;
    }

    .goal-cards[b-u2i6mby4z1] {
        grid-template-columns: 1fr;
    }

    .goal-card[b-u2i6mby4z1] {
        flex-direction: row;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .goal-icon[b-u2i6mby4z1] {
        font-size: 1.5rem;
    }

    .goal-title[b-u2i6mby4z1] {
        font-size: 1rem;
    }

    .goal-slider-container[b-u2i6mby4z1] {
        grid-template-columns: repeat(3, 1fr);
    }

    .goal-slider-bg[b-u2i6mby4z1] {
        width: calc(33.33% - 0.15rem);
    }

    /* Hide the extreme options on very small screens */
    .goal-slider-btn:first-child[b-u2i6mby4z1],
    .goal-slider-btn:last-child[b-u2i6mby4z1] {
        display: none;
    }

    .forecast-header-modal[b-u2i6mby4z1] {
        grid-template-columns: 1fr;
    }

    .forecast-stat-modal[b-u2i6mby4z1] {
        flex-direction: row;
        text-align: left;
    }

    .targets-grid[b-u2i6mby4z1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-close[b-u2i6mby4z1] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .btn-skip[b-u2i6mby4z1],
    .btn-save[b-u2i6mby4z1],
    .btn-next[b-u2i6mby4z1],
    .btn-back[b-u2i6mby4z1] {
        min-height: 48px;
    }

    .form-input[b-u2i6mby4z1] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.875rem;
    }
}
/* /Components/Modals/ScanFoodItemModal.razor.rz.scp.css */
/* ScanFoodItemModal.razor.css
   Base modal styles are provided by TrackerShared/wwwroot/css/scan-modal-base.css
   Add any component-specific styles below */
/* /Components/Modals/ScanNutritionLabelModal.razor.rz.scp.css */
/* ScanNutritionLabelModal.razor.css
   Base modal styles are provided by TrackerShared/wwwroot/css/scan-modal-base.css
   Component-specific styles below */

/* Data Source Badge */
.data-source-badge[b-feuuyrib2f] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.data-source-badge.barcode[b-feuuyrib2f] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.data-source-badge.gemini[b-feuuyrib2f] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Upgrade Prompt Section */
.upgrade-prompt-section[b-feuuyrib2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
}

.upgrade-icon[b-feuuyrib2f] {
    font-size: 3rem;
    color: #f59e0b;
    margin-bottom: 1rem;
}

.upgrade-prompt-section h3[b-feuuyrib2f] {
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.upgrade-description[b-feuuyrib2f] {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* Portion Size Selector */
.portion-select[b-feuuyrib2f] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border-color, #dee2e6);
    border-radius: 0;
    padding: 0 1.25rem 0 0;
    margin: 0;
    min-height: unset;
    line-height: inherit;
    cursor: pointer;
    appearance: auto;
    max-width: 100%;
}

/* Tip Box */
.tip-box[b-feuuyrib2f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #10b981;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.tip-box .bi-lightbulb[b-feuuyrib2f] {
    font-size: 1rem;
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-container[b-07b8yf0sf8] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.about-header[b-07b8yf0sf8] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-07b8yf0sf8] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-07b8yf0sf8] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.about-content[b-07b8yf0sf8] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-section[b-07b8yf0sf8] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.hero-section[b-07b8yf0sf8] {
    text-align: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    padding: 3rem 2rem;
}

.hero-icon[b-07b8yf0sf8] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.mission-statement[b-07b8yf0sf8] {
    font-size: 1.125rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
    color: white;
}

.about-section h2[b-07b8yf0sf8] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.hero-section h2[b-07b8yf0sf8] {
    color: white !important;
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

.about-section p[b-07b8yf0sf8] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.features-grid[b-07b8yf0sf8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-item[b-07b8yf0sf8] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
    .feature-item:hover[b-07b8yf0sf8] {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.feature-icon[b-07b8yf0sf8] {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.feature-item h3[b-07b8yf0sf8] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.feature-item p[b-07b8yf0sf8] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.benefits-list[b-07b8yf0sf8] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.benefit-item[b-07b8yf0sf8] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.benefit-icon[b-07b8yf0sf8] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-content h3[b-07b8yf0sf8] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.benefit-content p[b-07b8yf0sf8] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.audience-list[b-07b8yf0sf8] {
    margin: 1rem 0 0 1.5rem;
    padding: 0;
}

.audience-list li[b-07b8yf0sf8] {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.commitment-section[b-07b8yf0sf8] {
    background: var(--bg-tertiary);
}

.cta-section[b-07b8yf0sf8] {
    text-align: center;
    border: 2px solid var(--accent-primary);
}

.cta-buttons[b-07b8yf0sf8] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.btn[b-07b8yf0sf8] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-primary[b-07b8yf0sf8] {
    background: var(--accent-gradient);
    color: white;
    border: none;
}

@media (hover: hover) {
    .btn-primary:hover[b-07b8yf0sf8] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.btn-secondary[b-07b8yf0sf8] {
    background: var(--card-bg);
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-07b8yf0sf8] {
        background: var(--accent-primary);
        color: white;
    }
}

.contact-section[b-07b8yf0sf8] {
    text-align: center;
}

.contact-link[b-07b8yf0sf8] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.2s;
}

@media (hover: hover) {
    .contact-link:hover[b-07b8yf0sf8] {
        color: var(--accent-secondary);
    }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 767px) {
    .about-container[b-07b8yf0sf8] {
        padding: 1rem;
    }

    .page-title[b-07b8yf0sf8] {
        font-size: 2rem;
    }

    .about-section[b-07b8yf0sf8] {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .hero-section[b-07b8yf0sf8] {
        padding: 2rem 1.5rem;
    }

    .hero-icon[b-07b8yf0sf8] {
        font-size: 3rem;
    }

    .hero-section h2[b-07b8yf0sf8] {
        font-size: 1.5rem !important;
    }

    .mission-statement[b-07b8yf0sf8] {
        font-size: 1rem;
    }

    .features-grid[b-07b8yf0sf8] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-07b8yf0sf8] {
        flex-direction: column;
    }

    .btn[b-07b8yf0sf8] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
}

@media (max-width: 479px) {
    .about-container[b-07b8yf0sf8] {
        padding: 0.75rem;
    }

    .about-header[b-07b8yf0sf8] {
        margin-bottom: 2rem;
    }

    .page-title[b-07b8yf0sf8] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-07b8yf0sf8] {
        font-size: 1rem;
    }

    .about-content[b-07b8yf0sf8] {
        gap: 1.25rem;
    }

    .about-section[b-07b8yf0sf8] {
        padding: 1rem;
    }

    .hero-section[b-07b8yf0sf8] {
        padding: 1.5rem 1rem;
    }

    .hero-icon[b-07b8yf0sf8] {
        font-size: 2.5rem;
    }

    .hero-section h2[b-07b8yf0sf8] {
        font-size: 1.375rem !important;
    }

    .mission-statement[b-07b8yf0sf8] {
        font-size: 0.938rem;
    }

    .about-section h2[b-07b8yf0sf8] {
        font-size: 1.375rem;
    }

    .feature-item[b-07b8yf0sf8] {
        padding: 1.25rem;
    }

    .feature-icon[b-07b8yf0sf8] {
        font-size: 2rem;
    }

    .benefit-item[b-07b8yf0sf8] {
        gap: 0.75rem;
    }

    .contact-link[b-07b8yf0sf8] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Analytics.razor.rz.scp.css */
/* Analytics Container */
.analytics-container[b-0o40kj68qc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Header */
.analytics-header[b-0o40kj68qc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-0o40kj68qc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.time-range-selector[b-0o40kj68qc] {
    display: flex;
    background: var(--card-bg);
    padding: 0.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.range-btn[b-0o40kj68qc] {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .range-btn:hover[b-0o40kj68qc] {
        color: var(--text-primary);
    }
}

.range-btn.active[b-0o40kj68qc] {
    background: var(--accent-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

/* Grid Layout */
.analytics-grid[b-0o40kj68qc] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.analytics-card[b-0o40kj68qc] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
}

/* Card Specifics */
.weight-card[b-0o40kj68qc] {
    grid-column: span 8;
}

.calorie-card[b-0o40kj68qc] {
    grid-column: span 8;
}

.macro-card[b-0o40kj68qc] {
    grid-column: span 4;
}

.consistency-card[b-0o40kj68qc] {
    grid-column: span 12;
}

/* Card Header */
.card-header[b-0o40kj68qc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.header-left[b-0o40kj68qc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-title[b-0o40kj68qc] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Badges */
.trend-badge[b-0o40kj68qc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.trend-badge.negative[b-0o40kj68qc] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    /* Green for weight loss */
}

.trend-badge.positive[b-0o40kj68qc] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.streak-badge[b-0o40kj68qc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Charts */
.chart-container[b-0o40kj68qc] {
    flex: 1;
    position: relative;
    min-height: 200px;
    margin-bottom: 1rem;
    overflow: visible;
}

.chart-svg[b-0o40kj68qc] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.grid-line[b-0o40kj68qc] {
    stroke: var(--border-light);
    stroke-width: 1;
    stroke-dasharray: 4;
}

.axis-line[b-0o40kj68qc] {
    stroke: var(--text-muted, #858fa8);
    stroke-width: 1.5;
}

.axis-label[b-0o40kj68qc] {
    fill: var(--text-primary, #1f2235);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
}

/* Weight Chart */
.chart-area[b-0o40kj68qc] {
    fill: rgba(124, 105, 239, 0.1);
    /* Accent color with opacity */
}

.chart-line[b-0o40kj68qc] {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-point[b-0o40kj68qc] {
    fill: white;
    stroke: var(--accent-primary);
    stroke-width: 2;
}

.chart-point-hover[b-0o40kj68qc] {
    fill: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .chart-point-hover:hover[b-0o40kj68qc] {
        opacity: 0.2;
    }
}

/* Calorie Chart */
.goal-line[b-0o40kj68qc] {
    stroke: var(--text-muted);
    stroke-width: 1;
}

.chart-bar[b-0o40kj68qc] {
    fill: var(--accent-primary);
    transition: height 0.3s ease;
}

.chart-bar.over-limit[b-0o40kj68qc] {
    fill: #ef4444;
}

.legend[b-0o40kj68qc] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.legend-item[b-0o40kj68qc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dot[b-0o40kj68qc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.food[b-0o40kj68qc] {
    background: var(--accent-primary);
}

.dot.goal[b-0o40kj68qc] {
    background: var(--text-muted);
}

/* Macro Chart */
.macro-content[b-0o40kj68qc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.pie-chart-container[b-0o40kj68qc] {
    width: 180px;
    height: 180px;
    position: relative;
}

.pie-chart[b-0o40kj68qc] {
    width: 100%;
    height: 100%;
}

.pie-label-total[b-0o40kj68qc] {
    font-size: 1.25rem;
    font-weight: 700;
    fill: var(--text-primary);
}

.pie-label-sub[b-0o40kj68qc] {
    font-size: 0.75rem;
    fill: var(--text-secondary);
}

.macro-legend[b-0o40kj68qc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.macro-legend-item[b-0o40kj68qc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.macro-dot[b-0o40kj68qc] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.macro-dot.protein[b-0o40kj68qc] {
    background: #f59e0b;
}

.macro-dot.carbs[b-0o40kj68qc] {
    background: #4db8a8;
}

.macro-dot.fat[b-0o40kj68qc] {
    background: #8b5cf6;
}

.macro-details[b-0o40kj68qc] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.macro-name[b-0o40kj68qc] {
    color: var(--text-secondary);
    font-weight: 500;
}

.macro-percent[b-0o40kj68qc] {
    font-weight: 600;
    color: var(--text-primary);
}

.macro-grams[b-0o40kj68qc] {
    color: var(--text-muted);
    font-size: 0.813rem;
    width: 40px;
    text-align: right;
}

/* Consistency Heatmap */
.heatmap-range-selector[b-0o40kj68qc] {
    display: flex;
    background: var(--card-bg);
    padding: 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    gap: 0.25rem;
}

.heatmap-range-btn[b-0o40kj68qc] {
    background: transparent;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.813rem;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .heatmap-range-btn:hover[b-0o40kj68qc] {
        color: var(--text-primary);
        background: rgba(124, 105, 239, 0.05);
    }
}

.heatmap-range-btn.active[b-0o40kj68qc] {
    background: var(--accent-primary);
    color: white;
}

.heatmap-container[b-0o40kj68qc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.heatmap-grid[b-0o40kj68qc] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
    max-width: 400px;
}

.grid-week[b-0o40kj68qc] {
    grid-template-columns: repeat(7, 1fr);
    max-width: 280px;
}

.grid-2weeks[b-0o40kj68qc] {
    grid-template-columns: repeat(7, 1fr);
    max-width: 400px;
}

.heatmap-grid-year[b-0o40kj68qc] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.heatmap-month[b-0o40kj68qc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.month-label[b-0o40kj68qc] {
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.heatmap-week-grid[b-0o40kj68qc] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.188rem;
}

.heatmap-cell[b-0o40kj68qc] {
    aspect-ratio: 1;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: transform 0.2s;
    max-width: 14px;
    max-height: 14px;
}

@media (hover: hover) {
    .heatmap-cell:hover[b-0o40kj68qc] {
        transform: scale(1.1);
    }
}

.heatmap-labels[b-0o40kj68qc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    justify-content: flex-end;
}

.heatmap-legend-gradient[b-0o40kj68qc] {
    width: 60px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(124, 105, 239, 0.2), rgba(124, 105, 239, 1));
}

/* Card Footer Stats */
.card-footer[b-0o40kj68qc] {
    display: flex;
    justify-content: space-around;
    padding-top: 1.5rem;
    margin-top: auto;
    border-top: 1px solid var(--border-light);
}

.stat-item[b-0o40kj68qc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-label[b-0o40kj68qc] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-0o40kj68qc] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value .unit[b-0o40kj68qc] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.stat-value.success[b-0o40kj68qc] {
    color: #10b981;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Large tablet / Small desktop (1024px and below) */
@media (max-width: 1024px) {
    .weight-card[b-0o40kj68qc],
    .calorie-card[b-0o40kj68qc] {
        grid-column: span 12;
    }

    .macro-card[b-0o40kj68qc] {
        grid-column: span 12;
    }

    .consistency-card[b-0o40kj68qc] {
        grid-column: span 12;
    }

    .heatmap-grid-year[b-0o40kj68qc] {
        grid-template-columns: repeat(3, 1fr);
    }

    .macro-content[b-0o40kj68qc] {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .macro-legend[b-0o40kj68qc] {
        width: auto;
        max-width: 280px;
    }
}

/* Tablet (991px and below) */
@media (max-width: 991px) {
    .analytics-container[b-0o40kj68qc] {
        padding: 1.5rem 1rem;
    }

    .analytics-header[b-0o40kj68qc] {
        gap: 0.75rem;
    }

    .page-title[b-0o40kj68qc] {
        font-size: 1.5rem;
    }

    .heatmap-grid-year[b-0o40kj68qc] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
}

/* Phone (768px and below) */
@media (max-width: 767px) {
    .analytics-container[b-0o40kj68qc] {
        padding: 1rem;
    }

    .analytics-header[b-0o40kj68qc] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title[b-0o40kj68qc] {
        font-size: 1.375rem;
        text-align: center;
    }

    .time-range-selector[b-0o40kj68qc] {
        justify-content: center;
    }

    .analytics-grid[b-0o40kj68qc] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .analytics-card[b-0o40kj68qc] {
        width: 100%;
        padding: 1.25rem;
    }

    .chart-container[b-0o40kj68qc] {
        min-height: 180px;
    }

    .heatmap-grid-year[b-0o40kj68qc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .heatmap-range-selector[b-0o40kj68qc] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .card-header[b-0o40kj68qc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .header-left[b-0o40kj68qc] {
        width: 100%;
    }

    .macro-content[b-0o40kj68qc] {
        flex-direction: column;
    }

    .pie-chart-container[b-0o40kj68qc] {
        width: 150px;
        height: 150px;
    }

    .card-footer[b-0o40kj68qc] {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .stat-item[b-0o40kj68qc] {
        flex: 0 0 auto;
        min-width: 80px;
    }
}

/* Small phone (480px and below) */
@media (max-width: 479px) {
    .analytics-container[b-0o40kj68qc] {
        padding: 0.75rem;
    }

    .page-title[b-0o40kj68qc] {
        font-size: 1.25rem;
    }

    .range-btn[b-0o40kj68qc] {
        padding: 0.375rem 0.625rem;
        font-size: 0.813rem;
    }

    .analytics-card[b-0o40kj68qc] {
        padding: 1rem;
        border-radius: 12px;
    }

    .card-title[b-0o40kj68qc] {
        font-size: 1rem;
    }

    .chart-container[b-0o40kj68qc] {
        min-height: 150px;
    }

    .heatmap-grid-year[b-0o40kj68qc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .month-label[b-0o40kj68qc] {
        font-size: 0.625rem;
    }

    .heatmap-cell[b-0o40kj68qc] {
        max-width: 12px;
        max-height: 12px;
    }

    .heatmap-range-selector[b-0o40kj68qc] {
        gap: 0.125rem;
    }

    .heatmap-range-btn[b-0o40kj68qc] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .pie-chart-container[b-0o40kj68qc] {
        width: 130px;
        height: 130px;
    }

    .pie-label-total[b-0o40kj68qc] {
        font-size: 1rem;
    }

    .pie-label-sub[b-0o40kj68qc] {
        font-size: 0.688rem;
    }

    .macro-legend-item[b-0o40kj68qc] {
        gap: 0.5rem;
    }

    .macro-details[b-0o40kj68qc] {
        font-size: 0.813rem;
    }

    .card-footer[b-0o40kj68qc] {
        padding-top: 1rem;
        gap: 0.75rem;
    }

    .stat-item[b-0o40kj68qc] {
        flex: 1 1 45%;
        min-width: auto;
    }

    .stat-label[b-0o40kj68qc] {
        font-size: 0.688rem;
    }

    .stat-value[b-0o40kj68qc] {
        font-size: 1.125rem;
    }

    .stat-value .unit[b-0o40kj68qc] {
        font-size: 0.75rem;
    }

    .trend-badge[b-0o40kj68qc],
    .streak-badge[b-0o40kj68qc] {
        font-size: 0.75rem;
        padding: 0.188rem 0.5rem;
    }

    .legend[b-0o40kj68qc] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* Custom Tooltip */
.heatmap-tooltip[b-0o40kj68qc] {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    pointer-events: none;
    min-width: 220px;
    max-width: 320px;
}

.tooltip-header[b-0o40kj68qc] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    background: rgba(124, 105, 239, 0.05);
}

.tooltip-header strong[b-0o40kj68qc] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.tooltip-body[b-0o40kj68qc] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tooltip-section[b-0o40kj68qc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tooltip-calories[b-0o40kj68qc],
.tooltip-water[b-0o40kj68qc],
.tooltip-weight[b-0o40kj68qc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tooltip-calories .bi[b-0o40kj68qc] {
    color: #f59e0b;
}

.tooltip-water .bi[b-0o40kj68qc] {
    color: #3b82f6;
}

.tooltip-weight .bi[b-0o40kj68qc] {
    color: var(--accent-primary);
}

.tooltip-label[b-0o40kj68qc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.tooltip-item[b-0o40kj68qc] {
    font-size: 0.813rem;
    color: var(--text-secondary);
    padding-left: 0.5rem;
}

.tooltip-empty[b-0o40kj68qc] {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 0.5rem 0;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-container[b-yddle2f22r] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.contact-header[b-yddle2f22r] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-yddle2f22r] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-yddle2f22r] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.contact-intro[b-yddle2f22r] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.contact-intro p[b-yddle2f22r] {
    font-size: 1.063rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.contact-layout[b-yddle2f22r] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.contact-info-section[b-yddle2f22r] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-section h2[b-yddle2f22r] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.info-card[b-yddle2f22r] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    transition: transform 0.2s;
}

@media (hover: hover) {
    .info-card:hover[b-yddle2f22r] {
        transform: translateX(4px);
    }
}

.info-icon[b-yddle2f22r] {
    font-size: 2rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.info-content[b-yddle2f22r] {
    flex: 1;
}

.info-content h3[b-yddle2f22r] {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.info-content p[b-yddle2f22r] {
    font-size: 0.938rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.info-content small[b-yddle2f22r] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.info-content a[b-yddle2f22r] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .info-content a:hover[b-yddle2f22r] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

@media (max-width: 992px) {
    .contact-layout[b-yddle2f22r] {
        grid-template-columns: 1fr;
    }

    .contact-info-section[b-yddle2f22r] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .contact-container[b-yddle2f22r] {
        padding: 1rem;
    }

    .page-title[b-yddle2f22r] {
        font-size: 2rem;
    }

    .contact-info-section[b-yddle2f22r] {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-container[b-yddle2f22r] {
        padding: 0.75rem;
    }

    .page-title[b-yddle2f22r] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-yddle2f22r] {
        font-size: 0.875rem;
    }

    .contact-info-section[b-yddle2f22r] {
        padding: 1rem;
        border-radius: 12px;
    }

    .info-icon[b-yddle2f22r] {
        font-size: 1.25rem;
    }

    .info-content h3[b-yddle2f22r] {
        font-size: 1rem;
    }

    .info-content p[b-yddle2f22r] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/CreateMeal.razor.rz.scp.css */
.create-meal-page[b-gpuvidspyj] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-gpuvidspyj] {
    margin-bottom: 2rem;
}

.header-content[b-gpuvidspyj] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back[b-gpuvidspyj] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-back:hover[b-gpuvidspyj] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.page-header h1[b-gpuvidspyj] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.meal-form[b-gpuvidspyj] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section[b-gpuvidspyj] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.form-section h2[b-gpuvidspyj] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

.section-header[b-gpuvidspyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h2[b-gpuvidspyj] {
    margin: 0;
}

.form-group[b-gpuvidspyj] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-gpuvidspyj] {
    margin-bottom: 0;
}

.form-group label[b-gpuvidspyj] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-control[b-gpuvidspyj] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-control:focus[b-gpuvidspyj] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-row[b-gpuvidspyj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Tab Group */
.tab-group[b-gpuvidspyj] {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: 6px;
}

.tab-btn[b-gpuvidspyj] {
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .tab-btn:hover[b-gpuvidspyj] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.tab-btn.active[b-gpuvidspyj] {
    background: var(--accent-primary);
    color: white;
}

/* Meal Items */
.meal-items-list[b-gpuvidspyj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.meal-item-card[b-gpuvidspyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .meal-item-card:hover[b-gpuvidspyj] {
        background: var(--hover-bg);
    }
}

.meal-item-info[b-gpuvidspyj] {
    flex: 1;
}

.meal-item-name[b-gpuvidspyj] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.recipe-icon[b-gpuvidspyj] {
    color: var(--accent-primary);
}

.meal-item-details[b-gpuvidspyj] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.btn-icon-danger[b-gpuvidspyj] {
    background: none;
    border: none;
    padding: 0.5rem;
    color: #ef4444;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .btn-icon-danger:hover[b-gpuvidspyj] {
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Nutrition Summary */
.nutrition-summary[b-gpuvidspyj] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.nutrition-summary h3[b-gpuvidspyj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.nutrition-grid[b-gpuvidspyj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.nutrition-item[b-gpuvidspyj] {
    text-align: center;
}

.nutrition-label[b-gpuvidspyj] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.nutrition-value[b-gpuvidspyj] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Add Item Form */
.add-item-form[b-gpuvidspyj] {
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.add-item-form h3[b-gpuvidspyj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.search-results[b-gpuvidspyj] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.search-result-item[b-gpuvidspyj] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:last-child[b-gpuvidspyj] {
    border-bottom: none;
}

@media (hover: hover) {
    .search-result-item:hover[b-gpuvidspyj] {
        background: var(--hover-bg);
    }
}

.search-result-item .item-name[b-gpuvidspyj] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.search-result-item .item-details[b-gpuvidspyj] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.selected-item[b-gpuvidspyj] {
    margin-top: 1rem;
}

.selected-item-display[b-gpuvidspyj] {
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.selected-item-display strong[b-gpuvidspyj] {
    color: var(--text-primary);
}

.selected-item-display span[b-gpuvidspyj] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Empty State */
.empty-state-small[b-gpuvidspyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--text-tertiary);
}

.empty-state-small span[b-gpuvidspyj] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state-small p[b-gpuvidspyj] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Form Actions */
.form-actions[b-gpuvidspyj] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.form-actions-bottom[b-gpuvidspyj] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
}

.btn[b-gpuvidspyj] {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

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

.btn-sm[b-gpuvidspyj] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-primary[b-gpuvidspyj] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled)[b-gpuvidspyj] {
        background: var(--accent-secondary);
    }
}

.btn-secondary[b-gpuvidspyj] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .btn-secondary:hover[b-gpuvidspyj] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .create-meal-page[b-gpuvidspyj] {
        padding: 1rem;
    }

    .page-header h1[b-gpuvidspyj] {
        font-size: 1.5rem;
    }

    .form-row[b-gpuvidspyj] {
        grid-template-columns: 1fr;
    }

    .nutrition-grid[b-gpuvidspyj] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/CreateRecipe.razor.rz.scp.css */
.create-recipe-page[b-l5x4112dlt] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-l5x4112dlt] {
    margin-bottom: 2rem;
}

.header-content[b-l5x4112dlt] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back[b-l5x4112dlt] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-back:hover[b-l5x4112dlt] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.page-header h1[b-l5x4112dlt] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.recipe-form[b-l5x4112dlt] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section[b-l5x4112dlt] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.form-section h2[b-l5x4112dlt] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

.section-header[b-l5x4112dlt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header h2[b-l5x4112dlt] {
    margin: 0;
}

.form-group[b-l5x4112dlt] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-l5x4112dlt] {
    margin-bottom: 0;
}

.form-group label[b-l5x4112dlt] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-control[b-l5x4112dlt] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-control:focus[b-l5x4112dlt] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-control[b-l5x4112dlt] {
    resize: vertical;
    font-family: inherit;
}

.form-row[b-l5x4112dlt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Ingredients */
.ingredients-list[b-l5x4112dlt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ingredient-card[b-l5x4112dlt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .ingredient-card:hover[b-l5x4112dlt] {
        background: var(--hover-bg);
    }
}

.ingredient-info[b-l5x4112dlt] {
    flex: 1;
}

.ingredient-name[b-l5x4112dlt] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.ingredient-details[b-l5x4112dlt] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.btn-icon-danger[b-l5x4112dlt] {
    background: none;
    border: none;
    padding: 0.5rem;
    color: #ef4444;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .btn-icon-danger:hover[b-l5x4112dlt] {
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Nutrition Summary */
.nutrition-summary[b-l5x4112dlt] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.nutrition-summary h3[b-l5x4112dlt] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.nutrition-grid[b-l5x4112dlt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.nutrition-item[b-l5x4112dlt] {
    text-align: center;
}

.nutrition-label[b-l5x4112dlt] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.nutrition-value[b-l5x4112dlt] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.nutrition-per-serving[b-l5x4112dlt] {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Add Ingredient Form */
.add-ingredient-form[b-l5x4112dlt] {
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.add-ingredient-form h3[b-l5x4112dlt] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.search-results[b-l5x4112dlt] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.search-result-item[b-l5x4112dlt] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:last-child[b-l5x4112dlt] {
    border-bottom: none;
}

@media (hover: hover) {
    .search-result-item:hover[b-l5x4112dlt] {
        background: var(--hover-bg);
    }
}

.search-result-item .food-name[b-l5x4112dlt] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.search-result-item .food-details[b-l5x4112dlt] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.selected-food[b-l5x4112dlt] {
    margin-top: 1rem;
}

.selected-food-display[b-l5x4112dlt] {
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.selected-food-display strong[b-l5x4112dlt] {
    color: var(--text-primary);
}

.selected-food-display span[b-l5x4112dlt] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Empty State */
.empty-state-small[b-l5x4112dlt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--text-tertiary);
}

.empty-state-small span[b-l5x4112dlt] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state-small p[b-l5x4112dlt] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Form Actions */
.form-actions[b-l5x4112dlt] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.form-actions-bottom[b-l5x4112dlt] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
}

.btn[b-l5x4112dlt] {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

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

.btn-sm[b-l5x4112dlt] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-primary[b-l5x4112dlt] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled)[b-l5x4112dlt] {
        background: var(--accent-secondary);
    }
}

.btn-secondary[b-l5x4112dlt] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .btn-secondary:hover[b-l5x4112dlt] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .create-recipe-page[b-l5x4112dlt] {
        padding: 1rem;
    }

    .page-header h1[b-l5x4112dlt] {
        font-size: 1.5rem;
    }

    .form-row[b-l5x4112dlt] {
        grid-template-columns: 1fr;
    }

    .nutrition-grid[b-l5x4112dlt] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard Container */
.dashboard-container[b-q5f7yzvw6b] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Header */
.dashboard-header[b-q5f7yzvw6b] {
    margin-bottom: 0;
}

.date-navigation[b-q5f7yzvw6b] {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    gap: 1rem;
}

.btn-icon:first-child[b-q5f7yzvw6b] {
    grid-column: 2;
}

.current-date[b-q5f7yzvw6b] {
    grid-column: 3;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

@media (hover: hover) {
    .current-date:hover[b-q5f7yzvw6b] {
        color: var(--accent-primary);
    }
}

.btn-icon:nth-child(3)[b-q5f7yzvw6b] {
    grid-column: 4;
}

.btn-today[b-q5f7yzvw6b] {
    grid-column: 5;
    justify-self: end;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--accent-glow);
}

@media (hover: hover) {
    .btn-today:hover[b-q5f7yzvw6b] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

.btn-today-spacer[b-q5f7yzvw6b] {
    grid-column: 5;
    width: 0;
}

.date-picker-wrapper[b-q5f7yzvw6b] {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.date-picker-input-hidden[b-q5f7yzvw6b] {
    position: relative;
    opacity: 0;
    pointer-events: auto;
    width: 1px;
    height: 1px;
}

.btn-icon[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-icon:hover[b-q5f7yzvw6b] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

/* Weight Tracker Button */
.weight-tracker-button-container[b-q5f7yzvw6b] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.btn-weight-tracker[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s;
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-weight-tracker:hover[b-q5f7yzvw6b] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        border-color: var(--accent-primary);
    }
}

.btn-weight-tracker .bi[b-q5f7yzvw6b] {
    color: var(--accent-primary);
    font-size: 1.25rem;
}

.weight-change[b-q5f7yzvw6b] {
    font-size: 0.875rem;
    font-weight: 500;
}

.weight-change.down[b-q5f7yzvw6b] {
    color: var(--success);
}

.weight-change.up[b-q5f7yzvw6b] {
    color: var(--danger);
}

.weight-content[b-q5f7yzvw6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.weight-display[b-q5f7yzvw6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.weight-main[b-q5f7yzvw6b] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.weight-value[b-q5f7yzvw6b] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.weight-unit[b-q5f7yzvw6b] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.weight-trend[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}

.weight-trend.down[b-q5f7yzvw6b] {
    background: rgba(62, 207, 142, 0.1);
    color: var(--success);
}

.weight-trend.up[b-q5f7yzvw6b] {
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
}

.btn-edit-weight[b-q5f7yzvw6b] {
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-edit-weight:hover[b-q5f7yzvw6b] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.weight-input-section[b-q5f7yzvw6b] {
    width: 100%;
    max-width: 400px;
}

.weight-input-group[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: 12px;
}

.weight-input[b-q5f7yzvw6b] {
    flex: 1;
    border: 1px solid var(--border-light);
    background: var(--input-bg);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.weight-input:focus[b-q5f7yzvw6b] {
    border-color: var(--accent-primary);
}

.weight-input[b-q5f7yzvw6b]::-webkit-inner-spin-button,
.weight-input[b-q5f7yzvw6b]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.weight-input[type=number][b-q5f7yzvw6b] {
    -moz-appearance: textfield;
}

.weight-input-unit[b-q5f7yzvw6b] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-save-weight[b-q5f7yzvw6b] {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--accent-glow);
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-save-weight:hover:not(:disabled)[b-q5f7yzvw6b] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

.btn-save-weight:disabled[b-q5f7yzvw6b] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Calorie Summary Card */
.calorie-summary-card[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.calorie-ring-container[b-q5f7yzvw6b] {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    cursor: pointer;
}

.calorie-ring[b-q5f7yzvw6b] {
    width: 100%;
    height: 100%;
}

.ring-background[b-q5f7yzvw6b] {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 12;
}

.ring-progress[b-q5f7yzvw6b] {
    fill: none;
    stroke: url(#calorieGradient);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.calorie-center[b-q5f7yzvw6b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.calorie-remaining[b-q5f7yzvw6b] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.calorie-label[b-q5f7yzvw6b] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.calorie-breakdown[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.calorie-item[b-q5f7yzvw6b] {
    text-align: center;
}

.calorie-value[b-q5f7yzvw6b] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calorie-value.food[b-q5f7yzvw6b] {
    color: var(--accent-primary);
}

.calorie-value.remaining[b-q5f7yzvw6b] {
    color: var(--accent-primary);
}

.calorie-sublabel[b-q5f7yzvw6b] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.calorie-divider[b-q5f7yzvw6b] {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-weight: 300;
}

/* Nutrition Summary */
.nutrition-summary[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.section-title[b-q5f7yzvw6b] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

.macro-grid[b-q5f7yzvw6b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.macro-card[b-q5f7yzvw6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.macro-label[b-q5f7yzvw6b] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.macro-ring-container[b-q5f7yzvw6b] {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 0.5rem;
}

.macro-ring[b-q5f7yzvw6b] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.macro-ring-bg[b-q5f7yzvw6b] {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 8;
}

.macro-ring-progress[b-q5f7yzvw6b] {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.macro-ring-progress.carbs[b-q5f7yzvw6b] {
    stroke: #4db8a8;
}

.macro-ring-progress.fat[b-q5f7yzvw6b] {
    stroke: #8b5cf6;
}

.macro-ring-progress.protein[b-q5f7yzvw6b] {
    stroke: #f59e0b;
}

.macro-center[b-q5f7yzvw6b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.macro-consumed[b-q5f7yzvw6b] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.macro-goal[b-q5f7yzvw6b] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.macro-remaining[b-q5f7yzvw6b] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

/* Meals Section */
.meals-section[b-q5f7yzvw6b] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.meal-group[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.meal-header[b-q5f7yzvw6b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.meal-title[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meal-icon[b-q5f7yzvw6b] {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.meal-title h4[b-q5f7yzvw6b] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.meal-macros[b-q5f7yzvw6b] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-left: auto;
    font-size: 0.875rem;
}

.meal-calories[b-q5f7yzvw6b] {
    color: var(--accent-primary);
    font-weight: 600;
}

.meal-macro[b-q5f7yzvw6b] {
    color: var(--text-secondary);
}

.btn-add-food[b-q5f7yzvw6b] {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--accent-glow);
}

@media (hover: hover) {
    .btn-add-food:hover[b-q5f7yzvw6b] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

.meal-items[b-q5f7yzvw6b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.food-item[b-q5f7yzvw6b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    transition: background 0.2s;
}

@media (hover: hover) {
    .food-item:hover[b-q5f7yzvw6b] {
        background: var(--hover-bg);
    }
}

.food-info[b-q5f7yzvw6b] {
    flex: 1;
    cursor: pointer;
}

@media (hover: hover) {
    .food-info:hover .food-name[b-q5f7yzvw6b] {
        color: var(--accent-primary);
    }
}

.food-name[b-q5f7yzvw6b] {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    transition: color 0.2s;
}

.food-serving[b-q5f7yzvw6b] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.food-actions[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.servings-control[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--card-bg);
    border-radius: 6px;
    padding: 0.25rem;
}

.btn-servings[b-q5f7yzvw6b] {
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    padding: 0;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .btn-servings:hover[b-q5f7yzvw6b] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.servings-input[b-q5f7yzvw6b] {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.25rem;
    outline: none;
}

.servings-input[b-q5f7yzvw6b]::-webkit-inner-spin-button,
.servings-input[b-q5f7yzvw6b]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.servings-input[type=number][b-q5f7yzvw6b] {
    -moz-appearance: textfield;
}

.serving-unit[b-q5f7yzvw6b] {
    font-size: 0.813rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0.25rem;
    margin-right: 0.75rem;
    min-width: 60px;
    width: 60px;
    text-align: left;
}

.food-calories[b-q5f7yzvw6b] {
    font-weight: 600;
    color: var(--accent-primary);
    min-width: 65px;
    width: 65px;
    text-align: right;
    margin-right: 0.5rem;
}

/* Food Action Menu (Three-dot dropdown) */
.food-menu-container[b-q5f7yzvw6b] {
    position: relative;
}

.btn-food-menu[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-food-menu:hover[b-q5f7yzvw6b] {
        background: var(--hover-bg);
        color: var(--text-primary);
        border-color: var(--accent-primary);
    }
}

.food-menu-dropdown[b-q5f7yzvw6b] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    z-index: 1200;
    padding: 0.25rem 0;
}

.food-menu-dropdown .dropdown-item[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .food-menu-dropdown .dropdown-item:hover[b-q5f7yzvw6b] {
        background: var(--hover-bg);
    }
}

.food-menu-dropdown .dropdown-item.text-danger[b-q5f7yzvw6b] {
    color: #ef4444;
}

@media (hover: hover) {
    .food-menu-dropdown .dropdown-item.text-danger:hover[b-q5f7yzvw6b] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.food-menu-dropdown .me-2[b-q5f7yzvw6b] {
    margin-right: 0.5rem;
}

.empty-meal[b-q5f7yzvw6b] {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Water Section */
.water-section[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.water-tracker[b-q5f7yzvw6b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.water-cups[b-q5f7yzvw6b] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
}

.water-cup[b-q5f7yzvw6b] {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    font-size: 1.5rem;
}

@media (hover: hover) {
    .water-cup:hover[b-q5f7yzvw6b] {
        border-color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

.water-cup.filled[b-q5f7yzvw6b] {
    background: linear-gradient(135deg, #42a5f5, #2196f3);
    border-color: #2196f3;
    color: white;
}

.water-summary[b-q5f7yzvw6b] {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
}

/* Weight Modal Styles */
.modal-backdrop[b-q5f7yzvw6b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.modal-dialog[b-q5f7yzvw6b] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    pointer-events: all;
}

.modal-header[b-q5f7yzvw6b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-q5f7yzvw6b] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header h2 .bi[b-q5f7yzvw6b] {
    color: var(--accent-primary);
}

.btn-close[b-q5f7yzvw6b] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-close:hover[b-q5f7yzvw6b] {
        color: var(--text-primary);
    }
}

.modal-body[b-q5f7yzvw6b] {
    padding: 1.5rem;
    overflow-y: auto;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (992px and below) */
@media (max-width: 991px) {
    .dashboard-container[b-q5f7yzvw6b] {
        padding: 1.5rem 1rem;
    }

    .macro-grid[b-q5f7yzvw6b] {
        gap: 1rem;
    }

    .meal-macros[b-q5f7yzvw6b] {
        gap: 0.75rem;
    }

    .meal-macro[b-q5f7yzvw6b] {
        font-size: 0.813rem;
    }

    .calorie-summary-card[b-q5f7yzvw6b] {
        padding: 1.5rem;
    }
}

/* Phone (768px and below) */
@media (max-width: 767px) {
    .dashboard-container[b-q5f7yzvw6b] {
        padding: 1rem;
        padding-bottom: 6rem; /* Space for FAB */
    }

    /* Date navigation: keep arrows inline with date, only Today button wraps */
    .date-navigation[b-q5f7yzvw6b] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-icon:first-child[b-q5f7yzvw6b],
    .btn-icon:nth-child(3)[b-q5f7yzvw6b] {
        grid-column: auto;
    }

    .current-date[b-q5f7yzvw6b] {
        grid-column: auto;
        font-size: 1.125rem;
        /* Remove width: 100% and order: -1 to keep inline with arrows */
    }

    .btn-today[b-q5f7yzvw6b] {
        grid-column: auto;
        justify-self: auto;
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .btn-today-spacer[b-q5f7yzvw6b] {
        grid-column: auto;
        display: none;
    }

    .calorie-breakdown[b-q5f7yzvw6b] {
        gap: 1rem;
    }

    .calorie-value[b-q5f7yzvw6b] {
        font-size: 1.25rem;
    }

    /* Macro grid: keep 3 columns, just reduce sizes */
    .macro-grid[b-q5f7yzvw6b] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .macro-ring-container[b-q5f7yzvw6b] {
        width: 70px;
        height: 70px;
    }

    .macro-consumed[b-q5f7yzvw6b] {
        font-size: 1.25rem;
    }

    .macro-goal[b-q5f7yzvw6b] {
        font-size: 0.625rem;
    }

    .macro-label[b-q5f7yzvw6b] {
        font-size: 0.75rem;
    }

    .macro-remaining[b-q5f7yzvw6b] {
        font-size: 0.75rem;
    }

    .meal-header[b-q5f7yzvw6b] {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .meal-macros[b-q5f7yzvw6b] {
        flex: 1 1 auto;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        font-size: 0.813rem;
    }

    /* Icon-only Add Food button on phone */
    .btn-add-food[b-q5f7yzvw6b] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .btn-add-food .btn-text[b-q5f7yzvw6b] {
        display: none;
    }

    .btn-add-food .bi[b-q5f7yzvw6b] {
        font-size: 1.125rem;
        line-height: 1;
    }

    /* Food item - compact single row on mobile */
    .food-item[b-q5f7yzvw6b] {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem;
    }

    .food-info[b-q5f7yzvw6b] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .food-name[b-q5f7yzvw6b] {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .food-serving[b-q5f7yzvw6b] {
        display: none;
    }

    .food-actions[b-q5f7yzvw6b] {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .servings-control[b-q5f7yzvw6b] {
        padding: 0.125rem;
    }

    .serving-unit[b-q5f7yzvw6b] {
        display: none;
    }

    .food-calories[b-q5f7yzvw6b] {
        min-width: 50px;
        width: 50px;
        font-size: 0.813rem;
        margin-right: 0.25rem;
    }

    /* Compact touch targets for phone */
    .btn-servings[b-q5f7yzvw6b] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .servings-input[b-q5f7yzvw6b] {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        font-size: 0.875rem;
        padding: 0.25rem;
    }

    .btn-food-menu[b-q5f7yzvw6b] {
        width: 28px;
        height: 28px;
    }

    .water-cups[b-q5f7yzvw6b] {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .calorie-summary-card[b-q5f7yzvw6b] {
        margin-bottom: 1rem;
    }

    .nutrition-summary[b-q5f7yzvw6b] {
        margin-bottom: 1rem;
    }

    .meals-section[b-q5f7yzvw6b] {
        margin-bottom: 1rem;
    }

    .weight-tracker-button-container[b-q5f7yzvw6b] {
        margin-bottom: 1rem;
    }

    .water-cup[b-q5f7yzvw6b] {
        font-size: 1.75rem;
    }

    .weight-value[b-q5f7yzvw6b] {
        font-size: 2.5rem;
    }

    .weight-input-group[b-q5f7yzvw6b] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-save-weight[b-q5f7yzvw6b] {
        width: 100%;
        justify-content: center;
    }

    .modal-dialog[b-q5f7yzvw6b] {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

/* Small phone (480px and below) */
@media (max-width: 479px) {
    .dashboard-container[b-q5f7yzvw6b] {
        padding: 0.75rem;
    }

    /* Calorie ring smaller on small phones */
    .calorie-ring-container[b-q5f7yzvw6b] {
        width: 160px;
        height: 160px;
        margin-bottom: 1.5rem;
    }

    .calorie-remaining[b-q5f7yzvw6b] {
        font-size: 2rem;
    }

    .calorie-label[b-q5f7yzvw6b] {
        font-size: 0.75rem;
    }

    .calorie-breakdown[b-q5f7yzvw6b] {
        gap: 0.75rem;
    }

    .calorie-value[b-q5f7yzvw6b] {
        font-size: 1.125rem;
    }

    .calorie-sublabel[b-q5f7yzvw6b] {
        font-size: 0.688rem;
    }

    .calorie-divider[b-q5f7yzvw6b] {
        font-size: 1.125rem;
    }

    /* Macro grid: keep 3 columns with circles, just smaller */
    .macro-grid[b-q5f7yzvw6b] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
    }

    .macro-card[b-q5f7yzvw6b] {
        /* Keep vertical layout with circles */
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
    }

    .macro-ring-container[b-q5f7yzvw6b] {
        width: 56px;
        height: 56px;
        margin-bottom: 0.25rem;
    }

    .macro-label[b-q5f7yzvw6b] {
        margin-bottom: 0.5rem;
        font-size: 0.688rem;
    }

    .macro-remaining[b-q5f7yzvw6b] {
        display: block;  /* Keep visible */
        font-size: 0.688rem;
    }

    .macro-consumed[b-q5f7yzvw6b] {
        font-size: 1rem;
    }

    .macro-goal[b-q5f7yzvw6b] {
        font-size: 0.563rem;
    }

    /* Meal header compact */
    .meal-title h4[b-q5f7yzvw6b] {
        font-size: 1rem;
    }

    .meal-icon[b-q5f7yzvw6b] {
        font-size: 1.125rem;
    }

    .meal-calories[b-q5f7yzvw6b] {
        font-size: 0.875rem;
    }

    /* Keep meal macros visible, just smaller */
    .meal-macros[b-q5f7yzvw6b] {
        gap: 0.25rem;
        font-size: 0.75rem;
    }

    .meal-macro[b-q5f7yzvw6b] {
        /* Keep visible instead of display: none */
        font-size: 0.688rem;
    }

    /* Food item - keep compact single row on small phones */
    .food-item[b-q5f7yzvw6b] {
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .food-name[b-q5f7yzvw6b] {
        font-size: 0.813rem;
    }

    .food-calories[b-q5f7yzvw6b] {
        min-width: 45px;
        width: 45px;
        font-size: 0.75rem;
    }

    .btn-servings[b-q5f7yzvw6b] {
        width: 26px;
        height: 26px;
        font-size: 0.813rem;
    }

    .servings-input[b-q5f7yzvw6b] {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        font-size: 0.813rem;
    }

    .btn-food-menu[b-q5f7yzvw6b] {
        width: 26px;
        height: 26px;
    }

    /* Section titles */
    .section-title[b-q5f7yzvw6b] {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    /* Cards */
    .calorie-summary-card[b-q5f7yzvw6b],
    .nutrition-summary[b-q5f7yzvw6b],
    .meal-group[b-q5f7yzvw6b],
    .water-section[b-q5f7yzvw6b] {
        padding: 1rem;
        border-radius: 12px;
    }

    .calorie-summary-card[b-q5f7yzvw6b],
    .nutrition-summary[b-q5f7yzvw6b],
    .meals-section[b-q5f7yzvw6b],
    .weight-tracker-button-container[b-q5f7yzvw6b] {
        margin-bottom: 0.75rem;
    }

    /* Weight tracker button compact */
    .btn-weight-tracker[b-q5f7yzvw6b] {
        padding: 0.75rem 1rem;
        font-size: 0.938rem;
    }

    .btn-weight-tracker .bi[b-q5f7yzvw6b] {
        font-size: 1.125rem;
    }
}

/* AI Lookup Notification */
.ai-lookup-notification[b-q5f7yzvw6b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    animation: slideDown-b-q5f7yzvw6b 0.3s ease-out;
    cursor: pointer;
}

.ai-lookup-notification.error[b-q5f7yzvw6b] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.ai-lookup-notification.warning[b-q5f7yzvw6b] {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.ai-lookup-notification.info[b-q5f7yzvw6b] {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.ai-lookup-notification .notification-message[b-q5f7yzvw6b] {
    flex: 1;
}

.ai-lookup-notification .notification-dismiss[b-q5f7yzvw6b] {
    background: none;
    border: none;
    padding: 0.25rem;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .ai-lookup-notification .notification-dismiss:hover[b-q5f7yzvw6b] {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

@keyframes slideDown-b-q5f7yzvw6b {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Floating Action Button */
.mobile-fab-container[b-q5f7yzvw6b] {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 990;
    pointer-events: none;
}

.fab-btn[b-q5f7yzvw6b] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.fab-btn:active[b-q5f7yzvw6b] {
    transform: scale(0.95);
}

.fab-primary[b-q5f7yzvw6b] {
    background: var(--accent-gradient);
    box-shadow: var(--accent-glow), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Show FAB on mobile */
@media (max-width: 767px) {
    .mobile-fab-container[b-q5f7yzvw6b] {
        display: flex;
        right: 10px; /* Align with AI widget on mobile */
    }
}
/* /Components/Pages/Fasting.razor.rz.scp.css */
/* Info Button inside Hero */
.fasting-hero .btn-info[b-gn8zs1zd95] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    z-index: 10;
}

@media (hover: hover) {
    .fasting-hero .btn-info:hover[b-gn8zs1zd95] {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: white;
    }
}

.fasting-hero .btn-info i[b-gn8zs1zd95] {
    font-size: 1rem;
}

.fasting-container[b-gn8zs1zd95] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* --- Hero Section (Active & Start) --- */
.fasting-hero[b-gn8zs1zd95] {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
    /* Prevent unwanted vertical expansion in flex container */
    flex: none;
    width: 100%;
}

.fasting-hero.active-fast[b-gn8zs1zd95] {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(232, 155, 126, 0.05) 100%);
    border-color: var(--accent-secondary);
}

/* Timer Display */
.timer-display[b-gn8zs1zd95] {
    position: relative;
    width: 280px;
    height: 280px;
    /* Ensure no flex growing here either */
    flex: none;
}

.progress-ring-container[b-gn8zs1zd95] {
    width: 100%;
    height: 100%;
}

.progress-ring[b-gn8zs1zd95] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.ring-track[b-gn8zs1zd95] {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 8;
}

.ring-indicator[b-gn8zs1zd95] {
    fill: none;
    stroke: url(#fastingGradient);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.timer-content[b-gn8zs1zd95] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.timer-label[b-gn8zs1zd95] {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.timer-value[b-gn8zs1zd95] {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.timer-sub[b-gn8zs1zd95] {
    font-size: 0.95rem;
    color: var(--accent-secondary);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Active Controls */
.active-controls[b-gn8zs1zd95] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    flex: none;
}

.info-pill[b-gn8zs1zd95] {
    background: var(--bg-tertiary);
    padding: 0.6rem 1rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.info-pill i[b-gn8zs1zd95] {
    color: var(--accent-primary);
}

.notes-section[b-gn8zs1zd95] {
    width: 100%;
    max-width: 500px;
    flex: none;
}

.notes-input[b-gn8zs1zd95] {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem;
    color: var(--text-primary);
    resize: none;
    height: 80px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.notes-input:focus[b-gn8zs1zd95] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

/* Start Fast Screens */
.header-text h2[b-gn8zs1zd95] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.header-text p[b-gn8zs1zd95] {
    color: var(--text-secondary);
}

.target-selector[b-gn8zs1zd95],
.time-selector[b-gn8zs1zd95] {
    width: 100%;
    max-width: 700px;
    text-align: left;
    flex: none;
}

.section-label[b-gn8zs1zd95] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preset-grid[b-gn8zs1zd95] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 0.8rem;
}

.preset-card[b-gn8zs1zd95] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

@media (hover: hover) {
    .preset-card:hover[b-gn8zs1zd95] {
        border-color: var(--accent-secondary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
}

.preset-card.selected[b-gn8zs1zd95] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    box-shadow: var(--accent-glow);
}

.preset-card.selected .section-label[b-gn8zs1zd95],
.preset-card.selected .hours[b-gn8zs1zd95],
.preset-card.selected .label[b-gn8zs1zd95] {
    color: white;
}

.preset-card .hours[b-gn8zs1zd95] {
    font-size: 1.5rem;
    font-weight: 700;
}

.preset-card .label[b-gn8zs1zd95] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.preset-card.custom-card[b-gn8zs1zd95] {
    background: var(--bg-tertiary);
}

.preset-card.custom-card.selected[b-gn8zs1zd95] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    box-shadow: var(--accent-glow);
}

.preset-card.custom-card i[b-gn8zs1zd95] {
    font-size: 1.5rem;
}

.preset-card.custom-card .custom-hours-input[b-gn8zs1zd95] {
    width: 50px;
    padding: 0.3rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.preset-card.custom-card .custom-hours-input[b-gn8zs1zd95]::-webkit-outer-spin-button,
.preset-card.custom-card .custom-hours-input[b-gn8zs1zd95]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.preset-card.custom-card .custom-hours-input:focus[b-gn8zs1zd95] {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.25);
}


.datetime-input[b-gn8zs1zd95] {
    width: 100%;
    padding: 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.datetime-input:focus[b-gn8zs1zd95] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.time-input-row[b-gn8zs1zd95] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.time-input-row .datetime-input[b-gn8zs1zd95] {
    flex: 1;
}

.btn-refresh-time[b-gn8zs1zd95] {
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-refresh-time:hover[b-gn8zs1zd95] {
        background: var(--bg-tertiary);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.btn-refresh-time i[b-gn8zs1zd95] {
    font-size: 1.1rem;
}

/* Primary Actions */
.btn-start-fast[b-gn8zs1zd95],
.btn-end-fast[b-gn8zs1zd95] {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.2s;
    color: white;
    background: var(--accent-gradient);
    box-shadow: var(--accent-glow);
    flex: none;
}

@media (hover: hover) {
    .btn-start-fast:hover[b-gn8zs1zd95],
    .btn-end-fast:hover[b-gn8zs1zd95] {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(232, 155, 126, 0.4);
    }
}

.btn-end-fast[b-gn8zs1zd95] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%);
    box-shadow: 0 10px 20px rgba(238, 82, 83, 0.3);
}

@media (hover: hover) {
    .btn-end-fast:hover[b-gn8zs1zd95] {
        box-shadow: 0 10px 25px rgba(238, 82, 83, 0.45);
    }
}

.error-toast[b-gn8zs1zd95] {
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

/* --- Dashboard Grid --- */
.dashboard-grid[b-gn8zs1zd95] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    flex: none;
}

/* Stats */
.stats-overview[b-gn8zs1zd95] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-box[b-gn8zs1zd95] {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

@media (hover: hover) {
    .stat-box:hover[b-gn8zs1zd95] {
        transform: translateY(-2px);
    }
}

.stat-icon[b-gn8zs1zd95] {
    font-size: 1.8rem;
    color: var(--accent-secondary);
    background: var(--hover-bg);
    padding: 0.8rem;
    border-radius: 12px;
    min-width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-info[b-gn8zs1zd95] {
    display: flex;
    flex-direction: column;
}

.stat-info .value[b-gn8zs1zd95] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-info .label[b-gn8zs1zd95] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* History */
.history-section[b-gn8zs1zd95] {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.history-header[b-gn8zs1zd95] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.history-header h3[b-gn8zs1zd95] {
    margin: 0;
    font-size: 1.2rem;
}

.range-selector[b-gn8zs1zd95] {
    background: var(--bg-tertiary);
    padding: 0.3rem;
    border-radius: 10px;
    display: flex;
    gap: 0.3rem;
}

.range-selector button[b-gn8zs1zd95] {
    border: none;
    background: none;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.range-selector button.active[b-gn8zs1zd95] {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.history-list[b-gn8zs1zd95] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Pulse Animation for Active Fast */
@keyframes pulse-ring-b-gn8zs1zd95 {
    0% {
        box-shadow: 0 0 0 0 rgba(232, 155, 126, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(232, 155, 126, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(232, 155, 126, 0);
    }
}

.fasting-hero.active-fast .timer-display[b-gn8zs1zd95]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    z-index: -1;
    animation: pulse-ring-b-gn8zs1zd95 3s infinite;
}

.history-item[b-gn8zs1zd95] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

@media (hover: hover) {
    .history-item:hover[b-gn8zs1zd95] {
        border-color: var(--border-color);
        background: var(--bg-tertiary);
    }
}

.history-date[b-gn8zs1zd95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding-right: 1rem;
    border-right: 1px solid var(--border-light);
    margin-right: 1rem;
}

.history-date .day[b-gn8zs1zd95] {
    font-size: 1.2rem;
    font-weight: 700;
}

.history-date .month[b-gn8zs1zd95] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.history-details[b-gn8zs1zd95] {
    flex: 1;
}

.time-range[b-gn8zs1zd95] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.duration-badge[b-gn8zs1zd95] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.history-meta[b-gn8zs1zd95] {
    text-align: right;
}

.target-met[b-gn8zs1zd95] {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.target-met.success[b-gn8zs1zd95] {
    color: var(--success);
    background: rgba(46, 204, 113, 0.1);
}

.empty-history[b-gn8zs1zd95] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.empty-history i[b-gn8zs1zd95] {
    font-size: 2rem;
}

/* Scrollbar styling for history list */
.history-list[b-gn8zs1zd95]::-webkit-scrollbar {
    width: 6px;
}

.history-list[b-gn8zs1zd95]::-webkit-scrollbar-track {
    background: transparent;
}

.history-list[b-gn8zs1zd95]::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 20px;
}

/* Load More Button */
.btn-load-more[b-gn8zs1zd95] {
    width: 100%;
    padding: 0.8rem;
    margin-top: 1rem;
    border: 1px dashed var(--border-light);
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .btn-load-more:hover:not(:disabled)[b-gn8zs1zd95] {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

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

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (900px and below) */
@media (max-width: 900px) {
    .dashboard-grid[b-gn8zs1zd95] {
        grid-template-columns: 1fr;
    }

    .stats-overview[b-gn8zs1zd95] {
        flex-direction: row;
        overflow-x: auto;
    }

    .stat-box[b-gn8zs1zd95] {
        flex: 1;
        min-width: 150px;
    }
}

/* Phone (600px and below) */
@media (max-width: 600px) {
    .fasting-container[b-gn8zs1zd95] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .fasting-hero[b-gn8zs1zd95] {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .timer-display[b-gn8zs1zd95] {
        width: 240px;
        height: 240px;
    }

    .timer-value[b-gn8zs1zd95] {
        font-size: 3rem;
    }

    .header-text h2[b-gn8zs1zd95] {
        font-size: 1.5rem;
    }

    .preset-grid[b-gn8zs1zd95] {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .preset-card[b-gn8zs1zd95] {
        padding: 0.75rem 0.375rem;
    }

    .preset-card .hours[b-gn8zs1zd95] {
        font-size: 1.25rem;
    }

    .stats-overview[b-gn8zs1zd95] {
        flex-direction: column;
    }

    .history-section[b-gn8zs1zd95] {
        border-radius: 16px;
        padding: 1.25rem;
    }

    .history-item[b-gn8zs1zd95] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .history-date[b-gn8zs1zd95] {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        width: 100%;
        padding-bottom: 0.5rem;
        margin: 0;
        gap: 0.5rem;
    }

    .history-meta[b-gn8zs1zd95] {
        align-self: flex-start;
    }

    .btn-start-fast[b-gn8zs1zd95],
    .btn-end-fast[b-gn8zs1zd95] {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .range-selector button[b-gn8zs1zd95] {
        padding: 0.5rem 0.625rem;
    }
}

/* Small phone (480px and below) */
@media (max-width: 479px) {
    .fasting-container[b-gn8zs1zd95] {
        padding: 0.75rem;
        gap: 1rem;
    }

    .fasting-hero[b-gn8zs1zd95] {
        padding: 1.25rem;
        gap: 1.5rem;
    }

    .fasting-hero .btn-info[b-gn8zs1zd95] {
        width: 44px;
        height: 44px;
        top: 0.75rem;
        right: 0.75rem;
    }

    .timer-display[b-gn8zs1zd95] {
        width: 200px;
        height: 200px;
    }

    .fasting-hero.active-fast .timer-display[b-gn8zs1zd95]::after {
        width: 170px;
        height: 170px;
    }

    .timer-value[b-gn8zs1zd95] {
        font-size: 2.5rem;
    }

    .timer-label[b-gn8zs1zd95] {
        font-size: 0.75rem;
    }

    .timer-sub[b-gn8zs1zd95] {
        font-size: 0.875rem;
    }

    .header-text h2[b-gn8zs1zd95] {
        font-size: 1.375rem;
    }

    .header-text p[b-gn8zs1zd95] {
        font-size: 0.875rem;
    }

    .section-label[b-gn8zs1zd95] {
        font-size: 0.813rem;
    }

    .preset-grid[b-gn8zs1zd95] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .preset-card[b-gn8zs1zd95] {
        padding: 0.625rem 0.25rem;
        border-radius: 10px;
    }

    .preset-card .hours[b-gn8zs1zd95] {
        font-size: 1.125rem;
    }

    .preset-card .label[b-gn8zs1zd95] {
        font-size: 0.688rem;
    }

    .info-pill[b-gn8zs1zd95] {
        font-size: 0.813rem;
        padding: 0.5rem 0.75rem;
    }

    .notes-input[b-gn8zs1zd95] {
        height: 70px;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .datetime-input[b-gn8zs1zd95] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.75rem;
    }

    .btn-refresh-time[b-gn8zs1zd95] {
        min-width: 48px;
    }

    .btn-start-fast[b-gn8zs1zd95],
    .btn-end-fast[b-gn8zs1zd95] {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    .active-controls[b-gn8zs1zd95] {
        width: 100%;
    }

    .stat-box[b-gn8zs1zd95] {
        padding: 1rem;
    }

    .stat-icon[b-gn8zs1zd95] {
        font-size: 1.5rem;
        padding: 0.625rem;
        min-width: 50px;
    }

    .stat-info .value[b-gn8zs1zd95] {
        font-size: 1.25rem;
    }

    .stat-info .label[b-gn8zs1zd95] {
        font-size: 0.813rem;
    }

    .history-section[b-gn8zs1zd95] {
        padding: 1rem;
    }

    .history-header h3[b-gn8zs1zd95] {
        font-size: 1.125rem;
    }

    .range-selector[b-gn8zs1zd95] {
        flex-wrap: wrap;
    }

    .range-selector button[b-gn8zs1zd95] {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .history-list[b-gn8zs1zd95] {
        max-height: 300px;
    }

    .history-item[b-gn8zs1zd95] {
        padding: 0.75rem;
    }

    .duration-badge[b-gn8zs1zd95] {
        font-size: 0.75rem;
    }

    .target-met[b-gn8zs1zd95] {
        font-size: 0.75rem;
    }

    .btn-load-more[b-gn8zs1zd95] {
        font-size: 0.813rem;
        padding: 0.75rem;
    }
}
/* /Components/Pages/Learn.razor.rz.scp.css */
.learn-container[b-3dfk36zezl] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Header */
.learn-header[b-3dfk36zezl] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-3dfk36zezl] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.page-subtitle[b-3dfk36zezl] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* Table of Contents */
.toc-card[b-3dfk36zezl] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.toc-card h2[b-3dfk36zezl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.toc-grid[b-3dfk36zezl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.toc-item[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    border: 2px solid transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

@media (hover: hover) {
    .toc-item:hover[b-3dfk36zezl] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        transform: translateY(-2px);
    }
}

/* Section Styles */
.info-section[b-3dfk36zezl] {
    margin-bottom: 3rem;
    scroll-margin-top: 2rem;
}

.section-header[b-3dfk36zezl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 2px solid;
}

.section-icon[b-3dfk36zezl] {
    font-size: 2.5rem;
}

.section-header h2[b-3dfk36zezl] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.section-header.calories[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.section-header.macros[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(132, 204, 22, 0.1));
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

.section-header.glycogen[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(14, 165, 233, 0.1));
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.section-header.fasting[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(139, 92, 246, 0.1));
    border-color: rgba(168, 85, 247, 0.3);
    color: #9333ea;
}

.section-header.timing[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.section-header.exercise[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.section-header.sleep[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.1));
    border-color: rgba(99, 102, 241, 0.3);
    color: #4f46e5;
}

.section-header.myths[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(225, 29, 72, 0.1));
    border-color: rgba(244, 63, 94, 0.3);
    color: #e11d48;
}

.section-content[b-3dfk36zezl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Info Cards */
.info-card[b-3dfk36zezl] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.info-card h3[b-3dfk36zezl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.info-card h4[b-3dfk36zezl] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem 0;
}

.info-card p[b-3dfk36zezl] {
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.info-card ul[b-3dfk36zezl] {
    margin: 0.5rem 0 1rem 0;
    padding-left: 1.5rem;
}

.info-card li[b-3dfk36zezl] {
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.info-note[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent-primary);
    font-size: 0.938rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

.stat-box[b-3dfk36zezl] {
    background: var(--accent-gradient);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    margin: 1rem 0;
    box-shadow: var(--accent-glow);
}

.warning-box[b-3dfk36zezl] {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.warning-box strong[b-3dfk36zezl] {
    color: #dc2626;
}

/* Comparison Grids */
.comparison-grid[b-3dfk36zezl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.comparison-item[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.comparison-item h4[b-3dfk36zezl] {
    margin-top: 0;
    color: var(--accent-primary);
}

/* Visual Explainer */
.visual-explainer[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.explainer-row[b-3dfk36zezl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.explainer-row:last-child[b-3dfk36zezl] {
    margin-bottom: 0;
}

.explainer-label[b-3dfk36zezl],
.explainer-result[b-3dfk36zezl] {
    background: var(--card-bg);
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid var(--border-light);
}

.explainer-arrow[b-3dfk36zezl] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    font-weight: bold;
}

/* Macronutrient Cards */
.macro-grid[b-3dfk36zezl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.macro-card[b-3dfk36zezl] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 2px solid;
}

.macro-card.protein[b-3dfk36zezl] {
    border-color: rgba(239, 68, 68, 0.4);
}

.macro-card.carbs[b-3dfk36zezl] {
    border-color: rgba(34, 197, 94, 0.4);
}

.macro-card.fats[b-3dfk36zezl] {
    border-color: rgba(245, 158, 11, 0.4);
}

.macro-header[b-3dfk36zezl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.macro-icon[b-3dfk36zezl] {
    font-size: 2rem;
}

.macro-header h3[b-3dfk36zezl] {
    margin: 0;
    font-size: 1.5rem;
}

.macro-calories[b-3dfk36zezl] {
    background: var(--accent-gradient);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

.macro-card ul[b-3dfk36zezl] {
    margin-bottom: 1.5rem;
}

.macro-sources[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.938rem;
    margin-top: 1rem;
}

.macro-sources strong[b-3dfk36zezl] {
    color: var(--accent-primary);
}

/* Fluctuation Factors */
.fluctuation-factors[b-3dfk36zezl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.factor-item[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.factor-icon[b-3dfk36zezl] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.factor-item strong[b-3dfk36zezl] {
    display: block;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

.factor-item p[b-3dfk36zezl] {
    margin: 0;
    font-size: 0.938rem;
    color: var(--text-secondary);
}

/* Timeline / Fasting Schedule */
.timeline-example[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.timeline-row[b-3dfk36zezl] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.time-label[b-3dfk36zezl] {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 0.5rem;
}

.time-window[b-3dfk36zezl] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.fasting-window[b-3dfk36zezl] {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #4f46e5;
}

.eating-window[b-3dfk36zezl] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

/* Breaks Fast Grid */
.breaks-fast-grid[b-3dfk36zezl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

.breaks-fast-item[b-3dfk36zezl] {
    padding: 1.5rem;
    border-radius: 8px;
}

.breaks-fast-item.no-break[b-3dfk36zezl] {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.breaks-fast-item.breaks[b-3dfk36zezl] {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.breaks-fast-item h4[b-3dfk36zezl] {
    margin-top: 0;
}

/* Exercise Burns */
.exercise-burns[b-3dfk36zezl] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.burn-item[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1.25rem;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 1rem;
    align-items: center;
    border-left: 4px solid var(--accent-primary);
}

.burn-activity[b-3dfk36zezl] {
    font-weight: 600;
    color: var(--text-primary);
}

.burn-calories[b-3dfk36zezl] {
    color: var(--accent-primary);
    font-weight: 700;
    text-align: center;
    font-size: 1.125rem;
}

.burn-equivalent[b-3dfk36zezl] {
    color: var(--text-secondary);
    font-size: 0.938rem;
}

/* Hormones */
.hormone-grid[b-3dfk36zezl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

.hormone-item[b-3dfk36zezl] {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.hormone-item h4[b-3dfk36zezl] {
    margin-top: 0;
    color: var(--accent-primary);
}

.hormone-effect[b-3dfk36zezl] {
    padding: 0.75rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 1.125rem;
    margin-top: 1rem;
}

.hormone-effect.bad[b-3dfk36zezl] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

/* Myth Cards */
.myth-card[b-3dfk36zezl] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.myth-header[b-3dfk36zezl] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.myth-icon[b-3dfk36zezl] {
    font-size: 2rem;
    flex-shrink: 0;
}

.myth-header h3[b-3dfk36zezl] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #e11d48;
}

.myth-truth[b-3dfk36zezl] {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 1.25rem;
    line-height: 1.7;
}

.myth-truth strong[b-3dfk36zezl] {
    color: #16a34a;
    font-size: 1.125rem;
}

/* Key Takeaways */
.key-takeaway[b-3dfk36zezl] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    line-height: 1.7;
}

.key-takeaway strong[b-3dfk36zezl] {
    color: var(--accent-primary);
    font-size: 1.125rem;
}

/* Responsive */
@media (max-width: 768px) {
    .learn-container[b-3dfk36zezl] {
        padding: 1rem;
    }

    .page-title[b-3dfk36zezl] {
        font-size: 2rem;
    }

    .section-header[b-3dfk36zezl] {
        padding: 1rem 1.5rem;
    }

    .section-header h2[b-3dfk36zezl] {
        font-size: 1.5rem;
    }

    .section-icon[b-3dfk36zezl] {
        font-size: 2rem;
    }

    .info-card[b-3dfk36zezl] {
        padding: 1.5rem;
    }

    .toc-grid[b-3dfk36zezl] {
        grid-template-columns: 1fr;
    }

    .macro-grid[b-3dfk36zezl] {
        grid-template-columns: 1fr;
    }

    .burn-item[b-3dfk36zezl] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .explainer-row[b-3dfk36zezl] {
        flex-direction: column;
    }

    .timeline-row[b-3dfk36zezl] {
        flex-direction: column;
        align-items: stretch;
    }

    .time-window[b-3dfk36zezl] {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .comparison-grid[b-3dfk36zezl] {
        grid-template-columns: 1fr;
    }

    .fluctuation-factors[b-3dfk36zezl] {
        grid-template-columns: 1fr;
    }

    .hormone-grid[b-3dfk36zezl] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MyFoods.razor.rz.scp.css */
.my-foods-page[b-i71qz2eqsi] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header[b-i71qz2eqsi] {
    margin-bottom: 2rem;
}

.page-header h1[b-i71qz2eqsi] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Tabs */
.foods-tabs[b-i71qz2eqsi] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
}

.tab-button[b-i71qz2eqsi] {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
    bottom: -2px;
}

@media (hover: hover) {
    .tab-button:hover[b-i71qz2eqsi] {
        color: var(--text-primary);
        background-color: var(--hover-bg);
    }
}

.tab-button.active[b-i71qz2eqsi] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* Search and Actions Bar */
.search-actions-bar[b-i71qz2eqsi] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-box[b-i71qz2eqsi] {
    flex: 1;
    position: relative;
}

.search-icon[b-i71qz2eqsi] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1.1rem;
}

.search-input[b-i71qz2eqsi] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.search-input:focus[b-i71qz2eqsi] {
    outline: none;
    border-color: var(--accent-primary);
}

.action-buttons[b-i71qz2eqsi] {
    display: flex;
    gap: 0.75rem;
}

.create-btn[b-i71qz2eqsi] {
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    border-radius: 8px;
    font-weight: 600;
}

.scan-btn[b-i71qz2eqsi] {
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    border-radius: 8px;
    font-weight: 600;
}

.btn-premium[b-i71qz2eqsi] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    min-width: 140px;
}

@media (hover: hover) {
    .btn-premium:hover[b-i71qz2eqsi] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
}

.scan-btn[b-i71qz2eqsi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Foods List */
.foods-content[b-i71qz2eqsi] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.foods-list[b-i71qz2eqsi] {
    min-height: 400px;
}

.food-item[b-i71qz2eqsi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.food-item:last-child[b-i71qz2eqsi] {
    border-bottom: none;
}

@media (hover: hover) {
    .food-item:hover[b-i71qz2eqsi] {
        background-color: var(--hover-bg);
    }
}

.food-info[b-i71qz2eqsi] {
    flex: 1;
}

.food-name[b-i71qz2eqsi] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.recipe-icon[b-i71qz2eqsi] {
    color: var(--accent-primary);
}

.meal-icon[b-i71qz2eqsi] {
    color: #4db8a8;
}

.food-details[b-i71qz2eqsi] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.food-actions[b-i71qz2eqsi] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-i71qz2eqsi] {
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .btn-icon:hover[b-i71qz2eqsi] {
        background-color: var(--hover-bg);
        color: var(--text-primary);
    }
}

.btn-icon:active[b-i71qz2eqsi] {
    transform: scale(0.95);
}

/* Empty State */
.empty-state[b-i71qz2eqsi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-tertiary);
}

.empty-icon[b-i71qz2eqsi] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-i71qz2eqsi] {
    margin: 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.empty-subtitle[b-i71qz2eqsi] {
    font-size: 0.875rem !important;
    color: var(--text-tertiary) !important;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (991px and below) */
@media (max-width: 991px) {
    .my-foods-page[b-i71qz2eqsi] {
        padding: 1.5rem;
    }

    .action-buttons[b-i71qz2eqsi] {
        flex-wrap: wrap;
    }

    .scan-btn[b-i71qz2eqsi],
    .create-btn[b-i71qz2eqsi] {
        flex: 1;
        min-width: 120px;
    }
}

/* Phone (768px and below) */
@media (max-width: 767px) {
    .my-foods-page[b-i71qz2eqsi] {
        padding: 1rem;
    }

    .page-header[b-i71qz2eqsi] {
        margin-bottom: 1.5rem;
    }

    .page-header h1[b-i71qz2eqsi] {
        font-size: 1.5rem;
    }

    .foods-tabs[b-i71qz2eqsi] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        margin-bottom: 1rem;
    }

    .tab-button[b-i71qz2eqsi] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
        min-height: 48px;
    }

    .search-actions-bar[b-i71qz2eqsi] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .action-buttons[b-i71qz2eqsi] {
        width: 100%;
    }

    .scan-btn[b-i71qz2eqsi],
    .create-btn[b-i71qz2eqsi] {
        flex: 1;
        justify-content: center;
        min-height: 48px;
    }

    .food-item[b-i71qz2eqsi] {
        padding: 1rem;
    }

    .food-name[b-i71qz2eqsi] {
        font-size: 0.9375rem;
    }

    .food-details[b-i71qz2eqsi] {
        font-size: 0.8125rem;
    }

    .food-actions[b-i71qz2eqsi] {
        gap: 0.25rem;
    }

    .btn-icon[b-i71qz2eqsi] {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Small phone (480px and below) */
@media (max-width: 479px) {
    .my-foods-page[b-i71qz2eqsi] {
        padding: 0.75rem;
    }

    .page-header h1[b-i71qz2eqsi] {
        font-size: 1.375rem;
    }

    .foods-tabs[b-i71qz2eqsi] {
        gap: 0;
    }

    .tab-button[b-i71qz2eqsi] {
        padding: 0.625rem 0.75rem;
        font-size: 0.813rem;
    }

    .search-input[b-i71qz2eqsi] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.875rem 1rem 0.875rem 2.75rem;
    }

    .action-buttons[b-i71qz2eqsi] {
        flex-direction: column;
    }

    .scan-btn[b-i71qz2eqsi],
    .create-btn[b-i71qz2eqsi] {
        width: 100%;
    }

    .foods-content[b-i71qz2eqsi] {
        border-radius: 10px;
    }

    /* Compact horizontal layout on small phones */
    .food-item[b-i71qz2eqsi] {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .food-info[b-i71qz2eqsi] {
        min-width: 0; /* Allow text truncation */
    }

    .food-name[b-i71qz2eqsi] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .food-actions[b-i71qz2eqsi] {
        flex-shrink: 0;
        gap: 0.25rem;
    }

    .btn-icon[b-i71qz2eqsi] {
        width: 36px;
        height: 36px;
        padding: 0.375rem;
        font-size: 1rem;
    }

    .empty-state[b-i71qz2eqsi] {
        padding: 2rem 1rem;
    }

    .empty-icon[b-i71qz2eqsi] {
        font-size: 3rem;
    }

    .empty-state p[b-i71qz2eqsi] {
        font-size: 1rem;
    }

    .badge[b-i71qz2eqsi] {
        font-size: 0.688rem;
        padding: 0.188rem 0.375rem;
    }
}

/* Template Badge */
.badge[b-i71qz2eqsi] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-template[b-i71qz2eqsi] {
    background-color: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.template-item[b-i71qz2eqsi] {
    background-color: rgba(139, 92, 246, 0.03);
    border-left: 3px solid #8b5cf6;
}

/* Pagination */
.pagination-footer[b-i71qz2eqsi] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.pagination[b-i71qz2eqsi] {
    margin: 0;
}

.page-item .page-link[b-i71qz2eqsi] {
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background-color: var(--card-bg);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

@media (hover: hover) {
    .page-item .page-link:hover[b-i71qz2eqsi] {
        background-color: var(--hover-bg);
        border-color: var(--border-color);
    }
}

.page-item.active .page-link[b-i71qz2eqsi] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.page-item.disabled .page-link[b-i71qz2eqsi] {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

/* Loading State */
.foods-content[b-i71qz2eqsi] {
    position: relative;
    min-height: 200px;
}

.foods-content.loading[b-i71qz2eqsi] {
    opacity: 0.6;
    pointer-events: none;
}

.loading-overlay[b-i71qz2eqsi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--card-bg-rgb), 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination-footer[b-i71qz2eqsi] {
        padding: 1rem;
    }

    .pagination-footer .d-flex[b-i71qz2eqsi] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center !important;
    }

    .pagination-footer small[b-i71qz2eqsi] {
        order: 1;
    }

    .pagination-footer nav[b-i71qz2eqsi] {
        order: 0;
    }
}

/* AI Lookup Notification */
.ai-lookup-notification[b-i71qz2eqsi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    animation: slideDown-b-i71qz2eqsi 0.3s ease-out;
    cursor: pointer;
}

.ai-lookup-notification.error[b-i71qz2eqsi] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.ai-lookup-notification.warning[b-i71qz2eqsi] {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.ai-lookup-notification.info[b-i71qz2eqsi] {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.ai-lookup-notification .notification-message[b-i71qz2eqsi] {
    flex: 1;
}

.ai-lookup-notification .notification-dismiss[b-i71qz2eqsi] {
    background: none;
    border: none;
    padding: 0.25rem;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .ai-lookup-notification .notification-dismiss:hover[b-i71qz2eqsi] {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

@keyframes slideDown-b-i71qz2eqsi {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-container[b-fj62ctgpz0] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.privacy-header[b-fj62ctgpz0] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-fj62ctgpz0] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-fj62ctgpz0] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.privacy-content[b-fj62ctgpz0] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.privacy-section[b-fj62ctgpz0] {
    margin-bottom: 2.5rem;
}

.privacy-section:last-of-type[b-fj62ctgpz0] {
    margin-bottom: 0;
}

.privacy-section h2[b-fj62ctgpz0] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.privacy-section h3[b-fj62ctgpz0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-section p[b-fj62ctgpz0] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.privacy-section ul[b-fj62ctgpz0] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.privacy-section li[b-fj62ctgpz0] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.privacy-section a[b-fj62ctgpz0] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .privacy-section a:hover[b-fj62ctgpz0] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.privacy-section strong[b-fj62ctgpz0] {
    color: var(--text-primary);
    font-weight: 600;
}

.privacy-footer[b-fj62ctgpz0] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.privacy-footer p[b-fj62ctgpz0] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 768px) {
    .privacy-container[b-fj62ctgpz0] {
        padding: 1rem;
    }

    .page-title[b-fj62ctgpz0] {
        font-size: 2rem;
    }

    .privacy-content[b-fj62ctgpz0] {
        padding: 1.5rem;
    }

    .privacy-section h2[b-fj62ctgpz0] {
        font-size: 1.5rem;
    }

    .privacy-section h3[b-fj62ctgpz0] {
        font-size: 1.125rem;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-container[b-t0s4jani30] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.page-title[b-t0s4jani30] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.loading[b-t0s4jani30] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-size: 1.125rem;
}

/* Settings Cards */
.settings-card[b-t0s4jani30] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.section-title[b-t0s4jani30] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

/* Form Elements */
.form-row[b-t0s4jani30] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row-three[b-t0s4jani30] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-t0s4jani30] {
    display: flex;
    flex-direction: column;
}

.form-label[b-t0s4jani30] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.form-input[b-t0s4jani30] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.2s;
}

.form-input:focus[b-t0s4jani30] {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--card-bg);
}

@media (hover: hover) {
    .form-input:hover[b-t0s4jani30] {
        border-color: var(--accent-primary);
    }
}

/* Goal Cards */
.goal-cards[b-t0s4jani30] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.goal-cards-five[b-t0s4jani30] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.goal-cards-five .goal-card[b-t0s4jani30] {
    padding: 1rem 0.5rem;
}

.goal-cards-five .goal-icon[b-t0s4jani30] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.goal-cards-five .goal-card h3[b-t0s4jani30] {
    font-size: 0.875rem;
}

.goal-cards-five .goal-card p[b-t0s4jani30] {
    font-size: 0.75rem;
}

.goal-card[b-t0s4jani30] {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (hover: hover) {
    .goal-card:hover[b-t0s4jani30] {
        border-color: var(--accent-primary);
        background: var(--hover-bg);
        transform: translateY(-2px);
    }
}

.goal-card.selected[b-t0s4jani30] {
    border-color: var(--accent-primary);
    background: var(--card-bg);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
}

.goal-icon[b-t0s4jani30] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.goal-icon.lose[b-t0s4jani30] {
    color: #3b82f6;
}

.goal-icon.maintain[b-t0s4jani30] {
    color: #10b981;
}

.goal-icon.gain[b-t0s4jani30] {
    color: #f59e0b;
}

.goal-card h3[b-t0s4jani30] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.goal-card p[b-t0s4jani30] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Calculate Section */
.calculate-section[b-t0s4jani30] {
    margin-bottom: 1.5rem;
}

.btn-calculate[b-t0s4jani30] {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--accent-glow);
    margin-bottom: 1rem;
}

@media (hover: hover) {
    .btn-calculate:hover[b-t0s4jani30] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

/* Recommendation Box */
.recommendation-box[b-t0s4jani30] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.recommendation-box.live-preview[b-t0s4jani30] {
    animation: fadeIn-b-t0s4jani30 0.3s ease;
}

.recommendation-header[b-t0s4jani30] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
}

.recommendation-text[b-t0s4jani30] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.recommendation-values[b-t0s4jani30] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.rec-value[b-t0s4jani30] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rec-value .label[b-t0s4jani30] {
    font-size: 0.813rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.rec-value .value[b-t0s4jani30] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.btn-apply[b-t0s4jani30] {
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.625rem 1.25rem;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

@media (hover: hover) {
    .btn-apply:hover[b-t0s4jani30] {
        background: var(--accent-hover);
        transform: translateY(-1px);
    }
}

.goals-matched[b-t0s4jani30] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    color: #10b981;
    font-weight: 600;
    font-size: 0.938rem;
}

/* Macro Mode Toggle */
.macro-mode-toggle[b-t0s4jani30] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.toggle-label[b-t0s4jani30] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.toggle-label input[type="radio"][b-t0s4jani30] {
    margin-right: 0.5rem;
}

.toggle-label:has(input:checked)[b-t0s4jani30] {
    background: var(--accent-primary);
    color: white;
}

.toggle-label span[b-t0s4jani30] {
    font-weight: 500;
}

/* Validation Error */
.validation-error[b-t0s4jani30] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Validation Error Banner (top-level validation errors) */
.validation-error-banner[b-t0s4jani30] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.validation-error-banner .bi[b-t0s4jani30] {
    font-size: 1.25rem;
}

/* Form Actions */
.form-actions[b-t0s4jani30] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-primary[b-t0s4jani30], .btn-secondary[b-t0s4jani30] {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-t0s4jani30] {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: var(--accent-glow);
}

@media (hover: hover) {
    .btn-primary:hover[b-t0s4jani30] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

.btn-secondary[b-t0s4jani30] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

@media (hover: hover) {
    .btn-secondary:hover[b-t0s4jani30] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

/* Weight Forecast */
.forecast-header[b-t0s4jani30] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.forecast-stat[b-t0s4jani30] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: all 0.2s;
}

@media (hover: hover) {
    .forecast-stat:hover[b-t0s4jani30] {
        border-color: var(--accent-primary);
        transform: translateY(-2px);
    }
}

.stat-icon[b-t0s4jani30] {
    font-size: 2.5rem;
    line-height: 1;
}

.stat-content[b-t0s4jani30] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-t0s4jani30] {
    font-size: 0.813rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value[b-t0s4jani30] {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-value.current[b-t0s4jani30] {
    color: #3b82f6;
}

.stat-value.projected[b-t0s4jani30] {
    color: #8b5cf6;
}

.stat-value.loss[b-t0s4jani30] {
    color: #3b82f6;
}

.stat-value.gain[b-t0s4jani30] {
    color: #f59e0b;
}

.projection-chart[b-t0s4jani30] {
    margin-bottom: 2rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-light);
}

.chart-svg[b-t0s4jani30] {
    width: 100%;
    height: auto;
    color: var(--text-primary);
}

.data-point[b-t0s4jani30] {
    fill: #6366f1;
    transition: all 0.2s;
    cursor: pointer;
}

@media (hover: hover) {
    .point-group:hover .data-point[b-t0s4jani30] {
        r: 7;
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
    }
}

.data-point.current[b-t0s4jani30] {
    fill: #3b82f6;
}

.data-point.projected[b-t0s4jani30] {
    fill: #8b5cf6;
}

.projection-summary[b-t0s4jani30] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
}

.projection-summary .bi[b-t0s4jani30] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.projection-summary p[b-t0s4jani30] {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    color: var(--text-primary);
}

.projection-summary p:last-child[b-t0s4jani30] {
    margin-bottom: 0;
}

.weighing-instructions[b-t0s4jani30] {
    padding-top: 1rem;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    font-size: 0.938rem;
}

.weighing-instructions strong[b-t0s4jani30] {
    color: var(--accent-primary);
    display: block;
    margin-bottom: 0.5rem;
}

/* Animations */
@keyframes fadeIn-b-t0s4jani30 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (992px and below) */
@media (max-width: 991px) {
    .settings-container[b-t0s4jani30] {
        padding: 1.5rem 1rem;
    }

    .form-row-three[b-t0s4jani30] {
        grid-template-columns: repeat(2, 1fr);
    }

    .recommendation-values[b-t0s4jani30] {
        grid-template-columns: repeat(2, 1fr);
    }

    .forecast-header[b-t0s4jani30] {
        grid-template-columns: repeat(2, 1fr);
    }

    .forecast-header .forecast-stat:last-child[b-t0s4jani30] {
        grid-column: span 2;
        justify-content: center;
    }
}

/* Phone (768px and below) */
@media (max-width: 767px) {
    .settings-container[b-t0s4jani30] {
        padding: 1rem;
    }

    .page-title[b-t0s4jani30] {
        font-size: 1.5rem;
    }

    .settings-card[b-t0s4jani30] {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .section-title[b-t0s4jani30] {
        font-size: 1.125rem;
    }

    .form-row[b-t0s4jani30] {
        grid-template-columns: 1fr;
    }

    .form-row-three[b-t0s4jani30] {
        grid-template-columns: 1fr;
    }

    .goal-cards[b-t0s4jani30] {
        grid-template-columns: 1fr;
    }

    .goal-card[b-t0s4jani30] {
        flex-direction: row;
        padding: 1rem;
        gap: 1rem;
        text-align: left;
    }

    .goal-icon[b-t0s4jani30] {
        font-size: 2rem;
        margin-bottom: 0;
    }

    /* Goal cards five - switch to 3 columns on phone */
    .goal-cards-five[b-t0s4jani30] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .goal-cards-five .goal-card[b-t0s4jani30] {
        flex-direction: column;
        padding: 0.75rem 0.5rem;
        text-align: center;
    }

    .goal-cards-five .goal-icon[b-t0s4jani30] {
        font-size: 1.75rem;
        margin-bottom: 0.375rem;
    }

    .goal-cards-five .goal-card h3[b-t0s4jani30] {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .goal-cards-five .goal-card p[b-t0s4jani30] {
        font-size: 0.688rem;
    }

    .recommendation-values[b-t0s4jani30] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rec-value .value[b-t0s4jani30] {
        font-size: 1.125rem;
    }

    .forecast-header[b-t0s4jani30] {
        grid-template-columns: 1fr;
    }

    .forecast-header .forecast-stat:last-child[b-t0s4jani30] {
        grid-column: auto;
    }

    .forecast-stat[b-t0s4jani30] {
        padding: 1rem;
    }

    .stat-icon[b-t0s4jani30] {
        font-size: 2rem;
    }

    .stat-value[b-t0s4jani30] {
        font-size: 1.25rem;
    }

    .projection-chart[b-t0s4jani30] {
        padding: 1rem;
    }

    .projection-summary[b-t0s4jani30] {
        flex-direction: column;
        padding: 1.25rem;
    }

    .form-actions[b-t0s4jani30] {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .btn-primary[b-t0s4jani30], .btn-secondary[b-t0s4jani30] {
        width: 100%;
        min-height: 48px;
    }

    .btn-calculate[b-t0s4jani30] {
        width: 100%;
        justify-content: center;
    }

    .btn-apply[b-t0s4jani30] {
        width: 100%;
    }

    .macro-mode-toggle[b-t0s4jani30] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .toggle-label[b-t0s4jani30] {
        padding: 0.875rem;
    }
}

/* Small phone (480px and below) */
@media (max-width: 479px) {
    .settings-container[b-t0s4jani30] {
        padding: 0.75rem;
    }

    .page-title[b-t0s4jani30] {
        font-size: 1.375rem;
        margin-bottom: 1.5rem;
    }

    .settings-card[b-t0s4jani30] {
        padding: 1rem;
        margin-bottom: 1.25rem;
    }

    .section-title[b-t0s4jani30] {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* Goal cards five - switch to 2 columns + 1 on small phones */
    .goal-cards-five[b-t0s4jani30] {
        grid-template-columns: repeat(2, 1fr);
    }

    .goal-cards-five .goal-card:nth-child(5)[b-t0s4jani30] {
        grid-column: span 2;
    }

    .goal-cards-five .goal-icon[b-t0s4jani30] {
        font-size: 1.5rem;
    }

    .goal-cards-five .goal-card h3[b-t0s4jani30] {
        font-size: 0.688rem;
    }

    .goal-cards-five .goal-card p[b-t0s4jani30] {
        font-size: 0.625rem;
    }

    .form-input[b-t0s4jani30] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0.875rem;
    }

    .form-label[b-t0s4jani30] {
        font-size: 0.813rem;
    }

    .recommendation-box[b-t0s4jani30] {
        padding: 1rem;
    }

    .recommendation-header[b-t0s4jani30] {
        font-size: 1rem;
    }

    .recommendation-text[b-t0s4jani30] {
        font-size: 0.875rem;
    }

    .rec-value .label[b-t0s4jani30] {
        font-size: 0.75rem;
    }

    .rec-value .value[b-t0s4jani30] {
        font-size: 1rem;
    }

    .validation-error[b-t0s4jani30],
    .validation-error-banner[b-t0s4jani30] {
        font-size: 0.875rem;
        padding: 0.75rem;
    }

    .forecast-stat[b-t0s4jani30] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .weighing-instructions[b-t0s4jani30] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
.terms-container[b-pre2pgsbvz] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.terms-header[b-pre2pgsbvz] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-pre2pgsbvz] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-pre2pgsbvz] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.terms-content[b-pre2pgsbvz] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.terms-section[b-pre2pgsbvz] {
    margin-bottom: 2.5rem;
}

.terms-section:last-of-type[b-pre2pgsbvz] {
    margin-bottom: 0;
}

.intro-section[b-pre2pgsbvz] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border-left: 4px solid var(--accent-primary);
}

.terms-section h2[b-pre2pgsbvz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.terms-section h3[b-pre2pgsbvz] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.terms-section p[b-pre2pgsbvz] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.terms-section ul[b-pre2pgsbvz] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.terms-section li[b-pre2pgsbvz] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.terms-section a[b-pre2pgsbvz] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

@media (hover: hover) {
    .terms-section a:hover[b-pre2pgsbvz] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.terms-section strong[b-pre2pgsbvz] {
    color: var(--text-primary);
    font-weight: 600;
}

.important-notice[b-pre2pgsbvz] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    margin: 1.5rem 0;
}

.important-notice > span[b-pre2pgsbvz] {
    font-size: 1.5rem;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.important-notice h3[b-pre2pgsbvz] {
    color: #dc2626;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.important-notice p[b-pre2pgsbvz] {
    color: var(--text-primary);
    font-size: 0.938rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.important-notice p:last-child[b-pre2pgsbvz] {
    margin-bottom: 0;
}

.terms-footer[b-pre2pgsbvz] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-light);
    text-align: center;
}

.terms-footer p[b-pre2pgsbvz] {
    font-size: 1rem;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .terms-container[b-pre2pgsbvz] {
        padding: 1rem;
    }

    .page-title[b-pre2pgsbvz] {
        font-size: 2rem;
    }

    .terms-content[b-pre2pgsbvz] {
        padding: 1.5rem;
    }

    .terms-section h2[b-pre2pgsbvz] {
        font-size: 1.25rem;
    }

    .terms-section h3[b-pre2pgsbvz] {
        font-size: 1.063rem;
    }

    .terms-section p[b-pre2pgsbvz],
    .terms-section li[b-pre2pgsbvz] {
        font-size: 0.938rem;
    }

    .important-notice[b-pre2pgsbvz] {
        flex-direction: column;
        padding: 1.25rem;
    }

    .important-notice > span[b-pre2pgsbvz] {
        font-size: 1.25rem;
    }
}
/* /Components/Shared/PlaceholderAd.razor.rz.scp.css */
.ad-container[b-8sry77neo8] {
    margin: 1.5rem auto;
    border-radius: 8px;
    overflow: hidden;
}

.ad-container.ad-horizontal[b-8sry77neo8] {
    max-width: 728px;
    height: 90px;
}

.ad-container.ad-square[b-8sry77neo8] {
    max-width: 300px;
    height: 250px;
}

.ad-container.ad-vertical[b-8sry77neo8] {
    max-width: 160px;
    height: 600px;
}

.ad-container.ad-mobile[b-8sry77neo8] {
    max-width: 320px;
    height: 100px;
}

.ad-placeholder[b-8sry77neo8] {
    width: 100%;
    height: 100%;
    background: var(--card-background);
    border: 2px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
}

.ad-label[b-8sry77neo8] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ad-content[b-8sry77neo8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.ad-icon[b-8sry77neo8] {
    font-size: 2rem;
}

.ad-text[b-8sry77neo8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ad-size[b-8sry77neo8] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.ad-description[b-8sry77neo8] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.ad-upgrade[b-8sry77neo8] {
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.25rem;
}

@media (hover: hover) {
    .ad-upgrade:hover[b-8sry77neo8] {
        text-decoration: underline;
    }
}

@media (max-width: 768px) {
    .ad-container.ad-horizontal[b-8sry77neo8] {
        max-width: 320px;
        height: 100px;
    }
}
/* /Components/Shared/ProfileCompletionBanner.razor.rz.scp.css */
.profile-banner[b-7ftp1upvge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    animation: slideDown-b-7ftp1upvge 0.3s ease-out;
}

.banner-content[b-7ftp1upvge] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
}

.banner-icon[b-7ftp1upvge] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.banner-text[b-7ftp1upvge] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.banner-text strong[b-7ftp1upvge] {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
}

.banner-subtitle[b-7ftp1upvge] {
    font-size: 0.813rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-actions[b-7ftp1upvge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-complete[b-7ftp1upvge] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-complete:hover[b-7ftp1upvge] {
        background: var(--accent-hover);
        transform: translateY(-1px);
    }
}

.btn-complete .bi[b-7ftp1upvge] {
    font-size: 1rem;
}

.btn-dismiss[b-7ftp1upvge] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-dismiss:hover[b-7ftp1upvge] {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
        color: #dc2626;
    }
}

.btn-dismiss .bi[b-7ftp1upvge] {
    font-size: 1rem;
}

@keyframes slideDown-b-7ftp1upvge {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 560px) {
    .profile-banner[b-7ftp1upvge] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        padding: 1rem;
    }

    .banner-content[b-7ftp1upvge] {
        gap: 0.75rem;
    }

    .banner-subtitle[b-7ftp1upvge] {
        white-space: normal;
    }

    .banner-actions[b-7ftp1upvge] {
        justify-content: space-between;
    }

    .btn-complete[b-7ftp1upvge] {
        flex: 1;
        justify-content: center;
    }
}
/* /Components/Shared/WeightProjectionChart.razor.rz.scp.css */
.projection-chart[b-qa3unn2j0h] {
    background: var(--bg-tertiary);
    border-radius: 16px;
    padding: 1.25rem;
}

.projection-chart.compact[b-qa3unn2j0h] {
    border-radius: 12px;
    padding: 1rem;
}

.chart-svg[b-qa3unn2j0h] {
    width: 100%;
    height: auto;
    display: block;
}

/* Data points */
.data-point[b-qa3unn2j0h] {
    fill: url(#lineGradient);
    transition: r 0.2s;
}

.data-point.current[b-qa3unn2j0h] {
    fill: #3b82f6;
}

.data-point.projected[b-qa3unn2j0h] {
    fill: #8b5cf6;
}

@media (hover: hover) {
    .point-group:hover .data-point[b-qa3unn2j0h] {
        r: 7;
    }
}