/* /Components/AllMemoriesModal.razor.rz.scp.css */
.modal-overlay[b-ewvrrsiyst] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40,25,15,0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

.modal-overlay.visible[b-ewvrrsiyst] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-content.memories-modal-content[b-ewvrrsiyst] {
    background-color: #FFF7F2;
    padding: 20px;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 8px 25px rgba(100,80,70,0.12);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

.memories-title[b-ewvrrsiyst] {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.memories-filters[b-ewvrrsiyst] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.memories-filters select[b-ewvrrsiyst],
.memories-filters input[b-ewvrrsiyst] {
    padding: 0.5rem;
    border: 1px solid #e1d4c9;
    border-radius: 8px;
    background: #fff;
}

.memory-section[b-ewvrrsiyst] {
    margin-bottom: 1rem;
}

.memory-row[b-ewvrrsiyst] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 0.5rem;
}

.memory-info[b-ewvrrsiyst] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.memory-title[b-ewvrrsiyst] {
    font-weight: 600;
}

.memory-sub[b-ewvrrsiyst] {
    font-size: 0.85rem;
    color: #555;
}

.memory-icons .icon[b-ewvrrsiyst] {
    margin-left: 0.5rem;
    cursor: pointer;
}

.btn-add-memory[b-ewvrrsiyst] {
    margin-top: 1rem;
    padding: 0.6rem;
    border-radius: 12px;
    background-color: #ff9d7e;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
}

.btn-add-memory:hover[b-ewvrrsiyst] {
    background-color: #ff855f;
}

/* /Components/AttachLovedOneModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-q9efl97qpe] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

.modal-overlay.visible[b-q9efl97qpe] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Modal Content */
.modal-content[b-q9efl97qpe] {
    position: relative;
    background-color: #FFFCFA;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.modal-overlay.visible .modal-content[b-q9efl97qpe] {
    transform: scale(1);
}

/* Modal Header */
.modal-header[b-q9efl97qpe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f0e1d0;
    flex-shrink: 0;
}

.modal-header h3[b-q9efl97qpe] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: #594a3a;
    margin: 0;
}

.search-label[b-q9efl97qpe] {
    display: block;
    color: #594a3a;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.close-btn[b-q9efl97qpe] {
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: 400;
    color: #967f6b;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

.close-btn:hover[b-q9efl97qpe] {
    color: #594a3a;
}

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

.search-input[b-q9efl97qpe] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #f0e1d0;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-q9efl97qpe] {
    outline: none;
    border-color: #8B5A2B;
    box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.12);
}

/* List Styling */
.list[b-q9efl97qpe] {
    margin-top: 1rem;
}

.person-row[b-q9efl97qpe] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: #fff8f4;
    border-radius: 8px;
    border: 1px solid #ffe6d6;
    transition: background 0.2s ease;
}

.person-row:hover[b-q9efl97qpe] {
    background: #fff1e8;
}

.person-avatar[b-q9efl97qpe] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(176, 127, 78, 0.25);
    background: #F7E9D8;
}

.person-details[b-q9efl97qpe] {
    min-width: 0;
    flex: 1 1 auto;
}

.person-row b[b-q9efl97qpe] {
    color: #594a3a;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.muted[b-q9efl97qpe] {
    color: #b2886a;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.error[b-q9efl97qpe] {
    color: #8F5E58;
    padding: 1rem;
    background: #F9EFEC;
    border-radius: 8px;
    text-align: center;
}

.empty-state[b-q9efl97qpe] {
    color: #8A7668;
    padding: 1rem;
    text-align: center;
}

/* Button Styling */
.btn-small[b-q9efl97qpe] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background: #E6B9A6;
    color: #4B2E2E;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.9rem;
}

.btn-small:hover[b-q9efl97qpe] {
    background: #DFAE99;
}

/* Modal Actions */
.modal-actions[b-q9efl97qpe] {
    padding: 1rem 2rem;
    border-top: 1px solid #f0e1d0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.modal-actions button[b-q9efl97qpe] {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.95rem;
}

.modal-actions button[b-q9efl97qpe] {
    background: #ffe6d6;
    color: #bb6535;
}

.modal-actions button:hover[b-q9efl97qpe] {
    background: #ffd3b7;
    color: #a65322;
}

@media (max-width: 520px) {
    .modal-header[b-q9efl97qpe],
    .modal-body[b-q9efl97qpe],
    .modal-actions[b-q9efl97qpe] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .person-row[b-q9efl97qpe] {
        align-items: flex-start;
    }

    .person-avatar[b-q9efl97qpe] {
        width: 44px;
        height: 44px;
    }

    .btn-small[b-q9efl97qpe] {
        padding: 0.5rem 0.8rem;
    }
}
/* /Components/AttachPersonModal.razor.rz.scp.css */
.family-member-editor[b-q93y5iekbo] {
    background: #fff8f4;
    border-radius: 18px;
    padding: 1.3rem 1.6rem;
    margin: 12px 0;
    box-shadow: 0 1px 6px 0 rgba(120, 80, 60, 0.10);
    font-family: 'Segoe UI', sans-serif;
    max-width: 620px;
}

.family-member-editor > .editor-section[b-q93y5iekbo] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ffe6d6;
}

.family-member-editor > .editor-section:last-child[b-q93y5iekbo] {
    border-bottom: none;
}

.editor-section > b[b-q93y5iekbo] {
    color: #bb6535; /* Warm brown accent for headers */
    font-size: 1.08em;
}

.input-minimal[b-q93y5iekbo] {
    margin-top: 8px;
    margin-right: 8px;
    border: none;
    border-radius: 8px;
    padding: 0.3em 0.8em;
    background: #fffaf7;
    box-shadow: 0 1px 3px 0 #ffe6d699;
    font-size: 1em;
    min-width: 150px;
}

.input-minimal:focus[b-q93y5iekbo] {
    outline: 1.5px solid #ffb98a;
}

.label-subtle[b-q93y5iekbo] {
    color: #b2886a;
    margin-left: 6px;
    font-size: 0.95em;
}

.label-id[b-q93y5iekbo] {
    color: #bbb;
    margin-left: 10px;
    font-size: 0.85em;
}

.btn-small[b-q93y5iekbo] {
    margin-top: 7px;
    margin-right: 8px;
    padding: 0.28em 0.88em;
    border-radius: 8px;
    border: none;
    background: #ffe6d6;
    color: #bb6535;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    font-size: 0.95em;
    box-shadow: 0 0.5px 2px 0 #ffe6d699;
}

.btn-small:hover[b-q93y5iekbo] {
    background: #ffd3b7;
    color: #a65322;
}

small[b-q93y5iekbo] {
    color: #b2886a;
    /* margin-right: 8px; */
}

.family-member-editor .family-member-editor[b-q93y5iekbo] {
    margin-left: 2.0rem;
    margin-top: 0.6rem;
    background: #fff1e8; /* Lighter background for nested */
    box-shadow: none;
    border: 1px dashed #ffd3b7;
}

.family-member-container[b-q93y5iekbo] {
    position: relative;
    margin-bottom: 0.5rem;
}

.btn-remove[b-q93y5iekbo] {
    background: #ffb3b3 !important;
    color: #cc0000 !important;
    margin-left: 0.5rem;
    padding: 0.2em 0.6em !important;
    font-size: 0.85em !important;
}

.btn-remove:hover[b-q93y5iekbo] {
    background: #ff9999 !important;
    color: #990000 !important;
}

/* Prevent infinite nesting visual issues */
.family-member-editor .family-member-editor .family-member-editor[b-q93y5iekbo] {
    margin-left: 1rem;
    background: #ffeee6;
    border: 1px dotted #ffc299;
}

.depth-limit-message[b-q93y5iekbo] {
    padding: 0.5rem;
    background: #f0f0f0;
    border-radius: 8px;
    margin: 0.25rem 0;
    color: #666;
    font-style: italic;
}

.depth-limit-message small[b-q93y5iekbo] {
    color: #888;
}

/* Modal Overlay */
.modal-overlay[b-q93y5iekbo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

.modal-overlay.visible[b-q93y5iekbo] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Modal Content */
.modal-content[b-q93y5iekbo] {
    position: relative;
    background-color: #FFFCFA;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.modal-overlay.visible .modal-content[b-q93y5iekbo] {
    transform: scale(1);
}

/* Modal Header */
.modal-header[b-q93y5iekbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f0e1d0;
    flex-shrink: 0;
}

.modal-header h3[b-q93y5iekbo] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: #594a3a;
    margin: 0;
}

.close-btn[b-q93y5iekbo] {
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: 400;
    color: #967f6b;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

.close-btn:hover[b-q93y5iekbo] {
    color: #594a3a;
}

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

.search-input[b-q93y5iekbo] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #f0e1d0;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-q93y5iekbo] {
    outline: none;
    border-color: #bb6535;
}

/* List Styling */
.list[b-q93y5iekbo] {
    margin-top: 1rem;
}

.person-row[b-q93y5iekbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: #fff8f4;
    border-radius: 8px;
    border: 1px solid #ffe6d6;
    transition: background 0.2s ease;
}

.person-row:hover[b-q93y5iekbo] {
    background: #fff1e8;
}

.person-row b[b-q93y5iekbo] {
    color: #594a3a;
    font-size: 1rem;
}

.muted[b-q93y5iekbo] {
    color: #b2886a;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.error[b-q93y5iekbo] {
    color: #cc0000;
    padding: 1rem;
    background: #ffebeb;
    border-radius: 8px;
    text-align: center;
}

/* Button Styling */
.btn-small[b-q93y5iekbo] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background: #bb6535;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.9rem;
}

.btn-small:hover[b-q93y5iekbo] {
    background: #a65322;
}

/* Modal Actions */
.modal-actions[b-q93y5iekbo] {
    padding: 1rem 2rem;
    border-top: 1px solid #f0e1d0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.modal-actions button[b-q93y5iekbo] {
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.95rem;
}

.modal-actions button[b-q93y5iekbo] {
    background: #ffe6d6;
    color: #bb6535;
}

.modal-actions button:hover[b-q93y5iekbo] {
    background: #ffd3b7;
    color: #a65322;
}
/* /Components/AvatarPicker.razor.rz.scp.css */
/* Avatar Picker Specific Styles */

.avatar-row[b-6m3etqyksy] {
    display: flex;
    justify-content: center;
}

.avatar-col[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.avatar-preview-img[b-6m3etqyksy] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2.5px solid #efd7bb;
    background: #fdf4ed;
    box-shadow: 0 2px 8px rgba(247, 186, 173, 0.08);
}

.avatar-clickable[b-6m3etqyksy] {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.avatar-clickable:hover[b-6m3etqyksy],
.avatar-clickable:focus[b-6m3etqyksy] {
    box-shadow: 0 0 0 4px #fbbbad66;
    outline: none;
}

.avatar-hint[b-6m3etqyksy] {
    color: #ab9882;
    font-size: 0.9rem;
    text-align: center;
    font-style: italic;
    user-select: none;
    max-width: 150px;
}

.avatar-picker-overlay[b-6m3etqyksy] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(60, 45, 35, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.avatar-picker-modal[b-6m3etqyksy] {
    background: linear-gradient(180deg, #FFFCF8 0%, #FFF7F0 100%);
    padding: 0;
    border-radius: 24px;
    box-shadow: 0 12px 48px rgba(100, 70, 50, 0.18);
    min-width: 320px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.avatar-picker-modal.refined[b-6m3etqyksy] {
    border: 1px solid rgba(200, 160, 120, 0.15);
}

/* Close Button */
.picker-close-btn[b-6m3etqyksy] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(120, 90, 70, 0.08);
    color: #7a6a5a;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.picker-close-btn:hover[b-6m3etqyksy] {
    background: rgba(120, 90, 70, 0.15);
    color: #5a4a3a;
}

/* Header */
.picker-header[b-6m3etqyksy] {
    text-align: center;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid rgba(200, 160, 120, 0.1);
}

.picker-title[b-6m3etqyksy] {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #3a2a1a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.picker-subtitle[b-6m3etqyksy] {
    font-size: 0.9rem;
    color: #8a7a6a;
    margin: 0;
    line-height: 1.4;
}

/* Refined Tabs */
.avatar-gender-tabs.refined-tabs[b-6m3etqyksy] {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px 8px 16px;
    flex-wrap: wrap;
}

.refined-tabs .avatar-tab[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e8ddd0;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: #6d5946;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(120, 90, 60, 0.05);
}

.refined-tabs .avatar-tab:hover[b-6m3etqyksy] {
    border-color: #d8c8b8;
    background: #fffaf5;
}

.refined-tabs .avatar-tab.selected[b-6m3etqyksy] {
    background: linear-gradient(135deg, #fbbbad 0%, #faad9b 100%);
    border-color: transparent;
    color: #38250d;
    box-shadow: 0 3px 10px rgba(251, 187, 173, 0.3);
}

/* Brand Tab Specifics */
.refined-tabs .avatar-tab.brand-tab.selected[b-6m3etqyksy] {
    background: linear-gradient(135deg, #ffd86b 0%, #f5b942 100%);
    /* Gold/Warm Brand Tone */
    color: #5a4010;
    box-shadow: 0 3px 10px rgba(200, 150, 40, 0.3);
}

.tab-icon[b-6m3etqyksy] {
    font-size: 0.9rem;
}

/* Hero Card - Premium Entry */
.hero-card-wrapper[b-6m3etqyksy] {
    padding: 4px 20px 16px 20px;
    flex-shrink: 0;
}

.hero-card[b-6m3etqyksy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fffcf5 0%, #fff8e6 100%);
    border: 1px solid #eadbc8;
    border-radius: 18px;
    padding: 16px 20px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(140, 100, 60, 0.08);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.hero-card:hover[b-6m3etqyksy] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(140, 100, 60, 0.12);
    border-color: #dcbfa4;
}

.hero-content[b-6m3etqyksy] {
    flex: 1 1 auto;
    min-width: 0;
    z-index: 2;
}

.hero-premium-badge[b-6m3etqyksy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #a88038;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    background: rgba(255, 230, 180, 0.4);
    padding: 2px 8px;
    border-radius: 10px;
}

.premium-star[b-6m3etqyksy] {
    color: #d4af37;
}

.hero-title[b-6m3etqyksy] {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #3a2a1a;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.hero-subtitle[b-6m3etqyksy] {
    font-size: 0.85rem;
    color: #8a7060;
    margin: 0 0 12px 0;
    line-height: 1.4;
    max-width: 29ch;
}

.hero-cta[b-6m3etqyksy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E0A96D 0%, #d4985c 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(224, 169, 109, 0.3);
}

.hero-card:hover .hero-cta[b-6m3etqyksy] {
    background: linear-gradient(135deg, #d4985c 0%, #c98b4f 100%);
    box-shadow: 0 4px 12px rgba(224, 169, 109, 0.4);
}

.hero-illustration[b-6m3etqyksy] {
    flex: 0 0 156px;
    width: 156px;
    aspect-ratio: 2 / 1;
    margin-left: 0;
    padding: 4px;
    border-radius: 18px;
    border: 1px solid rgba(223, 193, 154, 0.78);
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(246, 228, 203, 0.94) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74), 0 8px 20px rgba(156, 118, 77, 0.12);
    overflow: hidden;
    align-self: center;
}

.hero-illustration-img[b-6m3etqyksy] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
    background: radial-gradient(circle at top, rgba(255, 250, 242, 0.94), rgba(247, 227, 199, 0.86));
    pointer-events: none;
}

@media (max-width: 520px) {
    .hero-card-wrapper[b-6m3etqyksy] {
        padding: 4px 16px 14px 16px;
    }

    .hero-card[b-6m3etqyksy] {
        gap: 12px;
        padding: 14px 16px;
    }

    .hero-title[b-6m3etqyksy] {
        font-size: 1.05rem;
    }

    .hero-subtitle[b-6m3etqyksy] {
        max-width: none;
        font-size: 0.82rem;
        margin-bottom: 10px;
    }

    .hero-cta[b-6m3etqyksy] {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .hero-illustration[b-6m3etqyksy] {
        flex-basis: 124px;
        width: 124px;
        padding: 4px;
        border-radius: 16px;
    }

    .hero-illustration-img[b-6m3etqyksy] {
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .hero-card[b-6m3etqyksy] {
        gap: 10px;
    }

    .hero-illustration[b-6m3etqyksy] {
        flex-basis: 108px;
        width: 108px;
    }
}

/* Gallery Header */
.avatar-gallery-header h5[b-6m3etqyksy] {
    margin: 0;
    padding: 0 24px 8px 24px;
    font-size: 0.95rem;
    color: #8a7a6a;
    font-weight: 700;
}

/* Avatar List */
.avatar-picker-list[b-6m3etqyksy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 12px;
    justify-items: center;
    padding: 0 20px 20px 20px;
    overflow-y: auto;
    flex: 1;
}

.avatar-item-wrapper[b-6m3etqyksy] {
    position: relative;
    width: 64px;
    height: 64px;
}

.avatar-picker-img[b-6m3etqyksy] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #f0e4d8;
    background: #fdf8f4;
    box-shadow: 0 2px 6px rgba(180, 140, 100, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    object-fit: cover;
}

.avatar-item-wrapper:hover .avatar-picker-img[b-6m3etqyksy] {
    border-color: #e8c4b0;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(180, 140, 100, 0.15);
}

.avatar-picker-img.selected[b-6m3etqyksy] {
    border-color: #ffd86b;
    /* Gold Ring */
    box-shadow: 0 0 0 3px rgba(255, 216, 107, 0.4), 0 4px 12px rgba(200, 150, 40, 0.2);
    transform: scale(1.05);
}

/* Avatar Delete Action - Always Visible for Accessibility */
.avatar-action-delete[b-6m3etqyksy] {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(180, 160, 140, 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.avatar-action-delete:hover[b-6m3etqyksy] {
    background: #c9635a;
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(201, 99, 90, 0.35);
}

.delete-icon[b-6m3etqyksy] {
    font-size: 14px;
    line-height: 1;
    margin-top: -1px;
}



.avatar-tab[b-6m3etqyksy] {
    background: none;
    border: 2px solid #efd7bb;
    border-radius: 20px;
    padding: 0.5em 1.4em;
    font-size: 1.02rem;
    color: #7a5a43;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-tab.selected[b-6m3etqyksy] {
    background: #fbbbad;
    border-color: #fbbbad;
    color: #38250d;
    font-weight: 600;
    box-shadow: 0 2px 8px #fbbbad33;
}

.avatar-tab:hover[b-6m3etqyksy] {
    background-color: #ffe9e1;
}

/* Premium Avatar Styles */

.premium-avatar-tile[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #fbbbad;
    background: #fff3ec;
    border-radius: 16px;
    color: #bc8b62;
    font-weight: 600;
    width: 100%;
    height: 68px;
    cursor: pointer;
    font-size: 0.85em;
    gap: 2px;
    transition: border 0.16s, background 0.16s;
    text-align: center;
    padding: 4px;
}

.premium-avatar-tile:hover[b-6m3etqyksy] {
    border-color: #ff9d7a;
    background: #fff0e7;
}

@media (min-width: 900px) {
    .avatar-picker-list .premium-avatar-tile[b-6m3etqyksy] {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        height: auto;
        padding: 14px;
        font-size: 1.05rem;
    }
}

@media (max-width: 899px) {
    .avatar-picker-list .premium-avatar-tile[b-6m3etqyksy] {
        grid-column: auto;
        width: 100%;
        height: auto;
        padding: 10px 12px;
    }
}

.premium-icon[b-6m3etqyksy] {
    font-size: 1.2em;
    color: #ffad60;
    margin-bottom: 2px;
}

.premium-text[b-6m3etqyksy] {
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.1;
}

.premium-subtitle[b-6m3etqyksy] {
    font-size: 0.65em;
    font-weight: 400;
    opacity: 0.8;
    line-height: 1;
}

/* Premium Modal Overlay */
.premium-avatar-modal-overlay[b-6m3etqyksy] {
    position: fixed;
    z-index: 2100;
    inset: 0;
    background: rgba(40, 25, 15, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.premium-avatar-modal[b-6m3etqyksy] {
    background: #FFFCFA;
    border-radius: 24px;
    padding: 2.2em 2.5em;
    box-shadow: 0 8px 32px #b2805040;
    min-width: 340px;
    max-width: 97vw;
    position: relative;
    text-align: center;
}

@media (min-width: 601px) {
    .premium-avatar-modal[b-6m3etqyksy] {
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        padding: 1.6rem 2rem;
        overflow: hidden;
    }

    .premium-avatar-body[b-6m3etqyksy] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        padding-right: 8px;
    }

    .premium-form-actions[b-6m3etqyksy] {
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255, 249, 246, 0.0), #fff9f4 40%);
        padding: 1rem 0.5rem;
        z-index: 20;
    }
}

@media (max-width: 600px) {
    .premium-avatar-modal[b-6m3etqyksy] {
        width: 100% !important;
        height: 100vh;
        max-width: 100vw !important;
        border-radius: 0 !important;
        padding: 0.75rem 1rem 0.5rem 1rem !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .premium-avatar-header[b-6m3etqyksy] {
        margin-bottom: 0.5rem;
    }

    .premium-avatar-header .premium-title[b-6m3etqyksy] {
        font-size: 1.3rem;
    }

    .premium-avatar-header .premium-modal-subtitle[b-6m3etqyksy] {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    .premium-two-step-stepper[b-6m3etqyksy] {
        margin: 0.5rem 0 0.75rem 0;
    }

    .premium-two-step-stepper .stepper-inner[b-6m3etqyksy] {
        height: 45px;
        padding: 6px 10px;
    }

    .premium-two-step-stepper .step-label[b-6m3etqyksy] {
        font-size: 0.85rem;
        padding: 4px 8px;
    }

    .premium-avatar-body[b-6m3etqyksy] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        padding: 0.25rem 0.25rem 0.5rem 0.25rem;
    }

    /* Mode tabs - compact for mobile */
    .avatar-mode-tabs[b-6m3etqyksy] {
        gap: 8px;
        margin: 0.25rem 0 1rem 0;
    }

    .avatar-mode-tab[b-6m3etqyksy] {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .mode-icon[b-6m3etqyksy] {
        font-size: 1.2em;
    }

    .mode-label[b-6m3etqyksy] {
        font-size: 0.95rem;
    }

    .mode-hint[b-6m3etqyksy] {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* Form group - more compact */
    .premium-form-group[b-6m3etqyksy] {
        margin-bottom: 1rem;
    }

    .premium-form-group label[b-6m3etqyksy] {
        font-size: 0.9rem;
        margin-bottom: 0.4em;
    }

    .premium-form-group textarea[b-6m3etqyksy] {
        font-size: 0.95rem;
        padding: 0.75em 1em;
        min-height: 80px;
    }

    /* Inspiration chips - smaller and tighter */
    .inspiration-chips[b-6m3etqyksy] {
        gap: 6px;
        margin-top: 8px;
    }

    .chip[b-6m3etqyksy] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Photo upload area - compact */
    .premium-preview-empty[b-6m3etqyksy] {
        width: 100%;
        height: 150px;
        border-radius: 14px;
    }

    .photo-to-art-visual[b-6m3etqyksy] {
        gap: 8px;
    }

    .visual-step[b-6m3etqyksy] {
        font-size: 1.5rem;
    }

    .visual-step.magic[b-6m3etqyksy] {
        font-size: 1.2rem;
    }

    .visual-arrow[b-6m3etqyksy] {
        font-size: 1.1rem;
    }

    .upload-cue[b-6m3etqyksy] {
        font-size: 0.9rem;
    }

    .upload-hint[b-6m3etqyksy] {
        font-size: 0.75rem;
    }

    /* Placeholder preview - compact */
    .placeholder-preview[b-6m3etqyksy] {
        padding: 20px;
        margin: 12px 0;
        min-height: 120px;
    }

    .silhouette-icon[b-6m3etqyksy] {
        font-size: 3rem;
        margin-bottom: 8px;
    }

    .placeholder-text[b-6m3etqyksy] {
        font-size: 0.85rem;
    }

    /* Magic button wrapper - compact */
    .magic-button-wrapper[b-6m3etqyksy] {
        gap: 6px;
    }

    .credit-cost[b-6m3etqyksy] {
        font-size: 0.75rem;
    }

    .btn-magic-gold[b-6m3etqyksy] {
        padding: 12px 24px;
        font-size: 1rem;
    }

    .premium-form-actions[b-6m3etqyksy] {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        background: #fffcfa;
        box-shadow: 0 -6px 18px rgba(120, 80, 55, 0.06);
        z-index: 30;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        align-items: center;
    }

    .btn-modal-cancel-refined[b-6m3etqyksy] {
        padding: 0.7em 1.5em;
        font-size: 0.9rem;
    }
}

.premium-avatar-header[b-6m3etqyksy] {
    text-align: left;
    margin-bottom: 0.75rem;
}

.premium-avatar-header .premium-title[b-6m3etqyksy] {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem 0;
}

.premium-avatar-header .premium-modal-subtitle[b-6m3etqyksy] {
    color: #967f6b;
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
}

.avatar-mode-tabs[b-6m3etqyksy] {
    display: inline-flex;
    gap: 8px;
    background: #fff6f0;
    border: 1px solid #f3e1d0;
    border-radius: 999px;
    padding: 6px;
    margin: 0.5rem 0 1rem 0;
}

.avatar-mode-tab[b-6m3etqyksy] {
    appearance: none;
    background: transparent;
    color: #6d5946;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.avatar-mode-tab.active[b-6m3etqyksy] {
    background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
    color: #38250d;
    box-shadow: 0 2px 8px rgba(251, 187, 173, 0.25);
}

.premium-form-group[b-6m3etqyksy] {
    margin-bottom: 1.5rem;
    text-align: left;
}

.premium-form-group label[b-6m3etqyksy] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: #594a3a;
}

.premium-form-group textarea[b-6m3etqyksy] {
    width: 100%;
    border: 1.3px solid #f0e1d0;
    background: #fff9f4;
    border-radius: 15px;
    padding: 0.92em 1.1em;
    font-size: 1.06rem;
    color: #473b26;
    box-sizing: border-box;
    outline: none;
    resize: none;
    font-family: inherit;
}

.premium-two-step-stepper[b-6m3etqyksy] {
    margin: 0.75rem 0 1rem 0;
    width: 100%;
}

.premium-two-step-stepper .stepper-inner[b-6m3etqyksy] {
    position: relative;
    height: 60px;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

.premium-two-step-stepper .stepper-track[b-6m3etqyksy] {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    top: 50%;
    transform: translateY(-50%);
}

.premium-two-step-stepper .stepper-progress[b-6m3etqyksy] {
    position: absolute;
    left: 14px;
    height: 12px;
    border-radius: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #fbbbad 0%, #f9ac9c 100%);
    transition: width 360ms ease;
    box-shadow: 0 4px 12px rgba(249, 172, 156, 0.12);
}

.premium-two-step-stepper .stepper-labels[b-6m3etqyksy] {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 2;
}

.premium-two-step-stepper .step-label[b-6m3etqyksy] {
    font-weight: 700;
    color: #7a5a43;
    font-size: 0.98rem;
    padding: 6px 10px;
    border-radius: 10px;
}

.spinner-inline[b-6m3etqyksy] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #38250d;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin-b-6m3etqyksy 1s ease-in-out infinite;
}

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

.premium-preview-img[b-6m3etqyksy] {
    width: 180px;
    height: 180px;
    border-radius: 999px;
    object-fit: cover;
    border: 6px solid rgba(251, 187, 173, 0.85);
    box-shadow: 0 18px 40px rgba(205, 125, 60, 0.12);
}

.premium-preview-empty[b-6m3etqyksy] {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #fff7f4;
    box-shadow: 0 8px 26px rgba(170, 110, 70, 0.06);
    border: 3px dashed rgba(242, 195, 173, 0.95);
    cursor: pointer;
    flex-direction: column;
    gap: 10px;
    color: #b57f5b;
}

.style-chips-row[b-6m3etqyksy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    justify-items: center;
}

.style-chip[b-6m3etqyksy] {
    background: #fff9f4;
    border: 1px solid #f0e1d0;
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.style-chip.selected[b-6m3etqyksy] {
    background: linear-gradient(180deg, #fdefe8 0%, #fff6f2 100%);
    border-color: #f9c8b0;
}

.uploaded-photo-preview[b-6m3etqyksy] {
    margin-top: 0.5rem;
    padding: 8px;
    background: #fff6f0;
    border: 1px dashed #f0e1d0;
    border-radius: 12px;
    display: inline-block;
    position: relative;
}

.uploaded-photo-preview img[b-6m3etqyksy] {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #fbbbad;
}

.preview-cancel-btn[b-6m3etqyksy] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.btn-modal-cancel-refined[b-6m3etqyksy] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
    border-radius: 25px;
    padding: 0.8em 2.5em;
    font-weight: 600;
    cursor: pointer;
}

.btn-modal-premium[b-6m3etqyksy] {
    background-color: #fbbbad;
    color: #38250d;
    border: none;
    border-radius: 25px;
    padding: 0.8em 2.5em;
    font-weight: 600;
    cursor: pointer;
}

.error-message[b-6m3etqyksy] {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 12px;
    border: 1px solid #fecaca;
}

.modal-close-icon-button.premium-close[b-6m3etqyksy] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--text-light);
    cursor: pointer;
}

/* ================================ */
/* Ateljé Experience Styles         */
/* ================================ */

/* Golden Card Entry Point */
.golden-card-tile[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff8e7 0%, #fff4db 50%, #ffefcc 100%);
    border: 2px solid #e8c468;
    border-radius: 16px;
    color: #8b6914;
    font-weight: 600;
    width: 100%;
    height: 80px;
    cursor: pointer;
    font-size: 0.9em;
    gap: 4px;
    transition: all 0.2s ease;
    text-align: center;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(200, 160, 60, 0.15);
    grid-column: 1 / -1;
}

.golden-card-tile:hover[b-6m3etqyksy] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(200, 160, 60, 0.25);
    border-color: #d4a84a;
}

.golden-icon[b-6m3etqyksy] {
    font-size: 1.6em;
    filter: drop-shadow(0 2px 4px rgba(200, 140, 40, 0.3));
}

.golden-text[b-6m3etqyksy] {
    font-size: 0.85em;
    font-weight: 700;
    color: #7a5a14;
}

.golden-subtitle[b-6m3etqyksy] {
    font-size: 0.65em;
    font-weight: 500;
    color: #a8893a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile-specific Golden Card */
@media (max-width: 600px) {
    .golden-card-tile[b-6m3etqyksy] {
        flex-direction: row;
        height: auto;
        padding: 12px 16px;
        gap: 10px;
        justify-content: flex-start;
        border-radius: 12px;
    }

    .golden-icon[b-6m3etqyksy] {
        font-size: 1.4em;
    }

    .golden-text[b-6m3etqyksy] {
        font-size: 0.9em;
    }

    .golden-subtitle[b-6m3etqyksy] {
        display: none;
    }
}

@media (min-width: 900px) {
    .avatar-picker-list .golden-card-tile[b-6m3etqyksy] {
        justify-self: stretch;
        width: 100%;
        height: auto;
        padding: 16px;
        font-size: 1.1rem;
    }
}

/* Mode Tabs - Emotional Redesign */
.avatar-mode-tabs[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0.5rem 0 1.5rem 0;
}

.avatar-mode-tab[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #fff9f4;
    border: 2px solid #f0e1d0;
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-mode-tab:hover[b-6m3etqyksy] {
    border-color: #e8c6b4;
    background: #fff6f0;
}

.avatar-mode-tab.active[b-6m3etqyksy] {
    background: linear-gradient(135deg, #fff5f0 0%, #fff0e8 100%);
    border-color: #fbbbad;
    box-shadow: 0 4px 16px rgba(251, 187, 173, 0.2);
}

.avatar-mode-tab.photo-mode.active[b-6m3etqyksy] {
    background: linear-gradient(135deg, #fffbf0 0%, #fff8e8 100%);
    border-color: #e8c468;
    box-shadow: 0 4px 16px rgba(200, 160, 60, 0.15);
}

.mode-tab-content[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.mode-icon[b-6m3etqyksy] {
    font-size: 1.4em;
}

.mode-label[b-6m3etqyksy] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #5a4a3a;
}

.mode-hint[b-6m3etqyksy] {
    font-size: 0.85rem;
    color: #8a7a6a;
    line-height: 1.4;
}

/* Inspiration Chips */
.inspiration-chips[b-6m3etqyksy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.chip[b-6m3etqyksy] {
    appearance: none;
    background: #fff9f4;
    border: 1.5px solid #f0e1d0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6d5946;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chip:hover[b-6m3etqyksy] {
    background: #fff3ea;
    border-color: #fbbbad;
    color: #5a4030;
    transform: translateY(-1px);
}

.chip:active[b-6m3etqyksy] {
    transform: scale(0.97);
}

/* Photo Upload Visual Cue */
.photo-to-art-upload[b-6m3etqyksy] {
    background: linear-gradient(135deg, #fffbf5 0%, #fff8f0 100%);
}

.photo-to-art-visual[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.visual-step[b-6m3etqyksy] {
    font-size: 2rem;
    opacity: 0.9;
}

.visual-step.magic[b-6m3etqyksy] {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.6));
    animation: pulse-glow-b-6m3etqyksy 2s ease-in-out infinite;
}

.visual-arrow[b-6m3etqyksy] {
    font-size: 1.4rem;
    color: #c9a882;
    font-weight: 300;
}

.upload-cue[b-6m3etqyksy] {
    font-weight: 600;
    font-size: 1rem;
    color: #7a5a3a;
}

.upload-hint[b-6m3etqyksy] {
    font-size: 0.85rem;
    color: #a89080;
}

@keyframes pulse-glow-b-6m3etqyksy {

    0%,
    100% {
        opacity: 0.9;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Placeholder Preview */
.placeholder-preview[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    margin: 16px 0;
    background: #fdfbf9;
    border: 2px dashed #e8ddd4;
    border-radius: 20px;
    min-height: 160px;
}

.silhouette-icon[b-6m3etqyksy] {
    font-size: 4rem;
    opacity: 0.25;
    margin-bottom: 12px;
}

.placeholder-text[b-6m3etqyksy] {
    font-size: 0.95rem;
    color: #b5a595;
    font-style: italic;
}

/* Magic Button */
.magic-button-wrapper[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.credit-cost[b-6m3etqyksy] {
    font-size: 0.8rem;
    color: #9a8a7a;
    font-weight: 500;
}

.btn-magic-gold[b-6m3etqyksy] {
    appearance: none;
    background: linear-gradient(135deg, #ffd86b 0%, #f5b942 50%, #e8a830 100%);
    color: #5a4010;
    border: none;
    border-radius: 30px;
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 24px rgba(200, 150, 40, 0.35);
    transition: all 0.2s ease;
}

.btn-magic-gold:hover:not(:disabled)[b-6m3etqyksy] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(200, 150, 40, 0.45);
}

.btn-magic-gold:active:not(:disabled)[b-6m3etqyksy] {
    transform: scale(0.98);
}

.btn-magic-gold:disabled[b-6m3etqyksy] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-magic-gold .spinner-inline[b-6m3etqyksy] {
    border-color: #5a4010;
    border-top-color: transparent;
}

/* Generated Avatar Success */
.generated-avatar-preview[b-6m3etqyksy] {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #f0fff0 0%, #e8ffe8 100%);
    border: 2px solid #a8e6a8;
    border-radius: 20px;
    margin: 16px 0;
}

.generated-avatar-preview h4[b-6m3etqyksy] {
    color: #2d7a2d;
    font-size: 1.1rem;
    margin: 0 0 12px 0;
}

.generated-avatar-img[b-6m3etqyksy] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid #a8e6a8;
    box-shadow: 0 8px 24px rgba(100, 180, 100, 0.2);
    object-fit: cover;
}

/* ================================ */
/* Ateljé Studio Premium Branding   */
/* ================================ */

.atelje-studio[b-6m3etqyksy] {
    background: linear-gradient(180deg, #FFFDF8 0%, #FFF9F2 100%);
    border: 1px solid rgba(200, 160, 100, 0.15);
}

.atelje-header[b-6m3etqyksy] {
    text-align: center;
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(200, 160, 100, 0.12);
    margin-bottom: 16px;
}

.atelje-badge[b-6m3etqyksy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(252, 182, 159, 0.25);
}

.badge-icon[b-6m3etqyksy] {
    font-size: 1.1rem;
}

.badge-text[b-6m3etqyksy] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8b5a3a;
}

/* Footer */
.picker-footer[b-6m3etqyksy] {
    padding: 16px 20px 20px 20px;
    border-top: 1px solid rgba(200, 160, 120, 0.1);
    display: flex;
    justify-content: center;
}

.btn-picker-close[b-6m3etqyksy] {
    background: #fdfaf6;
    border: 1px solid #e8ddd0;
    border-radius: 20px;
    padding: 10px 40px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #8a7a6a;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.btn-picker-close:hover[b-6m3etqyksy] {
    border-color: #d8c8b8;
    background: #f5efe9;
    color: #5a4030;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.atelje-title[b-6m3etqyksy] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #3a2a1a;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.atelje-subtitle[b-6m3etqyksy] {
    font-size: 0.95rem;
    color: #7a6a5a;
    margin: 0;
    line-height: 1.5;
}

/* Progress Steps */
.atelje-progress[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 0;
    margin-bottom: 16px;
}

.progress-step[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.progress-step.active[b-6m3etqyksy] {
    opacity: 1;
}

.progress-step.completed[b-6m3etqyksy] {
    opacity: 0.7;
}

.step-number[b-6m3etqyksy] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8ddd0;
    color: #8a7a6a;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.progress-step.active .step-number[b-6m3etqyksy] {
    background: linear-gradient(135deg, #ffd86b 0%, #f5b942 100%);
    color: #5a4010;
    box-shadow: 0 4px 12px rgba(200, 150, 40, 0.3);
}

.progress-step.completed .step-number[b-6m3etqyksy] {
    background: #a8e6a8;
    color: #2d7a2d;
}

.step-name[b-6m3etqyksy] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #7a6a5a;
}

.progress-step.active .step-name[b-6m3etqyksy] {
    color: #5a4a3a;
}

.progress-line[b-6m3etqyksy] {
    width: 60px;
    height: 3px;
    background: #e8ddd0;
    margin: 0 12px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.progress-line.completed[b-6m3etqyksy] {
    background: linear-gradient(90deg, #ffd86b, #a8e6a8);
}

/* Mobile adjustments for Ateljé */
@media (max-width: 600px) {
    .atelje-header[b-6m3etqyksy] {
        padding: 0 0 12px 0;
        margin-bottom: 12px;
    }

    .atelje-badge[b-6m3etqyksy] {
        padding: 5px 12px;
        margin-bottom: 10px;
    }

    .badge-text[b-6m3etqyksy] {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    .atelje-title[b-6m3etqyksy] {
        font-size: 1.25rem;
    }

    .atelje-subtitle[b-6m3etqyksy] {
        font-size: 0.85rem;
    }

    .atelje-progress[b-6m3etqyksy] {
        padding: 10px 0;
        margin-bottom: 12px;
    }

    .step-number[b-6m3etqyksy] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .step-name[b-6m3etqyksy] {
        font-size: 0.7rem;
    }

    .progress-line[b-6m3etqyksy] {
        width: 40px;
        margin: 0 8px;
    }
}

/* ================================================ */
/* NEW ATELJÉ IMMERSIVE REDESIGN                   */
/* ================================================ */

/* Ateljé Modal Container */
.atelje-modal[b-6m3etqyksy] {
    background: #FFFCF8;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(60, 40, 20, 0.25);
    max-width: 480px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Hero Header with Background Image */
.atelje-hero[b-6m3etqyksy] {
    position: relative;
    min-height: 160px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.atelje-hero-bg[b-6m3etqyksy] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.atelje-hero-bg img[b-6m3etqyksy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
}

.atelje-hero-overlay[b-6m3etqyksy] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.atelje-close[b-6m3etqyksy] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.atelje-close:hover[b-6m3etqyksy] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.atelje-hero-content[b-6m3etqyksy] {
    position: relative;
    z-index: 5;
    padding: 20px 24px 18px 24px;
    text-align: center;
}

.atelje-badge-pill[b-6m3etqyksy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
}

.atelje-badge-pill span[b-6m3etqyksy] {
    font-size: 0.9rem;
}

[b-6m3etqyksy] .atelje-svg-icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    color: currentColor;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    vertical-align: -0.16em;
}

[b-6m3etqyksy] .hero-premium-badge .atelje-svg-icon {
    color: #c99637;
}

[b-6m3etqyksy] .atelje-svg-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[b-6m3etqyksy] .atelje-badge-pill .atelje-svg-icon {
    color: #f2d39b;
}

[b-6m3etqyksy] .toggle-segment .atelje-svg-icon {
    color: #8a6741;
}

[b-6m3etqyksy] .toggle-segment.active .atelje-svg-icon {
    color: #6a4518;
}

.atelje-hero-title[b-6m3etqyksy] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.atelje-hero-subtitle[b-6m3etqyksy] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 16px 0;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Step Indicator in Hero */
.atelje-steps[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.atelje-steps .step[b-6m3etqyksy] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.3s ease;
}

.atelje-steps .step.active[b-6m3etqyksy] {
    color: #ffd86b;
    text-shadow: 0 0 12px rgba(255, 216, 107, 0.4);
}

.atelje-steps .step.completed[b-6m3etqyksy] {
    color: rgba(255, 255, 255, 0.7);
}

.atelje-steps .step-line[b-6m3etqyksy] {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 1px;
}

/* Scrollable Content Area */
.atelje-content[b-6m3etqyksy] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px;
}

/* Segmented Control Toggle */
.atelje-toggle[b-6m3etqyksy] {
    display: inline-flex;
    background: #f5efe8;
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.toggle-segment[b-6m3etqyksy] {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7a6a5a;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.toggle-segment:hover:not(.active)[b-6m3etqyksy] {
    color: #5a4a3a;
    background: rgba(255, 255, 255, 0.5);
}

.toggle-segment.active[b-6m3etqyksy] {
    background: linear-gradient(135deg, #ffd86b 0%, #f5b942 100%);
    color: #5a4010;
    box-shadow: 0 2px 8px rgba(200, 150, 40, 0.35);
}

/* Canvas Area */
.atelje-canvas[b-6m3etqyksy] {
    background: #FFFCF8;
    border-radius: 18px;
    padding: 20px;
    min-height: 200px;
    box-shadow: inset 0 2px 8px rgba(200, 180, 150, 0.1);
    border: 1px solid rgba(220, 200, 170, 0.3);
    position: relative;
}

/* Add subtle paper texture */
.atelje-canvas[b-6m3etqyksy]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
}

.canvas-textarea[b-6m3etqyksy] {
    width: 100%;
    min-height: 120px;
    background: #FFFCF5;
    border: none;
    outline: none;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #4a3a2a;
    resize: none;
    line-height: 1.7;
    padding: 16px;
    border-radius: 12px;
    box-shadow: inset 0 2px 6px rgba(180, 150, 120, 0.08);
}

.canvas-textarea[b-6m3etqyksy]::placeholder {
    color: #b5a595;
    font-style: italic;
    font-family: var(--font-serif);
}

.canvas-hint[b-6m3etqyksy] {
    font-size: 0.85rem;
    color: #9a8a7a;
    margin: 10px 0 0 0;
    line-height: 1.4;
}

.canvas-chips[b-6m3etqyksy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
}

.canvas-chips .chip[b-6m3etqyksy] {
    appearance: none;
    background: #fff9f4;
    border: 1.5px solid #f0e1d0;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6d5946;
    cursor: pointer;
    transition: all 0.15s ease;
}

.canvas-chips .chip:hover[b-6m3etqyksy] {
    background: #fff3ea;
    border-color: #fbbbad;
    color: #5a4030;
    transform: translateY(-1px);
}

/* Photo Upload in Canvas */
.canvas-upload[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    cursor: pointer;
    padding: 26px 22px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border-radius: 16px;
    border: 1.5px dashed rgba(166, 123, 80, 0.42);
    background: linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(255, 246, 236, 0.84));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64), inset 0 8px 24px rgba(147, 105, 62, 0.045);
    position: relative;
}

.canvas-upload:hover[b-6m3etqyksy] {
    background: linear-gradient(180deg, rgba(255, 248, 239, 1), rgba(255, 240, 226, 0.9));
    border-color: rgba(166, 123, 80, 0.62);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 10px 28px rgba(123, 82, 43, 0.08);
}

.canvas-upload:focus-visible[b-6m3etqyksy],
.canvas-upload.drag-active[b-6m3etqyksy] {
    outline: none;
    background: linear-gradient(180deg, rgba(255, 247, 235, 1), rgba(255, 237, 217, 0.96));
    border-color: rgba(196, 142, 62, 0.85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 0 0 3px rgba(245, 185, 93, 0.2), 0 14px 34px rgba(123, 82, 43, 0.1);
}

.upload-visual[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 2rem;
    color: #8a6741;
}

[b-6m3etqyksy] .upload-visual .flow-icon {
    width: 2rem;
    height: 2rem;
    color: #8a6741;
}

[b-6m3etqyksy] .upload-visual .pencil-flow {
    color: #a66f35;
    filter: drop-shadow(0 4px 8px rgba(166, 111, 53, 0.14));
}

[b-6m3etqyksy] .upload-visual .portrait-flow {
    color: #7c5a38;
}

.upload-visual .arrow[b-6m3etqyksy] {
    font-size: 1.4rem;
    color: #c9a882;
    font-weight: 300;
}

[b-6m3etqyksy] .upload-visual .magic {
    color: #c99637;
    filter: drop-shadow(0 0 10px rgba(255, 200, 100, 0.7));
    animation: pulse-glow-b-6m3etqyksy 2s ease-in-out infinite;
}

.canvas-upload .upload-cta[b-6m3etqyksy] {
    font-weight: 600;
    font-size: 1rem;
    color: #7a5a3a;
    margin: 0 0 6px 0;
}

.canvas-upload .upload-hint[b-6m3etqyksy] {
    font-size: 0.85rem;
    color: #a89080;
    margin: 0;
}

.canvas-upload .upload-title[b-6m3etqyksy] {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.1rem;
    color: #5a4a3a;
    margin: 0 0 8px 0;
}

.canvas-upload .upload-instruction[b-6m3etqyksy] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #6f5135;
    margin: 0 0 8px 0;
}

.canvas-upload .upload-description[b-6m3etqyksy] {
    font-size: 0.95rem;
    color: #7a6a5a;
    line-height: 1.55;
    margin: 0;
    max-width: 280px;
    text-align: center;
}

/* Photo Reassurance Text */
.photo-reassurance[b-6m3etqyksy] {
    font-size: 0.8rem;
    color: #9a8a7a;
    text-align: center;
    margin: 12px 0 0 0;
    padding: 0 10px;
    line-height: 1.45;
}

/* Photo Preview in Canvas */
.canvas-photo-preview[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 180px;
}

.canvas-photo-preview img[b-6m3etqyksy] {
    max-width: 160px;
    max-height: 160px;
    border-radius: 16px;
    border: 3px solid #fbbbad;
    box-shadow: 0 8px 24px rgba(180, 140, 100, 0.15);
    object-fit: cover;
}

.preview-remove[b-6m3etqyksy] {
    position: absolute;
    top: 50%;
    right: calc(50% - 100px);
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #ef4444;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    transition: all 0.15s ease;
}

.preview-remove:hover[b-6m3etqyksy] {
    transform: translateY(-50%) scale(1.1);
    background: #dc2626;
}

/* Generated Result */
.atelje-result[b-6m3etqyksy] {
    text-align: center;
    padding: 24px;
    margin-top: 20px;
    background: linear-gradient(135deg, #f0fff0 0%, #e8ffe8 100%);
    border: 2px solid #a8e6a8;
    border-radius: 18px;
}

.atelje-result h4[b-6m3etqyksy] {
    color: #2d7a2d;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.atelje-result img[b-6m3etqyksy] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid #a8e6a8;
    box-shadow: 0 8px 24px rgba(100, 180, 100, 0.25);
    object-fit: cover;
}

/* Error State */
.atelje-error[b-6m3etqyksy] {
    margin-top: 16px;
    padding: 14px 18px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 14px;
    border: 1px solid #fecaca;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY FOOTER - Premium Modal Footer
   "Luft = Lyx" - Spacious, calm, and warm
   ═══════════════════════════════════════════════════════════════════════════ */
.atelje-footer[b-6m3etqyksy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px 28px 28px;
    background: linear-gradient(180deg, #fffcf8 0%, #fff9f0 100%);
    border-top: 1px solid rgba(200, 180, 150, 0.2);
    box-shadow: 0 -8px 24px rgba(100, 80, 60, 0.06);
}

.sketch-example-strip[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(183, 145, 103, 0.18);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 252, 247, 0.94), rgba(255, 243, 231, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 22px rgba(122, 86, 50, 0.06);
}

.sketch-example-label[b-6m3etqyksy] {
    color: #7b5d42;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sketch-example-thumbs[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sketch-example-thumb[b-6m3etqyksy] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff8ef;
    border: 2px solid rgba(255, 255, 255, 0.92);
    outline: 1px solid rgba(146, 101, 58, 0.16);
    box-shadow: 0 6px 14px rgba(122, 86, 50, 0.12);
}

.sketch-example-thumb img[b-6m3etqyksy] {
    width: 118%;
    height: 118%;
    object-fit: cover;
    filter: saturate(0.78) sepia(0.12) contrast(1.03);
    transform: scale(1.04);
}

.sketch-example-thumb.crop-left img[b-6m3etqyksy] {
    object-position: 38% 42%;
}

.sketch-example-thumb.crop-center img[b-6m3etqyksy] {
    object-position: 50% 50%;
}

.sketch-example-thumb.crop-right img[b-6m3etqyksy] {
    object-position: 62% 42%;
}

/* Credit Balance Row - Top of footer */
.credit-balance-display[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 248, 240, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(200, 170, 120, 0.15);
}

.credit-text[b-6m3etqyksy] {
    font-size: 0.95rem;
    color: #6d5946;
    font-weight: 500;
}

.credit-loading[b-6m3etqyksy] {
    font-size: 1.2rem;
    animation: credit-pulse-b-6m3etqyksy 1.5s ease-in-out infinite;
}

@keyframes credit-pulse-b-6m3etqyksy {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}

.credit-topup-link[b-6m3etqyksy] {
    padding: 6px 14px;
    background: linear-gradient(145deg, #E0A96D 0%, #d4985c 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(224, 169, 109, 0.3);
    white-space: nowrap;
}

.credit-topup-link:hover[b-6m3etqyksy] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(224, 169, 109, 0.4);
    color: #fff;
}

.credit-topup-link.subtle[b-6m3etqyksy] {
    background: transparent;
    color: #E0A96D;
    box-shadow: none;
    padding: 4px 8px;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.credit-topup-link.subtle:hover[b-6m3etqyksy] {
    color: #c9935a;
    transform: none;
    box-shadow: none;
}

/* Actions Row - Bottom of footer */
.footer-actions[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.footer-cancel[b-6m3etqyksy] {
    appearance: none;
    background: rgba(122, 92, 62, 0.045);
    border: 1px solid rgba(122, 92, 62, 0.08);
    color: #8f7b68;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 14px 24px;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.footer-cancel:hover[b-6m3etqyksy] {
    color: #6a5140;
    background: rgba(122, 92, 62, 0.08);
    border-color: rgba(122, 92, 62, 0.14);
}

.footer-cta[b-6m3etqyksy] {
    appearance: none;
    background: #fbbbad;
    color: #38250d;
    border: none;
    border-radius: 999px;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.25s ease;
    box-shadow: 0 6px 20px rgba(251, 187, 173, 0.4);
    min-width: 180px;
}

.footer-cta:hover:not(:disabled)[b-6m3etqyksy] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(251, 187, 173, 0.5);
}

.footer-cta.gold[b-6m3etqyksy] {
    background: linear-gradient(135deg, #ffe082 0%, #f5b942 50%, #e6a020 100%);
    color: #5a4010;
    box-shadow: 0 6px 20px rgba(200, 150, 40, 0.4);
}

.footer-cta.gold:hover:not(:disabled)[b-6m3etqyksy] {
    box-shadow: 0 10px 32px rgba(200, 150, 40, 0.55);
}

.footer-cta:disabled[b-6m3etqyksy] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 3px 10px rgba(200, 150, 40, 0.2);
}

.footer-cta .cta-main[b-6m3etqyksy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
}

.footer-cta .credit-note[b-6m3etqyksy] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7a5820;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.footer-cta .spinner[b-6m3etqyksy] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin-b-6m3etqyksy 1s ease-in-out infinite;
}

/* Mobile Full-Screen Ateljé */
@media (max-width: 600px) {
    .atelje-modal[b-6m3etqyksy] {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .atelje-hero[b-6m3etqyksy] {
        min-height: 140px;
        border-radius: 0;
    }

    .atelje-hero-content[b-6m3etqyksy] {
        padding: 16px 20px 14px 20px;
    }

    .atelje-hero-title[b-6m3etqyksy] {
        font-size: 1.3rem;
    }

    .atelje-hero-subtitle[b-6m3etqyksy] {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }

    .atelje-steps .step[b-6m3etqyksy] {
        font-size: 0.8rem;
    }

    .atelje-content[b-6m3etqyksy] {
        padding: 16px 18px;
    }

    .atelje-toggle[b-6m3etqyksy] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .toggle-segment[b-6m3etqyksy] {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    .atelje-canvas[b-6m3etqyksy] {
        padding: 16px;
        min-height: 160px;
    }

    .canvas-textarea[b-6m3etqyksy] {
        font-size: 1rem;
        min-height: 100px;
        padding: 0px;
        resize: none;
    }

    .canvas-chips[b-6m3etqyksy] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 16px;
        justify-content: center;
        overflow: visible;
        padding: 0;
    }

    .canvas-chips .chip[b-6m3etqyksy] {
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .canvas-upload[b-6m3etqyksy] {
        min-height: 140px;
        padding: 20px 16px;
    }

    .upload-visual[b-6m3etqyksy] {
        font-size: 1.6rem;
        gap: 10px;
    }

    .atelje-footer[b-6m3etqyksy] {
        padding: 20px 18px 24px 18px;
        gap: 12px;
    }

    .sketch-example-strip[b-6m3etqyksy] {
        width: 100%;
        gap: 10px;
        padding: 9px 10px;
        justify-content: space-between;
    }

    .sketch-example-label[b-6m3etqyksy] {
        font-size: 0.68rem;
        letter-spacing: 0.015em;
    }

    .sketch-example-thumbs[b-6m3etqyksy] {
        gap: 6px;
        flex-shrink: 0;
    }

    .sketch-example-thumb[b-6m3etqyksy] {
        width: 40px;
        height: 40px;
    }

    .credit-balance-display[b-6m3etqyksy] {
        padding: 12px 16px;
        gap: 8px;
    }

    .credit-icon[b-6m3etqyksy] {
        font-size: 1.2rem;
    }

    .credit-count[b-6m3etqyksy] {
        font-size: 1.4rem;
    }

    .credit-label[b-6m3etqyksy] {
        font-size: 0.85rem;
    }

    .footer-actions[b-6m3etqyksy] {
        width: 100%;
        flex-direction: column-reverse;
        gap: 12px;
    }

    .footer-cta[b-6m3etqyksy] {
        width: 100%;
        padding: 16px 28px;
        font-size: 1rem;
        min-width: unset;
    }

    .footer-cancel[b-6m3etqyksy] {
        width: 100%;
        padding: 12px 20px;
    }
}
/* /Components/BasicDetailsStep.razor.rz.scp.css */
/* === Button styles specific to this component === */
button.btn-modal-primary[b-2bzpjqwrw7] {
    background-color: #fbbbad;
    color: #38250d;
    box-shadow: 0 2px 8px rgba(247,186,173,0.10);
    padding: 0.8em 2.5em;
    border-radius: 25px;
    font-size: 1.11rem;
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.5px;
}

button.btn-modal-primary:hover[b-2bzpjqwrw7] {
    background-color: #f9ac9c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247,186,173,0.15);
}

button.btn-modal-tertiary[b-2bzpjqwrw7] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
    padding: 0.8em 1.8em;
    border-radius: 25px;
    font-size: 1.11rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.5px;
}

button.btn-modal-tertiary:hover[b-2bzpjqwrw7] {
    background-color: rgba(239, 215, 187, 0.15);
    border-color: #e8c8a0;
}

.step-buttons[b-2bzpjqwrw7] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 0.75rem; /* Add consistent gap between buttons */
    /* margin-top: 2rem; - Removed since we're using flex layout */
}

/* Input styling */
input[b-2bzpjqwrw7], select[b-2bzpjqwrw7] {
    width: 100%;
    border: 1.3px solid #f0e1d0;
    background: #fff9f4;
    border-radius: 15px;
    padding: 0.92em 1.1em;
    font-size: 1.06rem;
    color: #473b26;
    transition: border 0.18s;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 1.2em;
}

input:focus[b-2bzpjqwrw7], select:focus[b-2bzpjqwrw7] {
    border-color: #fbbbad;
    background: #fff6f0;
}

label[b-2bzpjqwrw7] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: #594a3a;
}

.input-hint[b-2bzpjqwrw7] {
    display: block;
    color: #967f6b;
    font-size: 0.9rem;
    margin-top: -0.8em;
    margin-bottom: 1em;
}

/* === Optional Field Styling === */
.optional-field[b-2bzpjqwrw7] {
    color: #967f6b;
    font-weight: 400;
    font-size: 0.9em;
}

/* === Input Group Styling === */
.input-group[b-2bzpjqwrw7] {
    margin-bottom: 1.2em;
}

.input-group label[b-2bzpjqwrw7] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: #594a3a;
}


/* Responsive form layout for desktop */
@media (min-width: 992px) {
    .form-grid[b-2bzpjqwrw7] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        /* Maintain padding from main layout */
    }
    
    /* Add this class to the containing div in the component */
    .full-width[b-2bzpjqwrw7] {
        grid-column: 1 / -1;
        
    }
    
    input[b-2bzpjqwrw7], select[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }
    
    .input-group[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }
}


.avatar-selector-block[b-2bzpjqwrw7] {
    margin-bottom: 1.1em;
}

.avatar-preview-row[b-2bzpjqwrw7] {
    display: flex;
    align-items: center;
    gap: 1.2em;
}

.avatar-preview-img[b-2bzpjqwrw7] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #efd7bb;
    background: #fdf4ed;
    box-shadow: 0 1px 4px rgba(247,186,173,0.07);
}

.btn-avatar-choose[b-2bzpjqwrw7] {
    background: #fbbbad;
    color: #38250d;
    border: none;
    border-radius: 16px;
    font-weight: 500;
    padding: 0.62em 1.2em;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 1px 4px rgba(247,186,173,0.06);
    margin-left: 0.6em;
    transition: background 0.16s;
}

    .btn-avatar-choose:hover[b-2bzpjqwrw7] {
        background: #f9ac9c;
    }

.avatar-picker-overlay[b-2bzpjqwrw7] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(80,60,44,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-picker-modal[b-2bzpjqwrw7] {
    background: #fff9f4;
    padding: 2em 2.3em 1.5em 2.3em;
    border-radius: 22px;
    box-shadow: 0 6px 44px rgba(120,80,55,0.11);
    min-width: 320px;
    max-width: 96vw;
}

.modal-close[b-2bzpjqwrw7] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.6rem;
    background: none;
    border: none;
    color: #a78a6d;
    cursor: pointer;
}

.avatar-picker-list[b-2bzpjqwrw7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 1.2em;
    justify-items: center;
    margin: 1.4em 0 1.8em 0;
}

.avatar-subtitle[b-2bzpjqwrw7] {
    font-size: 0.96rem;
    margin-top: 0.2em;
    margin-bottom: 1em;
}

.avatar-picker-img[b-2bzpjqwrw7] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #efd7bb;
    background: #fdf4ed;
    box-shadow: 0 1px 4px rgba(247,186,173,0.07);
    cursor: pointer;
    transition: border 0.16s, box-shadow 0.16s;
}

    .avatar-picker-img.selected[b-2bzpjqwrw7],
    .avatar-picker-img:hover[b-2bzpjqwrw7] {
        border: 2.4px solid #fbbbad;
        box-shadow: 0 2px 8px #fbbbad33;
    }

.avatar-gender-tabs[b-2bzpjqwrw7] {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-bottom: 1em;
}

.avatar-tab[b-2bzpjqwrw7] {
    background: none;
    border: 2px solid #efd7bb;
    border-radius: 20px;
    padding: 0.5em 1.4em;
    font-size: 1.02rem;
    color: #7a5a43;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .avatar-tab.selected[b-2bzpjqwrw7] {
        background: #fbbbad;
        border-color: #fbbbad;
        color: #38250d;
        font-weight: 600;
        box-shadow: 0 2px 8px #fbbbad33;
    }

    .avatar-tab:hover[b-2bzpjqwrw7] {
        background-color: #ffe9e1;
    }


.premium-avatar-modal[b-2bzpjqwrw7] {
    background: #fff9f4;
    padding: 2.2em 2.5em;
    border-radius: 24px;
    box-shadow: 0 8px 32px #b2805040;
    min-width: 340px;
    max-width: 97vw;
    position: relative;
    text-align: center;
}

.premium-badge[b-2bzpjqwrw7] {
    background: #fbbbad;
    color: #513d27;
    border-radius: 18px;
    font-weight: 600;
    padding: 0.22em 1.2em;
    margin: 0 auto 1em;
    display: inline-block;
    font-size: 1rem;
}

.premium-avatar-buttons[b-2bzpjqwrw7] {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin: 1.1em 0;
}

.premium-avatar-preview img[b-2bzpjqwrw7] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin-top: 1em;
    border: 2.5px solid #fbbbad;
}

.premium-avatar-done[b-2bzpjqwrw7] {
    margin-top: 0.7em;
    color: #38250d;
    font-weight: 600;
}

.premium-avatar-footer[b-2bzpjqwrw7] {
    color: #c2a98b;
    font-size: 0.97em;
    margin-top: 1.1em;
}

.avatar-picker-premium-tile[b-2bzpjqwrw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #fbbbad;
    background: #fff3ec;
    border-radius: 16px;
    color: #bc8b62;
    font-weight: 600;
    width: 68px;
    height: 68px;
    cursor: pointer;
    font-size: 1.1em;
    gap: 2px;
    margin-left: 0.5em;
    transition: border 0.16s, background 0.16s;
}

    .avatar-picker-premium-tile:hover[b-2bzpjqwrw7] {
        border-color: #ff9d7a;
        background: #fff0e7;
    }

.premium-star[b-2bzpjqwrw7] {
    font-size: 1.3em;
    color: #ffad60;
}

.avatar-row[b-2bzpjqwrw7] {
    display: flex;
    align-items: flex-start;
    gap: 2.2em;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.avatar-col[b-2bzpjqwrw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.avatar-preview-img[b-2bzpjqwrw7] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2.5px solid #efd7bb;
    background: #fdf4ed;
    box-shadow: 0 2px 8px rgba(247,186,173,0.08);
    margin-bottom: 0.5em;
}

.btn-avatar-choose[b-2bzpjqwrw7] {
    width: 110px;
    background: #fbbbad;
    color: #38250d;
    border: none;
    border-radius: 16px;
    font-weight: 500;
    padding: 0.44em 0;
    cursor: pointer;
    font-size: 1.02rem;
    box-shadow: 0 1px 4px rgba(247,186,173,0.06);
    transition: background 0.16s;
}

    .btn-avatar-choose:hover[b-2bzpjqwrw7] {
        background: #f9ac9c;
    }

.relation-col[b-2bzpjqwrw7] {
    flex: 1;
    min-width: 200px;
}

/* --- MOBILE: Stack avatar and relation --- */
@media (max-width: 700px) {
    .avatar-row[b-2bzpjqwrw7] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1em;
        margin-bottom: 0.8em;
    }

    .avatar-col[b-2bzpjqwrw7], .relation-col[b-2bzpjqwrw7] {
        align-items: flex-start;
        min-width: 0;
    }

    .avatar-preview-img[b-2bzpjqwrw7] {
        /*margin-bottom: 0.6em;*/
        margin-left: 0;
        margin-right: 0;
    }

    .btn-avatar-choose[b-2bzpjqwrw7] {
        width: 100%;
        min-width: 0;
    }

    .full-width[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }
}

.avatar-row[b-2bzpjqwrw7] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2.2em;
    margin-bottom: 1.1em;
}

.avatar-col[b-2bzpjqwrw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    min-width: 160px;
}

.btn-avatar-choose[b-2bzpjqwrw7] {
   /* margin-top: 0.4em;*/
    margin-left: 0;
    min-width: 140px;
    height: 52px;
    font-size: 1.06rem;
    background: #fae4cb;
    color: #38250d;
    border: none;
    border-radius: 22px;
    /*font-weight: 600;*/
    box-shadow: 0 1px 8px #eedfc340;
}

.avatar-preview-img[b-2bzpjqwrw7] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px solid #ecd9b7;
    background: #fff5e5;
    box-shadow: 0 3px 12px #ead5b120;
}

.avatar-hint-col[b-2bzpjqwrw7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 700px) {
    .avatar-row[b-2bzpjqwrw7] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.2em;
    }

    .avatar-col[b-2bzpjqwrw7], .avatar-hint-col[b-2bzpjqwrw7] {
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .btn-avatar-choose[b-2bzpjqwrw7] {
        width: 100%;
        min-width: 0;
    }

    .full-width[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }

}



.avatar-row[b-2bzpjqwrw7] {
    display: flex;
    gap: 2.5em;
    margin-bottom: 1.5em;
    align-items: flex-start;
}

.avatar-col[b-2bzpjqwrw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-clickable[b-2bzpjqwrw7] {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

    .avatar-clickable:hover[b-2bzpjqwrw7],
    .avatar-clickable:focus[b-2bzpjqwrw7] {
        box-shadow: 0 0 0 4px #fbbbad66;
        outline: none;
    }

.avatar-hint[b-2bzpjqwrw7] {
    color: #ab9882;
    font-size:0.9rem;
   /* margin-top: 0.7em;*/
    text-align: center;
    font-style: italic;
    user-select: none;
    max-width: 150px;
}

/* Responsive: stack avatar and relation on small screens */
@media (max-width: 700px) {
    .avatar-row[b-2bzpjqwrw7] {
        flex-direction: column;
        align-items: center;
        gap: 1.4em;
    }

    .relation-col[b-2bzpjqwrw7] {
        width: 100%;
    }

    .full-width[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }
}

/* === Close Button Styling === */
.modal-close-icon-button[b-2bzpjqwrw7] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 400;
    color: #967f6b;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
}

.modal-close-icon-button:hover[b-2bzpjqwrw7] {
    color: #594a3a;
}

@media (max-width: 768px) {
    .modal-close-icon-button[b-2bzpjqwrw7] {
        top: calc(15px + env(safe-area-inset-top, 0px));
        right: 15px;
        font-size: 1.4rem;
    }

    .full-width[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }
}

@media (max-width: 480px) {
    .modal-close-icon-button[b-2bzpjqwrw7] {
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: 12px;
        font-size: 1.3rem;
    }
}

/* === Main Step Modal Layout === */
.step-modal-content[b-2bzpjqwrw7] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 90vh;
    background: #fff9f4;
    border-radius: 18px;
    overflow: hidden;
}

.step-modal-content h2[b-2bzpjqwrw7] {
    flex-shrink: 0;
    padding: 2rem 3rem 1rem 2rem; /* Added right padding for close button */
    margin: 0;
    text-align: center;
    color: #594a3a;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid #f0e1d0;
    background: #fff9f4;
}

.form-grid[b-2bzpjqwrw7] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-bottom: 6rem;
    padding: 1.5rem 2rem;
    /* Enable smooth momentum scrolling on iOS/mobile */
    -webkit-overflow-scrolling: touch;
}

.step-buttons[b-2bzpjqwrw7] {
    flex-shrink: 0;
    padding: 1.5rem 2rem;
    border-top: 1px solid #f0e1d0;
    background: #fff9f4;
}

/* === Mobile Responsiveness === */
@media (max-width: 768px) {
    .step-modal-content[b-2bzpjqwrw7] {
        width: 100%;
        max-height: none;
        border-radius: 0;
    }
      .step-modal-content h2[b-2bzpjqwrw7] {
        padding: 1.5rem 2.5rem 1rem 1.5rem; /* Adjusted right padding for close button */
        font-size: 1.3rem;
    }
    
    .form-grid[b-2bzpjqwrw7] {
        padding: 1.5rem 1.5rem;
        position: relative;
    }

    /* Add a subtle shadow/gradient above the footer to hint at scrollable content */
    .form-grid[b-2bzpjqwrw7]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to top, rgba(255, 249, 244, 0.9) 0%, rgba(255, 249, 244, 0.3) 50%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -1.5rem; /* Compensate for form padding */
    }
      .step-buttons[b-2bzpjqwrw7] {
        padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        /* Keep buttons right-aligned at 768px, they're still side by side */
        /* Add a subtle shadow above the footer */
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    }

    .full-width[b-2bzpjqwrw7] {
        margin-bottom: 0.8em;
    }
}

@media (max-width: 480px) {
    .step-modal-content[b-2bzpjqwrw7] {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
    .step-modal-content h2[b-2bzpjqwrw7] {
        padding: calc(1rem + env(safe-area-inset-top, 0px)) 2rem 0.8rem 1rem; /* Adjusted right padding for close button */
        font-size: 1.2rem;
    }
    .form-grid[b-2bzpjqwrw7] {
        padding: 1rem;
        position: relative;
    }
    /* Add a more prominent shadow/gradient above the footer on very small screens */
    .form-grid[b-2bzpjqwrw7]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to top, rgba(255, 249, 244, 0.95) 0%, rgba(255, 249, 244, 0.4) 60%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -1rem; /* Compensate for form padding */
    }
    .step-buttons[b-2bzpjqwrw7] {
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        flex-direction: row !important; /* side-by-side on mobile */
        gap: 12px;
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
    }
    .full-width[b-2bzpjqwrw7] { margin-bottom: 0.8em; }
    .step-buttons button[b-2bzpjqwrw7] {
        width: auto !important;
        padding: 1rem 1.2rem;
        font-size: 1.05rem;
        flex: 1 1 0; /* equal width buttons */
    }
    /* Ensure both button types share the space evenly */
    .btn-modal-primary[b-2bzpjqwrw7], .btn-modal-tertiary[b-2bzpjqwrw7] {
        width: auto !important;
        flex: 1 1 0 !important;
    }
}

/* /Components/CachedMediaDisplay.razor.rz.scp.css */
/* Component-scoped styles for CachedMediaDisplay */
.uploaded-image[b-wz3dtuamns] {
    /* Keep this conservative so images fit where used; specific containers
       can still override with higher-specificity rules when needed. */
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

/* Make thumbnails slightly smaller on narrow screens */
@media (max-width: 768px) {
    .uploaded-image[b-wz3dtuamns] {
        max-height: 140px;
    }
}

@media (max-width: 480px) {
    .uploaded-image[b-wz3dtuamns] {
        max-height: 100px;
    }
}

/* Constrain the cached media container specifically so images can't overflow
   memory cards when this component is used inside card layouts. */
.cached-media-container[b-wz3dtuamns] {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

.cached-media-container img.uploaded-image[b-wz3dtuamns] {
    display: block;
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
/* /Components/Candle.razor.rz.scp.css */
/* Candle.razor.css */

.candle[b-07x0u07nhb] {
  position: absolute;
  bottom: 0.1rem;
  left: 0;
  width: 1.55rem;
  height: 1.55rem;
  color: #A67B50;
  animation: flicker-b-07x0u07nhb 1.4s infinite ease-in-out;
  z-index: 10;
  opacity: 0.85;
}

.candle-icon[b-07x0u07nhb] {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes flicker-b-07x0u07nhb {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.03); }
}
  
/* /Components/CompanionOverlay.razor.rz.scp.css */
/* ==========================================================================
   CompanionOverlay - Cinematic Glass-Morphism Overlay
   ========================================================================== */

/* --- Main Overlay Container --- */
.companion-overlay[b-4gfn2a28nt] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: rgba(28, 18, 10, 0.45);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    opacity: 1;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.companion-overlay.entering[b-4gfn2a28nt] {
    animation: overlay-fade-in-b-4gfn2a28nt 0.3s ease forwards;
}

.companion-overlay.exiting[b-4gfn2a28nt] {
    animation: overlay-fade-out-b-4gfn2a28nt 0.3s ease forwards;
}

@keyframes overlay-fade-in-b-4gfn2a28nt {
    from {
        opacity: 0;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        -webkit-backdrop-filter: blur(8px) saturate(110%);
        backdrop-filter: blur(8px) saturate(110%);
    }
}

@keyframes overlay-fade-out-b-4gfn2a28nt {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* --- Close Button --- */
.companion-close[b-4gfn2a28nt] {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 249, 245, 0.15);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(255, 249, 245, 0.85);
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    z-index: 10001;
}

.companion-close:hover[b-4gfn2a28nt] {
    background: rgba(255, 249, 245, 0.25);
    color: #fff9f5;
    transform: scale(1.05);
}

.companion-close:active[b-4gfn2a28nt] {
    transform: scale(0.95);
}

/* --- Granny Character Container --- */
.companion-granny-container[b-4gfn2a28nt] {
    position: fixed;
    bottom: 0;
    left: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10002;
    pointer-events: auto;
}

/* Granny Image with Rise Animation */
.companion-granny[b-4gfn2a28nt] {
    width: clamp(200px, 22vw, 300px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(88, 44, 12, 0.4));
    animation: granny-rise-b-4gfn2a28nt 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: translateY(100%);
    position: relative;
    z-index: 1;
}

/* Desktop: Show full Granny, hide avatar */
.companion-granny-full[b-4gfn2a28nt] {
    display: block;
}

.companion-granny-avatar[b-4gfn2a28nt] {
    display: none;
}

@keyframes granny-rise-b-4gfn2a28nt {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Warm Glow Behind Granny */
.companion-glow[b-4gfn2a28nt] {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center bottom,
        rgba(255, 210, 150, 0.4) 0%,
        rgba(219, 160, 95, 0.2) 40%,
        rgba(180, 110, 60, 0) 70%
    );
    animation: glow-pulse-b-4gfn2a28nt 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes glow-pulse-b-4gfn2a28nt {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.95);
    }
    50% {
        opacity: 0.85;
        transform: translateX(-50%) scale(1.05);
    }
}

/* --- Speech Cloud (Comic Style) --- */
.speech-cloud[b-4gfn2a28nt] {
    position: absolute;
    bottom: 100%;
    left: 60%;
    transform: translateX(-30%) translateY(-20px);
    background: #fff9f5;
    border-radius: 24px;
    padding: 24px 32px;
    min-width: 460px;
    max-width: min(600px, 55vw);
    box-shadow: 
        0 8px 32px rgba(83, 51, 43, 0.15),
        0 2px 8px rgba(83, 51, 43, 0.08);
    border: 1.5px solid #fae3d3;
    opacity: 0;
    transform-origin: bottom left;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.speech-cloud.visible[b-4gfn2a28nt] {
    opacity: 1;
    animation: cloud-appear-b-4gfn2a28nt 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cloud-appear-b-4gfn2a28nt {
    from {
        opacity: 0;
        transform: translateX(-30%) translateY(-10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-30%) translateY(-20px) scale(1);
    }
}

/* Speech Cloud Tail (Comic Pointer) */
.speech-cloud-tail[b-4gfn2a28nt] {
    position: absolute;
    bottom: -16px;
    left: 60px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid #fff9f5;
    filter: drop-shadow(0 2px 2px rgba(83, 51, 43, 0.08));
}

.speech-cloud-tail[b-4gfn2a28nt]::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -13px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 19px solid #fae3d3;
    z-index: -1;
}

/* Speech Cloud Text */
.speech-cloud-content[b-4gfn2a28nt] {
    position: relative;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.speech-cloud-text[b-4gfn2a28nt] {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 400;
    color: #4b2e2e;
    word-break: break-word;
}

/* Markdown Content Styling */
.speech-cloud-text.chat-bubble-markdown p[b-4gfn2a28nt] {
    margin: 0 0 0.6em 0;
}

.speech-cloud-text.chat-bubble-markdown p:last-child[b-4gfn2a28nt] {
    margin-bottom: 0;
}

.speech-cloud-text.chat-bubble-markdown a[b-4gfn2a28nt] {
    color: #d17a5c;
    text-decoration: underline;
    font-weight: 500;
}

.speech-cloud-text.chat-bubble-markdown strong[b-4gfn2a28nt] {
    font-weight: 700;
    color: #3d2424;
}

.speech-cloud-text.chat-bubble-markdown em[b-4gfn2a28nt] {
    font-style: italic;
}

.speech-cloud-text.chat-bubble-markdown ul[b-4gfn2a28nt],
.speech-cloud-text.chat-bubble-markdown ol[b-4gfn2a28nt] {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.speech-cloud-text.chat-bubble-markdown li[b-4gfn2a28nt] {
    margin-bottom: 0.3em;
}

.speech-cloud-text.chat-bubble-markdown code[b-4gfn2a28nt] {
    background: rgba(123, 90, 83, 0.1);
    padding: 0.15em 0.35em;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.speech-cloud-text.chat-bubble-markdown pre[b-4gfn2a28nt] {
    background: rgba(123, 90, 83, 0.08);
    padding: 0.75em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5em 0;
}

.speech-cloud-text.chat-bubble-markdown pre code[b-4gfn2a28nt] {
    background: transparent;
    padding: 0;
}

.speech-cloud-text.chat-bubble-markdown blockquote[b-4gfn2a28nt] {
    border-left: 3px solid #d17a5c;
    margin: 0.5em 0;
    padding-left: 1em;
    color: #5c3e3e;
    font-style: italic;
}

/* Bracketed action text - italic and gray */
/* Use ::deep to penetrate into dynamically injected MarkupString content */
.speech-cloud-text[b-4gfn2a28nt]  .action-text,
[b-4gfn2a28nt] .action-text,
.speech-cloud-text .action-text[b-4gfn2a28nt],
.action-text[b-4gfn2a28nt] {
    font-style: italic !important;
    color: #9a8675 !important;
    opacity: 0.9;
}

/* Typewriter Effect */
.speech-cloud-text.typewriter[b-4gfn2a28nt] {
    overflow: hidden;
    animation: typewriter-reveal 0.05s steps(1) forwards;
}

.speech-cloud-text.typewriter[b-4gfn2a28nt]::after {
    content: '▋';
    animation: cursor-blink-b-4gfn2a28nt 0.8s step-end infinite;
    margin-left: 2px;
    color: #7B5A53;
    opacity: 0.7;
}

@keyframes cursor-blink-b-4gfn2a28nt {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.speech-cloud-text.instant[b-4gfn2a28nt] {
    animation: fade-in-text-b-4gfn2a28nt 0.3s ease forwards;
}

@keyframes fade-in-text-b-4gfn2a28nt {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Error Message Styling */
.speech-cloud-text.error-message[b-4gfn2a28nt] {
    color: #a85454;
    font-style: italic;
}

/* Guest Prompt Styling */
.speech-cloud-text.guest-prompt[b-4gfn2a28nt] {
    text-align: center;
}

.speech-cloud-text.guest-prompt p[b-4gfn2a28nt] {
    margin: 0 0 18px 0;
    font-size: 1.15rem;
}

.guest-signin-btn[b-4gfn2a28nt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border: 1.5px solid #ffc4b3;
    border-radius: 24px;
    color: #4b2e2e;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.12);
}

.guest-signin-btn:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #ffdacf 0%, #ffc4b3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 51, 43, 0.18);
}

.guest-signin-btn:active[b-4gfn2a28nt] {
    transform: translateY(0);
}

/* --- Daily Heart Weather --- */
.heart-weather-panel[b-4gfn2a28nt] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 44px;
}

.heart-weather-close[b-4gfn2a28nt] {
    position: absolute;
    top: -8px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9a786e;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.heart-weather-close:hover[b-4gfn2a28nt],
.heart-weather-close:focus-visible[b-4gfn2a28nt] {
    background: rgba(123, 90, 83, 0.08);
    color: #4b2e2e;
    transform: scale(1.04);
}

.heart-weather-close:focus-visible[b-4gfn2a28nt] {
    outline: 2px solid rgba(255, 196, 179, 0.75);
    outline-offset: 2px;
}

.heart-weather-title[b-4gfn2a28nt] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #8f6f62;
}

.heart-weather-question[b-4gfn2a28nt] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.35;
    color: #4b2e2e;
    font-style: italic;
}

.heart-weather-stones[b-4gfn2a28nt] {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    gap: 10px;
    padding-top: 4px;
}

.heart-weather-stone[b-4gfn2a28nt] {
    min-height: 48px;
    padding: 10px 12px;
    border: 1.5px solid rgba(128, 94, 76, 0.18);
    border-radius: 999px;
    background: #f8efe8;
    color: #4b2e2e;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.08);
    white-space: normal;
}

.heart-weather-stone.heavy[b-4gfn2a28nt] {
    background: #d9d1c8;
}

.heart-weather-stone.strained[b-4gfn2a28nt] {
    background: #e7d9cc;
}

.heart-weather-stone.still[b-4gfn2a28nt] {
    background: #f5ebdc;
}

.heart-weather-stone.composed[b-4gfn2a28nt] {
    background: #e6eadf;
}

.heart-weather-stone.light[b-4gfn2a28nt] {
    background: #ffe1d4;
}

.heart-weather-stone:hover:not(:disabled)[b-4gfn2a28nt],
.heart-weather-stone.selected[b-4gfn2a28nt] {
    transform: translateY(-2px);
    border-color: rgba(123, 90, 83, 0.38);
    box-shadow: 0 6px 18px rgba(83, 51, 43, 0.14);
}

.heart-weather-stone:disabled[b-4gfn2a28nt] {
    opacity: 0.65;
    cursor: not-allowed;
}

.heart-weather-confirmation[b-4gfn2a28nt] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.55;
    color: #5a3d36;
}

.heart-weather-still-moment[b-4gfn2a28nt] {
    margin: 0;
    color: #6f584f;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
}

.heart-weather-actions[b-4gfn2a28nt] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.heart-weather-actions-priority[b-4gfn2a28nt] {
    align-items: center;
}

.heart-weather-action[b-4gfn2a28nt] {
    min-height: 42px;
    padding: 10px 16px;
    border: 1.5px solid #ead6c8;
    border-radius: 999px;
    background: rgba(255, 249, 245, 0.82);
    color: #4b2e2e;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.heart-weather-action.primary[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border-color: #ffc4b3;
}

.heart-weather-action.quiet[b-4gfn2a28nt] {
    min-height: 34px;
    padding: 4px 6px;
    border-color: transparent;
    background: transparent;
    color: #6f584f;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
}

.heart-weather-action:hover:not(:disabled)[b-4gfn2a28nt] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 51, 43, 0.12);
}

.heart-weather-action.quiet:hover:not(:disabled)[b-4gfn2a28nt] {
    background: rgba(123, 90, 83, 0.06);
    box-shadow: none;
}

.heart-weather-action:disabled[b-4gfn2a28nt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.heart-weather-reflection[b-4gfn2a28nt] {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    border: 1.5px solid #ead6c8;
    border-radius: 18px;
    background: rgba(255, 249, 245, 0.78);
    color: #4b2e2e;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.5;
    padding: 14px 16px;
    outline: none;
}

.heart-weather-reflection:focus[b-4gfn2a28nt] {
    border-color: #ffc4b3;
    box-shadow: 0 0 0 3px rgba(255, 196, 179, 0.18);
}

.heart-weather-reflection[b-4gfn2a28nt]::placeholder {
    color: #9a8675;
    font-style: italic;
}

.heart-weather-status[b-4gfn2a28nt] {
    margin: 0;
    color: #8f6f62;
    font-family: var(--font-serif);
    font-size: 0.9rem;
}

.heart-weather-status.error[b-4gfn2a28nt] {
    color: #9b4f4f;
}

/* --- Suggestion Chips --- */
.suggestion-chips-container[b-4gfn2a28nt] {
    position: fixed;
    bottom: 110px; /* Position above thought bar */
    left: calc(5% + clamp(200px, 22vw, 300px) + 20px); /* Align with thought bar start */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: min(550px, 45vw);
    z-index: 10003;
    animation: chips-fade-in-b-4gfn2a28nt 0.4s ease-out forwards;
}

@keyframes chips-fade-in-b-4gfn2a28nt {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.suggestion-chip[b-4gfn2a28nt] {
    padding: 10px 18px;
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border: 1.5px solid #fae3d3;
    border-radius: 20px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4b2e2e;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.1);
    white-space: nowrap;
}

.suggestion-chip:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #ffdacf 0%, #ffc4b3 100%);
    border-color: #ffc4b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(83, 51, 43, 0.15);
}

.suggestion-chip:active[b-4gfn2a28nt] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(83, 51, 43, 0.12);
}

/* --- Revisit Action Chips ("Resume" / "Start New") --- */
.revisit-chips-container[b-4gfn2a28nt] {
    position: fixed;
    bottom: 100px;
    left: calc(5% + clamp(200px, 22vw, 300px) + 20px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: min(550px, 45vw);
    z-index: 10003;
    animation: chips-fade-in-b-4gfn2a28nt 0.4s ease-out forwards;
}

.revisit-chip[b-4gfn2a28nt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
    border: 1.5px solid #e8d5c8;
    border-radius: 24px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4b2e2e;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 12px rgba(83, 51, 43, 0.12);
    white-space: nowrap;
}

.revisit-chip:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border-color: #d4c0b3;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(83, 51, 43, 0.18);
}

.revisit-chip:active[b-4gfn2a28nt] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(83, 51, 43, 0.15);
}

.revisit-chip-icon[b-4gfn2a28nt] {
    font-size: 1.1rem;
    line-height: 1;
}

.revisit-chip-label[b-4gfn2a28nt] {
    font-weight: 500;
}

/* Resume chip - subtle warm accent */
.revisit-chip-resume[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #FFF5EE 0%, #FFE5D8 100%);
}

.revisit-chip-resume:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #FFE5D8 0%, #FFD4C4 100%);
}

/* Start New chip - sparkle accent */
.revisit-chip-new[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #FFFBF7 0%, #FFF0E5 100%);
}

.revisit-chip-new:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #FFF0E5 0%, #FFE0D0 100%);
}

/* --- Inline Revisit Links (inside speech bubble) - DEPRECATED --- */
.revisit-inline-prompt[b-4gfn2a28nt] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(123, 90, 83, 0.15);
    font-style: italic;
    color: #5a4a45;
    font-size: 0.95em;
    line-height: 1.7;
    word-spacing: 0.05em;
}

/* Last visit date display */
.revisit-date-line[b-4gfn2a28nt] {
    margin-top: 10px;
    font-size: 0.85em;
    color: #7a6a65;
    font-style: italic;
}

/* Revisit Action Buttons - inside speech bubble, styled like signin button */
.revisit-buttons-container[b-4gfn2a28nt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(123, 90, 83, 0.12);
}

.revisit-button[b-4gfn2a28nt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border: 1.5px solid #ffc4b3;
    border-radius: 24px;
    color: #4b2e2e;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.12);
}

.revisit-button:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #ffdacf 0%, #ffc4b3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 51, 43, 0.18);
}

.revisit-button:active[b-4gfn2a28nt] {
    transform: translateY(0);
}

.revisit-button-icon[b-4gfn2a28nt] {
    font-size: 1rem;
}

/* --- Granny Link Button (AI-generated internal links styled as buttons) --- */
.granny-link-button[b-4gfn2a28nt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    margin: 8px 0;
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border: 1.5px solid #ffc4b3;
    border-radius: 24px;
    color: #4b2e2e;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.12);
}

.granny-link-button:hover[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #ffdacf 0%, #ffc4b3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 51, 43, 0.18);
    text-decoration: none;
    color: #4b2e2e;
}

.granny-link-button:active[b-4gfn2a28nt] {
    transform: translateY(0);
}

.granny-link-icon[b-4gfn2a28nt] {
    font-size: 1rem;
}

.revisit-intro[b-4gfn2a28nt] {
    margin-right: 2px;
}

.revisit-separator[b-4gfn2a28nt] {
    color: #7a6a65;
    font-style: normal;
    margin: 0 2px;
}

.revisit-end[b-4gfn2a28nt] {
    margin-left: 1px;
}

.revisit-inline-link[b-4gfn2a28nt] {
    color: #7B5A53;
    text-decoration: none;
    font-style: italic;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px dashed #7B5A53;
    padding: 1px 2px;
    margin: 0 1px;
    display: inline;
}

.revisit-inline-link:hover[b-4gfn2a28nt] {
    color: #53332b;
    border-bottom-style: solid;
    background: rgba(123, 90, 83, 0.1);
    border-radius: 3px;
}

.revisit-inline-link:active[b-4gfn2a28nt] {
    opacity: 0.8;
}

/* --- Typing Indicator --- */
.typing-indicator[b-4gfn2a28nt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.typing-dot[b-4gfn2a28nt] {
    width: 8px;
    height: 8px;
    background-color: #7B5A53;
    border-radius: 50%;
    opacity: 0.6;
    animation: typingDot-b-4gfn2a28nt 1.2s ease-in-out infinite;
}

.typing-dot.delay-1[b-4gfn2a28nt] {
    animation-delay: 0.15s;
}

.typing-dot.delay-2[b-4gfn2a28nt] {
    animation-delay: 0.3s;
}

@keyframes typingDot-b-4gfn2a28nt {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Ghost Text (User message floating away) --- */
.ghost-text-container[b-4gfn2a28nt] {
    position: fixed;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10003;
    pointer-events: none;
}

.ghost-text[b-4gfn2a28nt] {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: rgba(255, 249, 245, 0.9);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: ghost-float-b-4gfn2a28nt 0.6s ease-out forwards;
}

@keyframes ghost-float-b-4gfn2a28nt {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px);
    }
}

/* --- Thought Bar (Input Area) - Positioned next to Granny on desktop --- */
.thought-bar-container[b-4gfn2a28nt] {
    position: fixed;
    bottom: 32px;
    left: calc(5% + clamp(200px, 22vw, 300px) + 20px); /* Start after Granny image + gap */
    transform: none;
    width: min(550px, 45vw);
    z-index: 10003;
}

.thought-bar-wrapper[b-4gfn2a28nt] {
    display: flex;
    align-items: center;
    background: #fff9f5;
    border-radius: 32px;
    padding: 8px 10px 8px 24px;
    box-shadow: 
        0 8px 32px rgba(83, 51, 43, 0.18),
        0 2px 8px rgba(83, 51, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1.5px solid #fae3d3;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.thought-bar-wrapper:focus-within[b-4gfn2a28nt] {
    border-color: #ffc4b3;
    box-shadow: 
        0 8px 32px rgba(83, 51, 43, 0.22),
        0 4px 16px rgba(255, 196, 179, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.thought-bar[b-4gfn2a28nt] {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: #4b2e2e;
    outline: none;
    padding: 16px 0;
}

.thought-bar[b-4gfn2a28nt]::placeholder {
    color: #8a7a74;
    font-style: italic;
}

.thought-bar:disabled[b-4gfn2a28nt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.thought-bar-send[b-4gfn2a28nt] {
    width: 50px;
    height: 50px;
    border: none;
    background: linear-gradient(135deg, #FFE5D0 0%, #ffdacf 100%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b2e2e;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.thought-bar-send:hover:not(:disabled)[b-4gfn2a28nt] {
    background: linear-gradient(135deg, #ffdacf 0%, #ffc4b3 100%);
    transform: scale(1.05);
}

.thought-bar-send:active:not(:disabled)[b-4gfn2a28nt] {
    transform: scale(0.95);
}

.thought-bar-send:disabled[b-4gfn2a28nt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.thought-bar-send svg[b-4gfn2a28nt] {
    width: 20px;
    height: 20px;
}

/* --- Spotlight Mask (Future Feature) --- */
.spotlight-mask[b-4gfn2a28nt] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Will be implemented with CSS mask or clip-path */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    /* Fix: Remove backdrop-filter on mobile to prevent fixed positioning issues */
    /* backdrop-filter creates a containing block that breaks position:fixed on children */
    .companion-overlay[b-4gfn2a28nt] {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28, 18, 10, 0.65); /* Slightly darker to compensate for no blur */
    }
    
    /* Mobile: Switch to chat-style horizontal layout (avatar + bubble row) */
    /* Anchored to bottom so it stays visible when keyboard opens */
    .companion-granny-container[b-4gfn2a28nt] {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 90px; /* Position above input bar (input is at bottom: 16px + ~60px height + gap) */
        transform: none;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        z-index: 10002;
    }

    /* Hide the glow on mobile - it doesn't work well with avatar */
    .companion-glow[b-4gfn2a28nt] {
        display: none;
    }

    /* Hide full Granny on mobile, show avatar instead */
    .companion-granny-full[b-4gfn2a28nt] {
        display: none !important;
    }

    .companion-granny-avatar[b-4gfn2a28nt] {
        display: block !important;
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #FFE5D0;
        box-shadow: 0 4px 12px rgba(83, 51, 43, 0.2);
        animation: none;
        transform: none;
        opacity: 1;
        flex-shrink: 0;
    }

    /* Speech cloud now positioned inline next to avatar */
    .speech-cloud[b-4gfn2a28nt] {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        max-width: 70vw;
        padding: 16px 20px;
        flex: 1;
        margin: 0;
        min-width:260px;
    }

    .speech-cloud.visible[b-4gfn2a28nt] {
        animation: cloud-appear-mobile-b-4gfn2a28nt 0.3s ease-out forwards;
    }

    .speech-cloud-content[b-4gfn2a28nt] {
        max-height: min(60svh, 420px);
        max-height: min(60dvh, 420px);
    }

    @keyframes cloud-appear-mobile-b-4gfn2a28nt {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Move tail to left side pointing at avatar */
    .speech-cloud-tail[b-4gfn2a28nt] {
        left: -10px;
        bottom: auto;
        top: 16px;
        border-left: 0;
        border-right: 12px solid #fff9f5;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    .speech-cloud-tail[b-4gfn2a28nt]::before {
        left: 1px;
        bottom: auto;
        top: -9px;
        border-left: 0;
        border-right: 13px solid #fae3d3;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
    }

    /* Slightly smaller text on mobile for better fit */
    .speech-cloud-text[b-4gfn2a28nt] {
        font-size: 1.1rem;
        line-height: 1.55;
    }

    .companion-granny-container.heart-weather-active[b-4gfn2a28nt] {
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px)) !important;
        right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px)) !important;
        bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 28px)) !important;
        display: block;
        max-height: calc(100svh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    .companion-granny-container.heart-weather-active .companion-granny-avatar[b-4gfn2a28nt] {
        position: absolute;
        top: 22px;
        left: 0;
        width: 52px;
        height: 52px;
        min-width: 52px;
        z-index: 2;
    }

    .speech-cloud.heart-weather-cloud[b-4gfn2a28nt] {
        width: calc(100% - 30px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 30px !important;
        padding: 18px 20px 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .speech-cloud.heart-weather-cloud .speech-cloud-content[b-4gfn2a28nt] {
        max-height: min(78svh, 620px) !important;
        max-height: min(78dvh, 620px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-right: 0;
        scrollbar-gutter: auto;
    }

    .speech-cloud.heart-weather-cloud .speech-cloud-tail[b-4gfn2a28nt] {
        left: -9px;
        top: 28px;
    }

    .heart-weather-panel[b-4gfn2a28nt] {
        gap: 12px;
        padding-right: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .heart-weather-close[b-4gfn2a28nt] {
        top: -2px;
        right: 2px;
        width: 38px;
        height: 38px;
    }

    .heart-weather-title[b-4gfn2a28nt] {
        padding-right: 42px;
        font-size: 0.9rem;
    }

    .heart-weather-question[b-4gfn2a28nt] {
        font-size: 1.16rem;
        line-height: 1.36;
        padding-right: 10px;
    }

    .heart-weather-stones[b-4gfn2a28nt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .heart-weather-stone[b-4gfn2a28nt] {
        box-sizing: border-box;
        min-height: 48px;
        font-size: 0.9rem;
        padding: 10px 12px;
    }

    .heart-weather-confirmation[b-4gfn2a28nt] {
        font-size: 1.02rem;
        line-height: 1.5;
    }

    .heart-weather-still-moment[b-4gfn2a28nt] {
        font-size: 0.93rem;
        line-height: 1.5;
    }

    .heart-weather-actions[b-4gfn2a28nt] {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    .heart-weather-action[b-4gfn2a28nt] {
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        line-height: 1.25;
        padding: 10px 18px;
    }

    .heart-weather-action.quiet[b-4gfn2a28nt] {
        min-height: 44px;
        padding: 8px 12px;
    }

    .heart-weather-reflection[b-4gfn2a28nt] {
        box-sizing: border-box;
        min-height: 104px;
        max-height: 28dvh;
        font-size: 0.98rem;
        padding: 12px 14px;
        resize: vertical;
    }

    @media (max-width: 360px) {
        .speech-cloud.heart-weather-cloud[b-4gfn2a28nt] {
            width: calc(100% - 22px) !important;
            margin-left: 22px !important;
            padding: 16px 16px 18px !important;
        }

        .companion-granny-container.heart-weather-active .companion-granny-avatar[b-4gfn2a28nt] {
            width: 46px;
            height: 46px;
            min-width: 46px;
        }

        .heart-weather-stones[b-4gfn2a28nt] {
            grid-template-columns: 1fr;
        }

        .heart-weather-question[b-4gfn2a28nt] {
            font-size: 1.08rem;
        }
    }

    /* Granny link button - mobile sizing with proper touch targets */
    .granny-link-button[b-4gfn2a28nt] {
        padding: 12px 18px;
        font-size: 0.9rem;
        min-height: 44px; /* Accessible touch target */
    }

    .companion-close[b-4gfn2a28nt] {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    /* Mobile: Input bar full width at bottom */
    .thought-bar-container[b-4gfn2a28nt] {
        bottom: 16px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
    }

    .thought-bar-wrapper[b-4gfn2a28nt] {
        padding: 6px 8px 6px 18px;
    }

    .thought-bar[b-4gfn2a28nt] {
        font-size: 1.05rem;
        padding: 12px 0;
    }

    .thought-bar-send[b-4gfn2a28nt] {
        width: 44px;
        height: 44px;
    }

    .ghost-text[b-4gfn2a28nt] {
        font-size: 1.1rem;
    }

    /* Mobile: Chips positioned above input bar */
    .suggestion-chips-container[b-4gfn2a28nt] {
        bottom: 85px; /* Above the thought bar on mobile */
        left: 12px;
        right: 12px;
        max-width: none;
        justify-content: center;
    }

    

    .suggestion-chip[b-4gfn2a28nt] {
        padding: 8px 14px;
        font-size: 0.88rem;
    }

    /* Mobile: Revisit action chips */
    .revisit-chips-container[b-4gfn2a28nt] {
        bottom: 85px;
        left: 12px;
        right: 12px;
        max-width: none;
        justify-content: center;
    }

    .revisit-chip[b-4gfn2a28nt] {
        padding: 10px 16px;
        font-size: 0.88rem;
        gap: 6px;
    }

    .revisit-chip-icon[b-4gfn2a28nt] {
        font-size: 1rem;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .companion-overlay[b-4gfn2a28nt],
    .companion-overlay.entering[b-4gfn2a28nt],
    .companion-overlay.exiting[b-4gfn2a28nt] {
        animation: none;
        transition: opacity 0.15s ease;
    }

    .companion-granny[b-4gfn2a28nt] {
        animation: none;
        transform: translateY(0);
        opacity: 1;
    }

    .companion-glow[b-4gfn2a28nt] {
        animation: none;
    }

    .speech-cloud[b-4gfn2a28nt],
    .speech-cloud.visible[b-4gfn2a28nt] {
        animation: none;
        transition: opacity 0.15s ease;
    }

    .speech-cloud-text.typewriter[b-4gfn2a28nt]::after {
        animation: none;
        opacity: 0;
    }

    .typing-dot[b-4gfn2a28nt] {
        animation: none;
        opacity: 0.7;
    }

    .ghost-text[b-4gfn2a28nt] {
        animation: none;
        opacity: 0;
    }

    .suggestion-chips-container[b-4gfn2a28nt] {
        animation: none;
    }

    .suggestion-chip[b-4gfn2a28nt] {
        transition: none;
    }
}

/* --- Auth Modals Container --- */
/* Ensures auth modals appear above the companion overlay blur */
.companion-auth-modals[b-4gfn2a28nt] {
    position: relative;
    z-index: 10001;
}

/* Force child modals to have even higher z-index */
.companion-auth-modals[b-4gfn2a28nt]  .modal-backdrop,
.companion-auth-modals[b-4gfn2a28nt]  .modal-overlay,
.companion-auth-modals[b-4gfn2a28nt]  .auth-modal-overlay,
.companion-auth-modals[b-4gfn2a28nt]  .signup-modal-overlay {
    z-index: 10002 !important;
}

.companion-auth-modals[b-4gfn2a28nt]  .modal,
.companion-auth-modals[b-4gfn2a28nt]  .modal-content,
.companion-auth-modals[b-4gfn2a28nt]  .auth-modal,
.companion-auth-modals[b-4gfn2a28nt]  .signup-modal {
    z-index: 10003 !important;
}

/* /Components/ConfirmationModal.razor.rz.scp.css */
/* ConfirmationModal — scoped, ceremonial parchment dialog
   Desktop: centered card with warm border, blurred backdrop
   Mobile (≤768px): full-width bottom sheet that slides up
*/

.confirmation-overlay[b-z1g9olnipb] {
    position: fixed;
    inset: 0;
    background: rgba(40, 25, 22, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    animation: confirmation-fade-in-b-z1g9olnipb 200ms ease-out both;
}

@keyframes confirmation-fade-in-b-z1g9olnipb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.confirmation-card[b-z1g9olnipb] {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(232, 168, 102, 0.08) 0%, transparent 60%),
        #fdf8f0;
    border: 1px solid rgba(139, 107, 66, 0.18);
    border-radius: 16px;
    width: 460px;
    max-width: calc(100vw - 32px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 20px 50px rgba(91, 58, 51, 0.22),
        0 4px 12px rgba(91, 58, 51, 0.08);
    position: relative;
    animation: confirmation-card-in-b-z1g9olnipb 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    overflow: hidden;
}

@keyframes confirmation-card-in-b-z1g9olnipb {
    from { opacity: 0; transform: scale(0.96) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Tone accent strip across the top */
.confirmation-card[b-z1g9olnipb]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--tone-accent, #b06a2c) 50%, transparent 100%);
    opacity: 0.55;
}

.confirmation-overlay.tone-danger  .confirmation-card[b-z1g9olnipb] { --tone-accent: #b06a2c; }
.confirmation-overlay.tone-success .confirmation-card[b-z1g9olnipb] { --tone-accent: #5f8358; }
.confirmation-overlay.tone-neutral .confirmation-card[b-z1g9olnipb] { --tone-accent: #a88a6b; }

/* Drag handle (mobile only — hidden on desktop) */
.confirmation-handle[b-z1g9olnipb] {
    display: none;
}

/* Header */
.confirmation-header[b-z1g9olnipb] {
    padding: 28px 28px 8px 28px;
    text-align: center;
}

.confirmation-glyph[b-z1g9olnipb] {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(91, 58, 51, 0.12));
}

.confirmation-glyph svg[b-z1g9olnipb] {
    width: 100%;
    height: 100%;
}

.confirmation-title[b-z1g9olnipb] {
    font-family: var(--font-serif, 'Fraunces', Georgia, serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: #4a2f28;
    margin: 0;
    letter-spacing: -0.01em;
}

.confirmation-whisper[b-z1g9olnipb] {
    font-family: var(--font-handwriting, 'Caveat', cursive);
    font-size: 16px;
    color: #8b6b4a;
    margin: 6px 0 0 0;
    opacity: 0.85;
}

/* Body */
.confirmation-body[b-z1g9olnipb] {
    padding: 4px 28px 8px 28px;
    text-align: center;
}

.confirmation-subtitle[b-z1g9olnipb] {
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.55;
    color: #6b5a52;
    margin: 0 0 14px 0;
}

.confirmation-preview[b-z1g9olnipb] {
    background: rgba(255, 251, 243, 0.7);
    border-left: 2px solid var(--tone-accent, #b06a2c);
    border-radius: 4px 8px 8px 4px;
    padding: 12px 14px;
    margin: 4px 0 8px;
    text-align: left;
}

.confirmation-preview-text[b-z1g9olnipb] {
    margin: 0;
    font-family: var(--font-serif, 'Fraunces', Georgia, serif);
    font-size: 14px;
    line-height: 1.5;
    color: #5b4540;
    font-style: italic;
}

/* Actions */
.confirmation-actions[b-z1g9olnipb] {
    display: flex;
    gap: 12px;
    justify-content: stretch;
    padding: 16px 24px 22px 24px;
}

.confirmation-btn[b-z1g9olnipb] {
    flex: 1;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    line-height: 1.2;
}

.confirmation-btn:focus-visible[b-z1g9olnipb] {
    outline: 2px solid var(--tone-accent, #b06a2c);
    outline-offset: 2px;
}

/* Cancel = safe default, parchment-warm */
.confirmation-btn-cancel[b-z1g9olnipb] {
    background: #fffdf7;
    border-color: rgba(139, 107, 66, 0.25);
    color: #5a4138;
}

.confirmation-btn-cancel:hover[b-z1g9olnipb] {
    background: #fff8e9;
    border-color: rgba(139, 107, 66, 0.4);
    transform: translateY(-1px);
}

/* Confirm-danger (default) = deep burgundy */
.confirmation-btn-confirm[b-z1g9olnipb] {
    background: linear-gradient(180deg, #8a3a36 0%, #6f2826 100%);
    color: #fdf2dc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 6px rgba(111, 40, 38, 0.3);
}

.confirmation-btn-confirm:hover[b-z1g9olnipb] {
    background: linear-gradient(180deg, #7a2e2e 0%, #5e1f1d 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 10px rgba(111, 40, 38, 0.35);
}

/* Tone: success — confirm becomes warm green */
.confirmation-overlay.tone-success .confirmation-btn-confirm[b-z1g9olnipb],
.confirmation-btn-confirm.btn-modal-confirm-success[b-z1g9olnipb] {
    background: linear-gradient(180deg, #7fb08a 0%, #5f8f6b 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 6px rgba(95, 143, 107, 0.25);
}

.confirmation-overlay.tone-success .confirmation-btn-confirm:hover[b-z1g9olnipb],
.confirmation-btn-confirm.btn-modal-confirm-success:hover[b-z1g9olnipb] {
    background: linear-gradient(180deg, #6fa07a 0%, #4f7f5b 100%);
}

/* Tone: neutral — confirm warm sepia */
.confirmation-overlay.tone-neutral .confirmation-btn-confirm[b-z1g9olnipb] {
    background: linear-gradient(180deg, #b48a5e 0%, #95704a 100%);
    color: #fff8e9;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 6px rgba(149, 112, 74, 0.25);
}

/* Backwards-compat: legacy CancelButtonClass="btn-modal-cancel-danger" */
.confirmation-btn-cancel.btn-modal-cancel-danger[b-z1g9olnipb] {
    background: linear-gradient(180deg, #8a3a36 0%, #6f2826 100%);
    color: #fdf2dc;
    border-color: transparent;
}

/* ───────────── Mobile: bottom sheet ───────────── */
@media (max-width: 768px) {
    .confirmation-overlay[b-z1g9olnipb] {
        align-items: flex-end;
        justify-content: stretch;
    }

    .confirmation-card[b-z1g9olnipb] {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        animation: confirmation-sheet-in-b-z1g9olnipb 260ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
        box-shadow:
            0 -8px 24px rgba(91, 58, 51, 0.18),
            0 -2px 6px rgba(91, 58, 51, 0.08);
    }

    @keyframes confirmation-sheet-in-b-z1g9olnipb {
        from { opacity: 0; transform: translateY(100%); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .confirmation-card[b-z1g9olnipb]::before {
        height: 0;
    }

    .confirmation-handle[b-z1g9olnipb] {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(139, 107, 66, 0.28);
        margin: 10px auto 0;
    }

    .confirmation-header[b-z1g9olnipb] {
        padding: 16px 24px 6px;
    }

    .confirmation-glyph[b-z1g9olnipb] {
        width: 44px;
        height: 44px;
    }

    .confirmation-title[b-z1g9olnipb] {
        font-size: 22px;
    }

    .confirmation-body[b-z1g9olnipb] {
        padding: 4px 24px 8px;
    }

    /* Stacked, full-width buttons; cancel ON TOP (safe default first) */
    .confirmation-actions[b-z1g9olnipb] {
        flex-direction: column-reverse;
        gap: 10px;
        padding: 14px 20px 20px;
    }

    .confirmation-btn[b-z1g9olnipb] {
        width: 100%;
        padding: 14px 18px;
        font-size: 16px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .confirmation-overlay[b-z1g9olnipb],
    .confirmation-card[b-z1g9olnipb] {
        animation: none !important;
    }
}

/* /Components/ConversationRoom/ConversationFocusArtifact.razor.rz.scp.css */
/* ============================================================
   ConversationFocusArtifact — selected memory/message as a laid-down object.
   ============================================================ */

.focus-keepsake[b-6joig8k3sx] {
    position: relative;
    width: min(100%, 37rem);
    margin: -0.35rem auto 1.65rem;
    padding: 0 1rem;
    text-align: center;
    color: #514234;
    animation: focusArtifactSettle-b-6joig8k3sx 0.36s ease-out both;
}

.focus-label[b-6joig8k3sx] {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.11em;
    color: #9B8062;
}

.focus-photo-wrap[b-6joig8k3sx] {
    position: relative;
    width: min(100%, 28rem);
    margin: 0 auto 1.15rem;
    border-radius: 10px;
    transform: rotate(-0.65deg);
}

.focus-photo-wrap[b-6joig8k3sx]::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -0.58rem;
    height: 1.1rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(105, 76, 47, 0.22) 0%, rgba(105, 76, 47, 0) 72%);
    filter: blur(8px);
    z-index: 0;
}

.focus-photo[b-6joig8k3sx] {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-height: clamp(12rem, 30vw, 18rem);
    object-fit: cover;
    border-radius: 10px;
    box-shadow:
        0 18px 34px rgba(89, 62, 37, 0.16),
        0 0 0 1px rgba(255, 252, 246, 0.52) inset;
}

.focus-quote[b-6joig8k3sx] {
    position: relative;
    width: min(100%, 31rem);
    margin: 0 auto;
    padding: 0.2rem clamp(1rem, 4vw, 2rem);
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.85;
    color: #5B4939;
}

.focus-quote[b-6joig8k3sx]::before {
    content: "\201C";
    position: absolute;
    top: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-serif);
    font-size: 5rem;
    line-height: 1;
    color: rgba(184, 148, 107, 0.12);
    pointer-events: none;
}

.focus-quote p[b-6joig8k3sx] {
    position: relative;
    margin: 0;
    white-space: pre-wrap;
}

.focus-date[b-6joig8k3sx] {
    display: block;
    margin-top: 0.72rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A98C6E;
}

.focus-rest[b-6joig8k3sx] {
    width: min(14rem, 48vw);
    height: 1px;
    margin: 1.35rem auto 0;
    background: linear-gradient(90deg, transparent, rgba(190, 155, 113, 0.54), transparent);
}

.focus-rest[b-6joig8k3sx]::after {
    content: "";
    display: block;
    width: 0.22rem;
    height: 0.22rem;
    margin: -0.11rem auto 0;
    border-radius: 50%;
    background: rgba(190, 155, 113, 0.6);
}

.focus-keepsake.text-only[b-6joig8k3sx] {
    width: min(100%, 35rem);
}

.focus-keepsake.text-only .focus-quote[b-6joig8k3sx] {
    padding-top: 0.55rem;
    padding-bottom: 0.35rem;
}

.focus-keepsake.text-only .focus-quote[b-6joig8k3sx]::after {
    content: "";
    position: absolute;
    inset: -0.35rem 0;
    border-top: 1px solid rgba(190, 155, 113, 0.14);
    border-bottom: 1px solid rgba(190, 155, 113, 0.1);
    pointer-events: none;
}

@keyframes focusArtifactSettle-b-6joig8k3sx {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:global(body.night-mode) .focus-label[b-6joig8k3sx] {
    color: #C7AA89;
}

:global(body.night-mode) .focus-photo[b-6joig8k3sx] {
    box-shadow:
        0 20px 38px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(228, 192, 151, 0.14) inset;
}

:global(body.night-mode) .focus-quote[b-6joig8k3sx] {
    color: #E5D5C3;
}

:global(body.night-mode) .focus-quote[b-6joig8k3sx]::before {
    color: rgba(207, 158, 100, 0.14);
}

:global(body.night-mode) .focus-date[b-6joig8k3sx] {
    color: #B99B7C;
}

:global(body.night-mode) .focus-rest[b-6joig8k3sx] {
    background: linear-gradient(90deg, transparent, rgba(190, 145, 91, 0.48), transparent);
}

@media (max-width: 768px) {
    .focus-keepsake[b-6joig8k3sx] {
        width: min(100%, 34rem);
        margin-bottom: 1.25rem;
        padding: 0 0.25rem;
    }

    .focus-label[b-6joig8k3sx] {
        margin-bottom: 0.85rem;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
    }

    .focus-photo-wrap[b-6joig8k3sx] {
        width: min(100%, 24rem);
    }

    .focus-photo[b-6joig8k3sx] {
        max-height: 15rem;
    }

    .focus-quote[b-6joig8k3sx] {
        font-size: 0.98rem;
        line-height: 1.78;
    }
}

@media (max-width: 480px) {
    .focus-photo[b-6joig8k3sx] {
        max-height: 13rem;
    }

    .focus-quote[b-6joig8k3sx] {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}
/* /Components/ConversationRoom/ConversationHero.razor.rz.scp.css */
/* ============================================================
   ConversationHero — Editorial portrait and ceremonial heading.
   ============================================================ */

.conversation-hero[b-2avf0vjjx7] {
    position: relative;
    width: min(100%, 60rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(2rem, 5vw, 3.8rem) 1rem 1.8rem;
    text-align: center;
}

.conversation-hero[b-2avf0vjjx7]::before {
    content: "";
    position: absolute;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(32rem, 86vw);
    height: min(24rem, 62vw);
    border-radius: 50%;
    background:
        radial-gradient(ellipse 68% 58% at 50% 42%, rgba(234, 210, 170, 0.22) 0%, rgba(220, 190, 145, 0.1) 34%, transparent 68%),
        radial-gradient(ellipse 90% 76% at 50% 52%, rgba(196, 154, 108, 0.08) 0%, transparent 72%);
    filter: blur(10px);
    pointer-events: none;
    opacity: 0.9;
}

.hero-portrait-wrap[b-2avf0vjjx7] {
    position: relative;
    width: clamp(12.5rem, 24vw, 18rem);
    aspect-ratio: 1 / 1.06;
    margin-bottom: 1.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-portrait-wrap[b-2avf0vjjx7]::before,
.hero-portrait-wrap[b-2avf0vjjx7]::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hero-portrait-wrap[b-2avf0vjjx7]::before {
    inset: -14% -16% -10%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(234, 210, 170, 0.2) 0%, rgba(220, 190, 145, 0.08) 35%, transparent 65%),
        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(196, 154, 108, 0.07) 0%, transparent 72%);
    z-index: 0;
}

.hero-portrait-wrap[b-2avf0vjjx7]::after {
    left: 50%;
    bottom: -0.35rem;
    width: 78%;
    height: 1.5rem;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(125, 91, 57, 0.18) 0%, rgba(125, 91, 57, 0.04) 46%, rgba(125, 91, 57, 0) 72%);
    filter: blur(10px);
    z-index: 0;
}

.hero-portrait[b-2avf0vjjx7] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 24%;
    -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, #000 28%, rgba(0, 0, 0, 0.98) 48%, rgba(0, 0, 0, 0.9) 58%, rgba(0, 0, 0, 0.42) 74%, transparent 86%);
    mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, #000 28%, rgba(0, 0, 0, 0.98) 48%, rgba(0, 0, 0, 0.9) 58%, rgba(0, 0, 0, 0.42) 74%, transparent 86%);
    filter: drop-shadow(0 18px 30px rgba(118, 83, 49, 0.16));
    transform-origin: center 40%;
    animation: heroBreath-b-2avf0vjjx7 9s ease-in-out infinite;
}

.hero-subtitle[b-2avf0vjjx7] {
    margin: 0 0 0.45rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8B7154;
}

.hero-name[b-2avf0vjjx7] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.3rem, 4.4vw, 3.7rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #382D24;
    text-wrap: balance;
}

.hero-years[b-2avf0vjjx7] {
    margin: 0.55rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #A18870;
}

.hero-divider[b-2avf0vjjx7] {
    margin-top: 1.45rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: min(100%, 24rem);
}

.hero-divider[b-2avf0vjjx7]::before,
.hero-divider[b-2avf0vjjx7]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 155, 113, 0.72), transparent);
}

.hero-divider-glyph[b-2avf0vjjx7] {
    font-size: 1rem;
    color: #BE9B71;
    opacity: 0.74;
}

@keyframes heroBreath-b-2avf0vjjx7 {
    0%,
    100% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.018) translateY(-2px);
    }
}

:global(body.night-mode) .conversation-hero[b-2avf0vjjx7]::before {
    background:
        radial-gradient(ellipse 68% 58% at 50% 42%, rgba(151, 103, 49, 0.18) 0%, rgba(151, 103, 49, 0.07) 34%, transparent 68%),
        radial-gradient(ellipse 90% 76% at 50% 52%, rgba(124, 89, 51, 0.08) 0%, transparent 72%);
}

:global(body.night-mode) .hero-portrait-wrap[b-2avf0vjjx7]::before {
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(157, 111, 60, 0.2) 0%, rgba(157, 111, 60, 0.08) 35%, transparent 65%),
        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(118, 83, 49, 0.08) 0%, transparent 72%);
}

:global(body.night-mode) .hero-portrait-wrap[b-2avf0vjjx7]::after {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 74%);
}

:global(body.night-mode) .hero-portrait[b-2avf0vjjx7] {
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.3));
}

:global(body.night-mode) .hero-subtitle[b-2avf0vjjx7] {
    color: #C9B39A;
}

:global(body.night-mode) .hero-name[b-2avf0vjjx7] {
    color: #F1E5D6;
}

:global(body.night-mode) .hero-years[b-2avf0vjjx7] {
    color: #B69A7C;
}

:global(body.night-mode) .hero-divider[b-2avf0vjjx7]::before,
:global(body.night-mode) .hero-divider[b-2avf0vjjx7]::after {
    background: linear-gradient(90deg, transparent, rgba(181, 139, 92, 0.72), transparent);
}

:global(body.night-mode) .hero-divider-glyph[b-2avf0vjjx7] {
    color: #C59A6C;
}

@media (max-width: 768px) {
    .conversation-hero[b-2avf0vjjx7] {
        padding: 1.4rem 0.5rem 1.4rem;
    }

    .hero-portrait-wrap[b-2avf0vjjx7] {
        width: clamp(10.25rem, 42vw, 13.5rem);
        margin-bottom: 1.35rem;
    }

    .hero-subtitle[b-2avf0vjjx7] {
        font-size: 0.86rem;
        letter-spacing: 0.14em;
    }

    .hero-years[b-2avf0vjjx7] {
        font-size: 0.74rem;
        letter-spacing: 0.16em;
    }
}

@media (max-width: 480px) {
    .hero-portrait-wrap[b-2avf0vjjx7] {
        width: clamp(9.4rem, 46vw, 11.25rem);
    }

    .hero-name[b-2avf0vjjx7] {
        font-size: clamp(1.95rem, 9vw, 2.45rem);
    }

    .hero-divider[b-2avf0vjjx7] {
        gap: 0.65rem;
    }
}
/* /Components/ConversationRoom/ConversationHistoryItem.razor.rz.scp.css */
/* ============================================================
   ConversationHistoryItem.razor.css — Archive slip cards.
   ============================================================ */

.conversation-history-item-wrapper[b-zt4c2fyx77] {
    position: relative;
}

.conversation-history-item[b-zt4c2fyx77] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 3rem 1rem 1rem;
    overflow: hidden;
    border: 1px solid rgba(188, 152, 109, 0.14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, rgba(248, 239, 226, 0.94) 100%);
    box-shadow: 0 12px 20px rgba(111, 80, 49, 0.06);
    text-align: left;
    cursor: pointer;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.conversation-history-item[b-zt4c2fyx77]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(209, 164, 112, 0.8), rgba(169, 110, 70, 0.55));
    opacity: 0.26;
    transition: opacity 0.18s ease, width 0.18s ease;
}

.conversation-history-item[b-zt4c2fyx77]::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0.7rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(220, 196, 168, 0.6), rgba(220, 196, 168, 0));
    opacity: 0.72;
}

.conversation-history-item:hover[b-zt4c2fyx77],
.conversation-history-item-wrapper:focus-within .conversation-history-item[b-zt4c2fyx77] {
    transform: translateY(-2px);
    border-color: rgba(188, 152, 109, 0.22);
    box-shadow: 0 16px 28px rgba(111, 80, 49, 0.1);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(249, 240, 228, 0.98) 100%);
}

.conversation-history-item-wrapper.active .conversation-history-item[b-zt4c2fyx77] {
    border-color: rgba(200, 133, 94, 0.34);
    box-shadow: 0 18px 30px rgba(167, 102, 73, 0.14);
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.98) 0%, rgba(247, 236, 221, 0.98) 100%);
}

.conversation-history-item-wrapper.active .conversation-history-item[b-zt4c2fyx77]::before,
.conversation-history-item:hover[b-zt4c2fyx77]::before,
.conversation-history-item-wrapper:focus-within .conversation-history-item[b-zt4c2fyx77]::before {
    width: 4px;
    opacity: 0.92;
}

.history-item-menu-btn[b-zt4c2fyx77] {
    position: absolute;
    top: 0.72rem;
    right: 0.65rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(188, 152, 109, 0.14);
    border-radius: 50%;
    background: rgba(253, 248, 240, 0.9);
    color: #896C4E;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.history-item-menu-btn:hover[b-zt4c2fyx77],
.history-item-menu-btn.open[b-zt4c2fyx77] {
    transform: translateY(-1px);
    background: rgba(255, 250, 244, 1);
    color: #5A4633;
    border-color: rgba(188, 152, 109, 0.22);
}

.history-item-menu[b-zt4c2fyx77] {
    position: absolute;
    top: 2.8rem;
    right: 0.65rem;
    min-width: 12rem;
    padding: 0.35rem;
    border: 1px solid rgba(188, 152, 109, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(247, 238, 225, 0.98));
    box-shadow: 0 18px 28px rgba(89, 66, 45, 0.14);
    z-index: 2;
}

.history-item-menu-action[b-zt4c2fyx77] {
    width: 100%;
    padding: 0.72rem 0.82rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: #5A4E42;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.history-item-menu-action:hover[b-zt4c2fyx77] {
    background: rgba(195, 160, 110, 0.12);
}

.history-item-menu-action.delete[b-zt4c2fyx77] {
    color: #9C4F45;
}

.history-item-topline[b-zt4c2fyx77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.history-item-meta[b-zt4c2fyx77] {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #A08B73;
}

.history-item-marker[b-zt4c2fyx77] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(207, 167, 117, 0.14);
    color: #B07A4B;
    font-size: 0.76rem;
}

.history-item-preview[b-zt4c2fyx77] {
    margin: 0;
    padding-right: 0.15rem;
    font-family: var(--font-serif);
    font-size: 0.99rem;
    line-height: 1.58;
    color: #43372C;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:global(body.night-mode) .conversation-history-item[b-zt4c2fyx77] {
    border-color: rgba(191, 148, 91, 0.14);
    background: linear-gradient(180deg, rgba(50, 40, 34, 0.92) 0%, rgba(44, 35, 30, 0.94) 100%);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22);
}

:global(body.night-mode) .conversation-history-item[b-zt4c2fyx77]::after {
    background: linear-gradient(90deg, rgba(173, 140, 107, 0.34), rgba(173, 140, 107, 0));
}

:global(body.night-mode) .conversation-history-item:hover[b-zt4c2fyx77],
:global(body.night-mode) .conversation-history-item-wrapper.active .conversation-history-item[b-zt4c2fyx77],
:global(body.night-mode) .conversation-history-item-wrapper:focus-within .conversation-history-item[b-zt4c2fyx77] {
    border-color: rgba(191, 148, 91, 0.24);
    background: linear-gradient(180deg, rgba(58, 46, 39, 0.96) 0%, rgba(50, 40, 34, 0.98) 100%);
}

:global(body.night-mode) .history-item-menu-btn[b-zt4c2fyx77] {
    border-color: rgba(191, 148, 91, 0.16);
    background: rgba(45, 36, 31, 0.92);
    color: #DCC8B2;
}

:global(body.night-mode) .history-item-menu-btn:hover[b-zt4c2fyx77],
:global(body.night-mode) .history-item-menu-btn.open[b-zt4c2fyx77] {
    background: rgba(58, 46, 39, 0.98);
    color: #F4E5D3;
}

:global(body.night-mode) .history-item-menu[b-zt4c2fyx77] {
    border-color: rgba(191, 148, 91, 0.16);
    background: linear-gradient(180deg, rgba(38, 31, 27, 0.98), rgba(31, 25, 22, 0.98));
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.34);
}

:global(body.night-mode) .history-item-menu-action[b-zt4c2fyx77] {
    color: #DECDB8;
}

:global(body.night-mode) .history-item-menu-action:hover[b-zt4c2fyx77] {
    background: rgba(191, 148, 91, 0.12);
}

:global(body.night-mode) .history-item-meta[b-zt4c2fyx77] {
    color: #BAA38A;
}

:global(body.night-mode) .history-item-marker[b-zt4c2fyx77] {
    background: rgba(191, 148, 91, 0.16);
    color: #E2B680;
}

:global(body.night-mode) .history-item-preview[b-zt4c2fyx77] {
    color: #F0E3D4;
}
/* /Components/ConversationRoom/ConversationInput.razor.rz.scp.css */
.conversation-input-shell[b-7tp6iljpfk] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding: 1.18rem 1.3rem 1rem;
    overflow: hidden;
    border: 1px solid rgba(188, 152, 109, 0.14);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 239, 226, 0.94));
    box-shadow: 0 26px 48px rgba(100, 72, 44, 0.1);
}

.conversation-input-shell[b-7tp6iljpfk]::before,
.conversation-input-shell[b-7tp6iljpfk]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.conversation-input-shell[b-7tp6iljpfk]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 22%),
        repeating-linear-gradient(180deg, rgba(181, 145, 105, 0.03) 0, rgba(181, 145, 105, 0.03) 1px, transparent 1px, transparent 2.85rem);
    opacity: 0.9;
}

.conversation-input-shell[b-7tp6iljpfk]::after {
    top: auto;
    height: 4.2rem;
    background: radial-gradient(circle at 50% 0%, rgba(241, 206, 162, 0.32) 0%, rgba(241, 206, 162, 0) 72%);
}

[b-7tp6iljpfk] .conversation-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

[b-7tp6iljpfk] .conversation-file-input.drag-active {
    inset: 0;
    width: auto;
    height: auto;
    z-index: 4;
    pointer-events: auto;
    cursor: copy;
}

.conversation-drag-overlay[b-7tp6iljpfk] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 1.5px dashed rgba(186, 141, 92, 0.42);
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(250, 238, 219, 0.96), rgba(255, 249, 242, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
    pointer-events: none;
}

.conversation-drag-copy[b-7tp6iljpfk] {
    max-width: 24rem;
    font-family: var(--font-serif);
    font-size: 1.04rem;
    font-style: italic;
    line-height: 1.8;
    text-align: center;
    color: #7A5F45;
}

.selected-image-card[b-7tp6iljpfk] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(188, 152, 109, 0.15);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(246, 236, 223, 0.92));
    box-shadow: 0 16px 24px rgba(110, 79, 48, 0.08);
}

.selected-image-preview[b-7tp6iljpfk] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    padding: 0.32rem;
    background: rgba(255, 251, 246, 0.96);
    box-shadow: 0 16px 24px rgba(115, 84, 56, 0.18);
    transform: rotate(-1.9deg);
}

.selected-image-copy[b-7tp6iljpfk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.22rem;
}

.selected-image-label[b-7tp6iljpfk] {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #4B3A2C;
}

.selected-image-name[b-7tp6iljpfk] {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #8B7355;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-image-remove[b-7tp6iljpfk] {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(188, 152, 109, 0.16);
    border-radius: 50%;
    background: rgba(255, 248, 239, 0.84);
    color: #7D6044;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease;
}

.selected-image-remove:hover[b-7tp6iljpfk] {
    transform: translateY(-1px);
    background: rgba(255, 250, 244, 0.98);
}

.conversation-input-row[b-7tp6iljpfk] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.conversation-tools-row[b-7tp6iljpfk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.conversation-tools-right[b-7tp6iljpfk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.conversation-media-button[b-7tp6iljpfk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(188, 152, 109, 0.16);
    border-radius: 50%;
    background: rgba(255, 249, 242, 0.76);
    color: #7D6044;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.conversation-media-button:hover[b-7tp6iljpfk] {
    transform: translateY(-1px);
    background: rgba(255, 249, 242, 0.94);
    box-shadow: 0 14px 22px rgba(115, 84, 56, 0.1);
}

.conversation-text-wrap[b-7tp6iljpfk] {
    position: relative;
    min-width: 0;
    padding: 0.32rem 0.15rem 0.44rem;
    border-bottom: 1px solid rgba(162, 128, 95, 0.32);
}

.conversation-text-wrap[b-7tp6iljpfk]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(207, 159, 111, 0.12), rgba(207, 159, 111, 0.68), rgba(207, 159, 111, 0.12));
    opacity: 0;
    transition: opacity 0.16s ease;
}

.conversation-text-wrap:focus-within[b-7tp6iljpfk]::after {
    opacity: 1;
}

.conversation-textarea[b-7tp6iljpfk] {
    width: 100%;
    min-height: 2.55rem;
    max-height: 180px;
    padding: 0;
    border: none;
    outline: none;
    resize: none;
    overflow-y: hidden;
    background: transparent;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.9;
    color: #47392D;
}

.conversation-textarea[b-7tp6iljpfk]::placeholder {
    color: rgba(117, 95, 74, 0.6);
    font-style: italic;
}

.conversation-candle-button[b-7tp6iljpfk],
.conversation-send-button[b-7tp6iljpfk] {
    position: relative;
    border: none;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

.conversation-candle-button[b-7tp6iljpfk] {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 249, 242, 0.96), rgba(246, 235, 220, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 14px 24px rgba(164, 126, 86, 0.12);
    color: #A17345;
    font-size: 1.02rem;
}

.conversation-candle-button[b-7tp6iljpfk]::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 225, 178, 0.66) 0%, rgba(251, 225, 178, 0) 72%);
    opacity: 0.78;
    pointer-events: none;
}

.cta-candle-icon[b-7tp6iljpfk] {
    position: relative;
    z-index: 1;
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
    transform: translateY(-2px);
    transform-origin: center bottom;
    filter: drop-shadow(0 0 6px rgba(241, 194, 126, 0.38)) drop-shadow(0 3px 10px rgba(198, 143, 81, 0.18));
}

.conversation-send-button[b-7tp6iljpfk] {
    min-height: 48px;
    padding: 0.88rem 1.28rem;
    border-radius: 999px;
    background: linear-gradient(145deg, #C9965E, #A66C40);
    box-shadow: 0 16px 30px rgba(169, 106, 61, 0.22);
    color: #FFF8F2;
    font-family: var(--font-serif);
    font-size: 0.96rem;
    font-style: italic;
    letter-spacing: 0.02em;
}

.conversation-candle-button:hover[b-7tp6iljpfk],
.conversation-send-button:hover[b-7tp6iljpfk] {
    transform: translateY(-1px);
}

.conversation-candle-button:disabled[b-7tp6iljpfk],
.conversation-send-button:disabled[b-7tp6iljpfk] {
    opacity: 0.56;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.conversation-candle-button:disabled .cta-candle-icon[b-7tp6iljpfk] {
    filter: drop-shadow(0 0 5px rgba(241, 194, 126, 0.22));
}

.conversation-candle-hint[b-7tp6iljpfk] {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.6;
    color: #8A7055;
}

:global(body.night-mode) .conversation-input-shell[b-7tp6iljpfk] {
    border-color: rgba(191, 148, 91, 0.14);
    background: linear-gradient(180deg, rgba(39, 32, 28, 0.96), rgba(31, 26, 23, 0.96));
    box-shadow: 0 28px 52px rgba(0, 0, 0, 0.3);
}

:global(body.night-mode) .conversation-input-shell[b-7tp6iljpfk]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 22%),
        repeating-linear-gradient(180deg, rgba(183, 145, 102, 0.04) 0, rgba(183, 145, 102, 0.04) 1px, transparent 1px, transparent 2.85rem);
}

:global(body.night-mode) .conversation-input-shell[b-7tp6iljpfk]::after {
    background: radial-gradient(circle at 50% 0%, rgba(172, 118, 54, 0.24) 0%, rgba(172, 118, 54, 0) 72%);
}

:global(body.night-mode) .conversation-drag-overlay[b-7tp6iljpfk] {
    border-color: rgba(191, 148, 91, 0.3);
    background: linear-gradient(135deg, rgba(52, 42, 36, 0.96), rgba(42, 35, 31, 0.98));
}

:global(body.night-mode) .conversation-drag-copy[b-7tp6iljpfk],
:global(body.night-mode) .selected-image-label[b-7tp6iljpfk],
:global(body.night-mode) .conversation-candle-hint[b-7tp6iljpfk] {
    color: #D3BEA6;
}

:global(body.night-mode) .selected-image-card[b-7tp6iljpfk] {
    border-color: rgba(191, 148, 91, 0.14);
    background: linear-gradient(180deg, rgba(49, 40, 34, 0.92), rgba(41, 33, 29, 0.94));
    box-shadow: 0 16px 26px rgba(0, 0, 0, 0.22);
}

:global(body.night-mode) .selected-image-preview[b-7tp6iljpfk] {
    background: rgba(61, 49, 42, 0.96);
}

:global(body.night-mode) .selected-image-name[b-7tp6iljpfk] {
    color: #B99E81;
}

:global(body.night-mode) .selected-image-remove[b-7tp6iljpfk],
:global(body.night-mode) .conversation-media-button[b-7tp6iljpfk],
:global(body.night-mode) .conversation-candle-button[b-7tp6iljpfk] {
    border-color: rgba(191, 148, 91, 0.16);
    background: rgba(57, 46, 39, 0.84);
    color: #E1D0BC;
}

:global(body.night-mode) .conversation-media-button:hover[b-7tp6iljpfk],
:global(body.night-mode) .selected-image-remove:hover[b-7tp6iljpfk],
:global(body.night-mode) .conversation-candle-button:hover[b-7tp6iljpfk] {
    background: rgba(67, 54, 46, 0.94);
}

:global(body.night-mode) .cta-candle-icon[b-7tp6iljpfk] {
    filter: drop-shadow(0 0 8px rgba(255, 198, 118, 0.42)) drop-shadow(0 3px 12px rgba(135, 92, 44, 0.28));
}

:global(body.night-mode) .conversation-candle-button:disabled .cta-candle-icon[b-7tp6iljpfk] {
    filter: drop-shadow(0 0 6px rgba(255, 198, 118, 0.24));
}

:global(body.night-mode) .conversation-text-wrap[b-7tp6iljpfk] {
    border-bottom-color: rgba(191, 148, 91, 0.26);
}

:global(body.night-mode) .conversation-textarea[b-7tp6iljpfk] {
    color: #F0E4D6;
}

:global(body.night-mode) .conversation-textarea[b-7tp6iljpfk]::placeholder {
    color: rgba(208, 186, 160, 0.62);
}

:global(body.night-mode) .conversation-send-button[b-7tp6iljpfk] {
    background: linear-gradient(145deg, #A97A48, #85562F);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
    .conversation-input-shell[b-7tp6iljpfk] {
        padding: 1rem 1rem 0.95rem;
        border-radius: 26px;
    }
}

@media (max-width: 560px) {
    .selected-image-card[b-7tp6iljpfk] {
        gap: 0.7rem;
        padding: 0.7rem;
    }

    .selected-image-preview[b-7tp6iljpfk] {
        width: 64px;
        height: 64px;
    }

    .conversation-send-button[b-7tp6iljpfk] {
        padding-inline: 1rem;
    }
}
/* /Components/ConversationRoom/ConversationMessage.razor.rz.scp.css */
/* ============================================================
   ConversationMessage.razor.css — typography-first conversation.
   ============================================================ */

.message[b-431oiy3kpy] {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(1.55rem, 2.3vw, 2rem);
    animation: messageFadeIn-b-431oiy3kpy 0.28s ease-out;
}

.message-row[b-431oiy3kpy] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    max-width: min(68ch, 100%);
}

.message-ai .message-row[b-431oiy3kpy] {
    align-self: flex-start;
}

.message-user .message-row[b-431oiy3kpy] {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: min(52ch, 86%);
}

.message-avatar-wrap[b-431oiy3kpy] {
    position: relative;
    flex: 0 0 auto;
    padding-top: 0.18rem;
}

.message-avatar-button[b-431oiy3kpy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 3.1rem;
    border: none;
    border-radius: 16px;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.message-avatar-button:hover:not(:disabled)[b-431oiy3kpy] {
    transform: translateY(-1px);
}

.message-avatar-button.unsaved:hover:not(:disabled)[b-431oiy3kpy] {
    box-shadow: 0 0 0 4px rgba(223, 195, 167, 0.28);
}

.message-avatar-button.saved[b-431oiy3kpy] {
    box-shadow: 0 0 0 3px rgba(218, 182, 148, 0.42);
}

.message-avatar-button.saving[b-431oiy3kpy] {
    opacity: 0.72;
}

.message-avatar-button.pulse[b-431oiy3kpy] {
    animation: messageAvatarPulse-b-431oiy3kpy 1.35s ease-out;
}

.message-avatar[b-431oiy3kpy] {
    width: 2.6rem;
    height: 3.1rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 16px;
    background: rgba(255, 250, 244, 0.88);
    box-shadow: 0 12px 20px rgba(108, 78, 48, 0.12);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.2) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.2) 100%);
}

.message-avatar-badge[b-431oiy3kpy] {
    position: absolute;
    right: -0.28rem;
    top: -0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: rgba(255, 249, 242, 0.97);
    box-shadow: 0 8px 20px rgba(107, 76, 46, 0.18);
    color: #9B6A45;
    font-size: 0.68rem;
    line-height: 1;
}

.message-vault-tooltip[b-431oiy3kpy] {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.72rem);
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 0.56rem 0.86rem;
    border-radius: 999px;
    background: rgba(255, 252, 248, 0.96);
    border: 1px solid rgba(226, 205, 185, 0.85);
    box-shadow: 0 14px 34px rgba(92, 67, 46, 0.14);
    color: #6B5140;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    z-index: 8;
    animation: messageTooltipFade-b-431oiy3kpy 0.22s ease-out;
}

.message-body[b-431oiy3kpy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    word-break: break-word;
}

.message-ai .message-body[b-431oiy3kpy] {
    padding-right: 1rem;
}

.message-user .message-body[b-431oiy3kpy] {
    position: relative;
    padding: 1rem 1.18rem 0.88rem;
    border: none;
    border-radius: 20px 20px 8px 20px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.8), rgba(247, 239, 229, 0.66));
    box-shadow:
        0 10px 24px rgba(108, 78, 48, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.message-user .message-body[b-431oiy3kpy]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 62%);
    pointer-events: none;
}

.message-text[b-431oiy3kpy] {
    margin: 0;
    white-space: pre-wrap;
}

.message-markdown[b-431oiy3kpy] {
    white-space: normal;
}

.message-ai .message-text[b-431oiy3kpy] {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.9;
    color: #382F26;
}

.message-markdown[b-431oiy3kpy]  p {
    margin: 0 0 0.82em;
}

.message-markdown[b-431oiy3kpy]  p:last-child {
    margin-bottom: 0;
}

.message-markdown[b-431oiy3kpy]  img {
    display: block;
    width: min(100%, 350px);
    max-width: min(350px, 78vw);
    height: auto;
    margin: 0.95rem 0 0.2rem;
    padding: 0.38rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(246, 238, 227, 0.88));
    box-shadow: 0 14px 26px rgba(70, 49, 31, 0.1), 0 1px 0 rgba(255, 255, 255, 0.62) inset;
    transform: rotate(-0.65deg);
}

.message-user .message-text[b-431oiy3kpy] {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.82;
    color: #584538;
}

.message-candle-card[b-431oiy3kpy] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: center;
    padding: 0.7rem 0.9rem;
    border: none;
    border-radius: 20px 20px 20px 10px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.8), rgba(246, 238, 227, 0.68));
    box-shadow:
        0 10px 22px rgba(108, 78, 48, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.message-candle-icon[b-431oiy3kpy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(250, 223, 183, 0.46) 0%, rgba(255, 247, 236, 0.62) 48%, rgba(255, 247, 236, 0) 100%);
    color: #BC8555;
    filter: drop-shadow(0 0 8px rgba(229, 177, 107, 0.16));
}

.message-candle-icon .foyer-action-icon[b-431oiy3kpy] {
    width: 1.16rem;
    height: 1.16rem;
}

.message-candle-text[b-431oiy3kpy] {
    font-size: 0.96rem;
}

.message-image-frame[b-431oiy3kpy] {
    position: relative;
    width: fit-content;
    max-width: min(372px, 78vw);
    margin: 0.18rem 0 0;
    padding: 0.58rem 0.58rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(246, 238, 227, 0.9));
    border: none;
    box-shadow:
        0 16px 28px rgba(90, 62, 40, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: rotate(-0.85deg);
}

.message-user .message-image-frame[b-431oiy3kpy] {
    margin-left: auto;
    transform: rotate(0.9deg);
}

.message-image-frame[b-431oiy3kpy]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.52rem;
    width: 38%;
    height: 0.18rem;
    border-radius: 999px;
    background: rgba(149, 118, 88, 0.18);
    transform: translateX(-50%);
}

.message-image[b-431oiy3kpy] {
    display: block;
    width: min(100%, 360px);
    max-width: min(360px, 78vw);
    height: auto;
    border-radius: 11px;
    box-shadow: 0 10px 22px rgba(70, 49, 31, 0.1);
}

.message-time[b-431oiy3kpy] {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 0;
    text-transform: none;
    color: #9B846B;
}

.message-ai .message-time[b-431oiy3kpy] {
    align-self: flex-start;
}

.message-user .message-time[b-431oiy3kpy] {
    align-self: flex-end;
    padding-right: 0.12rem;
}

@keyframes messageFadeIn-b-431oiy3kpy {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageAvatarPulse-b-431oiy3kpy {
    0% {
        box-shadow: 0 0 0 0 rgba(218, 182, 148, 0.48);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(218, 182, 148, 0);
    }
}

@keyframes messageTooltipFade-b-431oiy3kpy {
    from {
        opacity: 0;
        transform: translate3d(0, -50%, 0) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1);
    }
}

:global(body.night-mode) .message-avatar[b-431oiy3kpy] {
    background: rgba(49, 40, 34, 0.88);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .message-avatar-button.saved[b-431oiy3kpy] {
    box-shadow: 0 0 0 3px rgba(162, 123, 92, 0.55);
}

:global(body.night-mode) .message-avatar-button.unsaved:hover:not(:disabled)[b-431oiy3kpy] {
    box-shadow: 0 0 0 4px rgba(110, 84, 62, 0.4);
}

:global(body.night-mode) .message-avatar-badge[b-431oiy3kpy] {
    background: rgba(60, 47, 40, 0.96);
    color: #F0C692;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

:global(body.night-mode) .message-vault-tooltip[b-431oiy3kpy] {
    background: rgba(55, 44, 37, 0.96);
    border-color: rgba(154, 122, 93, 0.42);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
    color: #E8D9C8;
}

:global(body.night-mode) .message-ai .message-text[b-431oiy3kpy] {
    color: #F0E4D6;
}

:global(body.night-mode) .message-user .message-body[b-431oiy3kpy] {
    background: linear-gradient(180deg, rgba(70, 56, 46, 0.74), rgba(58, 46, 39, 0.66));
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:global(body.night-mode) .message-user .message-text[b-431oiy3kpy] {
    color: #E2D3C2;
}

:global(body.night-mode) .message-candle-card[b-431oiy3kpy] {
    background: linear-gradient(180deg, rgba(56, 45, 38, 0.84), rgba(45, 36, 31, 0.78));
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:global(body.night-mode) .message-candle-icon[b-431oiy3kpy] {
    background: radial-gradient(circle, rgba(198, 143, 72, 0.44) 0%, rgba(73, 58, 44, 0.78) 48%, rgba(73, 58, 44, 0) 100%);
    color: #E0B882;
}

:global(body.night-mode) .message-image-frame[b-431oiy3kpy] {
    background: linear-gradient(180deg, rgba(58, 47, 39, 0.98), rgba(46, 37, 32, 0.94));
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:global(body.night-mode) .message-image-frame[b-431oiy3kpy]::after {
    background: rgba(210, 179, 145, 0.18);
}

:global(body.night-mode) .message-image[b-431oiy3kpy] {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

:global(body.night-mode) .message-time[b-431oiy3kpy] {
    color: #B7A187;
}

:global(body.night-mode) .message-markdown[b-431oiy3kpy]  img {
    background: linear-gradient(180deg, rgba(58, 47, 39, 0.95), rgba(46, 37, 32, 0.9));
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.26);
}

@media (max-width: 768px) {
    .message-row[b-431oiy3kpy] {
        max-width: 100%;
        gap: 0.7rem;
    }

    .message-user .message-row[b-431oiy3kpy] {
        max-width: min(100%, 92%);
    }

    .message-avatar[b-431oiy3kpy] {
        width: 2.2rem;
        height: 2.65rem;
    }

    .message-avatar-button[b-431oiy3kpy] {
        width: 2.2rem;
        height: 2.65rem;
    }

    .message-avatar-badge[b-431oiy3kpy] {
        width: 1.05rem;
        height: 1.05rem;
        font-size: 0.62rem;
    }

    .message-ai .message-text[b-431oiy3kpy],
    .message-user .message-text[b-431oiy3kpy] {
        font-size: 1rem;
    }

    .message-image[b-431oiy3kpy] {
        max-width: min(100%, 70vw);
    }

    .message-markdown[b-431oiy3kpy]  img {
        max-width: min(100%, 70vw);
    }
}

@media (max-width: 480px) {
    .message-row[b-431oiy3kpy] {
        gap: 0.55rem;
    }

    .message-vault-tooltip[b-431oiy3kpy] {
        left: 0;
        top: calc(100% + 0.55rem);
        transform: none;
        white-space: normal;
        min-width: 10rem;
    }

    .message-user .message-body[b-431oiy3kpy] {
        padding: 0.9rem 1rem 0.82rem;
    }

    .message-ai .message-body[b-431oiy3kpy] {
        padding-right: 0.25rem;
    }
}
/* /Components/ConversationRoom/ConversationMessageList.razor.rz.scp.css */
/* ============================================================
   ConversationMessageList.razor.css — editorial message canvas.
   ============================================================ */

.message-list-container[b-yz6qt146yx] {
    position: relative;
    width: 100%;
    max-width: 780px;
    flex: 1;
    display: flex;
    flex-direction: column;
}



.message-list-scroll[b-yz6qt146yx] {
    position: relative;
    flex: 1;
    overflow: visible;
    padding: 1.35rem 0.2rem 5.35rem;
    display: flex;
    flex-direction: column;
}

.message-list-empty[b-yz6qt146yx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1rem;
    padding: 4.2rem 1rem;
}

.empty-candle[b-yz6qt146yx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 224, 185, 0.68) 0%, rgba(255, 248, 239, 0.9) 46%, rgba(255, 248, 239, 0.44) 70%, rgba(255, 248, 239, 0) 100%);
    font-size: 1.4rem;
    color: #B47D4F;
    box-shadow: 0 16px 28px rgba(137, 98, 60, 0.12);
}

.empty-text[b-yz6qt146yx] {
    max-width: 28rem;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.8;
    text-align: center;
    color: #9A826A;
}

.typing-indicator[b-yz6qt146yx] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    align-self: flex-start;
    margin-top: 0.1rem;
    padding: 0.55rem 0.9rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.82), rgba(247, 239, 229, 0.72));
    border: 1px solid rgba(188, 152, 109, 0.14);
    box-shadow: 0 12px 22px rgba(103, 74, 46, 0.08);
}

.typing-avatar[b-yz6qt146yx] {
    width: 2rem;
    height: 2.35rem;
    border-radius: 14px;
    object-fit: cover;
    opacity: 0.68;
    box-shadow: 0 8px 14px rgba(113, 82, 51, 0.1);
}

.typing-copy[b-yz6qt146yx] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.94rem;
    font-style: italic;
    color: #8A7158;
    letter-spacing: 0.02em;
}



:global(body.night-mode) .empty-candle[b-yz6qt146yx] {
    background: radial-gradient(circle, rgba(162, 112, 55, 0.38) 0%, rgba(65, 52, 42, 0.84) 46%, rgba(65, 52, 42, 0.28) 72%, rgba(65, 52, 42, 0) 100%);
    color: #E0B882;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24);
}

:global(body.night-mode) .empty-text[b-yz6qt146yx],
:global(body.night-mode) .typing-copy[b-yz6qt146yx] {
    color: #C8B29A;
}

:global(body.night-mode) .typing-indicator[b-yz6qt146yx] {
    background: linear-gradient(180deg, rgba(49, 40, 34, 0.84), rgba(41, 33, 29, 0.88));
    border-color: rgba(191, 148, 91, 0.16);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
}

@media (max-width: 768px) {
    .message-list-container[b-yz6qt146yx] {
        max-width: 100%;
    }

    .message-list-scroll[b-yz6qt146yx] {
        padding: 1rem 0.1rem 4.85rem;
    }
}

@media (max-width: 480px) {
    .message-list-empty[b-yz6qt146yx] {
        padding: 3rem 0.6rem;
    }
}
/* /Components/ConversationRoom/ConversationSidebar.razor.rz.scp.css */
/* ============================================================
   ConversationSidebar — integrated archive wall for the room.
   ============================================================ */

.conversation-sidebar[b-e4ldexe61d] {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0 0 1rem;
    overflow: hidden;
    z-index: 40;
    transition: transform 0.34s ease;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 245, 229, 0.96) 0%, rgba(255, 245, 229, 0.58) 28%, rgba(253, 248, 240, 0) 56%),
        linear-gradient(180deg, #FFF9F1 0%, #FDF8F0 20%, #F8F0E3 62%, #F5EBDC 100%);
    border-right: 1px solid rgba(188, 152, 109, 0.14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6), 20px 0 40px rgba(94, 69, 43, 0.06);
}

.conversation-sidebar[b-e4ldexe61d]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 18%),
        radial-gradient(circle at 50% 8%, rgba(229, 193, 148, 0.18) 0%, rgba(229, 193, 148, 0) 24%);
}

.conversation-sidebar.hidden[b-e4ldexe61d] {
    transform: translateX(calc(-100% - 28px));
}

.sidebar-top-content[b-e4ldexe61d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    padding: 1.5rem 1.5rem 0.35rem;
    margin-bottom: 1rem;
}

.app-logo-link[b-e4ldexe61d] {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

.sidebar-logo[b-e4ldexe61d] {
    display: block;
}

.sidebar-logo-img[b-e4ldexe61d] {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

.sidebar-portrait-section[b-e4ldexe61d] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.15rem 1.45rem 1rem;
}

.sidebar-avatar-wrap[b-e4ldexe61d] {
    position: relative;
    width: 132px;
    height: 132px;
    margin-bottom: 0.98rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 251, 245, 0.98) 0%, rgba(236, 213, 185, 0.94) 100%);
    box-shadow: 0 0 30px rgba(196, 154, 108, 0.18), 0 14px 28px rgba(113, 82, 51, 0.14);
}

.sidebar-avatar-wrap[b-e4ldexe61d]::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(233, 204, 169, 0.3) 0%, rgba(233, 204, 169, 0.16) 38%, rgba(233, 204, 169, 0.04) 58%, rgba(233, 204, 169, 0) 76%),
        radial-gradient(circle at 50% 35%, rgba(255, 245, 231, 0.55) 0%, rgba(255, 245, 231, 0.14) 42%, transparent 72%);
    z-index: -2;
    filter: blur(12px);
}

.sidebar-avatar-wrap[b-e4ldexe61d]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(191, 150, 101, 0.14);
    pointer-events: none;
}

.sidebar-avatar[b-e4ldexe61d] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 28%;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(123, 93, 64, 0.1);
}

.sidebar-name[b-e4ldexe61d] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.15;
    color: #372D23;
    text-align: center;
}

.sidebar-years[b-e4ldexe61d] {
    margin: 0.38rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #A18870;
}

.sidebar-mode-panel[b-e4ldexe61d] {
    position: relative;
    margin: 0.25rem 1rem 0.95rem;
    padding: 0.45rem;
    border: 1px solid rgba(188, 152, 109, 0.12);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.72) 0%, rgba(248, 239, 227, 0.82) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 16px 28px rgba(111, 80, 49, 0.08);
    overflow: hidden;
}

.sidebar-mode-panel[b-e4ldexe61d]::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(220, 196, 168, 0.18), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.sidebar-default-panel[b-e4ldexe61d] {
    margin-top: 0.18rem;
}

.sidebar-history-panel[b-e4ldexe61d] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-e4ldexe61d] .sidebar-bottom.pinned {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: auto;
    z-index: auto;
}

@media (min-width: 993px) {
    [b-e4ldexe61d] .sidebar-bottom.pinned {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-top: auto;
        z-index: auto !important;
    }
}

.sidebar-nav[b-e4ldexe61d] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.45rem 0.9rem;
}

.sidebar-nav-item[b-e4ldexe61d] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(255, 251, 246, 0.54);
    color: #564536;
    text-decoration: none;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.91rem;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.sidebar-nav-item[b-e4ldexe61d]::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #D1A470, #A96E46);
    transform: translateY(-50%);
    transition: height 0.16s ease, opacity 0.16s ease;
    opacity: 0;
}

.sidebar-nav-item:hover[b-e4ldexe61d] {
    transform: translateY(-1px);
    background: rgba(255, 251, 246, 0.86);
    border-color: rgba(188, 152, 109, 0.16);
    color: #3C3026;
    box-shadow: 0 12px 20px rgba(114, 81, 49, 0.08);
}

.sidebar-nav-item:hover[b-e4ldexe61d]::before,
.sidebar-nav-item.active[b-e4ldexe61d]::before {
    height: 58%;
    opacity: 1;
}

.sidebar-nav-item.active[b-e4ldexe61d] {
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(247, 238, 226, 0.98));
    border-color: rgba(201, 149, 103, 0.22);
    color: #33281F;
    box-shadow: 0 14px 24px rgba(154, 103, 60, 0.08);
    cursor: default;
}

.sidebar-nav-icon[b-e4ldexe61d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    flex-shrink: 0;
    font-size: 0.98rem;
    color: currentColor;
    opacity: 0.78;
}

/* Reusable line-art foyer icons (matches Memorial page patterns) */
.foyer-action-icon[b-e4ldexe61d] {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-block;
    stroke: currentColor;
    stroke-width: 1.45;
    fill: none;
    vector-effect: non-scaling-stroke;
}

.sidebar-history-section[b-e4ldexe61d] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0.3rem 0.35rem;
}

.sidebar-history-section[b-e4ldexe61d]::before {
    content: "";
    display: block;
    margin: 0.12rem 0 0.95rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(188, 152, 109, 0.3), transparent);
}

.sidebar-history-header[b-e4ldexe61d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.2rem 0.82rem;
}

.sidebar-history-title[b-e4ldexe61d] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #3A2E23;
}

.sidebar-new-conversation-btn[b-e4ldexe61d] {
    border: 1px solid rgba(188, 152, 109, 0.18);
    border-radius: 999px;
    background: rgba(255, 251, 246, 0.82);
    padding: 0.42rem 0.78rem;
    font-family: var(--font-serif);
    font-size: 0.78rem;
    font-style: italic;
    color: #765D47;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.sidebar-new-conversation-btn:hover[b-e4ldexe61d] {
    transform: translateY(-1px);
    background: rgba(255, 251, 246, 0.96);
    color: #4B3A2C;
    box-shadow: 0 12px 18px rgba(114, 81, 49, 0.08);
}

.sidebar-history-list[b-e4ldexe61d] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-right: 0.15rem;
}

@media (min-width: 993px) {
    .sidebar-history-list[b-e4ldexe61d] {
        padding-bottom: 0.85rem;
    }
}

.sidebar-history-list[b-e4ldexe61d]::-webkit-scrollbar {
    width: 5px;
}

.sidebar-history-list[b-e4ldexe61d]::-webkit-scrollbar-thumb {
    background: rgba(188, 152, 109, 0.18);
    border-radius: 999px;
}

.sidebar-history-status[b-e4ldexe61d],
.sidebar-history-empty[b-e4ldexe61d] {
    margin: 0;
    padding: 0.1rem 0.35rem 0;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.65;
    color: #9A826A;
}

.sidebar-history-load-more[b-e4ldexe61d] {
    margin-top: 0.85rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(188, 152, 109, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.9), rgba(247, 238, 226, 0.96));
    color: #6B523D;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.sidebar-history-load-more:hover:not(:disabled)[b-e4ldexe61d] {
    transform: translateY(-1px);
    border-color: rgba(188, 152, 109, 0.32);
    box-shadow: 0 12px 20px rgba(114, 81, 49, 0.08);
    color: #4B3A2C;
}

.sidebar-history-load-more:disabled[b-e4ldexe61d] {
    opacity: 0.62;
    cursor: wait;
}

/* ── Divider between nav and history link (Mode 1) ── */
.sidebar-divider[b-e4ldexe61d] {
    height: 1px;
    margin: 0.12rem 0.9rem 0.5rem;
    background: linear-gradient(90deg, transparent, rgba(188, 152, 109, 0.3), transparent);
}

.sidebar-history-teaser[b-e4ldexe61d] {
    padding: 0 0.28rem 0.18rem;
}

/* ── "Tidigare samtal" link (Mode 1) ── */
.sidebar-history-link[b-e4ldexe61d] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.82rem 0.92rem;
    border: 1px solid rgba(188, 152, 109, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.72), rgba(248, 240, 229, 0.92));
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #8B7355;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.sidebar-history-link:hover[b-e4ldexe61d] {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(249, 241, 230, 0.98));
    border-color: rgba(188, 152, 109, 0.24);
    box-shadow: 0 12px 18px rgba(114, 81, 49, 0.08);
    color: #5A4534;
}

.sidebar-history-link-icon[b-e4ldexe61d] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(188, 152, 109, 0.16);
    background: rgba(255, 248, 239, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.sidebar-history-link-icon-glyph[b-e4ldexe61d] {
    font-size: 0.86rem;
    line-height: 1;
}

.sidebar-history-link-copy[b-e4ldexe61d] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sidebar-history-link-label[b-e4ldexe61d] {
    font-size: 0.92rem;
    font-style: italic;
}

.sidebar-history-link-chevron[b-e4ldexe61d] {
    margin-left: 0.45rem;
    font-size: 0.86rem;
    line-height: 1;
    opacity: 0.45;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.sidebar-history-link:hover .sidebar-history-link-chevron[b-e4ldexe61d] {
    opacity: 0.7;
    transform: translateX(2px);
}

.sidebar-history-count[b-e4ldexe61d] {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(207, 167, 117, 0.16), rgba(188, 152, 109, 0.1));
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-style: normal;
    color: #8B7355;
}

/* ── History mode header (Mode 2) ── */
.sidebar-history-mode-header[b-e4ldexe61d] {
    padding: 0.18rem 0.25rem 0.42rem;
}

.sidebar-back-btn[b-e4ldexe61d] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: none;
    background: transparent;
    padding: 0.3rem 0.1rem;
    border-radius: 12px;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-style: italic;
    color: #8B7355;
    cursor: pointer;
    transition: color 0.16s ease;
}

.sidebar-back-btn-icon[b-e4ldexe61d] {
    width: 1.68rem;
    height: 1.68rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(188, 152, 109, 0.14);
    background: rgba(255, 249, 242, 0.72);
    font-size: 0.84rem;
    font-style: normal;
    line-height: 1;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.sidebar-back-btn:hover[b-e4ldexe61d] {
    color: #5A4534;
}

.sidebar-back-btn:hover .sidebar-back-btn-icon[b-e4ldexe61d] {
    transform: translateX(-1px);
    background: rgba(255, 251, 246, 0.92);
    border-color: rgba(188, 152, 109, 0.22);
}

/* ── New conversation button in history mode (Mode 2) ── */
.sidebar-new-conversation-primary[b-e4ldexe61d] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.68rem;
    width: 100%;
    margin: 0 0 0.55rem;
    padding: 0.92rem 1rem;
    border: 1px solid rgba(188, 152, 109, 0.2);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(247, 237, 224, 0.98));
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-style: normal;
    color: #564536;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(114, 81, 49, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    overflow: hidden;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.sidebar-new-conversation-primary[b-e4ldexe61d]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(214, 177, 134, 0.08));
    pointer-events: none;
}

.sidebar-new-conversation-primary > span[b-e4ldexe61d] {
    position: relative;
    z-index: 1;
}

.sidebar-new-conversation-icon[b-e4ldexe61d] {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(188, 152, 109, 0.2);
    background: linear-gradient(180deg, rgba(255, 248, 239, 0.98), rgba(232, 212, 189, 0.9));
    box-shadow: 0 8px 16px rgba(166, 123, 80, 0.12);
    color: #8C5D3B;
    font-size: 1rem;
    line-height: 1;
}

.sidebar-new-conversation-primary:hover[b-e4ldexe61d] {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.99), rgba(250, 242, 232, 0.99));
    border-color: rgba(188, 152, 109, 0.28);
    box-shadow: 0 18px 28px rgba(114, 81, 49, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    color: #4F3D2E;
}

.sidebar-new-conversation-primary:hover .sidebar-new-conversation-icon[b-e4ldexe61d] {
    background: linear-gradient(180deg, rgba(255, 249, 242, 1), rgba(235, 216, 193, 0.96));
}

:global(body.night-mode) .conversation-sidebar[b-e4ldexe61d] {
    background:
        radial-gradient(circle at 50% 0%, rgba(111, 78, 45, 0.22) 0%, rgba(111, 78, 45, 0.08) 28%, rgba(34, 28, 24, 0) 56%),
        linear-gradient(180deg, #2A231F 0%, #241E1A 22%, #201A17 68%, #1A1512 100%);
    border-right-color: rgba(191, 148, 91, 0.14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03), 22px 0 44px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .conversation-sidebar[b-e4ldexe61d]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%),
        radial-gradient(circle at 50% 8%, rgba(171, 123, 68, 0.14) 0%, rgba(171, 123, 68, 0) 22%);
}

:global(body.night-mode) .sidebar-avatar-wrap[b-e4ldexe61d] {
    background: linear-gradient(145deg, rgba(62, 50, 42, 0.96) 0%, rgba(43, 35, 30, 0.96) 100%);
    box-shadow: 0 0 32px rgba(170, 120, 68, 0.16), 0 18px 34px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .sidebar-avatar-wrap[b-e4ldexe61d]::before {
    background:
        radial-gradient(circle, rgba(173, 124, 70, 0.28) 0%, rgba(173, 124, 70, 0.14) 38%, rgba(173, 124, 70, 0.03) 58%, rgba(173, 124, 70, 0) 76%),
        radial-gradient(circle at 50% 35%, rgba(111, 78, 45, 0.34) 0%, rgba(111, 78, 45, 0.1) 42%, transparent 72%);
}

:global(body.night-mode) .sidebar-avatar-wrap[b-e4ldexe61d]::after {
    border-color: rgba(255, 244, 228, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 244, 228, 0.08), inset 0 0 0 1px rgba(191, 148, 91, 0.18);
}

:global(body.night-mode) .sidebar-name[b-e4ldexe61d] {
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-years[b-e4ldexe61d],
:global(body.night-mode) .sidebar-history-status[b-e4ldexe61d],
:global(body.night-mode) .sidebar-history-empty[b-e4ldexe61d] {
    color: #BFA58A;
}

:global(body.night-mode) .sidebar-history-load-more[b-e4ldexe61d] {
    background: linear-gradient(180deg, rgba(53, 43, 34, 0.92), rgba(38, 31, 24, 0.96));
    border-color: rgba(226, 188, 139, 0.16);
    color: rgba(238, 223, 205, 0.92);
}

:global(body.night-mode) .sidebar-history-load-more:hover:not(:disabled)[b-e4ldexe61d] {
    border-color: rgba(226, 188, 139, 0.28);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .sidebar-mode-panel[b-e4ldexe61d] {
    border-color: rgba(191, 148, 91, 0.14);
    background: linear-gradient(180deg, rgba(50, 40, 34, 0.76) 0%, rgba(40, 32, 28, 0.88) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 244, 228, 0.04), 0 18px 30px rgba(0, 0, 0, 0.24);
}

:global(body.night-mode) .sidebar-mode-panel[b-e4ldexe61d]::before {
    background: linear-gradient(90deg, rgba(255, 244, 228, 0.06), rgba(191, 148, 91, 0.16), rgba(255, 244, 228, 0));
}

:global(body.night-mode) .sidebar-nav-item[b-e4ldexe61d] {
    background: rgba(50, 41, 35, 0.6);
    color: #DDCCB8;
}

:global(body.night-mode) .sidebar-nav-item:hover[b-e4ldexe61d],
:global(body.night-mode) .sidebar-nav-item.active[b-e4ldexe61d] {
    background: rgba(60, 49, 41, 0.88);
    border-color: rgba(191, 148, 91, 0.16);
    color: #F4E5D3;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}

:global(body.night-mode) .sidebar-history-section[b-e4ldexe61d]::before {
    background: linear-gradient(90deg, transparent, rgba(191, 148, 91, 0.28), transparent);
}

:global(body.night-mode) .sidebar-history-title[b-e4ldexe61d] {
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-new-conversation-btn[b-e4ldexe61d] {
    border-color: rgba(191, 148, 91, 0.18);
    background: rgba(52, 43, 36, 0.76);
    color: #DCC8B2;
}

:global(body.night-mode) .sidebar-new-conversation-btn:hover[b-e4ldexe61d] {
    background: rgba(63, 51, 43, 0.92);
    color: #F4E5D3;
}

:global(body.night-mode) .sidebar-history-list[b-e4ldexe61d]::-webkit-scrollbar-thumb {
    background: rgba(191, 148, 91, 0.18);
}

:global(body.night-mode) .sidebar-divider[b-e4ldexe61d] {
    background: linear-gradient(90deg, transparent, rgba(191, 148, 91, 0.28), transparent);
}

:global(body.night-mode) .sidebar-history-link[b-e4ldexe61d] {
    border-color: rgba(191, 148, 91, 0.16);
    background: linear-gradient(180deg, rgba(52, 43, 36, 0.42), rgba(47, 38, 33, 0.64));
    color: #BFA58A;
}

:global(body.night-mode) .sidebar-history-link:hover[b-e4ldexe61d] {
    background: linear-gradient(180deg, rgba(57, 46, 39, 0.76), rgba(50, 40, 34, 0.86));
    border-color: rgba(191, 148, 91, 0.24);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.18);
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-history-link-icon[b-e4ldexe61d],
:global(body.night-mode) .sidebar-back-btn-icon[b-e4ldexe61d],
:global(body.night-mode) .sidebar-new-conversation-icon[b-e4ldexe61d] {
    border-color: rgba(191, 148, 91, 0.18);
    background: rgba(58, 46, 39, 0.92);
    color: #E2B680;
}

:global(body.night-mode) .sidebar-history-link-chevron[b-e4ldexe61d] {
    color: #D8C2A7;
}

:global(body.night-mode) .sidebar-history-count[b-e4ldexe61d] {
    background: linear-gradient(180deg, rgba(191, 148, 91, 0.2), rgba(191, 148, 91, 0.1));
    color: #BFA58A;
}

:global(body.night-mode) .sidebar-back-btn[b-e4ldexe61d] {
    color: #BFA58A;
}

:global(body.night-mode) .sidebar-back-btn:hover[b-e4ldexe61d] {
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-back-btn:hover .sidebar-back-btn-icon[b-e4ldexe61d] {
    background: rgba(63, 51, 43, 0.98);
    border-color: rgba(191, 148, 91, 0.26);
}

:global(body.night-mode) .sidebar-new-conversation-primary[b-e4ldexe61d] {
    border-color: rgba(191, 148, 91, 0.18);
    background: linear-gradient(180deg, rgba(58, 46, 39, 0.96), rgba(48, 39, 34, 0.98));
    color: #DCC8B2;
}

:global(body.night-mode) .sidebar-new-conversation-primary:hover[b-e4ldexe61d] {
    background: linear-gradient(180deg, rgba(66, 53, 45, 0.98), rgba(53, 43, 37, 1));
    color: #F4E5D3;
}

:global(body.night-mode) .sidebar-new-conversation-primary:hover .sidebar-new-conversation-icon[b-e4ldexe61d] {
    background: rgba(72, 58, 49, 0.98);
}

@media (max-width: 768px) {
    .conversation-sidebar[b-e4ldexe61d] {
        transform: translateX(calc(-100% - 20px));
    }

    .sidebar-mode-panel[b-e4ldexe61d] {
        margin: 0.18rem 0.9rem 0.85rem;
        padding: 0.38rem;
        border-radius: 24px;
    }

    .sidebar-avatar-wrap[b-e4ldexe61d] {
        width: 112px;
        height: 112px;
        margin-bottom: 0.9rem;
    }
}
/* /Components/ConversationRoom/WhisperWheelModal.razor.rz.scp.css */
.whisper-wheel-backdrop[b-hunv929yod] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(34, 23, 15, 0.56);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.whisper-wheel-modal[b-hunv929yod] {
    position: relative;
    width: min(680px, 100%);
    padding: 2.2rem 2rem 1.9rem;
    overflow: hidden;
    border: 1px solid rgba(186, 156, 123, 0.22);
    border-radius: 32px;
    background:
        radial-gradient(circle at top, rgba(255, 249, 240, 0.98), rgba(249, 239, 223, 0.97)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 26%);
    box-shadow: 0 40px 68px rgba(47, 32, 20, 0.24);
    z-index: 10000;
}

.whisper-wheel-modal[b-hunv929yod]::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(186, 156, 123, 0.16);
    border-radius: 24px;
    pointer-events: none;
}

.whisper-wheel-modal[b-hunv929yod]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    width: 16rem;
    height: 5rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 195, 142, 0.28) 0%, rgba(236, 195, 142, 0) 70%);
    filter: blur(12px);
    pointer-events: none;
}

.whisper-wheel-close[b-hunv929yod] {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(186, 156, 123, 0.16);
    border-radius: 50%;
    background: rgba(255, 251, 246, 0.88);
    color: #7B624A;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.whisper-wheel-close:hover[b-hunv929yod] {
    transform: translateY(-1px);
    background: rgba(255, 251, 246, 0.98);
    box-shadow: 0 12px 20px rgba(92, 67, 45, 0.12);
}

.whisper-wheel-copy[b-hunv929yod] {
    position: relative;
    text-align: center;
}

.whisper-wheel-title[b-hunv929yod] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 4vw, 2.35rem);
    font-weight: 400;
    color: #43372C;
}

.whisper-wheel-subtitle[b-hunv929yod] {
    margin: 0.65rem auto 0;
    max-width: 31rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.8;
    color: #7D6044;
}

.whisper-wheel-options[b-hunv929yod] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.95rem;
}

.whisper-option[b-hunv929yod] {
    position: relative;
    min-height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.35rem 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(186, 156, 123, 0.18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.92), rgba(247, 236, 220, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 16px 26px rgba(111, 80, 49, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.whisper-option[b-hunv929yod]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1rem;
    width: 3rem;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(186, 156, 123, 0.54), transparent);
}

.whisper-option:hover[b-hunv929yod] {
    transform: translateY(-2px);
    border-color: rgba(186, 141, 92, 0.32);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 239, 223, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 22px 34px rgba(111, 80, 49, 0.12);
}

.whisper-option-label[b-hunv929yod] {
    position: relative;
    z-index: 1;
    display: block;
    font-family: var(--font-serif);
    font-size: 1.12rem;
    line-height: 1.6;
    text-align: center;
    color: #4A3D32;
    text-wrap: balance;
}

.whisper-comfort[b-hunv929yod] {
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.94), rgba(248, 237, 224, 0.98));
}

.whisper-listen[b-hunv929yod] {
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.95), rgba(245, 238, 229, 0.98));
}

.whisper-honest[b-hunv929yod] {
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.94), rgba(247, 236, 221, 0.98));
}

:global(body.night-mode) .whisper-wheel-backdrop[b-hunv929yod] {
    background: rgba(7, 5, 4, 0.66);
}

:global(body.night-mode) .whisper-wheel-modal[b-hunv929yod] {
    border-color: rgba(191, 148, 91, 0.18);
    background:
        radial-gradient(circle at top, rgba(58, 46, 39, 0.98), rgba(42, 34, 29, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 26%);
    box-shadow: 0 42px 72px rgba(0, 0, 0, 0.42);
}

:global(body.night-mode) .whisper-wheel-modal[b-hunv929yod]::before {
    border-color: rgba(191, 148, 91, 0.14);
}

:global(body.night-mode) .whisper-wheel-modal[b-hunv929yod]::after {
    background: radial-gradient(circle, rgba(168, 119, 59, 0.22) 0%, rgba(168, 119, 59, 0) 70%);
}

:global(body.night-mode) .whisper-wheel-close[b-hunv929yod] {
    border-color: rgba(191, 148, 91, 0.16);
    background: rgba(63, 51, 43, 0.84);
    color: #E0D0BC;
}

:global(body.night-mode) .whisper-wheel-close:hover[b-hunv929yod] {
    background: rgba(72, 58, 49, 0.92);
}

:global(body.night-mode) .whisper-wheel-title[b-hunv929yod] {
    color: #F1E5D6;
}

:global(body.night-mode) .whisper-wheel-subtitle[b-hunv929yod] {
    color: #CFB89E;
}

:global(body.night-mode) .whisper-option[b-hunv929yod] {
    border-color: rgba(191, 148, 91, 0.14);
    background: linear-gradient(180deg, rgba(58, 47, 39, 0.92), rgba(46, 37, 32, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 30px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .whisper-option[b-hunv929yod]::before {
    background: linear-gradient(90deg, transparent, rgba(191, 148, 91, 0.42), transparent);
}

:global(body.night-mode) .whisper-option:hover[b-hunv929yod] {
    border-color: rgba(191, 148, 91, 0.24);
    background: linear-gradient(180deg, rgba(68, 54, 45, 0.96), rgba(52, 42, 36, 0.98));
}

:global(body.night-mode) .whisper-option-label[b-hunv929yod] {
    color: #F0E3D4;
}

@media (max-width: 640px) {
    .whisper-wheel-modal[b-hunv929yod] {
        padding: 1.9rem 1rem 1.25rem;
        border-radius: 28px;
    }

    .whisper-wheel-options[b-hunv929yod] {
        grid-template-columns: 1fr;
        gap: 0.82rem;
    }

    .whisper-option[b-hunv929yod] {
        min-height: 120px;
    }
}
/* /Components/CreatePetModalStep1.razor.rz.scp.css */
/* Step 1 Pet Modal styles */
.modal-overlay[b-012hgcqdkp]{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background-color: rgba(40,25,15,0.55);opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;z-index:5000}
.modal-overlay.visible[b-012hgcqdkp]{opacity:1;visibility:visible}
.modal-content.create-pet-modal.step1[b-012hgcqdkp] {
    background: #fff8f6;
    border-radius: 20px;
    width: 680px;
    max-width: 95%;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    /* max-height: calc(100vh - 40px); */
    overflow: hidden;
}

.pet-content[b-012hgcqdkp] { flex: 1; overflow-y: auto; padding: 0 4px 12px; -webkit-overflow-scrolling: touch; }

.pet-modal-title[b-012hgcqdkp] { font-size: 26px; color: #4B2E2E; margin: 4px 0 16px; font-weight: 800; padding-right: 32px; }

.modal-content.create-pet-modal.step1 .modal-close-icon-button[b-012hgcqdkp] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 400;
    color: #7B6A66;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

.modal-content.create-pet-modal.step1 .modal-close-icon-button:hover[b-012hgcqdkp] {
    color: #4B2E2E;
}

.pet-form-grid[b-012hgcqdkp] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 14px;
}


.avatar-col[b-012hgcqdkp] {
    text-align: center;
}
.avatar-circle[b-012hgcqdkp] {
    width: 128px; height: 128px; border-radius: 50%;
    border: 2px dashed #e8d4cc; background: #fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: box-shadow .2s ease, transform .1s ease;
}
.avatar-circle:hover[b-012hgcqdkp] { box-shadow: 0 8px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.avatar-emoji[b-012hgcqdkp] { font-size: 56px; }
.avatar-hint[b-012hgcqdkp] { color:#7B6A66; font-size: 12px; margin-top: 8px; text-align:center; }

/* Match BasicDetailsStep avatar picker visuals */
.avatar-preview-img[b-012hgcqdkp] { width: 128px; height: 128px; border-radius: 50%; border: 2px solid #efd7bb; background:#fdf4ed; box-shadow: 0 1px 4px rgba(247,186,173,0.07); cursor:pointer; }
.avatar-picker-overlay[b-012hgcqdkp] { position: fixed; z-index: 2000; inset: 0; background: rgba(80,60,44,0.24); display:flex; align-items:center; justify-content:center; }
.avatar-picker-modal[b-012hgcqdkp] { background:#fff9f4; padding: 2em 2.3em 1.5em; border-radius:22px; box-shadow:0 6px 44px rgba(120,80,55,0.11); min-width:320px; max-width:96vw; }
.avatar-picker-list[b-012hgcqdkp] { display:grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap:1.2em; justify-items:center; margin:1.4em 0 1.8em; }
.avatar-subtitle[b-012hgcqdkp] { font-size: .96rem; margin-top:.2em; margin-bottom:1em; }
.avatar-picker-img[b-012hgcqdkp] { width: 80px; height: 80px; border-radius:50%; border:2px solid #efd7bb; background:#fdf4ed; box-shadow:0 1px 4px rgba(247,186,173,0.07); cursor:pointer; transition: border .16s, box-shadow .16s; }
.avatar-picker-img.selected[b-012hgcqdkp], .avatar-picker-img:hover[b-012hgcqdkp] { border:2.4px solid #fbbbad; box-shadow:0 2px 8px #fbbbad33; }

.field-label[b-012hgcqdkp] { font-weight:700; color:#6b4a43; margin: 6px 0 6px; display:block; }
.text-input[b-012hgcqdkp], .select-input[b-012hgcqdkp], .text-area[b-012hgcqdkp] {
    width: 100%; border-radius: 12px; border: 1px solid #ecd6cf; padding: 12px 14px; font-size: 15px;
    background:#fff; color:#4B2E2E;
}
.text-area[b-012hgcqdkp] { resize: vertical; }

.actions-row[b-012hgcqdkp] { display:flex; gap:12px; align-items:center; margin-top: 12px; padding: 16px 20px; border-top: 1px solid #f0e1d0; background: #fff8f6; box-shadow: 0 -4px 10px rgba(0,0,0,.05); }
.btn-primary[b-012hgcqdkp] { background:#7B5A53; color:#fff; border:none; border-radius: 12px; padding: 12px 16px; font-weight:700; cursor:pointer; }
.btn-outline[b-012hgcqdkp] { background:transparent; color:#7B5A53; border:2px solid #e8d4cc; border-radius:12px; padding: 10px 16px; font-weight:700; cursor:pointer; }
.btn-link[b-012hgcqdkp] { background:transparent; border:none; color:#7B6A66; font-weight:600; cursor:pointer; padding:8px 6px; }

/* Removed mini picker in favor of full avatar picker */
.error-text[b-012hgcqdkp] { color:#b00020; margin-top: 8px; }

@media (max-width: 640px) {
    .modal-content.create-pet-modal.step1[b-012hgcqdkp] { width: 100%; height: 100vh; height: 100dvh; max-width: 100%; border-radius: 0; padding: 16px 0 0; }
    .pet-form-grid[b-012hgcqdkp] { grid-template-columns: 1fr; padding: 0 16px; }
    .avatar-col[b-012hgcqdkp] { display:flex; flex-direction:column; align-items:center; }
    .pet-modal-title[b-012hgcqdkp] { padding: 0 16px; font-size: 24px; }
    .pet-bottom[b-012hgcqdkp] {
        padding: 0 16px;
    }

    .actions-row[b-012hgcqdkp] { position: sticky; bottom: 0; padding: 14px 16px; box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
    .actions-row .btn-primary[b-012hgcqdkp], .actions-row .btn-outline[b-012hgcqdkp], .actions-row .btn-link[b-012hgcqdkp] { flex: 1; }
    .actions-row .btn-link[b-012hgcqdkp] { flex: 0 0 auto; }
}

/* =========================
   Pet Typeahead (searchable)
   ========================= */
.typeahead[b-012hgcqdkp] {
    position: relative;
}

    .typeahead .text-input[b-012hgcqdkp] {
        padding-right: 36px; /* space for caret icon */
    }

    /* subtle caret icon on the right */
    .typeahead .text-input[b-012hgcqdkp] {
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%237B6A66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 16px;
    }

/* Dropdown panel */
.ta-dropdown[b-012hgcqdkp] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1500; /* over modal content */
    max-height: 14rem;
    overflow: auto;
    background: #fff;
    border: 1px solid #eadfd8;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(80,60,44,0.12);
}

/* Items */
.ta-item[b-012hgcqdkp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .8rem;
    cursor: pointer;
    border-bottom: 1px solid #f4eee9;
}

    .ta-item:last-child[b-012hgcqdkp] {
        border-bottom: 0;
    }

    .ta-item:hover[b-012hgcqdkp],
    .ta-item.active[b-012hgcqdkp] {
        background: #fff5f0;
    }

.ta-label[b-012hgcqdkp] {
    font-size: .92rem;
    color: #5b463c;
}

.ta-species[b-012hgcqdkp] {
    font-size: .78rem;
    color: #a79083;
}

.ta-empty[b-012hgcqdkp] {
    color: #a79083;
}

.ta-divider[b-012hgcqdkp] {
    height: 1px;
    background: #f0e8e2;
    margin: .25rem 0;
}

/* Mobile fit */
@media (max-width: 640px) {
    .ta-dropdown[b-012hgcqdkp] {
        max-height: 50vh;
    }
}

/* Optional: prettier scrollbar for WebKit */
.ta-dropdown[b-012hgcqdkp]::-webkit-scrollbar {
    width: 10px;
}

.ta-dropdown[b-012hgcqdkp]::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 12px;
}

.ta-dropdown[b-012hgcqdkp]::-webkit-scrollbar-thumb {
    background: #eadfd8;
    border-radius: 12px;
}

    .ta-dropdown[b-012hgcqdkp]::-webkit-scrollbar-thumb:hover {
        background: #e0cfc7;
    }

/* /Components/CreatePetModalStep2.razor.rz.scp.css */
/* Step 2 styles aligned with DescribeLovedOneInitialStep */
.modal-overlay[b-qguzj9c0wf]{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(40,25,15,.55);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s linear .3s;z-index:2000}
.modal-overlay.visible[b-qguzj9c0wf]{opacity:1;visibility:visible;transition:opacity .3s ease}
.modal-content.describe-lovedone-modal-content[b-qguzj9c0wf]{padding:0;border-radius:20px;max-width:700px;text-align:center;box-shadow:0 10px 35px rgba(100,80,70,.15);display:flex;flex-direction:column;max-height:calc(100vh - 4rem);overflow:hidden;position:relative;z-index:1;background:#fff8f6}
.describe-modal-top-bar[b-qguzj9c0wf]{background:var(--card-content-bg);display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;border-bottom:1px solid var(--soft-border);width:100%;flex-shrink:0;position:relative;z-index:10}
.modal-logo-area-top .page-logo-simple-top[b-qguzj9c0wf]{font-family:'Lato',sans-serif;font-size:1rem;font-weight:500;color:var(--text);opacity:.85;text-decoration:none}
.describe-modal-bg-content[b-qguzj9c0wf]{background-image:url('/img/CreatePetTopBackground.960.webp');background-size:cover;background-position:center top;background-repeat:no-repeat;width:100%;padding-top:1rem;min-height:350px;border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.describe-main-content-modal-inner[b-qguzj9c0wf]{flex-grow:1;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding:1.5rem;background-color:transparent}
.describe-modal-title[b-qguzj9c0wf]{font-family: var(--font-serif);font-size:2rem;font-weight:700;color:var(--text);margin-bottom:.6rem;line-height:1.2}
.describe-modal-subtitle[b-qguzj9c0wf]{text-align:left;max-width:480px !important;font-size:.95rem;color:var(--text-light);line-height:1.5;max-width:90%;margin:0 auto 1.8rem auto;position:relative;z-index:1}
.form-group-describe[b-qguzj9c0wf]{width:100%;max-width:660px}
.textarea-lovedone-description-modal[b-qguzj9c0wf]{width:100%;min-height:160px;border:1px solid #ecd6cf;border-radius:12px;padding:12px 14px;background:#fff}
.textarea-hint[b-qguzj9c0wf]{display:block;color:#7B6A66;font-size:.9rem;margin:.4rem 0 1rem}
.example-block[b-qguzj9c0wf]{margin-top:.5rem}
.example-list[b-qguzj9c0wf]{margin:0 0 0 20px}
.btn-primary-action[b-qguzj9c0wf]{background-color:var(--peach);color:var(--text);padding:.5rem 1.2rem;border-radius:8px;font-size:.85rem;font-weight:600;border:none;cursor:pointer}
.pet-modal-title[b-qguzj9c0wf] { font-size:24px; color:#4B2E2E; font-weight:800; margin:4px 0 12px; }
.field-label[b-qguzj9c0wf] { display:block; color:#6b4a43; font-weight:700; margin-bottom:8px; }
.text-area[b-qguzj9c0wf] { width:100%; min-height:180px; border:1px solid #ecd6cf; border-radius:12px; padding:12px 14px; background:#fff; }
.examples[b-qguzj9c0wf] { margin-top:12px; background:#fff; border:1px solid #f1dbd4; border-radius:12px; padding:12px 16px; }
.examples .ex-title[b-qguzj9c0wf] { font-weight:800; color:#6b4a43; margin-bottom:6px; }
.examples ul[b-qguzj9c0wf] { margin: 0 0 0 20px; }
.actions-row[b-qguzj9c0wf] { display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }
.btn-primary[b-qguzj9c0wf] { background:#7B5A53; color:#fff; border:none; border-radius: 12px; padding: 10px 16px; font-weight:700; cursor:pointer; }
.btn-outline[b-qguzj9c0wf] { background:transparent; color:#7B5A53; border:2px solid #e8d4cc; border-radius:12px; padding: 8px 14px; font-weight:700; cursor:pointer; }
@media (max-width:640px){ .modal-content.create-pet-modal.step2[b-qguzj9c0wf]{ width:96%; padding:18px; } }
/* /Components/CreatePetModalStep3.razor.rz.scp.css */
/* Step 3 styles aligned with DescribeLovedOneTagsStep */
.modal-overlay[b-hidwyu4w4u]{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(40,25,15,.55);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s linear .3s;z-index:2000}
.modal-overlay.visible[b-hidwyu4w4u]{opacity:1;visibility:visible;transition:opacity .3s ease}
.modal-content.describe-lovedone-modal-content[b-hidwyu4w4u]{padding:0;border-radius:20px;max-width:700px;text-align:center;box-shadow:0 10px 35px rgba(100,80,70,.15);display:flex;flex-direction:column;max-height:calc(100vh - 4rem);overflow:hidden;position:relative;z-index:1;background:#fff8f6}
.describe-modal-top-bar[b-hidwyu4w4u]{background:var(--card-content-bg);display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;border-bottom:1px solid var(--soft-border);width:100%;flex-shrink:0;position:relative;z-index:10}
.modal-logo-area-top .page-logo-simple-top[b-hidwyu4w4u]{font-family:'Lato',sans-serif;font-size:1rem;font-weight:500;color:var(--text);opacity:.85;text-decoration:none}
.describe-modal-bg-content[b-hidwyu4w4u]{background-image:url('/img/CreatePetTopBackground.960.webp');background-size:cover;background-position:center top;background-repeat:no-repeat;width:100%;padding-top:1rem;min-height:350px;border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.describe-main-content-modal-inner[b-hidwyu4w4u]{flex-grow:1;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding:1.5rem;background-color:transparent}
.describe-modal-title[b-hidwyu4w4u]{font-family: var(--font-serif);font-size:2rem;font-weight:700;color:var(--text);margin-bottom:.6rem;line-height:1.2}
.describe-modal-subtitle[b-hidwyu4w4u]{text-align:left;max-width:480px !important;font-size:.95rem;color:var(--text-light);line-height:1.5;max-width:90%;margin:0 auto 1.8rem auto;position:relative;z-index:1}
.form-group-describe[b-hidwyu4w4u]{width:100%;max-width:660px}

/* Beautiful slider styling from PetLovedOneEditModal */
.slider-group[b-hidwyu4w4u]{margin:10px 0 4px}
.slider-group .slider-input-row[b-hidwyu4w4u]{display:grid;grid-template-columns:1fr;width:100%;margin:0;padding:0}
.custom-slider[b-hidwyu4w4u]{width:100%;height:2rem;appearance:none;background:transparent;outline:none;margin:0;padding:0}
.custom-slider[b-hidwyu4w4u]::-webkit-slider-thumb{appearance:none;height:1.3rem;width:1.3rem;background:#7B5A53;border-radius:50%;border:0;margin-top:-0.4rem}
.custom-slider[b-hidwyu4w4u]::-webkit-slider-runnable-track{background:#eadfd8;height:.5rem;border-radius:.25rem;border:0}
.custom-slider[b-hidwyu4w4u]::-moz-range-thumb{height:1.3rem;width:1.3rem;background:#7B5A53;border-radius:50%;border:0}
.custom-slider[b-hidwyu4w4u]::-moz-range-track{background:#eadfd8;height:.5rem;border-radius:.25rem;border:0}
.slider-label[b-hidwyu4w4u]{
font-size: 0.9rem;
    font-weight: 500;
    color:#6b4a43;
    margin-bottom: 0.25rem;
}
.slider-extreme-labels[b-hidwyu4w4u]{display:flex;justify-content:space-between;color:#a79083;font-size:.85rem;margin-bottom:.25rem}
.slider-mobile-extremes[b-hidwyu4w4u]{display:none;justify-content:space-between;color:#a79083;font-size:.85rem;margin:.25rem 0}

/* Beautiful tag chip styling from PetLovedOneEditModal */
.tags-selection-area[b-hidwyu4w4u]{margin-top:12px}
.tags-container[b-hidwyu4w4u]{
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* center like LovedOneEditModal screenshot */
  column-gap:18px; /* airy spacing between chips */
  row-gap:16px;    /* vertical space between rows */
  margin-bottom:0.25em;
}
.tag-chip[b-hidwyu4w4u]{
  background:#fff;
  border:1.5px solid #eadfd8;
  color:#4B2E2E;
  border-radius:24px;
  padding:10px 18px;
  font-size:.95rem;
  cursor:pointer;
}
.tag-chip.selected[b-hidwyu4w4u]{
  background:#f6d6cb; /* soft peach */
  border-color:#f0c8bb;
  color:#4B2E2E;
}

.form-group-settings[b-hidwyu4w4u] {
    margin-bottom: 1.3rem;
}

.form-group-settings label[b-hidwyu4w4u] {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-light);
        margin-bottom: 0.5rem;
}

.textarea-hint[b-hidwyu4w4u]{display:block;color:#7B6A66;font-size:.9rem;margin:.4rem 0 1rem}
.btn-primary-action[b-hidwyu4w4u]{background-color:var(--peach);color:var(--text);padding:.5rem 1.2rem;border-radius:8px;font-size:.85rem;font-weight:600;border:none;cursor:pointer}

@media (max-width:640px){
  .slider-extreme-labels[b-hidwyu4w4u]{display:none}
  .slider-mobile-extremes[b-hidwyu4w4u]{display:flex}
}
/* /Components/CreditPurchaseModal.razor.rz.scp.css */
/* ─── Credit Purchase Modal ─── Ateljé-themed top-up ─── */

.credit-modal-overlay[b-q45g7jh40y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(25, 16, 12, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2100;
}

.credit-modal-overlay.visible[b-q45g7jh40y] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.credit-modal-content[b-q45g7jh40y] {
    background: radial-gradient(ellipse at 50% 30%, #faf2e8 0%, #f0e0cc 55%, #e5d3b8 100%);
    border: 3px double #b8916a;
    border-radius: 18px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 80px rgba(160, 100, 50, 0.08),
        0 0 40px rgba(193, 154, 107, 0.12);
    position: relative;
    max-width: 640px;
    width: 94%;
    max-height: 92vh;
    overflow-y: auto;
    transform: scale(0.94);
    transition: transform 0.3s ease;
}

.credit-modal-overlay.visible .credit-modal-content[b-q45g7jh40y] {
    transform: scale(1);
}

/* Decorative inner frame */
.credit-modal-content[b-q45g7jh40y]::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(184, 145, 106, 0.30);
    border-radius: 10px;
    pointer-events: none;
}

/* Close button — circular hover disc */
.credit-modal-close[b-q45g7jh40y] {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.15rem;
    color: #8b6b50;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 2;
}

.credit-modal-close:hover[b-q45g7jh40y] {
    color: #4a3325;
    background-color: rgba(160, 120, 70, 0.12);
}

/*  Header  */
.credit-modal-header[b-q45g7jh40y] {
    padding: 32px 32px 12px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.credit-modal-icon[b-q45g7jh40y] {
    width: 86px;
    height: 86px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.credit-modal-icon[b-q45g7jh40y]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid rgba(184, 145, 106, 0.14);
    box-shadow:
        inset 0 0 24px rgba(184, 145, 106, 0.07),
        0 0 18px rgba(184, 145, 106, 0.05);
    pointer-events: none;
}

.atelier-credit-icon[b-q45g7jh40y] {
    width: 48px;
    height: 48px;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 5px 8px rgba(112, 72, 38, 0.16));
    transition: transform 0.22s ease, filter 0.22s ease;
}

.credit-modal-title[b-q45g7jh40y] {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 600;
    color: #3d2b1f;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
    position: relative;
}

.credit-modal-subtitle[b-q45g7jh40y] {
    color: #6b4c38;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    margin: 0;
    line-height: 1.55;
}

.credit-modal-usage[b-q45g7jh40y] {
    color: #9a7e65;
    /* inherited font-sans */
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    font-style: italic;
    margin: 10px 0 0;
}

/*  Body  */
.credit-modal-body[b-q45g7jh40y] {
    padding: 8px 28px 20px;
    position: relative;
    z-index: 1;
}

.credit-modal-loading[b-q45g7jh40y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: #6b4c38;
    font-family: var(--font-serif);
}

.credit-modal-loading .spinner[b-q45g7jh40y] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(184, 145, 106, 0.25);
    border-top-color: #b8916a;
    border-radius: 50%;
    animation: credit-spin-b-q45g7jh40y 0.8s linear infinite;
}

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

/*  Packs Grid  */
.credit-packs-grid[b-q45g7jh40y] {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 18px;
    align-items: end;
}

/*  Pack Card  */
.credit-pack-card[b-q45g7jh40y] {
    background: rgba(255, 252, 245, 0.7);
    border: 1px solid rgba(184, 145, 106, 0.30);
    border-radius: 14px;
    padding: 22px 16px 18px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.credit-pack-card:hover[b-q45g7jh40y] {
    border-color: rgba(184, 145, 106, 0.55);
    box-shadow: 0 6px 20px rgba(139, 90, 40, 0.10);
    transform: translateY(-2px);
}

/*  Featured Card (center)  */
.credit-pack-card--featured[b-q45g7jh40y] {
    border: 2px solid rgba(193, 154, 107, 0.55);
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(248, 235, 210, 0.85) 100%);
    box-shadow:
        0 6px 28px rgba(193, 154, 107, 0.22),
        0 0 20px rgba(193, 154, 107, 0.06);
    padding: 28px 18px 20px;
}

.credit-pack-card--featured:hover[b-q45g7jh40y] {
    box-shadow:
        0 8px 32px rgba(193, 154, 107, 0.32),
        0 0 28px rgba(193, 154, 107, 0.10);
}

/* Best value seal badge */
.credit-pack-seal[b-q45g7jh40y] {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #9f7247;
    color: #fffaf0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(112, 72, 38, 0.16);
}

/*  Card internals  */
.credit-pack-symbol[b-q45g7jh40y] {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.credit-pack-symbol .atelier-credit-icon[b-q45g7jh40y] {
    width: 42px;
    height: 42px;
}

.credit-pack-card--featured .credit-pack-symbol[b-q45g7jh40y] {
    width: 60px;
    height: 60px;
}

.credit-pack-card--featured .credit-pack-symbol .atelier-credit-icon[b-q45g7jh40y] {
    width: 48px;
    height: 48px;
}

.credit-pack-card:hover .atelier-credit-icon[b-q45g7jh40y] {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 12px rgba(112, 72, 38, 0.20));
}

.credit-pack-amount[b-q45g7jh40y] {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: #3d2b1f;
    margin-bottom: 8px;
}

.credit-pack-price[b-q45g7jh40y] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.credit-price-number[b-q45g7jh40y] {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #5a3a25;
    line-height: 1;
}

.credit-pack-card--featured .credit-price-number[b-q45g7jh40y] {
    font-size: 2.1rem;
}

.credit-price-currency[b-q45g7jh40y] {
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #8b6b50;
    font-weight: 400;
}

.credit-pack-tagline[b-q45g7jh40y] {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-style: italic;
    color: #8b6b50;
    margin-bottom: 14px;
    line-height: 1.35;
}

/*  Buttons — side cards: lighter, quieter  */
.credit-pack-button[b-q45g7jh40y] {
    width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(184, 145, 106, 0.3);
    background: rgba(255, 252, 245, 0.55);
    color: #7b5a45;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    margin-top: auto;
}

.credit-pack-button:hover:not(:disabled)[b-q45g7jh40y] {
    background: rgba(222, 196, 162, 0.45);
    border-color: rgba(184, 145, 106, 0.65);
}

.credit-pack-button:active:not(:disabled)[b-q45g7jh40y] {
    transform: translateY(1px);
}

.credit-pack-button:disabled[b-q45g7jh40y] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Featured button — bronze plate style */
.credit-pack-button--primary[b-q45g7jh40y] {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    background: #A67C52;
    border: 1px solid rgba(126, 84, 45, 0.45);
    color: #fffaf0;
    box-shadow: 0 6px 16px rgba(112, 72, 38, 0.18);
    text-shadow: none;
}

.credit-pack-button--primary:hover:not(:disabled)[b-q45g7jh40y] {
    background: #956d48;
    border-color: rgba(116, 75, 40, 0.55);
    box-shadow: 0 8px 18px rgba(112, 72, 38, 0.22);
    filter: none;
}

/*  Error  */
.credit-modal-error[b-q45g7jh40y] {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: rgba(183, 58, 58, 0.1);
    border: 1px solid rgba(183, 58, 58, 0.25);
    border-radius: 10px;
    color: #8b2020;
    font-size: 0.9rem;
    text-align: center;
}

/*  Footer  */
.credit-modal-footer[b-q45g7jh40y] {
    padding: 16px 28px 26px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.credit-modal-promise[b-q45g7jh40y] {
    color: #5a3a25;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}

.credit-modal-stripe[b-q45g7jh40y] {
    color: #a89a8a;
    font-size: 0.72rem;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/*  Mobile  */
@media (max-width: 600px) {
    .credit-modal-content[b-q45g7jh40y] {
        width: 96%;
        max-height: 95vh;
        border-radius: 14px;
    }

    .credit-modal-header[b-q45g7jh40y] {
        padding: 24px 20px 10px;
    }

    .credit-modal-title[b-q45g7jh40y] {
        font-size: 1.4rem;
    }

    .credit-modal-body[b-q45g7jh40y] {
        padding: 8px 18px 16px;
    }

    .credit-packs-grid[b-q45g7jh40y] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .credit-pack-card--featured[b-q45g7jh40y] {
        order: -1;
    }

    .credit-modal-footer[b-q45g7jh40y] {
        padding: 12px 20px 22px;
    }
}
/* /Components/DescribeLovedOneInitialStep.razor.rz.scp.css */
/* DescribeLovedOneInitialStep.razor.css (or your global modal styles) */

/* SHARED MODAL OVERLAY AND BASE CONTENT STYLES (FROM YOUR PROVIDED CSS) */
.modal-overlay[b-pl7xrhut91] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

    .modal-overlay.visible[b-pl7xrhut91] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

.modal-content[b-pl7xrhut91] { /* Base for all modals */
    position: relative; /* <<<< CRITICAL FOR ::before PSEUDO-ELEMENTS */
    padding: 30px 45px;
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002; /* Higher than overlay */
    font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
}

.modal-overlay.visible .modal-content[b-pl7xrhut91] {
    transform: scale(1);
}

.describe-modal-bg-content[b-pl7xrhut91] {
    /* Background image appears *below* the top bar */
    background-image: url('CreateLovedOneTopBackground.960.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    /* push the content down if needed so heads aren't under top bar */
    padding-top: 1rem;
    min-height: 350px; /* set a min-height as needed */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    /* If the modal has rounded corners */
}

/* SPECIFIC STYLES FOR "DESCRIBE LOVED ONE" MODAL */
.modal-content.describe-lovedone-modal-content[b-pl7xrhut91] {
   
    padding: 0; /*padding: 2rem 2.5rem;*/
    border-radius: 20px;
    max-width: 700px;
    /* width: 90%; /* Inherited */
    text-align: center;
    box-shadow: 0 10px 35px rgba(100, 80, 70, 0.15);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    overflow: hidden; /* Clips the ::before to the rounded corners */
    position: relative; /* Already inherited, but ensures stacking context */
    z-index: 1; /* Establishes stacking context; ::before with z-index -1 is behind children */
}

.modal-logo-area-top[b-pl7xrhut91] { /* Container for your logo in the top bar */
    /* No specific styles needed if .page-logo-simple-top handles it */
}

    .modal-logo-area-top .page-logo-simple-top[b-pl7xrhut91] { /* Your "LovedOnes.ai" text or SVG wrapper in top bar */
        font-family: var(--font-serif);
        font-size: 1rem; /* Slightly smaller for top bar */
        font-weight: 500;
        color: var(--text);
        opacity: 0.85;
        text-decoration: none; /* If it's a link */
    }

    /* If using spans for logo accent: */
    /* .modal-logo-area-top .page-logo-simple-top .logo-accent-text { color: var(--accent); } */
    /* If using an <img> for SVG logo in top bar */
    .modal-logo-area-top img.top-bar-logo-img[b-pl7xrhut91] {
        height: 24px; /* Adjust size */
        width: auto;
        vertical-align: middle;
    }


.modal-top-actions-area[b-pl7xrhut91] { /* Container for actions in top bar */
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-continue-top-bar[b-pl7xrhut91] { /* "Continue" button in top bar */
    background-color: var(--peach);
    color: var(--text);
    padding: 0.5rem 1.2rem; /* Smaller button */
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

    .btn-continue-top-bar:hover[b-pl7xrhut91] {
        background-color: var(--accent);
    }

    .btn-continue-top-bar:disabled[b-pl7xrhut91] {
        background-color: #E0D8D1;
        color: var(--text-light);
        cursor: wait;
    }

    .btn-continue-top-bar .spinner-inline-light[b-pl7xrhut91] { /* Adjust spinner if needed */
        width: 0.8em;
        height: 0.8em;
        margin-right: 0.4rem;
        vertical-align: -0.05em;
    }

/* NEW: Top Bar Styling */
.describe-modal-top-bar[b-pl7xrhut91] { /* This class is for the new <div class="describe-modal-top-bar"> in your HTML */
    background: var(--card-content-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem; /* Padding for the bar */
    /* background-color: rgba(255, 255, 255, 0.8); /* Optional: slight translucent bg for bar if needed over image */
    border-bottom: 1px solid var(--soft-border); /* Subtle separator */
    width: 100%;
    flex-shrink: 0; /* Prevent bar from shrinking */
    position: relative; /* Ensure it's part of the stacking context */
    z-index: 10; /* Above main background image, but below absolute close button */
}
    

/* Ensure direct children of .describe-lovedone-modal-content stack above the ::before
   and have transparent backgrounds if you want the image to show through. */
.describe-lovedone-modal-content .modal-close-icon-button[b-pl7xrhut91],
.describe-lovedone-modal-content .describe-header[b-pl7xrhut91],
.describe-lovedone-modal-content .describe-main-content-modal-inner[b-pl7xrhut91],
.describe-lovedone-modal-content .describe-modal-footer-actions[b-pl7xrhut91] {
    position: relative; /* To ensure they are part of the stacking context above ::before */
    z-index: 1; /* Explicitly stack above the pseudo-element if any doubt */
    /* If these sections should let the background image show through, make their background transparent */
    /* background-color: transparent; /* OR a semi-transparent color */
}

.describe-lovedone-modal-content .modal-close-icon-button[b-pl7xrhut91] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    transition: color 0.2s ease;
    /* z-index: 10; /* Ensured by parent having z-index and this being a normal child */
}

    .describe-lovedone-modal-content .modal-close-icon-button:hover[b-pl7xrhut91] {
        color: var(--text);
    }

.describe-header[b-pl7xrhut91] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
    padding: 0 0.5rem; /* This header is optional as per your HTML comments */
    background-color: transparent; /* If you want BG image to show through header */
}

.page-logo-simple[b-pl7xrhut91] {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
}

    .page-logo-simple .logo-accent-text[b-pl7xrhut91] {
        color: var(--accent);
    }

.describe-main-content-modal-inner[b-pl7xrhut91] {
    flex-grow: 1;
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem; /*padding: 0.5rem 1rem 1.5rem 1rem;*/
    background-color: transparent; /* Allows parent's ::before to show */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--card-image-placeholder-bg);
}

    .describe-main-content-modal-inner[b-pl7xrhut91]::-webkit-scrollbar {
        width: 6px;
    }

    .describe-main-content-modal-inner[b-pl7xrhut91]::-webkit-scrollbar-track {
        background: var(--card-image-placeholder-bg);
        border-radius: 3px;
    }

    .describe-main-content-modal-inner[b-pl7xrhut91]::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 3px;
    }

.loved-one-image-placeholder[b-pl7xrhut91] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: rgba(247, 245, 242, 0.8); /* var(--card-image-placeholder-bg) with some transparency */
    margin: 0.5rem auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 5px solid rgba(255,255,255,0.7); /* Semi-transparent white border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

    .loved-one-image-placeholder img[b-pl7xrhut91] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-upload-prompt[b-pl7xrhut91] {
    text-align: center;
    color: var(--text-light);
}

    .image-upload-prompt .fas[b-pl7xrhut91] {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
        display: block;
        opacity: 0.5;
    }

    .image-upload-prompt span[b-pl7xrhut91] {
        font-size: 0.85rem;
    }

.describe-modal-title[b-pl7xrhut91] {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.6rem;
    line-height: 1.2;
}

.describe-modal-subtitle[b-pl7xrhut91] {
    text-align:left;
    max-width:480px !important;
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto 1.8rem auto;
    position: relative;
    z-index: 1;
}

.describe-modal-subtitle[b-pl7xrhut91]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 130%;
    background: rgba(255,255,255, 0.68); /* soft white */
    filter: blur(13px);
    z-index: -1; /* behind the text */
    border-radius: 18px;
    pointer-events: none;
}

.form-group-describe[b-pl7xrhut91] {
    margin-bottom: 1rem;
    width: 100%;
    max-width: 480px;
}

.sr-only[b-pl7xrhut91] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.input-lovedone-name-modal[b-pl7xrhut91],
.textarea-lovedone-description-modal[b-pl7xrhut91] {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1px solid #D8D0C9; /*#E0D8D1;*/
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    color: var(--text);
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) inset;
}

.textarea-lovedone-description-modal[b-pl7xrhut91] {
    min-height: 130px;
    resize: vertical;
}

    .input-lovedone-name-modal[b-pl7xrhut91]::placeholder, .textarea-lovedone-description-modal[b-pl7xrhut91]::placeholder {
        color: #b8b0ac;
    }

    .input-lovedone-name-modal:focus[b-pl7xrhut91], .textarea-lovedone-description-modal:focus[b-pl7xrhut91] {
        border-color: var(--accent);
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 196, 179, 0.25);
    }
.textarea-hint[b-pl7xrhut91]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    bottom: 0;
    background: rgba(255, 255, 255, 0.68); /* Soft white */
    filter: blur(13px);
    border-radius: 12px;
    z-index: -1;
}

.textarea-hint[b-pl7xrhut91] {
    position: relative;
    display: block;
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.3rem;
    padding-left: 0.1rem;
}



.describe-modal-footer-actions[b-pl7xrhut91] {
    width: 100%;
    max-width: 480px;
    margin: 1rem auto 0 auto;
    padding-top: 1rem;
    border-top: 1px solid var(--soft-border);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    background-color: transparent; /* Allow main modal ::before to show through */
}

.btn-primary-action.btn-continue-describe-modal[b-pl7xrhut91] {
    background-color: var(--peach);
    color: var(--text);
    padding: 0.7rem 1.6rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-primary-action.btn-continue-describe-modal:hover[b-pl7xrhut91] {
        background-color: var(--accent);
    }

    .btn-primary-action.btn-continue-describe-modal:disabled[b-pl7xrhut91] {
        background-color: #E0D8D1;
        color: var(--text-light);
        cursor: wait;
    }

.spinner-inline-light[b-pl7xrhut91] {
    width: 0.9em;
    height: 0.9em;
    border: 2px solid rgba(var(--text-rgb, 75, 46, 46),0.3);
    border-top-color: var(--text);
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-pl7xrhut91 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: -0.1em;
}

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

.btn-secondary-action.btn-skip-describe-modal[b-pl7xrhut91] {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--soft-border);
    padding: 0.7rem 1.6rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

    .btn-secondary-action.btn-skip-describe-modal:hover[b-pl7xrhut91] {
        background-color: var(--card-image-placeholder-bg);
        border-color: var(--peach);
    }


.example-block[b-pl7xrhut91] {
    background: rgba(255,255,255,0.65);
    border-radius: 12px;
    padding: 1.2rem 1.5rem 1rem 1.5rem;
    margin: 1.2rem auto 0 auto;
    max-width: 500px;
    box-shadow: 0 2px 12px rgba(204,170,150,0.06);
    font-size: 0.75rem;
    text-align:left;
}

    .example-block label[b-pl7xrhut91] {
        display: block;
        font-weight: 600;
        color: #795548;
        margin-bottom: 0.7rem;
        font-size: 1.09rem;
        letter-spacing: 0.02em;
    }

.example-list[b-pl7xrhut91] {
    margin: 0 0 0.2rem 0;
    padding: 0;
    list-style: none;
}

    .example-list li[b-pl7xrhut91] {
        margin: 0.22rem 0;
        padding: 0.2rem 0.7rem;
        border-radius: 8px;
        transition: background 0.15s;
        cursor: pointer;
        color: #574133;
 
    }

        .example-list li:hover[b-pl7xrhut91] {
            background: #faede3;
            color: #b76e1b;
        }

.example-instruction[b-pl7xrhut91] {
    color: #af967b;

    margin-top: 0.6rem;
    text-align: center;
    font-style: italic;
}

.modal-content.describe-lovedone-modal-content[b-pl7xrhut91] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    overflow: hidden;
    /* ...other styles... */
}

.describe-modal-top-bar[b-pl7xrhut91] {
    flex: 0 0 auto;
    z-index: 2;
}

.describe-modal-bg-content[b-pl7xrhut91] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* padding-top: 1rem; Optional if you want space above content */
}

.describe-main-content-modal-inner[b-pl7xrhut91] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background-color: transparent;
}
.describe-modal-top-bar[b-pl7xrhut91] {
    box-shadow: 0 2px 8px rgba(220,180,140,0.06);
}



.lovedone-preview-section[b-pl7xrhut91] {
    width: 100%;
    max-width: 480px;
    margin: 2.2rem auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

.preview-label[b-pl7xrhut91] {
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 0.6rem;
    padding-left: 0.3rem;
}

/*.ai-message-bubble {
    background: rgba(253, 246, 241, 0.88);
    border-radius: 20px 20px 20px 8px;
    box-shadow: 0 2px 8px rgba(202,180,140,0.10);
    padding: 1.1rem 1.4rem 1.1rem 1.2rem;
    font-size: 1rem;
    color: #5c4636;
    max-width: 90%;
    margin-bottom: 0.3rem;
    min-height: 2.6em;
    display: inline-block;
    transition: background 0.2s;
    word-break: break-word;
    border: 1px solid #f4e1d4;
    text-align:left;
}*/

.btn-refresh-preview[b-pl7xrhut91] {
    background: var(--peach);
    color: var(--text);
    border: none;
    font-size: 0.96rem;
    border-radius: 18px;
    font-weight: 500;
    padding: 0.54rem 1.2rem;
    margin-bottom: 0.2rem;
    box-shadow: 0 2px 6px rgba(215,176,128,0.07);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

    .btn-refresh-preview:disabled[b-pl7xrhut91] {
        opacity: 0.7;
        background: #f9ece6;
        color: #d3b295;
        cursor: wait;
    }


.ai-preview-row[b-pl7xrhut91] {
    width: 100%;
    max-width: 620px;
    margin: 1.2rem auto 0 auto;
    display: flex;
    justify-content: flex-start;
}

.ai-message-bubble[b-pl7xrhut91] {
    background: #fff9f5;
    border-radius: 20px;
    padding: 1.4rem 2rem;
    font-size: 1.15rem;
    color: #533a2a;
    box-shadow: 0 3px 15px rgba(220,180,140,0.11);
    font-family: var(--font-sans) !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 410px;
    min-width: 120px;
    word-break: break-word;
    line-height: 1.45;
    text-align: left;
    border: 1.5px solid #fae3d3;
    position: relative;
}

    .ai-message-bubble.fade-in[b-pl7xrhut91] {
        opacity: 0;
        animation: fadeInBubble-b-pl7xrhut91 0.4s cubic-bezier(.4,0,.2,1) forwards;
    }

@keyframes fadeInBubble-b-pl7xrhut91 {
    to {
        opacity: 1;
    }
}





.lovedone-preview-controls-row[b-pl7xrhut91] {
    width: 100%;
    max-width: 480px;
    margin: 2.2rem auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
}

.ai-preview-row[b-pl7xrhut91] {
    width: 100%;
    max-width: 620px;
    margin: 1.2rem auto 0 auto;
    display: flex;
    justify-content: flex-start;
}

.ai-message-bubble[b-pl7xrhut91] {
    background: #fff9f5;
    border-radius: 20px;
    padding: 1.4rem 2rem;
    font-size: 1rem;
    color: #533a2a;
    box-shadow: 0 3px 15px rgba(220,180,140,0.11);
    font-family: var(--font-sans) !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 410px;
    min-width: 120px;
    word-break: break-word;
    line-height: 1.45;
    text-align: left;
    border: 1.5px solid #fae3d3;
    position: relative;
}

    .ai-message-bubble.fade-in[b-pl7xrhut91] {
        opacity: 0;
        animation: fadeInBubble-b-pl7xrhut91 0.4s cubic-bezier(.4,0,.2,1) forwards;
    }

@keyframes fadeInBubble-b-pl7xrhut91 {
    to {
        opacity: 1;
    }
}


.ai-message-bubble[b-pl7xrhut91] {
    background: #FCF6F2;
    color: #573618;
    border-radius: 18px 18px 4px 18px;
    padding: 1.1rem 1.6rem 1.1rem 1.5rem;
    max-width: 410px;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(203,173,144,0.07);
    margin-left: auto; /* Aligns the bubble right */
    /*margin-right: 0;
    border: 1.5px solid #fae3d3;
    font-family: var(--font-inter, Inter, Arial, sans-serif);
    line-height: 1.45;
    text-align: left;*/
    /* Optional: */
    word-break: break-word;
    position: relative;
}



.btn-save-preview:hover[b-pl7xrhut91],
.btn-save-preview:focus[b-pl7xrhut91] {
    background: #ffc7b1;
    color: #402d1d;
    box-shadow: 0 4px 14px rgba(220,180,140,0.10);
}



.lovedone-preview-controls-row[b-pl7xrhut91] {
    width: 100%;
    max-width: 620px;
    margin: 2.2rem auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    flex-wrap: wrap;
}



.btn-save-preview[b-pl7xrhut91] {
    background: var(--peach);
    color: #573618;
    border: none;
    font-family: var(--font-sans) !important;
    font-size: 1.06rem;
    font-weight: 600;
    padding: 1rem 2.2rem;
    border-radius: 22px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(220,180,140,0.09);
    transition: background 0.18s, color 0.18s;
}

    .btn-save-preview:hover[b-pl7xrhut91], .btn-save-preview:focus[b-pl7xrhut91] {
        background: var(--accent);
        color: #fff;
    }

.btn-refresh-preview[b-pl7xrhut91] {
    background: transparent;
    color: #a07d68;
    border: 2px solid #f7e2d4;
    font-family: var(--font-sans) !important;
    font-size: 1.05rem;
    font-weight: 500;
    padding: 1rem 2.2rem;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.17s, color 0.17s, border-color 0.17s;
}

    .btn-refresh-preview:hover[b-pl7xrhut91], .btn-refresh-preview:focus[b-pl7xrhut91] {
        background: #fff6ef;
        border-color: var(--accent);
        color: #573618;
    }

@media (max-width: 640px) {
    .lovedone-preview-controls-row[b-pl7xrhut91] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .btn-save-preview[b-pl7xrhut91],
    .btn-refresh-preview[b-pl7xrhut91] {
        width: 100%;
        text-align: center;
        font-size: 1rem;
    }
}


.notification-message[b-pl7xrhut91] {
    margin: 1rem 0 0.5rem 0;
    padding: 0.75rem 1.2rem;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 10px;
    font-size: 0.98rem;
    text-align: left;
    box-shadow: 0 2px 8px rgba(220,180,140,0.07);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    transition: opacity 0.3s;
}

.fade-in[b-pl7xrhut91] {
    animation: fadeInNotification-b-pl7xrhut91 0.4s cubic-bezier(.4,0,.2,1) forwards;
    opacity: 0;
}

@keyframes fadeInNotification-b-pl7xrhut91 {
    to {
        opacity: 1;
    }
}

.preview-hint-below[b-pl7xrhut91] {
    font-size: 0.97em;
    color: #a07d68;
    font-style: italic;
    margin-top: 0.2em;
    text-align: left;
    opacity: 0.8;
    line-height: 1.3;
}

.profile-suggestion-block[b-pl7xrhut91] {
    margin-top: 1rem;
    text-align: left;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.profile-suggestion-text[b-pl7xrhut91] {
    font-size: 0.87rem;
    color: #6b4a3a;
    line-height: 1.5;
}

.profile-suggestion-sub[b-pl7xrhut91] {
    color: #947460;
}



.profile-link[b-pl7xrhut91] {
    color: #b76e1b; /* A warm golden-brown that fits your theme */
    font-weight: 500;
    text-decoration: none;
    margin-left: 0.3rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .profile-link:hover[b-pl7xrhut91] {
        color: #8c4e1e;
        text-decoration: underline;
    }


@media (max-width: 480px) {
    .modal-content[b-pl7xrhut91] {
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 1.5rem 1rem !important;
        box-shadow: none !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) {
    .modal-overlay[b-pl7xrhut91] {
        align-items: flex-start;
    }

    .modal-content[b-pl7xrhut91] {
        margin-top: 0;
    }
}
/* /Components/DescribeLovedOneTagsStep.razor.rz.scp.css */
/* DescribeLovedOneInitialStep.razor.css (or your global modal styles) */

/* SHARED MODAL OVERLAY AND BASE CONTENT STYLES (FROM YOUR PROVIDED CSS) */
.modal-overlay[b-fdkf2jl7tu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

    .modal-overlay.visible[b-fdkf2jl7tu] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

.modal-content[b-fdkf2jl7tu] { /* Base for all modals */
    position: relative; /* <<<< CRITICAL FOR ::before PSEUDO-ELEMENTS */
    padding: 30px 45px;
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002; /* Higher than overlay */
    font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
}

.modal-overlay.visible .modal-content[b-fdkf2jl7tu] {
    transform: scale(1);
}

.describe-modal-bg-content[b-fdkf2jl7tu] {
    /* Background image appears *below* the top bar */
    background-image: url('CreateLovedOneTopBackground.960.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    /* push the content down if needed so heads aren't under top bar */
    padding-top: 1rem;
    min-height: 350px; /* set a min-height as needed */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    /* If the modal has rounded corners */
}

/* SPECIFIC STYLES FOR "DESCRIBE LOVED ONE" MODAL */
.modal-content.describe-lovedone-modal-content[b-fdkf2jl7tu] {
   
    padding: 0; /*padding: 2rem 2.5rem;*/
    border-radius: 20px;
    max-width: 700px;
    /* width: 90%; /* Inherited */
    text-align: center;
    box-shadow: 0 10px 35px rgba(100, 80, 70, 0.15);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    overflow: hidden; /* Clips the ::before to the rounded corners */
    position: relative; /* Already inherited, but ensures stacking context */
    z-index: 1; /* Establishes stacking context; ::before with z-index -1 is behind children */
}

.modal-logo-area-top[b-fdkf2jl7tu] { /* Container for your logo in the top bar */
    /* No specific styles needed if .page-logo-simple-top handles it */
}

    .modal-logo-area-top .page-logo-simple-top[b-fdkf2jl7tu] { /* Your "LovedOnes.ai" text or SVG wrapper in top bar */
        font-family: var(--font-sans) !important;
        font-size: 1rem; /* Slightly smaller for top bar */
        font-weight: 500;
        color: var(--text);
        opacity: 0.85;
        text-decoration: none; /* If it's a link */
    }

    /* If using spans for logo accent: */
    /* .modal-logo-area-top .page-logo-simple-top .logo-accent-text { color: var(--accent); } */
    /* If using an <img> for SVG logo in top bar */
    .modal-logo-area-top img.top-bar-logo-img[b-fdkf2jl7tu] {
        height: 24px; /* Adjust size */
        width: auto;
        vertical-align: middle;
    }


.modal-top-actions-area[b-fdkf2jl7tu] { /* Container for actions in top bar */
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-continue-top-bar[b-fdkf2jl7tu] { /* "Continue" button in top bar */
    background-color: var(--peach);
    color: var(--text);
    padding: 0.5rem 1.2rem; /* Smaller button */
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

    .btn-continue-top-bar:hover[b-fdkf2jl7tu] {
        background-color: var(--accent);
    }

    .btn-continue-top-bar:disabled[b-fdkf2jl7tu] {
        background-color: #E0D8D1;
        color: var(--text-light);
        cursor: wait;
    }

    .btn-continue-top-bar .spinner-inline-light[b-fdkf2jl7tu] { /* Adjust spinner if needed */
        width: 0.8em;
        height: 0.8em;
        margin-right: 0.4rem;
        vertical-align: -0.05em;
    }

/* NEW: Top Bar Styling */
.describe-modal-top-bar[b-fdkf2jl7tu] { /* This class is for the new <div class="describe-modal-top-bar"> in your HTML */
    background: var(--card-content-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem; /* Padding for the bar */
    /* background-color: rgba(255, 255, 255, 0.8); /* Optional: slight translucent bg for bar if needed over image */
    border-bottom: 1px solid var(--soft-border); /* Subtle separator */
    width: 100%;
    flex-shrink: 0; /* Prevent bar from shrinking */
    position: relative; /* Ensure it's part of the stacking context */
    z-index: 10; /* Above main background image, but below absolute close button */
}
    

/* Ensure direct children of .describe-lovedone-modal-content stack above the ::before
   and have transparent backgrounds if you want the image to show through. */
.describe-lovedone-modal-content .modal-close-icon-button[b-fdkf2jl7tu],
.describe-lovedone-modal-content .describe-header[b-fdkf2jl7tu],
.describe-lovedone-modal-content .describe-main-content-modal-inner[b-fdkf2jl7tu],
.describe-lovedone-modal-content .describe-modal-footer-actions[b-fdkf2jl7tu] {
    position: relative; /* To ensure they are part of the stacking context above ::before */
    z-index: 1; /* Explicitly stack above the pseudo-element if any doubt */
    /* If these sections should let the background image show through, make their background transparent */
    /* background-color: transparent; /* OR a semi-transparent color */
}

.describe-lovedone-modal-content .modal-close-icon-button[b-fdkf2jl7tu] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    transition: color 0.2s ease;
    /* z-index: 10; /* Ensured by parent having z-index and this being a normal child */
}

    .describe-lovedone-modal-content .modal-close-icon-button:hover[b-fdkf2jl7tu] {
        color: var(--text);
    }

.describe-header[b-fdkf2jl7tu] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
    padding: 0 0.5rem; /* This header is optional as per your HTML comments */
    background-color: transparent; /* If you want BG image to show through header */
}

.page-logo-simple[b-fdkf2jl7tu] {
    font-family: var(--font-sans) !important;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
}

    .page-logo-simple .logo-accent-text[b-fdkf2jl7tu] {
        color: var(--accent);
    }

.describe-main-content-modal-inner[b-fdkf2jl7tu] {
   
    flex-grow: 1;
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem; /*padding: 0.5rem 1rem 1.5rem 1rem;*/
    background-color: transparent; /* Allows parent's ::before to show */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--card-image-placeholder-bg);
}

    .describe-main-content-modal-inner[b-fdkf2jl7tu]::-webkit-scrollbar {
        width: 6px;
    }

    .describe-main-content-modal-inner[b-fdkf2jl7tu]::-webkit-scrollbar-track {
        background: var(--card-image-placeholder-bg);
        border-radius: 3px;
    }

    .describe-main-content-modal-inner[b-fdkf2jl7tu]::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 3px;
    }

.loved-one-image-placeholder[b-fdkf2jl7tu] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: rgba(247, 245, 242, 0.8); /* var(--card-image-placeholder-bg) with some transparency */
    margin: 0.5rem auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 5px solid rgba(255,255,255,0.7); /* Semi-transparent white border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

    .loved-one-image-placeholder img[b-fdkf2jl7tu] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-upload-prompt[b-fdkf2jl7tu] {
    text-align: center;
    color: var(--text-light);
}

    .image-upload-prompt .fas[b-fdkf2jl7tu] {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
        display: block;
        opacity: 0.5;
    }

    .image-upload-prompt span[b-fdkf2jl7tu] {
        font-size: 0.85rem;
    }

.describe-modal-title[b-fdkf2jl7tu] {
    font-family: var(--font-sans) !important;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.6rem;
    line-height: 1.2;
}

.describe-modal-subtitle[b-fdkf2jl7tu] {
    text-align:left;
    max-width:480px !important;
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto 1.8rem auto;
    position: relative;
    z-index: 1;
}

.describe-modal-subtitle[b-fdkf2jl7tu]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 130%;
    background: rgba(255,255,255, 0.68); /* soft white */
    filter: blur(13px);
    z-index: -1; /* behind the text */
    border-radius: 18px;
    pointer-events: none;
}

.form-group-describe[b-fdkf2jl7tu] {
    margin-bottom: 1rem;
    width: 100%;
    max-width: 480px;
}

.sr-only[b-fdkf2jl7tu] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.input-lovedone-name-modal[b-fdkf2jl7tu],
.textarea-lovedone-description-modal[b-fdkf2jl7tu] {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1px solid #D8D0C9; /*#E0D8D1;*/
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    color: var(--text);
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) inset;
}

.textarea-lovedone-description-modal[b-fdkf2jl7tu] {
    min-height: 130px;
    resize: vertical;
}

    .input-lovedone-name-modal[b-fdkf2jl7tu]::placeholder, .textarea-lovedone-description-modal[b-fdkf2jl7tu]::placeholder {
        color: #b8b0ac;
    }

    .input-lovedone-name-modal:focus[b-fdkf2jl7tu], .textarea-lovedone-description-modal:focus[b-fdkf2jl7tu] {
        border-color: var(--accent);
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 196, 179, 0.25);
    }

.textarea-hint[b-fdkf2jl7tu] {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.3rem;
    padding-left: 0.1rem;
}

.describe-modal-footer-actions[b-fdkf2jl7tu] {
    width: 100%;
    max-width: 480px;
    margin: 1rem auto 0 auto;
    padding-top: 1rem;
    border-top: 1px solid var(--soft-border);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-shrink: 0;
    background-color: transparent; /* Allow main modal ::before to show through */
}

.btn-primary-action.btn-continue-describe-modal[b-fdkf2jl7tu] {
    background-color: var(--peach);
    color: var(--text);
    padding: 0.7rem 1.6rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-primary-action.btn-continue-describe-modal:hover[b-fdkf2jl7tu] {
        background-color: var(--accent);
    }

    .btn-primary-action.btn-continue-describe-modal:disabled[b-fdkf2jl7tu] {
        background-color: #E0D8D1;
        color: var(--text-light);
        cursor: wait;
    }

.spinner-inline-light[b-fdkf2jl7tu] {
    width: 0.9em;
    height: 0.9em;
    border: 2px solid rgba(var(--text-rgb, 75, 46, 46),0.3);
    border-top-color: var(--text);
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-fdkf2jl7tu 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: -0.1em;
}

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

.btn-secondary-action.btn-skip-describe-modal[b-fdkf2jl7tu] {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--soft-border);
    padding: 0.7rem 1.6rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

    .btn-secondary-action.btn-skip-describe-modal:hover[b-fdkf2jl7tu] {
        background-color: var(--card-image-placeholder-bg);
        border-color: var(--peach);
    }


.example-block[b-fdkf2jl7tu] {
    background: rgba(255,255,255,0.65);
    border-radius: 12px;
    padding: 1.2rem 1.5rem 1rem 1.5rem;
    margin: 1.2rem auto 0 auto;
    max-width: 500px;
    box-shadow: 0 2px 12px rgba(204,170,150,0.06);
    font-size: 0.75rem;
    text-align:left;
}

    .example-block label[b-fdkf2jl7tu] {
        display: block;
        font-weight: 600;
        color: #795548;
        margin-bottom: 0.7rem;
        font-size: 1.09rem;
        letter-spacing: 0.02em;
    }

.example-list[b-fdkf2jl7tu] {
    margin: 0 0 0.2rem 0;
    padding: 0;
    list-style: none;
}

    .example-list li[b-fdkf2jl7tu] {
        margin: 0.22rem 0;
        padding: 0.2rem 0.7rem;
        border-radius: 8px;
        transition: background 0.15s;
        cursor: pointer;
        color: #574133;
 
    }

        .example-list li:hover[b-fdkf2jl7tu] {
            background: #faede3;
            color: #b76e1b;
        }

.example-instruction[b-fdkf2jl7tu] {
    color: #af967b;

    margin-top: 0.6rem;
    text-align: center;
    font-style: italic;
}

.modal-content.describe-lovedone-modal-content[b-fdkf2jl7tu] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    overflow: hidden;
    /* ...other styles... */
}

.describe-modal-top-bar[b-fdkf2jl7tu] {
    flex: 0 0 auto;
    z-index: 2;
}

.describe-modal-bg-content[b-fdkf2jl7tu] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* padding-top: 1rem; Optional if you want space above content */
}

.describe-main-content-modal-inner[b-fdkf2jl7tu] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background-color: transparent;
}
.describe-modal-top-bar[b-fdkf2jl7tu] {
    box-shadow: 0 2px 8px rgba(220,180,140,0.06);
}

.tags-selection-area[b-fdkf2jl7tu] {
    margin-top: 1rem;
    width: 100%;
}

.tags-container[b-fdkf2jl7tu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center; /* Center the tags */
    margin-top: 1rem;
    margin-bottom: 1rem
}

.tag-chip[b-fdkf2jl7tu] { /* Same as .tag-option-button in PrivateReflectionModal */
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid #E0D8D1; /* Lighter border */
    border-radius: 15px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

    .tag-chip:hover[b-fdkf2jl7tu] {
        border-color: var(--peach);
        background-color: #FFF9F7; /* Very subtle hover */
    }

    .tag-chip.selected[b-fdkf2jl7tu] { /* Same as .active in PrivateReflectionModal */
        background-color: var(--peach);
        color: var(--text);
        border-color: var(--accent);
        font-weight: 500;
    }

/* ALSO ADD: Better spacing for the form group */
.form-group-describe .tags-selection-area[b-fdkf2jl7tu] {
    background: rgba(255,255,255,0.75); /* Slightly transparent like example-block */
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin: 1.2rem auto 0 auto;
    max-width: 500px;
    box-shadow: 0 2px 12px rgba(204,170,150,0.06);
}

.missing-trait-feedback[b-fdkf2jl7tu] {
    text-align: center;
    margin-top: 1.1rem;
    font-size: 0.92em;
    color: #9e8262;
}

    .missing-trait-feedback .feedback-link[b-fdkf2jl7tu] {
        color: #a4886c;
        text-decoration: none;
        transition: color 0.15s;
        cursor: pointer;
    }

        .missing-trait-feedback .feedback-link:hover[b-fdkf2jl7tu],
        .missing-trait-feedback .feedback-link:focus[b-fdkf2jl7tu] {
            color: var(--accent); /* Or a soft peach if you want */
            text-decoration: underline;
        }

.feedback-link-highlight[b-fdkf2jl7tu] {
    color: var(--accent);
    font-weight: 500;
}

.missing-trait-feedback[b-fdkf2jl7tu] {
    text-align: center;
    margin-top: 1.1rem;
    font-size: 0.98em;
    color: #a4886c; /* lighter brown */
    letter-spacing: 0.01em;
}

    .missing-trait-feedback .feedback-link[b-fdkf2jl7tu] {
        color: var(--accent, #e59174); /* use your accent color */
        font-weight: 600;
        text-decoration: none;
        border: none;
        background: none;
        font-size: inherit;
        padding: 0 0.08em;
        margin-left: 0.25em;
        cursor: pointer;
        transition: color 0.16s, text-decoration 0.14s;
        border-radius: 4px;
    }

        .missing-trait-feedback .feedback-link:hover[b-fdkf2jl7tu],
        .missing-trait-feedback .feedback-link:focus[b-fdkf2jl7tu] {
            color: #c77657; /* a bit deeper accent */
            text-decoration: underline;
            background: rgba(250, 230, 225, 0.45); /* very subtle highlight */
            outline: none;
        }






.lovedone-preview-section[b-fdkf2jl7tu] {
    width: 100%;
    max-width: 480px;
    margin: 2.2rem auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

.preview-label[b-fdkf2jl7tu] {
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 0.6rem;
    padding-left: 0.3rem;
}

/*.ai-message-bubble {
    background: rgba(253, 246, 241, 0.88);
    border-radius: 20px 20px 20px 8px;
    box-shadow: 0 2px 8px rgba(202,180,140,0.10);
    padding: 1.1rem 1.4rem 1.1rem 1.2rem;
    font-size: 1rem;
    color: #5c4636;
    max-width: 90%;
    margin-bottom: 0.3rem;
    min-height: 2.6em;
    display: inline-block;
    transition: background 0.2s;
    word-break: break-word;
    border: 1px solid #f4e1d4;
    text-align:left;
}*/

.btn-refresh-preview[b-fdkf2jl7tu] {
    background: var(--peach);
    color: var(--text);
    border: none;
    font-size: 0.96rem;
    border-radius: 18px;
    font-weight: 500;
    padding: 0.54rem 1.2rem;
    margin-bottom: 0.2rem;
    box-shadow: 0 2px 6px rgba(215,176,128,0.07);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

    .btn-refresh-preview:disabled[b-fdkf2jl7tu] {
        opacity: 0.7;
        background: #f9ece6;
        color: #d3b295;
        cursor: wait;
    }


.ai-preview-row[b-fdkf2jl7tu] {
    width: 100%;
    max-width: 620px;
    margin: 1.2rem auto 0 auto;
    display: flex;
    justify-content: flex-start;
}

.ai-message-bubble[b-fdkf2jl7tu] {
    background: #fff9f5;
    border-radius: 20px;
    padding: 1.4rem 2rem;
    font-size: 1.15rem;
    color: #533a2a;
    box-shadow: 0 3px 15px rgba(220,180,140,0.11);
    font-family: var(--font-sans) !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 410px;
    min-width: 120px;
    word-break: break-word;
    line-height: 1.45;
    text-align: left;
    border: 1.5px solid #fae3d3;
    position: relative;
}

    .ai-message-bubble.fade-in[b-fdkf2jl7tu] {
        opacity: 0;
        animation: fadeInBubble-b-fdkf2jl7tu 0.4s cubic-bezier(.4,0,.2,1) forwards;
    }

@keyframes fadeInBubble-b-fdkf2jl7tu {
    to {
        opacity: 1;
    }
}





.lovedone-preview-controls-row[b-fdkf2jl7tu] {
    width: 100%;
    max-width: 480px;
    margin: 2.2rem auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
}

.ai-preview-row[b-fdkf2jl7tu] {
    width: 100%;
    max-width: 620px;
    margin: 1.2rem auto 0 auto;
    display: flex;
    justify-content: flex-start;
}

.ai-message-bubble[b-fdkf2jl7tu] {
    background: #fff9f5;
    border-radius: 20px;
    padding: 1.4rem 2rem;
    font-size: 1rem;
    color: #533a2a;
    box-shadow: 0 3px 15px rgba(220,180,140,0.11);
    font-family: var(--font-sans) !important;
    margin-left: 0;
    margin-right: 0;
    max-width: 410px;
    min-width: 120px;
    word-break: break-word;
    line-height: 1.45;
    text-align: left;
    border: 1.5px solid #fae3d3;
    position: relative;
}

    .ai-message-bubble.fade-in[b-fdkf2jl7tu] {
        opacity: 0;
        animation: fadeInBubble-b-fdkf2jl7tu 0.4s cubic-bezier(.4,0,.2,1) forwards;
    }

@keyframes fadeInBubble-b-fdkf2jl7tu {
    to {
        opacity: 1;
    }
}


.ai-message-bubble[b-fdkf2jl7tu] {
    background: #FCF6F2;
    color: #573618;
    border-radius: 18px 18px 4px 18px;
    padding: 1.1rem 1.6rem 1.1rem 1.5rem;
    max-width: 410px;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(203,173,144,0.07);
    margin-left: auto; /* Aligns the bubble right */
/*margin-right: 0;
    border: 1.5px solid #fae3d3;
    font-family: var(--font-inter, Inter, Arial, sans-serif);
    line-height: 1.45;
    text-align: left;*/
/* Optional: */
    word-break: break-word;
    position: relative;
}



    .btn-save-preview:hover[b-fdkf2jl7tu],
    .btn-save-preview:focus[b-fdkf2jl7tu] {
        background: #ffc7b1;
        color: #402d1d;
        box-shadow: 0 4px 14px rgba(220,180,140,0.10);
    }



.lovedone-preview-controls-row[b-fdkf2jl7tu] {
    width: 100%;
    max-width: 620px;
    margin: 2.2rem auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    flex-wrap: wrap;
}



.btn-save-preview[b-fdkf2jl7tu] {
    background: var(--peach);
    color: #573618;
    border: none;
    font-family: var(--font-sans) !important;
    font-size: 1.06rem;
    font-weight: 600;
    padding: 1rem 2.2rem;
    border-radius: 22px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(220,180,140,0.09);
    transition: background 0.18s, color 0.18s;
}

    .btn-save-preview:hover[b-fdkf2jl7tu], .btn-save-preview:focus[b-fdkf2jl7tu] {
        background: var(--accent);
        color: #fff;
    }

.btn-refresh-preview[b-fdkf2jl7tu] {
    background: transparent;
    color: #a07d68;
    border: 2px solid #f7e2d4;
    font-family: var(--font-sans) !important;
    font-size: 1.05rem;
    font-weight: 500;
    padding: 1rem 2.2rem;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.17s, color 0.17s, border-color 0.17s;
}

    .btn-refresh-preview:hover[b-fdkf2jl7tu], .btn-refresh-preview:focus[b-fdkf2jl7tu] {
        background: #fff6ef;
        border-color: var(--accent);
        color: #573618;
    }

@media (max-width: 640px) {
    .lovedone-preview-controls-row[b-fdkf2jl7tu] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .btn-save-preview[b-fdkf2jl7tu],
    .btn-refresh-preview[b-fdkf2jl7tu] {
        width: 100%;
        text-align: center;
        font-size: 1rem;
    }
}

.notification-message[b-fdkf2jl7tu] {
    margin: 1rem 0 0.5rem 0;
    padding: 0.75rem 1.2rem;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 10px;
    font-size: 0.98rem;
    text-align: left;
    box-shadow: 0 2px 8px rgba(220,180,140,0.07);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    transition: opacity 0.3s;
}

.fade-in[b-fdkf2jl7tu] {
    animation: fadeInNotification-b-fdkf2jl7tu 0.4s cubic-bezier(.4,0,.2,1) forwards;
    opacity: 0;
}

@keyframes fadeInNotification-b-fdkf2jl7tu {
    to {
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .ai-message-bubble[b-fdkf2jl7tu],
    .ai-preview-row[b-fdkf2jl7tu] {
        max-width: 100%;
        min-width: 0;
        font-size: 1.03rem;
        padding: 1.1rem 0.8rem;
    }
}


.preview-hint-below[b-fdkf2jl7tu] {
    font-size: 0.97em;
    color: #a07d68;
    font-style: italic;
    margin-top: 0.2em;
    text-align: left;
    opacity: 0.8;
    line-height: 1.3;
}

.profile-suggestion-block[b-fdkf2jl7tu] {
    margin-top: 1rem;
    text-align: left;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.profile-suggestion-text[b-fdkf2jl7tu] {
    font-size: 0.87rem;
    color: #6b4a3a;
    line-height: 1.5;
}

.profile-suggestion-sub[b-fdkf2jl7tu] {
    color: #947460;
}



.profile-link[b-fdkf2jl7tu] {
    color: #b76e1b; /* A warm golden-brown that fits your theme */
    font-weight: 500;
    text-decoration: none;
    margin-left: 0.3rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .profile-link:hover[b-fdkf2jl7tu] {
        color: #8c4e1e;
        text-decoration: underline;
    }


@media (max-width: 480px) {
    .modal-content[b-fdkf2jl7tu] {
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 1.5rem 1rem !important;
        box-shadow: none !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) {
    .modal-overlay[b-fdkf2jl7tu] {
        align-items: flex-start;
    }

    .modal-content[b-fdkf2jl7tu] {
        margin-top: 0;
    }
}
/* /Components/DescribeStep.razor.rz.scp.css */
/* === Ensure styles reach into the component === */
button.btn-modal-primary[b-qzsqfewpjs] {
    background-color: #fbbbad;
    color: #38250d;
    box-shadow: 0 2px 8px rgba(247,186,173,0.10);
    padding: 0.8em 2.5em;
    border-radius: 25px;
    font-size: 1.11rem;
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.5px;
}

button.btn-modal-primary:hover[b-qzsqfewpjs] {
    background-color: #f9ac9c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(247,186,173,0.15);
}

button.btn-modal-tertiary[b-qzsqfewpjs] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
    padding: 0.8em 1.8em;
    border-radius: 25px;
    font-size: 1.11rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.5px;
}

button.btn-modal-tertiary:hover[b-qzsqfewpjs] {
    background-color: rgba(239, 215, 187, 0.15);
    border-color: #e8c8a0;
}

.step-buttons[b-qzsqfewpjs] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2rem;
}

textarea[b-qzsqfewpjs] {
    width: 100%;
    border: 1.3px solid #f0e1d0;
    background: #fff9f4;
    border-radius: 15px;
    padding: 0.92em 1.1em;
    font-size: 1.06rem;
    color: #473b26;
    transition: border 0.18s, height 0.3s;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 1.2em;
    min-height: 120px;
    resize: vertical;
}

textarea:focus[b-qzsqfewpjs] {
    border-color: #fbbbad;
    background: #fff6f0;
}

/* More comfortable textarea on desktop */
@media (min-width: 992px) {
    textarea[b-qzsqfewpjs] {
        min-height: 250px;
        font-size: 1.1rem;
        line-height: 1.5;
    }
}

.example-label[b-qzsqfewpjs] {
    font-size: 0.95rem;
    color: #a37a4c;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.example-stories[b-qzsqfewpjs] {
    background: #fff3ea;
    border-radius: 18px;
    padding: 1.2em 1.5em;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #967f6b;
    margin-bottom: 1.5em;
    max-height: 400px;
    overflow-y: auto;
    border-left: 3px solid #fbbbad;
}

/* Improved example stories container on desktop */
@media (min-width: 992px) {
    .example-stories[b-qzsqfewpjs] {
        max-height: 400px;
        padding: 1.4em 1.8em;
        font-size: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2em;
        align-items: start;
    }
    
    .example-stories p[b-qzsqfewpjs] {
        margin: 0;
    }
}

.example-stories p[b-qzsqfewpjs] {
    margin: 0 0 1.2em 0;
    font-style: italic;
    white-space: pre-line; /* Preserves line breaks from the text */
}

.example-stories p:last-child[b-qzsqfewpjs] {
    margin-bottom: 0;
}
/* /Components/EmailSignUpModal.razor.rz.scp.css */
/* ========================================= */
/*        Email Sign Up Modal Styling        */
/* ========================================= */

/* --- Modal Overlay (Shared?) --- */
/* If this is shared with other modals, keep it separate */
.modal-overlay[b-opvqfbrn1r] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55); /* Dim overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 9999;
}

    .modal-overlay.visible[b-opvqfbrn1r] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

/* --- Modal Content Box --- */
.modal-content.email-signup-modal[b-opvqfbrn1r] {
    background-color: rgb(255, 242, 236); /* Match page background */
    padding: 25px 35px 30px 35px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative; /* Needed for pseudo-element & absolute buttons */
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 10000; /* Ensure content is above overlay and shared chrome */
}

    /* Optional Background Layer (if desired) */
    .modal-content.email-signup-modal[b-opvqfbrn1r]::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        background: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
        /* Optional blur: filter: blur(5px); */
        border-radius: 22px; /* Slightly more rounded */
        z-index: -1; /* Behind the main content */
    }


.modal-overlay.visible .modal-content.email-signup-modal[b-opvqfbrn1r] {
    transform: scale(1);
}

/* --- Header Elements --- */

/* Back and Close Buttons */
.email-signup-modal .back-btn[b-opvqfbrn1r],
.email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
    position: absolute;
    top: 18px;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: #a1a1aa; /* Slightly muted color */
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10; /* Ensure clickable */
}

.email-signup-modal .back-btn[b-opvqfbrn1r] {
    left: 15px;
}

.email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
    right: 15px;
}

    .email-signup-modal .back-btn:hover[b-opvqfbrn1r],
    .email-signup-modal .modal-close-btn:hover[b-opvqfbrn1r] {
        color: #52525b; /* Darker on hover */
    }

/* Title */
.email-signup-modal h2[b-opvqfbrn1r] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #5c4033; /* Dark brown color */
    margin-top: 5px; /* Reduced top margin */
    margin-bottom: 8px;
    padding: 0 30px; /* Prevent overlap with close/back buttons */
    text-align: center;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* Subtext / Description */
.email-signup-modal p[b-opvqfbrn1r] {
    font-size: 0.95rem;
    color: #7d6c66; /* Muted brown color */
    margin-bottom: 20px;
    line-height: 1.4;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* --- Form Elements --- */

.email-signup-modal .form-input[b-opvqfbrn1r] {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid #dcd6d4; /* Light border */
    margin-bottom: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

    .email-signup-modal .form-input[b-opvqfbrn1r]::placeholder {
        color: #b0a9a7;
    }

    .email-signup-modal .form-input:focus[b-opvqfbrn1r] {
        border-color: #ff9d7e; /* Highlight color */
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.2);
    }

/* Error Message Styling */
.email-signup-modal .modal-error-message[b-opvqfbrn1r] {
    color: var(--error-color, #dc3545); /* Use CSS variable or specific color */
    font-size: 0.85rem;
    margin-top: -10px; /* Position below input */
    margin-bottom: 15px;
    text-align: left;
    position: relative;
    z-index: 1;
}


/* Submit Button */
.email-signup-modal .btn-email-submit[b-opvqfbrn1r] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #ff9d7e; /* Primary action color */
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    position: relative;
    z-index: 1;
    display: flex; /* For aligning spinner and text */
    justify-content: center;
    align-items: center;
}

    .email-signup-modal .btn-email-submit:hover:not(:disabled)[b-opvqfbrn1r] { /* Hover only when not disabled */
        background-color: #ff855f; /* Darker shade */
    }

    /* Disabled state for button and input */
    .email-signup-modal .btn-email-submit:disabled[b-opvqfbrn1r],
    .email-signup-modal .form-input:disabled[b-opvqfbrn1r] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Basic spinner */
.email-signup-modal .spinner[b-opvqfbrn1r] {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.4); /* Light border for contrast on button */
    border-radius: 50%;
    border-top-color: #fff; /* Spinner color */
    width: 1em;
    height: 1em;
    animation: spin-b-opvqfbrn1r 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

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

/* Ensure button text aligns nicely when spinner is present */
.email-signup-modal .btn-email-submit span[b-opvqfbrn1r] {
    vertical-align: middle;
}


/* --- Success State Styling --- */

.email-signup-modal .success-title[b-opvqfbrn1r] {
    color: var(--success-color, #28a745); /* Use CSS variable or specific color */
    font-weight: 600; /* Make it stand out a bit */
}

.email-signup-modal .btn-close-success[b-opvqfbrn1r] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #ff9d7e; /* Match submit button style */
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 15px; /* Space above button */
    position: relative;
    z-index: 1;
}

    .email-signup-modal .btn-close-success:hover[b-opvqfbrn1r] {
        background-color: #ff855f;
    }

/* Adjust success message text positioning/spacing if needed */
.email-signup-modal h2.success-title + p[b-opvqfbrn1r] {
    margin-bottom: 20px; /* Ensure space before button */
    text-align: center;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .modal-overlay[b-opvqfbrn1r] {
        align-items: stretch;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
        background: #fff9f5;
    }

    .modal-content.email-signup-modal[b-opvqfbrn1r] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: #fff9f5;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
        box-sizing: border-box;
    }

    .modal-content.email-signup-modal[b-opvqfbrn1r]::before {
        display: none;
    }

    .modal-overlay.visible .modal-content.email-signup-modal[b-opvqfbrn1r] {
        transform: none;
    }

    .email-signup-modal .back-btn[b-opvqfbrn1r],
    .email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
        top: calc(10px + env(safe-area-inset-top, 0px));
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.7rem;
        color: #8f7d75;
    }

    .email-signup-modal .back-btn[b-opvqfbrn1r] {
        left: calc(12px + env(safe-area-inset-left, 0px));
    }

    .email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
        right: calc(12px + env(safe-area-inset-right, 0px));
    }

    .email-signup-modal h2[b-opvqfbrn1r],
    .email-signup-modal p[b-opvqfbrn1r],
    .email-signup-modal .form-input[b-opvqfbrn1r],
    .email-signup-modal .modal-error-message[b-opvqfbrn1r],
    .email-signup-modal .btn-email-submit[b-opvqfbrn1r],
    .email-signup-modal .btn-close-success[b-opvqfbrn1r] {
        width: 100%;
        max-width: 360px;
    }

    .email-signup-modal h2[b-opvqfbrn1r] {
        font-size: 2rem;
        line-height: 1.15;
    }

    .email-signup-modal p[b-opvqfbrn1r] {
        margin-bottom: 24px;
        padding: 0;
        line-height: 1.42;
    }

    .email-signup-modal .form-input[b-opvqfbrn1r],
    .email-signup-modal .btn-email-submit[b-opvqfbrn1r],
    .email-signup-modal .btn-close-success[b-opvqfbrn1r] {
        min-height: 52px;
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .modal-content.email-signup-modal[b-opvqfbrn1r] {
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .email-signup-modal h2[b-opvqfbrn1r] {
        font-size: 1.45rem;
    }

    .email-signup-modal p[b-opvqfbrn1r] {
        margin-bottom: 18px;
        font-size: 0.92rem;
    }
}

/* /Components/FamilyMomentsSelector.razor.rz.scp.css */
.family-moments-modal[b-xcr9dclecf] {
    width: 640px;
    max-width: 92vw;
    background: #F5DDC3; /* brand cream/paper */
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(63, 40, 33, 0.2);
    overflow: visible; /* allow illustration to overlap without clipping */
    position: relative;
    --family-ink: #3b241f;
    --family-border: #a2744f; /* warm medium brown */
}

/* Ensure overlay covers viewport and sits above other UI (sidebar, content) */
.modal-overlay[b-xcr9dclecf] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 25, 15, 0.55); /* dimmed background like image 1 */
    backdrop-filter: blur(2px);
    z-index: 9999;
    padding: 40px 20px; /* prevent modal from touching viewport edges */
    box-sizing: border-box;
    overflow: auto; /* allow scrolling if modal is taller than viewport */
}

.modal-overlay.visible[b-xcr9dclecf] {
    visibility: visible;
    opacity: 1;
}

.modal-overlay .modal-content[b-xcr9dclecf] {
    /* ensure modal content is above overlay background */
    z-index: 10000;
}

.family-moments-header[b-xcr9dclecf] {
    padding: 28px 32px 16px;
    text-align: center;
    position: relative;
}

.storybook-header[b-xcr9dclecf] {
    padding-top: 80px; /* leave space for overlapping illustration */
}

.family-moments-title[b-xcr9dclecf] {
    /* serif brand header */
    /* font-family: 'Georgia', 'Times New Roman', serif; */
    font-size: 2rem;
    color: var(--family-ink); /* dark brown */
    margin: 6px 0 6px;
    letter-spacing: -0.02em;
}

.storybook-subtitle[b-xcr9dclecf] {
    color: #6b4f44; /* warm brown/gray */
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 8px;
}

.family-moments-illustration[b-xcr9dclecf] {
    position: absolute;
    left: 50%;
    top: -150px; /* pull illustration above card with breathing room */
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.family-moments-illustration img[b-xcr9dclecf] {
    width: 300px;
    mix-blend-mode: multiply;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(74, 47, 38, 0.22));
}

/* title defined above with serif brand font */

.family-moments-subtitle[b-xcr9dclecf] {
    margin: 8px auto 0;
    color: var(--family-ink); /* dark brown ink for body text */
    font-size: 1rem;
    max-width: 520px;
}

.modal-close-btn.storybook-close[b-xcr9dclecf] {
    position: absolute;
    right: 18px;
    top: 12px;
    border: none;
    background: transparent;
    color: var(--family-ink); /* dark brown */
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.12s ease;
}

.modal-close-btn.storybook-close:hover[b-xcr9dclecf] {
    transform: scale(1.05);
    color: #231411;
}

.family-moments-body[b-xcr9dclecf] {
    padding: 0 32px 24px;
    margin-top: 18px; /* extra breathing room under description */
}

.family-moments-list[b-xcr9dclecf],
.family-moments-grid[b-xcr9dclecf],
.family-moments-grid-flexible[b-xcr9dclecf] {
    display: grid;
    gap: 16px;
}

.family-moments-list-2col[b-xcr9dclecf] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.family-moments-grid-2x2[b-xcr9dclecf] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.family-moments-grid-flexible[b-xcr9dclecf] {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.family-action-tile[b-xcr9dclecf] {
    background: #F5F0E6; /* faint warm fill */
    border: 2px solid var(--family-border); /* warmer medium brown frame */
    border-radius: 24px;
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    color: var(--family-ink); /* dark brown ink */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    width: 100%;
    justify-content: flex-start;
}

.family-action-tile .tile-icon[b-xcr9dclecf] {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--family-ink); /* icon uses dark brown ink */
}

.family-action-tile .tile-icon svg[b-xcr9dclecf] { display:block; }

.family-action-tile .tile-text[b-xcr9dclecf] {
    /* font-family: 'Georgia', 'Times New Roman', serif; */
    font-weight: 700;
    color: inherit;
    font-size: 1.05rem;
}

.family-action-tile:hover[b-xcr9dclecf],
.family-action-tile:focus[b-xcr9dclecf] {
    background: linear-gradient(180deg, #E8A04A 0%, #E08E2E 100%); /* warm gold/orange */
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(224, 142, 46, 0.18);
}

.family-action-tile:hover .tile-icon[b-xcr9dclecf],
.family-action-tile:focus .tile-icon[b-xcr9dclecf] {
    color: #fff; /* icon becomes white on hover */
}

.family-action-tile:focus[b-xcr9dclecf] { outline: 3px solid rgba(232,160,74,0.15); }

.tile-content[b-xcr9dclecf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* tile text styles are defined per .family-action-tile .tile-text to use serif */

.family-moments-footer[b-xcr9dclecf] {
    padding: 0 32px 28px;
    text-align: center;
}

@media (max-width: 540px) {
    .family-moments-modal[b-xcr9dclecf] {
        width: 96vw;
        border-radius: 16px;
    }

    .family-moments-list-2col[b-xcr9dclecf],
    .family-moments-grid-2x2[b-xcr9dclecf] {
        grid-template-columns: 1fr;
    }
    
    /* Reduce illustration size and lift less on small screens to avoid clipping */
    .family-moments-illustration[b-xcr9dclecf] {
        top: -80px;
    }

    .family-moments-illustration img[b-xcr9dclecf] {
        width: 180px;
    }
}

@media (max-width: 360px) {
    .family-moments-modal[b-xcr9dclecf] {
        width: 98vw;
        border-radius: 12px;
    }

    .family-moments-illustration[b-xcr9dclecf] {
        top: -60px;
    }

    .family-moments-illustration img[b-xcr9dclecf] {
        width: 140px;
    }
}

/* /Components/FamilyTreeDrillInEditor.razor.rz.scp.css */
.family-drill-in[b-pg99jkfwht] {
    --ledger-cream: var(--cream-50, #FBF7F0);
    --ledger-panel: #FFFDF9;
    --ledger-soft: #FFF7F1;
    --ledger-border: rgba(139, 90, 43, 0.16);
    --ledger-border-strong: rgba(139, 90, 43, 0.24);
    --ledger-brown: #8B5A2B;
    --ledger-ink: #4B2E2E;
    --ledger-muted: #7D6A5D;
    --ledger-peach: #E6B9A6;
    --ledger-rose: #A86A62;
    color: var(--ledger-ink);
    font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
}

.family-drill-panel[b-pg99jkfwht] {
    animation: family-panel-in-b-pg99jkfwht 180ms ease-out;
    background: linear-gradient(180deg, var(--ledger-panel), var(--ledger-soft));
    border: 1px solid var(--ledger-border);
    border-radius: 14px;
    padding: 20px;
}

@keyframes family-panel-in-b-pg99jkfwht {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.family-empty[b-pg99jkfwht] {
    color: var(--ledger-muted);
    margin: 0;
}

.family-breadcrumbs[b-pg99jkfwht] {
    align-items: center;
    color: var(--ledger-muted);
    display: flex;
    flex-wrap: wrap;
    font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 0.92rem;
    gap: 8px;
    margin-bottom: 18px;
}

.breadcrumb-back[b-pg99jkfwht],
.quiet-icon-button[b-pg99jkfwht],
.add-relative-link[b-pg99jkfwht],
.ghost-link-button[b-pg99jkfwht],
.ghost-danger-button[b-pg99jkfwht],
.outline-button[b-pg99jkfwht],
.primary-button[b-pg99jkfwht],
.secondary-button[b-pg99jkfwht],
.remove-from-root-button[b-pg99jkfwht],
.submodal-close[b-pg99jkfwht],
.relative-quiet-card[b-pg99jkfwht] {
    font: inherit;
}

.breadcrumb-back[b-pg99jkfwht] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ledger-brown);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 6px;
    padding: 4px 0;
}

.breadcrumb-link[b-pg99jkfwht] {
    background: transparent;
    border: 0;
    color: var(--ledger-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 4px 0;
}

.breadcrumb-link:hover[b-pg99jkfwht] {
    color: var(--ledger-brown);
}

.breadcrumb-back:hover[b-pg99jkfwht] {
    color: #6F441D;
}

.breadcrumb-root[b-pg99jkfwht],
.breadcrumb-current[b-pg99jkfwht] {
    font-weight: 650;
}

.breadcrumb-current[b-pg99jkfwht] {
    color: var(--ledger-ink);
}

.breadcrumb-separator[b-pg99jkfwht] {
    color: var(--ledger-peach);
}

.focused-person-header[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.focused-person-copy[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.focused-title-row[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.focused-avatar[b-pg99jkfwht],
.relative-avatar[b-pg99jkfwht] {
    background: #F5E4D2;
    border: 1px solid rgba(139, 90, 43, 0.12);
    border-radius: 999px;
    flex: 0 0 auto;
    overflow: hidden;
}

.focused-avatar[b-pg99jkfwht] {
    height: 72px;
    width: 72px;
}

.relative-avatar[b-pg99jkfwht] {
    height: 48px;
    width: 48px;
}

.focused-avatar img[b-pg99jkfwht],
.relative-avatar img[b-pg99jkfwht],
.linked-profile-summary img[b-pg99jkfwht] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.focused-person-header h3[b-pg99jkfwht],
.relative-copy h4[b-pg99jkfwht],
.relationship-heading h4[b-pg99jkfwht],
.family-submodal h3[b-pg99jkfwht],
.profile-link-area h4[b-pg99jkfwht],
.linked-profile-summary h4[b-pg99jkfwht] {
    font-family: var(--font-serif, Merriweather, Georgia, serif);
    letter-spacing: 0;
}

.focused-person-header h3[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 1.55rem;
    line-height: 1.15;
    margin: 0;
}

.focused-person-header p[b-pg99jkfwht] {
    color: var(--ledger-muted);
    font-size: 0.98rem;
    font-weight: 600;
    margin: 5px 0 0;
}

.quiet-icon-button[b-pg99jkfwht],
.submodal-close[b-pg99jkfwht] {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ledger-brown);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
}

.quiet-icon-button[b-pg99jkfwht] {
    height: 36px;
    width: 36px;
}

.quiet-icon-button:hover[b-pg99jkfwht],
.submodal-close:hover[b-pg99jkfwht] {
    background: rgba(139, 90, 43, 0.08);
    border-color: var(--ledger-border);
}

.relationship-section[b-pg99jkfwht] {
    border: 1px solid var(--ledger-border);
    border-radius: 12px;
    margin-top: 10px;
    padding: 12px;
}

.relationship-section-header[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.relationship-heading[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    gap: 10px;
}

.relationship-heading h4[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 1.03rem;
    margin: 0;
}

.section-icon[b-pg99jkfwht] {
    align-items: center;
    color: var(--ledger-brown);
    display: inline-flex;
    height: 20px;
    width: 20px;
}

.section-count[b-pg99jkfwht],
.linked-muted-badge[b-pg99jkfwht],
.context-muted-badge[b-pg99jkfwht],
.user-muted-badge[b-pg99jkfwht] {
    background: rgba(139, 90, 43, 0.08);
    border: 1px solid rgba(139, 90, 43, 0.08);
    border-radius: 999px;
    color: var(--ledger-brown);
    font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
}

.context-muted-badge[b-pg99jkfwht] {
    color: var(--ledger-muted);
}

.user-muted-badge[b-pg99jkfwht] {
    background: rgba(95, 131, 88, 0.12);
    border-color: rgba(95, 131, 88, 0.16);
    color: #5f8358;
}

.relative-card-list[b-pg99jkfwht] {
    display: grid;
    gap: 8px;
}

.relative-quiet-card[b-pg99jkfwht] {
    align-items: center;
    appearance: none;
    background: rgba(255, 253, 249, 0.86);
    border: 1px solid var(--ledger-border);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 10px 12px;
    text-align: left;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    width: 100%;
}

.relative-quiet-card:hover[b-pg99jkfwht] {
    background: #FFF9F4;
    border-color: var(--ledger-border-strong);
    transform: translateY(-1px);
}

.relative-quiet-card.locked-anchor[b-pg99jkfwht] {
    background: rgba(251, 247, 240, 0.78);
}

.relative-copy[b-pg99jkfwht] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.relative-title-row[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.relative-copy h4[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 0.98rem;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.relative-meta[b-pg99jkfwht] {
    color: var(--ledger-muted);
    font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 0.89rem;
    font-style: italic;
}

.relative-chevron[b-pg99jkfwht] {
    color: var(--ledger-brown);
    display: inline-flex;
    opacity: 0.78;
}

.add-relative-link[b-pg99jkfwht] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--ledger-border);
    border-radius: 999px;
    color: var(--ledger-brown);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 12px;
}

.add-relative-link:hover[b-pg99jkfwht] {
    background: rgba(230, 185, 166, 0.12);
}

.remove-from-root-button[b-pg99jkfwht] {
    align-items: center;
    background: rgba(255, 253, 249, 0.72);
    border: 1px solid rgba(168, 106, 98, 0.28);
    border-radius: 10px;
    color: var(--ledger-rose);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
    padding: 12px 14px;
    width: 100%;
}

.remove-from-root-button:hover[b-pg99jkfwht] {
    background: rgba(168, 106, 98, 0.08);
}

.identity-area[b-pg99jkfwht] {
    align-items: center;
    background: rgba(95, 131, 88, 0.08);
    border: 1px solid rgba(95, 131, 88, 0.14);
    border-radius: 12px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 18px;
    padding: 14px;
    text-align: left;
}

.identity-area h4[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-family: var(--font-serif, Merriweather, Georgia, serif);
    font-size: 1rem;
    margin: 0 0 4px;
}

.identity-area p[b-pg99jkfwht] {
    color: var(--ledger-muted);
    font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 0.91rem;
    line-height: 1.45;
    margin: 0;
}

.identity-action-button[b-pg99jkfwht] {
    align-items: center;
    background: #FFFDF9;
    border: 1px solid rgba(95, 131, 88, 0.28);
    border-radius: 999px;
    color: #5f8358;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    white-space: nowrap;
}

.identity-action-button:hover[b-pg99jkfwht] {
    background: rgba(95, 131, 88, 0.12);
}

.identity-action-button.is-current-user[b-pg99jkfwht] {
    border-color: rgba(168, 106, 98, 0.24);
    color: var(--ledger-rose);
}

.family-submodal-backdrop[b-pg99jkfwht] {
    align-items: center;
    background: rgba(40, 25, 15, 0.5);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 2300;
}

.family-submodal[b-pg99jkfwht] {
    background: #FFFDF9;
    border: 1px solid var(--ledger-border);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(75, 46, 46, 0.18);
    max-height: min(86vh, 760px);
    max-width: 560px;
    overflow: auto;
    padding: 30px;
    position: relative;
    text-align: center;
    width: min(100%, 560px);
}

.submodal-close[b-pg99jkfwht] {
    height: 34px;
    position: absolute;
    right: 16px;
    top: 14px;
    width: 34px;
}

.family-submodal h3[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 1.45rem;
    margin: 0 36px 6px;
}

.family-submodal > p[b-pg99jkfwht],
.linked-profile-note[b-pg99jkfwht],
.profile-link-area p[b-pg99jkfwht] {
    color: var(--ledger-muted);
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 440px;
}

.form-grid[b-pg99jkfwht] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
}

.form-field[b-pg99jkfwht] {
    display: grid;
    gap: 6px;
}

.form-field-full[b-pg99jkfwht] {
    grid-column: 1 / -1;
}

.form-field label[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.form-field label span[b-pg99jkfwht] {
    color: var(--ledger-muted);
    font-weight: 500;
}

.foyer-input[b-pg99jkfwht] {
    background: #FFF9F4;
    border: 1px solid var(--ledger-border-strong);
    border-radius: 9px;
    color: var(--ledger-ink);
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.foyer-input:focus[b-pg99jkfwht],
.breadcrumb-back:focus-visible[b-pg99jkfwht],
.breadcrumb-link:focus-visible[b-pg99jkfwht],
.quiet-icon-button:focus-visible[b-pg99jkfwht],
.add-relative-link:focus-visible[b-pg99jkfwht],
.relative-quiet-card:focus-visible[b-pg99jkfwht],
.primary-button:focus-visible[b-pg99jkfwht],
.secondary-button:focus-visible[b-pg99jkfwht],
.ghost-link-button:focus-visible[b-pg99jkfwht],
.ghost-danger-button:focus-visible[b-pg99jkfwht],
.identity-action-button:focus-visible[b-pg99jkfwht],
.outline-button:focus-visible[b-pg99jkfwht],
.remove-from-root-button:focus-visible[b-pg99jkfwht],
.submodal-close:focus-visible[b-pg99jkfwht] {
    outline: 2px solid rgba(139, 90, 43, 0.42);
    outline-offset: 3px;
}

.foyer-divider[b-pg99jkfwht] {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 22px 0;
}

.foyer-divider[b-pg99jkfwht]::before,
.foyer-divider[b-pg99jkfwht]::after {
    background: var(--ledger-border);
    content: "";
    height: 1px;
    width: min(42%, 180px);
}

.foyer-divider span[b-pg99jkfwht] {
    border: 1px solid var(--ledger-peach);
    border-radius: 999px;
    height: 7px;
    margin: 0 10px;
    transform: rotate(45deg);
    width: 7px;
}

.profile-link-area[b-pg99jkfwht] {
    text-align: center;
}

.profile-link-area h4[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.story-area[b-pg99jkfwht] {
    display: grid;
    gap: 10px;
}

.submodal-actions[b-pg99jkfwht] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.primary-button[b-pg99jkfwht],
.secondary-button[b-pg99jkfwht],
.ghost-link-button[b-pg99jkfwht],
.ghost-danger-button[b-pg99jkfwht],
.outline-button[b-pg99jkfwht] {
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    font-weight: 750;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
}

.primary-button[b-pg99jkfwht] {
    background: var(--ledger-peach);
    border: 1px solid var(--ledger-peach);
    color: #4B2E2E;
}

.primary-button:hover[b-pg99jkfwht] {
    background: #DFAE99;
}

.secondary-button[b-pg99jkfwht] {
    background: #FFF9F4;
    border: 1px solid var(--ledger-border);
    color: var(--ledger-muted);
}

.secondary-button:hover[b-pg99jkfwht],
.outline-button:hover[b-pg99jkfwht] {
    background: rgba(139, 90, 43, 0.07);
}

.ghost-link-button[b-pg99jkfwht],
.ghost-danger-button[b-pg99jkfwht] {
    background: transparent;
    border: 1px solid transparent;
}

.ghost-link-button[b-pg99jkfwht] {
    color: var(--ledger-brown);
}

.ghost-link-button:hover[b-pg99jkfwht] {
    background: rgba(139, 90, 43, 0.07);
}

.ghost-danger-button[b-pg99jkfwht] {
    color: var(--ledger-rose);
}

.ghost-danger-button:hover[b-pg99jkfwht] {
    background: rgba(168, 106, 98, 0.08);
}

.outline-button[b-pg99jkfwht] {
    background: transparent;
    border: 1px solid var(--ledger-border-strong);
    color: var(--ledger-brown);
}

.full-width[b-pg99jkfwht] {
    width: 100%;
}

.linked-profile-summary[b-pg99jkfwht] {
    display: grid;
    justify-items: center;
    margin: 10px 0 16px;
}

.linked-profile-summary img[b-pg99jkfwht] {
    background: #F5E4D2;
    border: 1px solid var(--ledger-border);
    border-radius: 999px;
    height: 90px;
    margin-bottom: 12px;
    width: 90px;
}

.linked-profile-summary h4[b-pg99jkfwht] {
    color: var(--ledger-ink);
    font-size: 1.2rem;
    margin: 0;
}

.linked-profile-summary p[b-pg99jkfwht] {
    color: var(--ledger-muted);
    font-style: italic;
    margin: 4px 0 0;
}

.linked-actions[b-pg99jkfwht] {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

svg[b-pg99jkfwht] {
    fill: none;
    height: 1.1em;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 1.1em;
}

@media (max-width: 560px) {
    .family-drill-panel[b-pg99jkfwht] {
        padding: 14px;
    }

    .focused-person-header[b-pg99jkfwht] {
        align-items: flex-start;
    }

    .focused-avatar[b-pg99jkfwht] {
        height: 58px;
        width: 58px;
    }

    .focused-person-header h3[b-pg99jkfwht] {
        font-size: 1.28rem;
    }

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

    .identity-area[b-pg99jkfwht] {
        grid-template-columns: 1fr;
    }

    .identity-action-button[b-pg99jkfwht] {
        width: 100%;
        white-space: normal;
    }

    .submodal-actions[b-pg99jkfwht] {
        flex-direction: column-reverse;
    }

    .submodal-actions > button[b-pg99jkfwht] {
        width: 100%;
    }
}
/* /Components/FamilyTreeEditor.razor.rz.scp.css */
.family-member-editor[b-1ievwzdldc] {
    background: #fff8f4;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin: 8px 0;
    box-shadow: 0 1px 4px 0 rgba(120, 80, 60, 0.08);
    font-family: var(--font-sans, 'Inter', sans-serif);
    max-width: 100%;
}

.family-member-editor > .editor-section[b-1ievwzdldc] {
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #ffe6d6;
}

.family-member-editor > .editor-section:last-child[b-1ievwzdldc] {
    border-bottom: none;
}

.editor-section > b[b-1ievwzdldc] {
    color: #bb6535; /* Warm brown accent for headers */
    font-size: 1.08em;
}

.input-minimal[b-1ievwzdldc] {
    margin-top: 8px;
    margin-right: 8px;
    border: none;
    border-radius: 8px;
    padding: 0.3em 0.8em;
    background: #fffaf7;
    box-shadow: 0 1px 3px 0 #ffe6d699;
    font-size: 1em;
    min-width: 150px;
}

.input-minimal:focus[b-1ievwzdldc] {
    outline: 1.5px solid #ffb98a;
}

.label-subtle[b-1ievwzdldc] {
    color: #b2886a;
    margin-left: 6px;
    font-size: 0.95em;
}

.label-id[b-1ievwzdldc] {
    color: #bbb;
    margin-left: 10px;
    font-size: 0.85em;
}

.btn-small[b-1ievwzdldc] {
    margin-top: 7px;
    margin-right: 8px;
    padding: 0.28em 0.88em;
    border-radius: 8px;
    border: none;
    background: #ffe6d6;
    color: #bb6535;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    font-size: 0.95em;
    box-shadow: 0 0.5px 2px 0 #ffe6d699;
}

.btn-small:hover[b-1ievwzdldc] {
    background: #ffd3b7;
    color: #a65322;
}

/* Button variants for different actions */
.family-member-editor .btn-link-action[b-1ievwzdldc] {
    background: #E8DFCF;
    color: #6B5D4D;
}

.family-member-editor .btn-link-action:hover[b-1ievwzdldc] {
    background: #DDD3C0;
    color: #4A3F35;
}

.family-member-editor .btn-unlink-action[b-1ievwzdldc] {
    background: #F5D5D0;
    color: #A63A3A;
}

.family-member-editor .btn-unlink-action:hover[b-1ievwzdldc] {
    background: #EDBFB8;
    color: #8F2C2C;
}

.family-member-editor .btn-user-action[b-1ievwzdldc] {
    background: #D8E8EF;
    color: #4A6B7A;
}

.family-member-editor .btn-user-action:hover[b-1ievwzdldc] {
    background: #C5DBE5;
    color: #3A5A6A;
}

.family-member-editor .btn-unmark-action[b-1ievwzdldc] {
    background: #E8D8EF;
    color: #6A4A7A;
}

.family-member-editor .btn-unmark-action:hover[b-1ievwzdldc] {
    background: #DCC8E5;
    color: #5A3A6A;
}

.family-member-editor .btn-create-loved-one-action[b-1ievwzdldc] {
    background: #FFF3E0;
    color: #C17B2A;
}

.family-member-editor .btn-create-loved-one-action:hover[b-1ievwzdldc] {
    background: #FFE0B2;
    color: #A66000;
}

small[b-1ievwzdldc] {
    color: #b2886a;
}


.family-member-editor .family-member-editor[b-1ievwzdldc] {
    margin-left: 2.0rem;
    margin-top: 0.6rem;
    background: #fff1e8;
    box-shadow: none;
    border: 1px dashed #ffd3b7;
    border-left: 3px solid #ffd3b7;
    padding-left: 1rem;
}

.family-member-editor .family-member-editor .family-member-editor[b-1ievwzdldc] {
    margin-left: 1rem;
    background: #ffeee6;
    border: 1px dotted #ffc299;
}

.family-member-container[b-1ievwzdldc] {
    position: relative;
    margin-bottom: 0.5rem;
}

.btn-remove[b-1ievwzdldc] {
    background: #F5D5D0;
    color: #A63A3A;
    margin-left: 0.5rem;
    padding: 0.2em 0.6em;
    font-size: 0.85em;
}

.btn-remove:hover[b-1ievwzdldc] {
    background: #EDBFB8;
    color: #8F2C2C;
}

.depth-limit-message[b-1ievwzdldc] {
    padding: 0.5rem;
    background: #f0f0f0;
    border-radius: 8px;
    margin: 0.25rem 0;
    color: #666;
    font-style: italic;
}

.depth-limit-message small[b-1ievwzdldc] {
    color: #888;
}

.year-chip[b-1ievwzdldc] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f4efe9;
    color: #6b5a53;
    font-size: 12px;
    margin-bottom: 6px;
    box-shadow: 0 0.5px 1px rgba(0,0,0,0.04);
}

/* --- Member header & badges --- */
.member-header[b-1ievwzdldc] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.member-header > b[b-1ievwzdldc] {
    font-size: 1.05em;
}

.gender-icon[b-1ievwzdldc] {
    font-size: 1.1em;
}

.gender-male[b-1ievwzdldc] {
    color: #6B8FA3;
}

.gender-female[b-1ievwzdldc] {
    color: #C47A8A;
}

.gender-unknown[b-1ievwzdldc] {
    font-size: 0.85em;
}

.relationship-badge[b-1ievwzdldc] {
    font-size: 0.85em;
    background: #fff0e6;
    padding: 2px 8px;
    border-radius: 10px;
    color: #bb6535;
}

.linked-badge[b-1ievwzdldc] {
    padding: 2px 8px;
    background-color: #6B8E6B;
    color: white;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 600;
    white-space: nowrap;
}

.user-badge[b-1ievwzdldc] {
    padding: 2px 8px;
    background-color: #6B8FA3;
    color: white;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 600;
    white-space: nowrap;
}

.member-dates[b-1ievwzdldc] {
    font-size: 0.88em;
    color: #b2886a;
    margin-bottom: 6px;
}

.no-dates[b-1ievwzdldc] {
    font-style: italic;
}

.member-actions[b-1ievwzdldc] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.edit-row[b-1ievwzdldc] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.type-display[b-1ievwzdldc] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.type-label[b-1ievwzdldc] {
    font-size: 0.9em;
    color: #8B7355;
    min-width: fit-content;
}

.input-readonly[b-1ievwzdldc] {
    background-color: #FAF3E5;
    min-width: 140px;
}

.section-emoji[b-1ievwzdldc] {
    margin-right: 4px;
}

.grandparent-selector[b-1ievwzdldc] {
    margin-top: 10px;
}

.grandparent-type-label[b-1ievwzdldc] {
    display: block;
    margin-bottom: 5px;
    color: #6B5D4D;
    font-size: 0.9em;
}

.grandparent-type-select[b-1ievwzdldc] {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #e8d5c0;
    border-radius: 8px;
    background: #fffaf7;
    color: #3A3228;
    font-size: 0.95em;
}

.family-member-editor.readonly[b-1ievwzdldc] {
    background: #fffaf7;
    border: 1px solid #ffe6d6;
    box-shadow: none;
}

.family-member-editor.readonly .input-minimal[b-1ievwzdldc],
.family-member-editor.readonly .btn-small[b-1ievwzdldc] {
    display: none; /* hide inputs and buttons in readonly contexts if you wrap with class */
}

/* Or just dim the inputs if you still want to show them */
.family-member-editor.readonly .input-minimal[b-1ievwzdldc] {
    background: #fff5ee;
    box-shadow: none;
    color: #9c7a63;
}

.remove-confirmation-overlay[b-1ievwzdldc] {
    position: fixed;
    inset: 0;
    background: rgba(30, 20, 10, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
}

.remove-confirmation-dialog[b-1ievwzdldc] {
    background: linear-gradient(135deg, #FDF8F0, #FAF3E5);
    border: 2px solid #e8d5c0;
    border-radius: 16px;
    padding: 24px 32px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(60, 40, 20, 0.2);
}

.remove-confirmation-dialog p[b-1ievwzdldc] {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 1.1rem;
    color: #3A3228;
    margin-bottom: 20px;
}

.remove-confirmation-actions[b-1ievwzdldc] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-confirm-cancel[b-1ievwzdldc] {
    background: transparent;
    border: 1.5px solid #c4a882;
    color: #6B5D4D;
    border-radius: 20px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-confirm-remove[b-1ievwzdldc] {
    background: linear-gradient(135deg, #d4564e, #b8423a);
    border: none;
    color: white;
    border-radius: 20px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 0.9rem;
}


.tree-tab .tree-toolbar[b-1ievwzdldc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.tree-tab .section-title[b-1ievwzdldc] {
    color: #bb6535;
    font-weight: 700;
}

.tree-tab .btn-link[b-1ievwzdldc] {
    background: transparent;
    border: none;
    color: #a65322;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
}

.tree-tab .btn-link:hover[b-1ievwzdldc] {
    text-decoration: underline;
}

/* Optional compact list items for the link modal */
.person-list .person-row[b-1ievwzdldc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .2rem;
    border-bottom: 1px dashed #ffe6d6;
}

.person-list .person-name[b-1ievwzdldc] {
    color: #6b4a43;
    font-weight: 600;
}

.person-list .person-year[b-1ievwzdldc] {
    color: #b2886a;
    font-size: 12px;
    margin-left: 8px;
}

/* Accordion / Collapsible Section Styles */
.section-header[b-1ievwzdldc] {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: -2px -4px;
    border-radius: 8px;
    transition: background-color 0.2s, opacity 0.2s;
    font-weight: 600;
}

.section-header:hover[b-1ievwzdldc] {
    background-color: rgba(187, 101, 53, 0.08);
}

.collapse-icon[b-1ievwzdldc] {
    display: inline-block;
    font-size: 0.75em;
    color: #bb6535;
    transition: transform 0.2s ease;
    min-width: 12px;
    font-weight: bold;
}

.section-count[b-1ievwzdldc] {
    font-size: 0.85em;
    color: #b2886a;
    font-weight: 500;
    margin-left: 4px;
}

.section-content[b-1ievwzdldc] {
    margin-top: 8px;
}

/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 768px) {
    .family-member-editor[b-1ievwzdldc] {
        padding: 0.7rem 0.9rem;
        margin: 6px 0;
        border-radius: 10px;
    }

    .family-member-editor > .editor-section[b-1ievwzdldc] {
        margin-bottom: 0.6rem;
        padding-bottom: 0.5rem;
    }

    /* Reduce nested indentation on mobile */
    .family-member-editor .family-member-editor[b-1ievwzdldc] {
        margin-left: 0.8rem;
        padding: 0.6rem 0.8rem;
    }

    .family-member-editor .family-member-editor .family-member-editor[b-1ievwzdldc] {
        margin-left: 0.5rem;
        padding: 0.5rem 0.6rem;
    }

    /* Make section content less indented */
    .section-content[b-1ievwzdldc] {
        margin-top: 6px;
    }

    /* Responsive input fields */
    .input-minimal[b-1ievwzdldc] {
        min-width: 100px;
        font-size: 0.95em;
        padding: 0.35em 0.7em;
        margin-top: 6px;
    }

    /* Responsive buttons — improved touch targets */
    .btn-small[b-1ievwzdldc] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.88em;
        padding: 0.32em 0.75em;
        margin-top: 6px;
        margin-right: 6px;
    }

    .section-header[b-1ievwzdldc] {
        min-height: 44px;
        padding: 8px 8px;
    }

    .grandparent-type-select[b-1ievwzdldc] {
        min-height: 44px;
    }

    /* Stack badges vertically if needed */
    .editor-section > div:first-child[b-1ievwzdldc] {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Smaller font sizes */
    .editor-section > b[b-1ievwzdldc] {
        font-size: 1em;
    }

    small[b-1ievwzdldc] {
        font-size: 0.85em;
    }

    .label-subtle[b-1ievwzdldc] {
        font-size: 0.88em;
    }
}

@media (max-width: 480px) {
    .family-member-editor[b-1ievwzdldc] {
        padding: 0.6rem 0.75rem;
        margin: 4px 0;
    }

    .family-member-editor .family-member-editor[b-1ievwzdldc] {
        margin-left: 0.5rem;
        padding: 0.5rem 0.6rem;
    }

    .input-minimal[b-1ievwzdldc] {
        width: 100%;
        margin-right: 0;
        font-size: 0.9em;
    }

    .btn-small[b-1ievwzdldc] {
        font-size: 0.85em;
        padding: 0.3em 0.65em;
    }

    .section-content[b-1ievwzdldc] {
        margin-left: 10px;
    }
}

/* ========== NIGHT MODE ========== */
:global(body.night-mode) .family-member-editor[b-1ievwzdldc] {
    background: #2A2420;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

:global(body.night-mode) .family-member-editor .family-member-editor[b-1ievwzdldc] {
    background: #322C27;
    border-color: #4A3F38;
}

:global(body.night-mode) .family-member-editor .family-member-editor .family-member-editor[b-1ievwzdldc] {
    background: #3A342E;
    border-color: #544A42;
}

:global(body.night-mode) .editor-section[b-1ievwzdldc] {
    border-bottom-color: #4A3F38;
}

:global(body.night-mode) .member-header > b[b-1ievwzdldc] {
    color: #E8DDD0;
}

:global(body.night-mode) .member-dates[b-1ievwzdldc] {
    color: #C4A882;
}

:global(body.night-mode) .input-minimal[b-1ievwzdldc] {
    background: #3A342E;
    color: #E8DDD0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

:global(body.night-mode) .input-minimal:focus[b-1ievwzdldc] {
    outline-color: #C49A6C;
}

:global(body.night-mode) .btn-small[b-1ievwzdldc] {
    background: #4A3F38;
    color: #C49A6C;
}

:global(body.night-mode) .btn-small:hover[b-1ievwzdldc] {
    background: #5A4F48;
    color: #D4AA7C;
}

:global(body.night-mode) .section-header:hover[b-1ievwzdldc] {
    background-color: rgba(196, 154, 108, 0.1);
}

:global(body.night-mode) .collapse-icon[b-1ievwzdldc] {
    color: #C49A6C;
}

:global(body.night-mode) .section-count[b-1ievwzdldc] {
    color: #A08060;
}

:global(body.night-mode) .relationship-badge[b-1ievwzdldc] {
    background: #4A3828;
    color: #C49A6C;
}

:global(body.night-mode) .linked-badge[b-1ievwzdldc] {
    background: #3A5A3A;
}

:global(body.night-mode) .user-badge[b-1ievwzdldc] {
    background: #3A4A5A;
}

:global(body.night-mode) .year-chip[b-1ievwzdldc] {
    background: #3A342E;
    color: #C4A882;
}

:global(body.night-mode) .depth-limit-message[b-1ievwzdldc] {
    background: #3A342E;
    color: #A08060;
}

:global(body.night-mode) .btn-remove[b-1ievwzdldc] {
    background: #4A2828;
    color: #E08080;
}

:global(body.night-mode) .btn-remove:hover[b-1ievwzdldc] {
    background: #5A3030;
    color: #F09090;
}

:global(body.night-mode) .remove-confirmation-dialog[b-1ievwzdldc] {
    background: linear-gradient(135deg, #2A2420, #322C27);
    border-color: #4A3F38;
}

:global(body.night-mode) .remove-confirmation-dialog p[b-1ievwzdldc] {
    color: #E8DDD0;
}

:global(body.night-mode) .btn-confirm-cancel[b-1ievwzdldc] {
    border-color: #6B5D4D;
    color: #C4A882;
}

:global(body.night-mode) .btn-confirm-remove[b-1ievwzdldc] {
    background: linear-gradient(135deg, #8B3030, #6B2020);
}

:global(body.night-mode) .grandparent-type-select[b-1ievwzdldc] {
    background: #3A342E;
    color: #E8DDD0;
    border-color: #4A3F38;
}

:global(body.night-mode) .input-readonly[b-1ievwzdldc] {
    background-color: #3A342E;
}

:global(body.night-mode) .type-label[b-1ievwzdldc],
:global(body.night-mode) .grandparent-type-label[b-1ievwzdldc] {
    color: #C4A882;
}

:global(body.night-mode) .tree-tab .section-title[b-1ievwzdldc] {
    color: #C49A6C;
}

:global(body.night-mode) .tree-tab .btn-link[b-1ievwzdldc] {
    color: #C49A6C;
}

:global(body.night-mode) .tree-tab .tree-loading[b-1ievwzdldc],
:global(body.night-mode) .tree-tab .tree-empty[b-1ievwzdldc] {
    color: #A08060;
}

/* --- Mini avatar for linked family members --- */
.family-avatar-link[b-1ievwzdldc],
.family-avatar-placeholder[b-1ievwzdldc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #D4A574;
    box-shadow: 0 1px 4px rgba(180, 130, 80, 0.2);
    transition: all 0.2s ease;
}

.family-avatar-link[b-1ievwzdldc] {
    cursor: pointer;
    text-decoration: none;
}

.family-avatar-link:hover[b-1ievwzdldc] {
    border-color: #C49A6C;
    box-shadow: 0 2px 8px rgba(180, 130, 80, 0.35), 0 0 0 3px rgba(212, 165, 116, 0.15);
    transform: scale(1.08);
}

.family-avatar-img[b-1ievwzdldc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.family-avatar-placeholder[b-1ievwzdldc] {
    opacity: 0.7;
    cursor: default;
}

/* /Components/FavoriteThemesRow.razor.rz.scp.css */
/*
 * FavoriteThemesRow - "Dina närmaste" (Your Inner Circle)
 * 
 * Design Philosophy:
 * - Circular avatars like Instagram Stories (warm, familiar)
 * - Soft golden ring = a gentle embrace, like a warm hug
 * - Pulse animation on hover = establishing a bond
 * - "Luft = Lyx" - generous spacing for calm, premium feel
 */

.favorite-themes-row[b-qschgsu6n8] {
    width: 100%;
    padding: 1.5rem 0;
    margin-bottom: 1rem;
}

.favorites-title[b-qschgsu6n8] {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: #5A4035;
    margin-bottom: 1.25rem;
    text-align: left;
    letter-spacing: 0.02em;
}

.favorites-avatars[b-qschgsu6n8] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Individual avatar item - button for accessibility */
.favorite-avatar-item[b-qschgsu6n8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.2s ease;
    min-width: 72px;
}

.favorite-avatar-item:hover[b-qschgsu6n8] {
    transform: translateY(-3px);
}

.favorite-avatar-item:focus-visible[b-qschgsu6n8] {
    outline: 2px solid #CE8568;
    outline-offset: 4px;
    border-radius: 50%;
}

/* Avatar ring - the warm embrace */
.avatar-ring[b-qschgsu6n8] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #F5D5C8 0%, #E8C4B0 50%, #D4A98C 100%);
    box-shadow: 
        0 4px 12px rgba(206, 133, 104, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    position: relative;
}

.favorite-avatar-item:hover .avatar-ring[b-qschgsu6n8] {
    box-shadow: 
        0 6px 20px rgba(206, 133, 104, 0.35),
        0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* Pulse animation on hover - "establishing a bond" */
.favorite-avatar-item:hover .avatar-ring[b-qschgsu6n8]::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(206, 133, 104, 0.4);
    animation: pulse-ring-b-qschgsu6n8 1.5s ease-out infinite;
}

@keyframes pulse-ring-b-qschgsu6n8 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Avatar image */
.avatar-image[b-qschgsu6n8] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #FAF5F0;
}

/* Avatar name label */
.avatar-name[b-qschgsu6n8] {
    /* inherited font-sans */
    font-size: 0.8rem;
    color: #6B5344;
    font-weight: 500;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Add button styling */
.add-favorite .add-ring[b-qschgsu6n8] {
    background: linear-gradient(135deg, #FAF5F0 0%, #F0E6DC 100%);
    border: 2px dashed #D4C4B4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.add-favorite:hover .add-ring[b-qschgsu6n8] {
    background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
    border-color: #CE8568;
    border-style: solid;
}

.add-icon[b-qschgsu6n8] {
    font-size: 1.75rem;
    font-weight: 300;
    color: #9B8577;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.add-favorite:hover .add-icon[b-qschgsu6n8] {
    color: #CE8568;
    transform: rotate(90deg);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .favorite-themes-row[b-qschgsu6n8] {
        padding: 1rem 0;
    }
    
    .favorites-title[b-qschgsu6n8] {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .favorites-avatars[b-qschgsu6n8] {
        gap: 1rem;
        justify-content: center;
    }
    
    .favorite-avatar-item[b-qschgsu6n8] {
        min-width: 64px;
    }
    
    .avatar-ring[b-qschgsu6n8] {
        width: 56px;
        height: 56px;
    }
    
    .avatar-name[b-qschgsu6n8] {
        font-size: 0.75rem;
        max-width: 64px;
    }
}

/* Night mode support */
:global(body.night-mode) .favorites-title[b-qschgsu6n8] {
    color: #E8D8D0;
}

:global(body.night-mode) .avatar-ring[b-qschgsu6n8] {
    background: linear-gradient(135deg, #5A4A3A 0%, #4A3A2A 50%, #3A2A1A 100%);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

:global(body.night-mode) .avatar-name[b-qschgsu6n8] {
    color: #C8B8A8;
}

:global(body.night-mode) .add-ring[b-qschgsu6n8] {
    background: linear-gradient(135deg, #3A3028 0%, #2A2018 100%);
    border-color: #6A5A4A;
}

:global(body.night-mode) .add-icon[b-qschgsu6n8] {
    color: #8A7A6A;
}
/* /Components/FeedbackModal.razor.rz.scp.css */
/* DescribeLovedOneInitialStep.razor.css (or your global modal styles) */

/* SHARED MODAL OVERLAY AND BASE CONTENT STYLES (FROM YOUR PROVIDED CSS) */
.modal-overlay[b-vvzedvm70v] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 5000;
}

    .modal-overlay.visible[b-vvzedvm70v] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

.modal-content[b-vvzedvm70v] { /* Base for all modals */
    position: relative; /* <<<< CRITICAL FOR ::before PSEUDO-ELEMENTS */
    padding: 30px 45px;
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002; /* Higher than overlay */
}

.modal-overlay.visible .modal-content[b-vvzedvm70v] {
    transform: scale(1);
}




.spinner-inline-light[b-vvzedvm70v] {
    width: 0.9em;
    height: 0.9em;
    border: 2px solid rgba(var(--text-rgb, 75, 46, 46),0.3);
    border-top-color: var(--text);
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-vvzedvm70v 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: -0.1em;
}

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






/* --- Feedback Modal Customization --- */
.modal-content.feedback-modal-content[b-vvzedvm70v] {
    padding: 0;
    border-radius: 20px;
    max-width: 430px; /* a bit narrower, feels lighter for feedback */
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 35px rgba(100, 80, 70, 0.13);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-image: url('CreateLovedOneTopBackground.960.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Top bar same as before, but optionally slightly lighter for feedback modal */
.feedback-modal-top-bar[b-vvzedvm70v] {
    background: var(--card-content-bg, #f9ede3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--soft-border, #f0e5da);
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.modal-logo-area-top .page-logo-simple-top[b-vvzedvm70v] {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    opacity: 0.82;
    text-decoration: none;
}

.modal-close-icon-button[b-vvzedvm70v] {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #bca47c;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    transition: color 0.18s;
}

    .modal-close-icon-button:hover[b-vvzedvm70v] {
        color: var(--accent, #e2a67b);
    }

.feedback-main-content-modal-inner[b-vvzedvm70v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.4rem 2rem 1.4rem;
    background: rgba(255,255,255,0.81);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: var(--soft-border, #f0e5da);
}

.feedback-modal-title[b-vvzedvm70v] {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text, #7d6552);
    margin-bottom: 0.5rem;
}

.feedback-modal-subtitle[b-vvzedvm70v] {
    font-size: 1rem;
    color: var(--text-light, #ad9d8d);
    margin-bottom: 1.15rem;
    text-align: left;
   
}

.feedback-textarea[b-vvzedvm70v] {
    width: 100%;
    min-height: 400px;
    border-radius: 9px;
    border: 1px solid #e7dbd1;
    background: #fff;
    color: var(--text, #7d6552);
    font-size: 1rem;
    margin-bottom: 1.1rem;
    padding: 0.8rem;
    resize: vertical;
    font-family: inherit;
}

.feedback-submit-error[b-vvzedvm70v] {
    width: 100%;
    margin: -0.35rem 0 0.9rem;
    color: #8f3f2f;
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: left;
}

.btn-continue-feedback-modal[b-vvzedvm70v] {
    background-color: var(--peach, #ffd7c2);
    color: var(--text, #7d6552);
    padding: 0.7rem 1.6rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin: 0.2rem 0 0 0;
    transition: background-color 0.18s;
}

    .btn-continue-feedback-modal:disabled[b-vvzedvm70v] {
        background-color: #e0d8d1;
        color: #b6a393;
        cursor: wait;
    }

    .btn-continue-feedback-modal:not(:disabled):hover[b-vvzedvm70v] {
        background-color: var(--accent, #e2a67b);
    }

.feedback-thankyou[b-vvzedvm70v] {
    font-size: 1.2rem;
    margin: 2rem 0;
}


/* /Components/FloatingHostButton.razor.rz.scp.css */
/* FloatingHostButton - Floating Granny FAB */

.floating-host-container[b-gl2m8tsccc] {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 999; /* Above page content, below modal overlays/backdrops. */
    display: flex;
    align-items: center;
    gap: 12px;
    
    /* Smooth transitions for visibility */
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

/* Hidden state - uses opacity for smooth fade */
.floating-host--hidden[b-gl2m8tsccc] {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* The FAB button */
.floating-host-btn[b-gl2m8tsccc] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #FFE5D0;
    background: linear-gradient(135deg, #FFF9F6 0%, #FFF2EC 100%);
    box-shadow: 
        0 4px 15px rgba(83, 51, 43, 0.18),
        0 2px 6px rgba(83, 51, 43, 0.1);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Smooth hover transition */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.floating-host-btn:hover[b-gl2m8tsccc] {
    transform: scale(1.08);
    box-shadow: 
        0 6px 20px rgba(83, 51, 43, 0.22),
        0 3px 8px rgba(83, 51, 43, 0.12);
    border-color: #FFD4C0;
}

.floating-host-btn:active[b-gl2m8tsccc] {
    transform: scale(0.98);
}

.floating-host-btn:focus[b-gl2m8tsccc] {
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(255, 229, 208, 0.5),
        0 4px 15px rgba(83, 51, 43, 0.18);
}

.floating-heart-weather-invite[b-gl2m8tsccc] {
    border: 1px solid rgba(255, 199, 182, 0.72);
    border-radius: 999px;
    background: rgba(255, 249, 246, 0.96);
    color: #4b2e2e;
    box-shadow:
        0 8px 24px rgba(83, 51, 43, 0.12),
        0 2px 8px rgba(83, 51, 43, 0.08);
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 9px 13px;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.floating-heart-weather-invite:hover[b-gl2m8tsccc] {
    transform: translateY(-1px);
    border-color: rgba(255, 170, 146, 0.9);
    box-shadow:
        0 10px 28px rgba(83, 51, 43, 0.15),
        0 3px 10px rgba(83, 51, 43, 0.1);
}

.floating-heart-weather-invite:active[b-gl2m8tsccc] {
    transform: translateY(0);
}

.floating-heart-weather-invite:focus[b-gl2m8tsccc] {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 229, 208, 0.55),
        0 8px 24px rgba(83, 51, 43, 0.12);
}

/* Granny avatar image */
.floating-host-avatar[b-gl2m8tsccc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

/* Tooltip speech bubble - desktop only */
.floating-host-tooltip[b-gl2m8tsccc] {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    
    background: rgba(255, 255, 255, 0.98);
    color: #4b2e2e;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(83, 51, 43, 0.15);
    white-space: nowrap;
    
    /* Initially hidden, show on hover */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Tooltip arrow pointing right */
.floating-host-tooltip[b-gl2m8tsccc]::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 2px -2px 4px rgba(83, 51, 43, 0.08);
}

/* Show tooltip on hover (desktop only) */
.floating-host-container:hover .floating-host-tooltip[b-gl2m8tsccc] {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
    .floating-host-container[b-gl2m8tsccc] {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        right: calc(24px + env(safe-area-inset-right, 0px));
    }
    
    .floating-host-btn[b-gl2m8tsccc] {
        width: 56px;
        height: 56px;
    }

    .floating-heart-weather-invite[b-gl2m8tsccc] {
        font-size: 0.82rem;
        max-width: 136px;
        padding: 8px 11px;
        text-align: center;
        white-space: normal;
    }
    
    /* Hide tooltip on mobile */
    .floating-host-tooltip[b-gl2m8tsccc] {
        display: none;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .floating-host-container[b-gl2m8tsccc] {
        transition: none;
    }
    
    .floating-host-btn[b-gl2m8tsccc] {
        transition: none;
    }
    
    .floating-host-tooltip[b-gl2m8tsccc] {
        transition: none;
    }
    
    /* For reduced motion, use instant show/hide */
    .floating-host--hidden[b-gl2m8tsccc] {
        opacity: 0;
        transform: none;
    }
}

/* ===== GENTLE FLOATING ANIMATION (optional) ===== */
@keyframes gentleFloat-b-gl2m8tsccc {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Apply gentle float animation when visible (can be enabled if desired) */
/* 
.floating-host-container:not(.floating-host--hidden) .floating-host-btn {
    animation: gentleFloat 3s ease-in-out infinite;
}
*/

/* /Components/Footer.razor.rz.scp.css */
/* Footer.razor.css - Styles for Footer component */

[b-6ardpme3v3] .main-footer {
    width: calc(100% - 280px);
    margin-left: 280px;
    background-color: #FAF3E5;
    padding: 60px 0 30px 0;
    margin-top: 80px;
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
}

[b-6ardpme3v3] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

[b-6ardpme3v3] .footer-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
}

[b-6ardpme3v3] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

[b-6ardpme3v3] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-6ardpme3v3] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-6ardpme3v3] .footer-logo a {
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
    color: #4B2E2E;
    text-decoration: none;
}

[b-6ardpme3v3] .footer-wordmark {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 1.85rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    color: currentColor;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

[b-6ardpme3v3] .footer-wordmark-accent {
    color: #f0a9b3;
}

[b-6ardpme3v3] .footer-tagline {
    font-size: 1.1rem;
    color: #4A4540;
    margin: 0;
}

[b-6ardpme3v3] .footer-farewell {
    font-size: 0.95rem;
    color: #7a6054;
    margin: 10px 0 0 0;
    font-style: italic;
}

[b-6ardpme3v3] .footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 40px;
}

[b-6ardpme3v3] .footer-section {
    padding: 0 15px;
}

[b-6ardpme3v3] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-6ardpme3v3] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-6ardpme3v3] .footer-section ul li {
    margin-bottom: 10px;
}

[b-6ardpme3v3] .footer-section ul li a {
    color: #4A4540;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-6ardpme3v3] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

[b-6ardpme3v3] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    gap: 20px;
}

[b-6ardpme3v3] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-6ardpme3v3] .footer-languages a {
    color: #4A4540;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-6ardpme3v3] .footer-languages a:hover,
[b-6ardpme3v3] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

[b-6ardpme3v3] .footer-legal-origin {
    text-align: right;
}

[b-6ardpme3v3] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
}

[b-6ardpme3v3] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

@media (max-width: 992px) {
    [b-6ardpme3v3] .main-footer {
        margin-left: 0 !important;
    }
}

@media (max-width: 1024px) {
    [b-6ardpme3v3] .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    [b-6ardpme3v3] .footer-section {
        text-align: center;
    }

    [b-6ardpme3v3] .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-6ardpme3v3] .footer-languages {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        width: 100%;
    }

    [b-6ardpme3v3] .footer-legal-origin {
        text-align: center;
        width: 100%;
    }

    [b-6ardpme3v3] .footer-copyright {
        text-align: center;
    }
}
/* /Components/ForgotPasswordModal.razor.rz.scp.css */
/* ========================================= */
/*     Forgot Password Modal Styling         */
/* ========================================= */

/* --- Modal Overlay (Shared - Assume defined elsewhere) --- */
/* .modal-overlay { ... } */
/* .modal-overlay.visible { ... } */

/* --- Modal Overlay (Shared?) --- */
/* If this is shared with other modals, keep it separate */
.modal-overlay[b-p8ifoutuvd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55); /* Dim overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 9999;
}

.modal-overlay.visible[b-p8ifoutuvd] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}


.modal-content.forgot-password-modal[b-p8ifoutuvd] {
    position: relative; /* Needed for absolute positioned buttons and z-index */
    background-color: rgb(255, 242, 236); /* Clean white background */
    padding: 25px 30px 30px 30px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    overflow: hidden; /* Still good practice */
    /* --- ADD Z-INDEX --- */
    z-index: 10000; /* Ensures content is above overlay and shared chrome */
    /* ----------------- */
}

.modal-overlay.visible .modal-content.forgot-password-modal[b-p8ifoutuvd] {
    transform: scale(1);
}

/* Close Button (Consistent Style) */
.forgot-password-modal .modal-close-btn[b-p8ifoutuvd] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem; /* Match target size */
    font-weight: 400;
    color: #AEAEB2; /* Match target color */
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    transition: color 0.2s ease;
    z-index: 10;
}

    .forgot-password-modal .modal-close-btn:hover[b-p8ifoutuvd] {
        color: #6C6C70;
    }

/* --- Header Elements --- */

/* Title */
.forgot-password-modal h2[b-p8ifoutuvd] {
    font-size: 1.6rem; /* Match target */
    font-weight: 600;
    color: #1D1D1F; /* Match target color */
    margin-top: 5px; /* Adjust spacing */
    margin-bottom: 10px; /* Space below title */
    text-align: center;
}

/* Subtext / Description */
.forgot-password-modal p[b-p8ifoutuvd] {
    font-size: 0.95rem;
    color: #6C6C70; /* Match target subtext color */
    margin-bottom: 25px; /* Space before input */
    line-height: 1.45; /* Slightly more line height */
    text-align: center;
    padding: 0 10px; /* Add padding if text wraps */
}

.forgot-password-modal h2[b-p8ifoutuvd],
.forgot-password-modal p[b-p8ifoutuvd] {
    position: relative; /* Can help ensure text is above background elements */
    z-index: 2; /* Above potential ::before */
    /* ... other styles ... */
}


/* --- Form Elements --- */

.forgot-password-modal .form-input[b-p8ifoutuvd] {
    width: 100%;
    padding: 14px 16px; /* Match target padding */
    font-size: 1rem;
    border-radius: 12px; /* Match target rounding */
    border: 1px solid #D1D1D6; /* Match target border color */
    margin-bottom: 20px; /* Space below input */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    background-color: #F5F5F7; /* Light grey background like target */
}

    .forgot-password-modal .form-input[b-p8ifoutuvd]::placeholder {
        color: #8A8A8E; /* Match target placeholder color */
    }

    .forgot-password-modal .form-input:focus[b-p8ifoutuvd] {
        border-color: #ff9d7e; /* Your focus color */
        background-color: #fff; /* White background on focus maybe? */
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.25);
    }

/* Error Message Styling */
.forgot-password-modal .modal-error-message[b-p8ifoutuvd] {
    color: var(--error-color, #dc3545);
    font-size: 0.85rem;
    margin-top: -10px;
    margin-bottom: 15px;
    text-align: left;
}


/* Submit Button */
.forgot-password-modal .btn-submit[b-p8ifoutuvd] {
    width: 100%;
    padding: 14px;
    border-radius: 12px; /* Match target */
    background-color: #ff9d7e; /* Your action color */
    color: white;
    font-size: 1rem;
    font-weight: 600; /* Match target */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

    .forgot-password-modal .btn-submit:hover:not(:disabled)[b-p8ifoutuvd] {
        background-color: #ff855f;
    }

    /* Disabled state */
    .forgot-password-modal .btn-submit:disabled[b-p8ifoutuvd],
    .forgot-password-modal .form-input:disabled[b-p8ifoutuvd] {
        opacity: 0.7; /* Match previous disabled style */
        cursor: not-allowed;
    }

/* Spinner (Reuse definition if global) */
.forgot-password-modal .spinner[b-p8ifoutuvd] {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    border-top-color: #fff;
    width: 1em;
    height: 1em;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Button text alignment with spinner */
.forgot-password-modal .btn-submit span[b-p8ifoutuvd] {
    vertical-align: middle;
}


/* --- Success State Styling --- */

.forgot-password-modal .success-title[b-p8ifoutuvd] {
    color: var(--success-color, #1D1D1F); /* Use standard text color for success title? */
    font-weight: 600;
    font-size: 1.5rem; /* Match H2 */
    margin-bottom: 10px;
}

/* Style the close button on success screen */
.forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background-color: #ff9d7e; /* Match submit style */
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 25px; /* Space above button */
}

    .forgot-password-modal .btn-close-success:hover[b-p8ifoutuvd] {
        background-color: #ff855f;
    }

/* Adjust success message text positioning/spacing */
.forgot-password-modal h2.success-title + p[b-p8ifoutuvd] {
    margin-bottom: 20px;
    text-align: center;
}

.forgot-password-modal .form-input[b-p8ifoutuvd],
.forgot-password-modal .modal-error-message[b-p8ifoutuvd],
.forgot-password-modal .btn-submit[b-p8ifoutuvd] {
    position: relative;
    z-index: 2;
    /* ... other styles ... */
}

/* --- Success State Styling --- */
.forgot-password-modal .success-title[b-p8ifoutuvd],
.forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
    position: relative;
    z-index: 2;
    /* ... other styles ... */
}


/* --- Loading Indicator / Spinner --- */
/* These usually overlay content, so higher z-index might be needed if
   it appears *within* the modal content div but should cover inputs */
.forgot-password-modal .loading-indicator[b-p8ifoutuvd] {
    position: relative; /* Or absolute if covering */
    z-index: 5;
    /* ... other styles ... */
}

@media (max-width: 768px) {
    .modal-overlay[b-p8ifoutuvd] {
        align-items: stretch;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
        background: #fff9f5;
    }

    .modal-content.forgot-password-modal[b-p8ifoutuvd] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: #fff9f5;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
        box-sizing: border-box;
    }

    .modal-overlay.visible .modal-content.forgot-password-modal[b-p8ifoutuvd] {
        transform: none;
    }

    .forgot-password-modal .modal-close-btn[b-p8ifoutuvd] {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.7rem;
        color: #8f7d75;
    }

    .forgot-password-modal h2[b-p8ifoutuvd],
    .forgot-password-modal p[b-p8ifoutuvd],
    .forgot-password-modal .form-input[b-p8ifoutuvd],
    .forgot-password-modal .modal-error-message[b-p8ifoutuvd],
    .forgot-password-modal .btn-submit[b-p8ifoutuvd],
    .forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
        width: 100%;
        max-width: 360px;
    }

    .forgot-password-modal h2[b-p8ifoutuvd] {
        font-size: 2rem;
        line-height: 1.15;
    }

    .forgot-password-modal p[b-p8ifoutuvd] {
        margin-bottom: 24px;
        padding: 0;
        line-height: 1.42;
    }

    .forgot-password-modal .form-input[b-p8ifoutuvd],
    .forgot-password-modal .btn-submit[b-p8ifoutuvd],
    .forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
        min-height: 52px;
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .modal-content.forgot-password-modal[b-p8ifoutuvd] {
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .forgot-password-modal h2[b-p8ifoutuvd] {
        font-size: 1.45rem;
    }

    .forgot-password-modal p[b-p8ifoutuvd] {
        margin-bottom: 18px;
        font-size: 0.92rem;
    }
}
/* /Components/GrannyWelcomeModal.razor.rz.scp.css */
.farmor-modal-root[b-26u30eg8xn] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: rgba(28, 18, 10, 0.38);
    backdrop-filter: blur(14px) saturate(115%);
    animation: farmor-overlay-fade-b-26u30eg8xn 0.9s ease forwards;
}

.farmor-modal-overlay[b-26u30eg8xn] {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.farmor-modal-shell[b-26u30eg8xn] {
    position: relative;
    display: block;
    max-width: min(720px, 94vw);
    width: 100%;
    border-radius: 28px;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background:
        radial-gradient(130% 140% at 90% -10%, rgba(255, 213, 160, 0.6), transparent 55%),
        radial-gradient(120% 120% at 10% 10%, rgba(255, 240, 214, 0.95), rgba(244, 222, 196, 0.92) 65%),
        linear-gradient(140deg, #f6eadc 0%, #f2d9bc 55%, #f8efe4 100%);
    box-shadow:
        0 22px 60px -18px rgba(88, 44, 12, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    overflow: hidden;
    pointer-events: auto;
    animation: farmor-modal-entrance-b-26u30eg8xn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.farmor-modal-layout[b-26u30eg8xn] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(210px, 260px);
    align-items: center;
    gap: clamp(1.8rem, 4vw, 3.6rem);
}

.farmor-illustration[b-26u30eg8xn] {
    position: relative;
    isolation: isolate;
    justify-self: end;
}

.farmor-glow[b-26u30eg8xn] {
    position: absolute;
    inset: 8% 4%;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 20%, rgba(255, 210, 150, 0.55), rgba(219, 160, 95, 0.28) 38%, rgba(180, 110, 60, 0.0) 70%);
    filter: blur(0);
    animation: farmor-glow-pulse-b-26u30eg8xn 4.8s ease-in-out infinite;
    z-index: 0;
}

.farmor-grandma[b-26u30eg8xn] {
    position: relative;
    z-index: 1;
    width: clamp(220px, 18vw, 260px);
    max-width: none;
    display: block;
    margin-inline: 0;
    filter: drop-shadow(0 16px 28px rgba(120, 68, 28, 0.34));
}

.farmor-copy[b-26u30eg8xn] {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.6rem);
    color: #432b16;
    text-align: left;
    justify-self: start;
    max-width: 520px;
}

.farmor-header[b-26u30eg8xn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.farmor-header h2[b-26u30eg8xn] {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #402311;
}

.farmor-subheadline[b-26u30eg8xn] {
    margin: 0;
    color: rgba(83, 44, 21, 0.84);
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    font-style: italic;
}

.farmor-body[b-26u30eg8xn] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-family: "Crimson Text", "EB Garamond", serif;
    font-size: clamp(1.1rem, 2.3vw, 1.25rem);
    line-height: 1.55;
    color: rgba(67, 43, 22, 0.92);
    max-width: 520px;
}

.farmor-line[b-26u30eg8xn] {
    opacity: 0;
    transform: translateY(6px);
    animation: farmor-line-reveal-b-26u30eg8xn 1.2s ease forwards;
}

.farmor-line.line-1[b-26u30eg8xn] {
    animation-delay: 0.25s;
}

.farmor-line.line-2[b-26u30eg8xn] {
    animation-delay: 0.55s;
}

.farmor-line.line-3[b-26u30eg8xn] {
    animation-delay: 0.85s;
}

.farmor-actions[b-26u30eg8xn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.2rem;
    align-items: center;
}

.farmor-btn[b-26u30eg8xn] {
    position: relative;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85rem 1.75rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.35s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(120, 58, 22, 0.4);
}

.farmor-btn.primary[b-26u30eg8xn] {
    background: linear-gradient(135deg, #e88e62 0%, #cf6b45 55%, #c05634 100%);
    color: #411f0d;
}

.farmor-btn.primary:hover[b-26u30eg8xn],
.farmor-btn.primary:focus-visible[b-26u30eg8xn] {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -12px rgba(180, 80, 41, 0.45);
    background: linear-gradient(135deg, #f09c6d 0%, #d6764f 50%, #c75d3a 100%);
}

.farmor-btn.secondary[b-26u30eg8xn] {
    background: rgba(249, 235, 213, 0.3);
    border: 1px solid rgba(199, 146, 73, 0.55);
    color: #8a5c27;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.farmor-btn.secondary:hover[b-26u30eg8xn],
.farmor-btn.secondary:focus-visible[b-26u30eg8xn] {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 12px 30px -18px rgba(160, 100, 40, 0.35);
    background: rgba(250, 239, 219, 0.55);
}

.farmor-btn:focus-visible[b-26u30eg8xn] {
    outline: 2px solid rgba(206, 120, 64, 0.75);
    outline-offset: 3px;
}

.farmor-footer[b-26u30eg8xn] {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: rgba(112, 73, 36, 0.84);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.farmor-modal-close[b-26u30eg8xn] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.35);
    color: rgba(112, 73, 36, 0.9);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 6px 16px -10px rgba(90, 48, 16, 0.55);
}

.farmor-modal-close:hover[b-26u30eg8xn],
.farmor-modal-close:focus-visible[b-26u30eg8xn] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 18px -10px rgba(92, 55, 20, 0.35);
}

.farmor-modal-close:focus-visible[b-26u30eg8xn] {
    outline: 2px solid rgba(192, 120, 65, 0.8);
    outline-offset: 3px;
}

.sr-only[b-26u30eg8xn] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes farmor-modal-entrance-b-26u30eg8xn {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    60% {
        opacity: 1;
        transform: translateY(-8px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes farmor-overlay-fade-b-26u30eg8xn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes farmor-line-reveal-b-26u30eg8xn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes farmor-glow-pulse-b-26u30eg8xn {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

@media (max-width: 720px) {
    .farmor-modal-shell[b-26u30eg8xn] {
        padding: clamp(1.35rem, 3vw, 1.6rem);
        border-radius: 24px;
    }

    .farmor-modal-layout[b-26u30eg8xn] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 1.6rem;
    }

    .farmor-copy[b-26u30eg8xn] {
        text-align: center;
        align-items: center;
        justify-self: center;
        max-width: 100%;
        gap: 1rem;
    }

    .farmor-header h2[b-26u30eg8xn] {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .farmor-actions[b-26u30eg8xn] {
        justify-content: center;
    }

    .farmor-grandma[b-26u30eg8xn] {
        width: clamp(200px, 40vw, 240px);
        margin-inline: auto;
    }

    .farmor-body[b-26u30eg8xn] {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .farmor-modal-root[b-26u30eg8xn],
    .farmor-modal-shell[b-26u30eg8xn],
    .farmor-line[b-26u30eg8xn],
    .farmor-glow[b-26u30eg8xn],
    .farmor-btn[b-26u30eg8xn] {
        animation: none !important;
        transition: none !important;
    }
}

/* /Components/ImageModal.razor.rz.scp.css */
.image-modal-overlay[b-lqzk3f88gp]{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
.image-modal-content[b-lqzk3f88gp]{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center}
.image-modal-content img[b-lqzk3f88gp]{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.image-modal-close[b-lqzk3f88gp]{position:absolute;right:-10px;top:-10px;background:#fff;border-radius:50%;width:36px;height:36px;border:none;cursor:pointer;font-size:20px}
.image-modal-caption[b-lqzk3f88gp]{margin-top:8px;color:#fff;text-align:center;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css */

.app-container[b-ol09g98zit] {
    position: relative;
    z-index: 1; /* Ensure content is above the body::before overlay */
    width: 100%;
    min-height: 100dvh;
}

/* Style the content container */
.layout-content[b-ol09g98zit] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    min-height: 100%;
    padding-top: 0;
}

/* ── Downgrade Notice ────────────────────────────────────────
   A gentle "parchment note" that floats at the top of the
   content area, to the right of the sidebar. Frosted glass
   with warm copper accents — a kind whisper, not a warning.  */

.downgrade-notice[b-ol09g98zit] {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    z-index: 1100;
    background: rgba(253, 245, 235, 0.88);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(196, 165, 128, 0.25);
    box-shadow:
        0 1px 3px rgba(92, 64, 51, 0.06),
        0 8px 24px rgba(92, 64, 51, 0.04);
}

.downgrade-notice__inner[b-ol09g98zit] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
}

/* Candle icon — the LovOne brand anchor */
.downgrade-notice__icon[b-ol09g98zit] {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(239, 181, 103, 0.5));
}

.downgrade-notice__text[b-ol09g98zit] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: #5c4033;
    letter-spacing: 0.01em;
}

.downgrade-notice__actions[b-ol09g98zit] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Primary CTA — warm copper pill */
.downgrade-notice__cta[b-ol09g98zit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #c49a6c, #a67b50);
    box-shadow:
        0 2px 6px rgba(164, 123, 80, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.downgrade-notice__cta:hover[b-ol09g98zit] {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(164, 123, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Dismiss — ghost button, barely there */
.downgrade-notice__dismiss[b-ol09g98zit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(176, 141, 110, 0.22);
    background: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-weight: 500;
    color: #8b7355;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.downgrade-notice__dismiss:hover[b-ol09g98zit] {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(176, 141, 110, 0.35);
}

/* ── Tablet / Mobile: sidebar collapses ── */
@media (max-width: 1024px) {
    .downgrade-notice[b-ol09g98zit] {
        left: 0;
        top: 56px; /* below MobileTopBar */
    }
}

@media (max-width: 768px) {
    .downgrade-notice[b-ol09g98zit] {
        top: 52px;
    }

    .downgrade-notice__inner[b-ol09g98zit] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        padding: 0.45rem 0.65rem;
        gap: 0;
        align-items: start;
    }

    .downgrade-notice__icon[b-ol09g98zit] {
        display: none;
    }

    /* Let text breathe — wrap naturally, 2–3 lines */
    .downgrade-notice__text[b-ol09g98zit] {
        grid-column: 1 / -1;
        font-size: 0.76rem;
        line-height: 1.4;
        margin-bottom: 0.3rem;
    }

    /* Actions sit below text, right-aligned */
    .downgrade-notice__actions[b-ol09g98zit] {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
    }

    /* Warm copper pill — compact */
    .downgrade-notice__cta[b-ol09g98zit] {
        padding: 0.25rem 0.7rem;
        font-size: 0.72rem;
        font-weight: 600;
    }

    .downgrade-notice__cta:hover[b-ol09g98zit] {
        transform: none;
    }

    /* Subtle dismiss link */
    .downgrade-notice__dismiss[b-ol09g98zit] {
        padding: 0.25rem 0.5rem;
        border: none;
        background: transparent;
        font-size: 0.72rem;
        font-weight: 500;
        color: #8b7355;
        text-decoration: underline;
        text-decoration-color: rgba(139, 115, 85, 0.3);
        text-underline-offset: 2px;
        white-space: nowrap;
    }

    .downgrade-notice__dismiss:hover[b-ol09g98zit] {
        text-decoration-color: rgba(139, 115, 85, 0.6);
    }
}

/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-j9zxztn2yj] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-j9zxztn2yj] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-j9zxztn2yj] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-j9zxztn2yj] {
    font-size: 1.1rem;
}

.bi[b-j9zxztn2yj] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-j9zxztn2yj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-j9zxztn2yj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-j9zxztn2yj] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-j9zxztn2yj] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-j9zxztn2yj] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-j9zxztn2yj] {
        padding-bottom: 1rem;
    }

    .nav-item[b-j9zxztn2yj]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-j9zxztn2yj]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-j9zxztn2yj]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-j9zxztn2yj] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-j9zxztn2yj] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-j9zxztn2yj] {
        display: none;
    }

    .nav-scrollable[b-j9zxztn2yj] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* /Components/LocalizedDatePicker.razor.rz.scp.css */
.localized-date-picker[b-079frmn27e] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--font-sans);
}

.date-picker-dropdowns[b-079frmn27e] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.date-dropdown[b-079frmn27e] {
    flex: 1;
    padding: 0.92em 1.1em;
    border: 1.3px solid #f0e1d0;
    border-radius: 12px;
    background-color: #fff9f4;
    font-size: 1.06rem;
    color: #473b26;
    cursor: pointer;
    transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, background-color 0.18s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A86E4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
    padding-right: 40px;
    margin-bottom: 0;
}

.date-dropdown:focus[b-079frmn27e] {
    outline: none;
    border-color: #fbbbad;
    background-color: #fff6f0;
    box-shadow: 0 0 0 2px rgba(251, 187, 173, 0.15);
}

.date-dropdown:hover[b-079frmn27e] {
    border-color: #efd7bb;
}

.day-dropdown[b-079frmn27e] {
    flex: 0 0 calc(30% - 8px);
    min-width: 60px;
}

.month-dropdown[b-079frmn27e] {
    flex: 0 0 calc(40% - 8px);
    min-width: 100px;
}

.year-dropdown[b-079frmn27e] {
    flex: 0 0 calc(30% - 8px);
    min-width: 80px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .date-picker-dropdowns[b-079frmn27e] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    
    .date-dropdown[b-079frmn27e] {
        margin-bottom: 0;
        padding: 12px 34px 12px 12px;
        font-size: 1rem;
    }
    
    .day-dropdown[b-079frmn27e] {
        flex: 0 0 calc(25% - 8px);
    }
    
    .month-dropdown[b-079frmn27e] {
        flex: 0 0 calc(45% - 8px);
    }
    
    .year-dropdown[b-079frmn27e] {
        flex: 0 0 calc(30% - 8px);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .date-dropdown[b-079frmn27e] {
        background-color: rgba(31, 41, 55, 0.7);
        border-color: #5c4c39;
        color: #f9fafb;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E6B9A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    }
    
    .date-dropdown:focus[b-079frmn27e] {
        border-color: #fbbbad;
        background-color: rgba(31, 41, 55, 0.85);
        box-shadow: 0 0 0 2px rgba(251, 187, 173, 0.2);
    }
    
    .date-dropdown:hover[b-079frmn27e] {
        border-color: #e8c8a0;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-dropdown[b-079frmn27e] {
        border-width: 2px;
        border-color: #000000;
    }
    
    .date-dropdown:focus[b-079frmn27e] {
        border-color: #0066cc;
        box-shadow: 0 0 0 2px #0066cc;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .date-dropdown[b-079frmn27e] {
        transition: none;
    }
}

/* iOS-style enhancements */
.date-dropdown option[b-079frmn27e] {
    padding: 10px 14px;
    font-size: 1rem;
    background-color: #fff9f4;
    color: #473b26;
}

/* Custom disabled state */
.date-dropdown:disabled[b-079frmn27e] {
    background-color: #f7f3ee;
    color: #a99d8c;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Focus visible for better accessibility */
.date-dropdown:focus-visible[b-079frmn27e] {
    outline: 2px solid #fbbbad;
    outline-offset: 2px;
}

/* Add some separation between groups of dropdowns */
.localized-date-picker + .localized-date-picker[b-079frmn27e] {
    margin-top: 15px;
}

/* /Components/LovedOneEditModal.razor.rz.scp.css */
/* ========================================= */
/*   Shared Modal Overlay Styling (from you) */
/* ========================================= */
.modal-overlay[b-391iuau2gn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55); /* Your overlay color */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
    backdrop-filter: blur(2px);
}

.modal-overlay.visible[b-391iuau2gn] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* Prompt example chips for avatar description (polished) */
.avatar-prompt-examples[b-391iuau2gn] {
    margin-top: 0.6rem;
}

/* Card wrapper that matches the soft rounded card used elsewhere */
.avatar-prompt-examples.avatar-prompt-card[b-391iuau2gn] {
    background: linear-gradient(180deg, #FFF9F6 0%, #FFF4EF 100%);
    border: 1px solid rgba(224,216,209,0.8);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(120,80,55,0.06);
    max-width: 100%;
}

.avatar-prompt-examples .prompt-examples-heading[b-391iuau2gn] {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.avatar-prompt-examples .prompt-card[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Prompt examples: stacked full-width card with large readable rows */
.avatar-prompt-examples[b-391iuau2gn] {
    display: block;
    margin-top: 12px;
}

.avatar-prompt-card[b-391iuau2gn] {
    display: block;
    border-radius: 14px;
    background: #FFF8F5; /* soft warm background */
    border: 1px solid rgba(220,190,170,0.28);
    padding: 16px;
}

.prompt-card[b-391iuau2gn] {
    display: block;
}

/* Each prompt row is a large, full-width button reset to look like a card row */
.prompt-row[b-391iuau2gn] {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    -webkit-appearance: none; /* reset button styles */
    appearance: none;
    border: none;
    background: transparent;
    text-align: left;
    /*padding: 14px 12px;
    margin: 0 0 8px 0;*/
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.7rem; /* larger type */
    line-height: 1.6;
    color: #3b2a23; /* dark warm text */
    font-weight: 400;
}

.prompt-row:last-child[b-391iuau2gn] { margin-bottom: 0; }

.prompt-row:hover[b-391iuau2gn] {
    background: rgba(0,0,0,0.03);
}

.prompt-row.selected[b-391iuau2gn] {
    background: rgba(255,210,195,0.25) !important; /* subtle peach */
}

/* Ensure inner text doesn't overflow */
.prompt-row .prompt-text[b-391iuau2gn] {
    display: block;
    white-space: normal;
    word-break: break-word;
}

/* Pulse animation for personality preset changes */
@keyframes preset-pulse-b-391iuau2gn {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.pulse-animate[b-391iuau2gn] {
    animation: preset-pulse-b-391iuau2gn 0.5s ease-out;
}
.modal-overlay .modal-content[b-391iuau2gn] {
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002;
    min-height: 450px; /* match or exceed tallest tab */
    max-height: 90vh;
}

.modal-overlay.visible .modal-content[b-391iuau2gn] {
    transform: scale(1);
}


.modal-content.lovedone-edit-modal-content[b-391iuau2gn] {
    background-color: #FFFCFA;
    padding: 25px 30px;
    border-radius: 16px;
    max-width: 650px;
    width: 90%;
    text-align: left;
    box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
}

.lovedone-edit-modal-content .modal-close-icon-button[b-391iuau2gn] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

    .lovedone-edit-modal-content .modal-close-icon-button:hover[b-391iuau2gn] {
        color: var(--text);
    }

.lovedone-edit-modal-title[b-391iuau2gn] {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    margin: 0 0 1rem 0;
    padding-right: 30px;
}

.modal-tabs-container[b-391iuau2gn] {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--soft-border);
}

.modal-tabs-container[b-391iuau2gn] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide on Firefox */
}

    .modal-tabs-container[b-391iuau2gn]::-webkit-scrollbar {
        display: none; /* Hide on Chrome/Safari */
    }

.modal-tab-button[b-391iuau2gn] {
    flex: 1;
    padding: 0.8rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    font-family: var(--font-lato);
    text-align: center;
    white-space: nowrap;
}

    .modal-tab-button:hover[b-391iuau2gn] {
        color: var(--text);
    }

    .modal-tab-button.active[b-391iuau2gn] {
        color: var(--text);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

.lovedone-modal-body[b-391iuau2gn] {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0.5rem 0.25rem;
    transition: all 0.2s ease;
    min-height: 480px; /* Adjust based on tallest tab */
    /*max-height: 50vh;*/ /* Prevent it from growing forever */
    /* Enable smooth momentum scrolling on iOS/mobile */
    -webkit-overflow-scrolling: touch;
}

.form-group-settings[b-391iuau2gn] {
    margin-bottom: 1.3rem;
}

    .form-group-settings label[b-391iuau2gn] {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-light);
        margin-bottom: 0.5rem;
    }

    .form-group-settings input[type="text"][b-391iuau2gn],
    .form-group-settings input[type="date"][b-391iuau2gn],
    .form-group-settings textarea[b-391iuau2gn],
    .lovedone-modal-body .form-select-styled[b-391iuau2gn] {
        width: 100%;
        padding: 12px 15px;
        font-size: 0.95rem;
        border-radius: 10px;
        border: 1px solid #E0D8D1;
        background-color: var(--white);
        color: var(--text);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box;
        line-height: 1.5;
    }

    .form-group-settings textarea[b-391iuau2gn],
    .textarea-lovedone-description-modal[b-391iuau2gn] {
        resize: none;
    }

    .lovedone-modal-body .form-select-styled[b-391iuau2gn] {
        padding-right: 42px;
        background-color: #fff9f4;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b5243' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }

        .form-group-settings input[type="text"]:focus[b-391iuau2gn],
        .form-group-settings input[type="date"]:focus[b-391iuau2gn],
        .lovedone-modal-body .form-select-styled:focus[b-391iuau2gn] {
            border-color: var(--accent);
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,196,179,0.25);
        }

.input-hint[b-391iuau2gn] {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

.form-row-settings[b-391iuau2gn] {
    display: flex;
    gap: 1rem;
}

.form-group-settings.form-group-half[b-391iuau2gn] {
    flex: 1;
  /*  margin-bottom: 0;*/
}

.slider-group[b-391iuau2gn] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .slider-group .slider-label[b-391iuau2gn] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 0.25rem;
    }    .slider-group .slider-extreme-labels[b-391iuau2gn] {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: var(--text-light);
        margin-bottom: 0.25rem;
        padding: 0 0.25rem;
    }

        .slider-group .slider-extreme-labels .extreme-left[b-391iuau2gn] {
            text-align: left;
        }

        .slider-group .slider-extreme-labels .extreme-right[b-391iuau2gn] {
            text-align: right;
        }/* Custom slider class to override all other styles */
.custom-slider[b-391iuau2gn] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block !important;
    accent-color: var(--accent);
    height: 2rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    outline: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    position: relative !important;
}

    .slider-group .slider-input-row[b-391iuau2gn] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .slider-group .slider-input-row input[type="range"][b-391iuau2gn] {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            accent-color: var(--accent);
            height: 2rem; /* Increase overall height */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: transparent;
            outline: none;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
        }

    .slider-group .slider-value[b-391iuau2gn] {
        font-size: 0.85rem;
        color: var(--text-light);
        min-width: 120px;        text-align: right;        font-weight: 500;
    }
      .slider-group input[type="range"][b-391iuau2gn] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        accent-color: var(--accent);
        height: 2rem; /* Increase overall height */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;
        outline: none;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important; /* Remove any flex constraints */
    }

/* Override any Bootstrap .form-range styles */
.slider-group input[type="range"].form-range[b-391iuau2gn],
.slider-group .form-range[b-391iuau2gn] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}/* Webkit (Chrome, Safari, Edge) slider thumb */
    .slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1.5rem; /* Increased from default 1rem */
        height: 1.5rem; /* Increased from default 1rem */
        border-radius: 50%;
        background: var(--accent, #0d6efd);
        cursor: pointer;
        border: 0;
        transition: none; /* Remove transitions to eliminate hover effects */
        margin-top: -0.5rem; /* Center the thumb on the track */
    }

    /* Remove hover/active effects for webkit */
    .slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-thumb:hover,
    .slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-thumb:active {
        background: var(--accent, #0d6efd); /* Keep same color */
        transform: none; /* Prevent scaling */
        box-shadow: none; /* Remove any shadow effects */
    }

    /* Webkit slider track */
    .slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.5rem;
        cursor: pointer;
        background: var(--soft-border, #e9ecef);
        border-radius: 0.25rem;
        border: 0;
    }    /* Firefox slider thumb */
    .slider-group input[type="range"][b-391iuau2gn]::-moz-range-thumb {
        width: 1.5rem; /* Increased from default 1rem */
        height: 1.5rem; /* Increased from default 1rem */
        border-radius: 50%;
        background: var(--accent, #0d6efd);
        cursor: pointer;
        border: 0;
        -moz-appearance: none;
        appearance: none;
        transition: none; /* Remove transitions */
        margin-top: 0; /* Firefox centers differently, may need adjustment */
        box-sizing: border-box;
    }

    /* Remove hover/active effects for Firefox */
    .slider-group input[type="range"][b-391iuau2gn]::-moz-range-thumb:hover,
    .slider-group input[type="range"][b-391iuau2gn]::-moz-range-thumb:active {
        background: var(--accent, #0d6efd); /* Keep same color */
        transform: none; /* Prevent scaling */
        box-shadow: none; /* Remove any shadow effects */
    }

    /* Firefox slider track */
    .slider-group input[type="range"][b-391iuau2gn]::-moz-range-track {
        width: 100%;
        height: 0.5rem;
        cursor: pointer;
        background: var(--soft-border, #e9ecef);
        border-radius: 0.25rem;
        border: 0;
    }

    /* Remove focus outline */
    .slider-group input[type="range"]:focus[b-391iuau2gn] {
        outline: none;
    }

    /* Remove focus effects for webkit */
    .slider-group input[type="range"]:focus[b-391iuau2gn]::-webkit-slider-thumb {
        box-shadow: none;
    }    /* Remove focus effects for Firefox */
    .slider-group input[type="range"]:focus[b-391iuau2gn]::-moz-range-thumb {
        box-shadow: none;
    }

/* Additional styling for custom-slider pseudo elements */
.custom-slider[b-391iuau2gn]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    box-shadow: none;
    transition: none;
    margin-top: -0.5rem; /* Center vertically on track */
}

.custom-slider[b-391iuau2gn]::-webkit-slider-thumb:hover,
.custom-slider[b-391iuau2gn]::-webkit-slider-thumb:active {
    background: var(--accent); /* Keep same color */
    transform: none; /* No scaling */
    box-shadow: none; /* No shadow effects */
}

.custom-slider[b-391iuau2gn]::-webkit-slider-runnable-track {
    background: var(--soft-border, #e9ecef);
    height: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    width: 100%;
}

.custom-slider[b-391iuau2gn]::-moz-range-thumb {
    height: 1.5rem;
    width: 1.5rem;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    box-shadow: none;
    transition: none;
    -moz-appearance: none;
    appearance: none;
    margin-top: 0; /* Firefox centers differently */
}

.custom-slider[b-391iuau2gn]::-moz-range-thumb:hover,
.custom-slider[b-391iuau2gn]::-moz-range-thumb:active {
    background: var(--accent); /* Keep same color */
    transform: none; /* No scaling */
    box-shadow: none; /* No shadow effects */
}

.custom-slider[b-391iuau2gn]::-moz-range-track {
    background: var(--soft-border, #e9ecef);
    height: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    width: 100%;
}

.custom-slider:focus[b-391iuau2gn] {
    outline: none;
}

.custom-slider:focus[b-391iuau2gn]::-webkit-slider-thumb {
    box-shadow: none;
}

.custom-slider:focus[b-391iuau2gn]::-moz-range-thumb {
    box-shadow: none;
}

/* Responsive behavior for desktop vs mobile slider labels */
.desktop-only[b-391iuau2gn] {
    display: flex; /* Show on desktop by default */
}

.slider-mobile-extremes[b-391iuau2gn] {
    display: none; /* Hide on desktop by default */
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Mobile behavior */
@media (max-width: 767px) {
    .desktop-only[b-391iuau2gn] {
        display: none !important; /* Force hide on mobile */
    }
    
    .slider-mobile-extremes[b-391iuau2gn] {
        display: block !important; /* Force show on mobile */
    }
}

.lovedone-modal-footer[b-391iuau2gn] {
    padding: 1.2rem 0 0.5rem 0;
    border-top: 1px solid var(--soft-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    /*margin-top: 0.5rem;*/
}

.btn-modal-cancel-refined[b-391iuau2gn] {
    background-color: rgba(122, 92, 62, 0.045);
    color: var(--text-muted, #8f7b68);
    border: 1px solid rgba(122, 92, 62, 0.08);
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .btn-modal-cancel-refined:hover[b-391iuau2gn] {
        background-color: rgba(122, 92, 62, 0.08);
        border-color: rgba(122, 92, 62, 0.14);
        color: var(--text, #6a5140);
    }

.btn-modal-save-refined[b-391iuau2gn] {
    background-color: var(--accent);
    color: var(--white);
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-modal-save-refined:hover[b-391iuau2gn] {
        background-color: var(--peach);
    }

    .btn-modal-save-refined.saving[b-391iuau2gn] {
        background-color: var(--peach) !important;
        cursor: wait;
    }

        .btn-modal-save-refined.saving .spinner-inline[b-391iuau2gn] {
            width: 1em;
            height: 1em;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: var(--white);
            border-radius: 50%;
            display: inline-block;
            animation: spin-b-391iuau2gn 0.8s linear infinite;
            margin-right: 0.5rem;
            vertical-align: text-bottom;
        }

    .btn-modal-save-refined:disabled:not(.saving)[b-391iuau2gn] {
        background-color: #e0e0e0 !important;
        color: #a0a0a0 !important;
        cursor: not-allowed;
    }

/* Preset overwrite warning modal */
.overwrite-warning-overlay[b-391iuau2gn] {
    position: fixed;
    inset: 0;
    background-color: rgba(40, 25, 15, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2205;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.overwrite-warning-modal[b-391iuau2gn] {
    width: min(520px, calc(100% - 32px));
    background: var(--peach-bg);
    border: 1px solid rgba(224,216,209,0.8);
    border-radius: 16px;
    box-shadow: var(--shadow-medium);
    padding: 18px;
}

.overwrite-warning-title[b-391iuau2gn] {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.overwrite-warning-body[b-391iuau2gn] {
    color: var(--text-light);
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overwrite-warning-actions[b-391iuau2gn] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.overwrite-warning-actions .btn-modal-cancel-refined[b-391iuau2gn],
.overwrite-warning-actions .btn-modal-save-refined[b-391iuau2gn] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Make the destructive action distinct but still on-brand */
.overwrite-warning-primary[b-391iuau2gn] {
    background-color: var(--peach) !important;
    color: var(--text) !important;
}

.overwrite-warning-primary:hover[b-391iuau2gn] {
    background-color: var(--accent) !important;
    color: var(--white) !important;
}

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


/* Mobile footer button layout override: side-by-side like pet modal */
@media (max-width: 600px) {
  .lovedone-edit-modal-content .lovedone-modal-footer[b-391iuau2gn] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    position: sticky;
    bottom: 0;
    background: #FFFCFA;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.08);
  }
  .lovedone-edit-modal-content .lovedone-modal-footer .btn-modal-cancel-refined[b-391iuau2gn],
  .lovedone-edit-modal-content .lovedone-modal-footer .btn-modal-save-refined[b-391iuau2gn] {
    flex: 1 1 0 !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 14px !important;
    padding: 0.95rem 1.1rem !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 600px) {
    .form-row-settings[b-391iuau2gn] {
        flex-direction: column;
    }

    .form-group-settings.form-group-half[b-391iuau2gn] {
        width: 100%;
    }

    .form-row-settings[b-391iuau2gn] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-tabs-container[b-391iuau2gn] {
       /* flex-direction: column;*/
        align-items: stretch;
    }

    .modal-tab-button[b-391iuau2gn] {
        text-align: left;
        border: none;
        border-left: 4px solid transparent;
        padding: 0.7rem 1rem;
    }

        .modal-tab-button.active[b-391iuau2gn] {
            border-left-color: var(--accent);
            background-color: rgba(255, 224, 207, 0.25);
        }
}

.modal-tabs-container[b-391iuau2gn] {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--soft-border);
    min-height:50px;
}

    .modal-tabs-container[b-391iuau2gn]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /*.modal-tabs-container::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 2rem;
        background: linear-gradient(to left, #FFFCFA, transparent);*/ /* Adjust to your background */
        /*pointer-events: none;
        z-index: 1;
    }*/


.modal-tab-button[b-391iuau2gn] {
    flex: 0 0 auto; /* Prevent squishing */
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text-light);
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

    .modal-tab-button.active[b-391iuau2gn] {
        color: var(--text);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

/*.lovedone-modal-body > div {
    height: 100%;
}*/

.avatar-row[b-391iuau2gn] {
    display: flex;
    gap: 2.5em;
    margin-bottom: 1.5em;
    align-items: center;
}

.avatar-col[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.relation-col[b-391iuau2gn] {
    flex: 1;
    min-width: 200px;
}

.avatar-preview-img[b-391iuau2gn] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2.5px solid #efd7bb;
    background: #fdf4ed;
    box-shadow: 0 2px 8px rgba(247,186,173,0.08);
}

.avatar-clickable[b-391iuau2gn] {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.avatar-clickable:hover[b-391iuau2gn],
.avatar-clickable:focus[b-391iuau2gn] {
    box-shadow: 0 0 0 4px #fbbbad66;
    outline: none;
}

.avatar-hint[b-391iuau2gn] {
    color: #ab9882;
    font-size: 0.9rem;
    text-align: center;
    font-style: italic;
    user-select: none;
    max-width: 150px;
}

.avatar-picker-overlay[b-391iuau2gn] {
    position: fixed;
    z-index: 2000;
    inset: 0;
    background: rgba(80,60,44,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-picker-modal[b-391iuau2gn] {
    background: #fff9f4;
    padding: 2em 2.3em 1.5em 2.3em;
    border-radius: 22px;
    box-shadow: 0 6px 44px rgba(120,80,55,0.11);
    min-width: 320px;
    max-width: 96vw;
}

.avatar-picker-list[b-391iuau2gn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 1.2em;
    justify-items: center;
    margin: 1.4em 0 1.8em 0;
}

.avatar-picker-img[b-391iuau2gn] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #efd7bb;
    background: #fdf4ed;
    box-shadow: 0 1px 4px rgba(247,186,173,0.07);
    cursor: pointer;
    transition: border 0.16s, box-shadow 0.16s;
}

.avatar-picker-img.selected[b-391iuau2gn],
.avatar-picker-img:hover[b-391iuau2gn] {
    border: 2.4px solid #fbbbad;
    box-shadow: 0 2px 8px #fbbbad33;
}

.avatar-gender-tabs[b-391iuau2gn] {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-bottom: 1em;
}

.avatar-tab[b-391iuau2gn] {
    background: none;
    border: 2px solid #efd7bb;
    border-radius: 20px;
    padding: 0.5em 1.4em;
    font-size: 1.02rem;
    color: #7a5a43;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-tab.selected[b-391iuau2gn] {
    background: #fbbbad;
    border-color: #fbbbad;
    color: #38250d;
    font-weight: 600;
    box-shadow: 0 2px 8px #fbbbad33;
}

.avatar-tab:hover[b-391iuau2gn] {
    background-color: #ffe9e1;
}

@media (max-width: 700px) {
    .avatar-row[b-391iuau2gn] {
        flex-direction: column;
        align-items: center;
        gap: 1.4em;
    }

    .relation-col[b-391iuau2gn] {
        width: 100%;
    }
}

/* ========================================= */
/*   Emotional Triggers Styling             */
/* ========================================= */

.emotional-triggers-grid[b-391iuau2gn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 15px 0;
}

.trigger-tag[b-391iuau2gn] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 60px;
    justify-content: center;
}

.trigger-tag:hover[b-391iuau2gn] {
    background: #e3f2fd;
    border-color: #90caf9;
    transform: translateY(-1px);
}

.trigger-tag.selected[b-391iuau2gn] {
    background: #1976d2;
    border-color: #1976d2;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.trigger-tag.has-value[b-391iuau2gn] {
    border-color: #4caf50;
    background: #f1f8e9;
}

.trigger-tag.has-value.selected[b-391iuau2gn] {
    background: #2e7d32;
    border-color: #2e7d32;
}

.trigger-name[b-391iuau2gn] {
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.2;
}

.trigger-value[b-391iuau2gn] {
    font-size: 0.75em;
    opacity: 0.8;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 30px;
}

.trigger-slider-section[b-391iuau2gn] {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.trigger-slider-section .slider-label[b-391iuau2gn] {
    font-weight: 600;
    margin-bottom: 10px;
    color: #1976d2;
}

.btn-remove-trigger[b-391iuau2gn] {
    background: #f44336;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.2s ease;
}

.btn-remove-trigger:hover[b-391iuau2gn] {
    background: #d32f2f;
}

@media (max-width: 700px) {
    .emotional-triggers-grid[b-391iuau2gn] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }
    
    .trigger-tag[b-391iuau2gn] {
        padding: 10px 12px;
        min-height: 55px;
    }
    
    .trigger-name[b-391iuau2gn] {
        font-size: 0.85em;
    }
    
    .trigger-slider-section[b-391iuau2gn] {
        padding: 15px;
        margin-top: 15px;
    }
}

/* Traits Section Styles */
.traits-grid[b-391iuau2gn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 15px 0;
}

.trait-tag[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 70px;
    text-align: center;
    position: relative;
}

.trait-tag:hover[b-391iuau2gn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #2196f3;
}

.trait-tag.selected[b-391iuau2gn] {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-color: #1976d2;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
}

.trait-tag.has-value[b-391iuau2gn] {
    border-color: #4caf50;
    background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
}

.trait-tag.has-value.selected[b-391iuau2gn] {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    border-color: #388e3c;
}

.trait-name[b-391iuau2gn] {
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.2;
}

.trait-value[b-391iuau2gn] {
    font-size: 0.75em;
    opacity: 0.8;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 30px;
    margin-top: 4px;
}

.trait-slider-section[b-391iuau2gn] {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.trait-slider-section .slider-label[b-391iuau2gn] {
    font-weight: 600;
    margin-bottom: 10px;
    color: #1976d2;
}

.contextual-modifiers[b-391iuau2gn] {
    margin-top: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.contextual-modifiers h4[b-391iuau2gn] {
    margin: 0 0 10px 0;
    font-size: 0.9em;
    color: #666;
    font-weight: 600;
}

.modifier-item[b-391iuau2gn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.modifier-item:last-child[b-391iuau2gn] {
    border-bottom: none;
}

.modifier-name[b-391iuau2gn] {
    font-size: 0.85em;
    color: #555;
}

.modifier-value[b-391iuau2gn] {
    font-size: 0.85em;
    font-weight: 600;
    color: #2196f3;
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Mobile responsiveness for traits */
@media (max-width: 768px) {
    .lovedone-modal-body[b-391iuau2gn] {
        /* Add subtle scroll indicator at bottom */
        position: relative;
    }

    /* Add a subtle shadow/gradient above the footer to hint at scrollable content */
    .lovedone-modal-body[b-391iuau2gn]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to top, rgba(255, 252, 250, 0.9) 0%, rgba(255, 252, 250, 0.3) 50%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -0.25rem; /* Compensate for body padding */
    }

    .traits-grid[b-391iuau2gn] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    
    .trait-tag[b-391iuau2gn] {
        padding: 10px 6px;
        min-height: 60px;
    }
    
    .trait-name[b-391iuau2gn] {
        font-size: 0.85em;
    }
    
    .trait-slider-section[b-391iuau2gn] {
        padding: 15px;
        margin-top: 15px;
    }
    
    .contextual-modifiers[b-391iuau2gn] {
        padding: 12px;
    }
}

/* Preferred Topics Section Styles */
.topics-grid[b-391iuau2gn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 15px 0;
}

.topic-tag[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 70px;
    text-align: center;
    position: relative;
}

.topic-tag:hover[b-391iuau2gn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #ff9800;
}

.topic-tag.selected[b-391iuau2gn] {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    border-color: #f57c00;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}

.topic-tag.has-value[b-391iuau2gn] {
    border-color: #4caf50;
    background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
}

.topic-tag.has-value.selected[b-391iuau2gn] {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    border-color: #388e3c;
}

.topic-name[b-391iuau2gn] {
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.2;
}

.topic-count[b-391iuau2gn] {
    font-size: 0.75em;
    opacity: 0.8;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.topic-editor-section[b-391iuau2gn] {
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.topic-editor-section h4[b-391iuau2gn] {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: #f57c00;
    font-weight: 600;
}

.topic-input-section[b-391iuau2gn] {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: stretch;
}

.topic-input[b-391iuau2gn] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9em;
}

.topic-input:focus[b-391iuau2gn] {
    border-color: #ff9800;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.btn-add-topic[b-391iuau2gn] {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.btn-add-topic:hover[b-391iuau2gn] {
    background-color: #f57c00;
}

.subtopics-list[b-391iuau2gn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.subtopic-item[b-391iuau2gn] {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 8px 6px 12px;
    font-size: 0.85em;
    gap: 6px;
}

.subtopic-text[b-391iuau2gn] {
    color: #555;
}

.btn-remove-subtopic[b-391iuau2gn] {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.btn-remove-subtopic:hover[b-391iuau2gn] {
    background: #d32f2f;
}

.btn-remove-trigger[b-391iuau2gn] {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-remove-trigger:hover[b-391iuau2gn] {
    background-color: #d32f2f;
}


@media (max-width: 480px) {
    .modal-content lovedone-edit-modal-content[b-391iuau2gn] {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        max-height: none;
    }

}

/* Override: make Premium modal footer match LovedOneEditModal footer height and button shapes */
.premium-avatar-modal .premium-form-actions[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions.sticky[b-391iuau2gn] {
    /* match LovedOneEditModal footer spacing */
    padding: 1.2rem 0 0.5rem 0;
    border-top: 1px solid var(--soft-border);
    gap: 0.75rem;
    justify-content: flex-end; /* keep actions aligned to the right like lovedone modal */
    align-items: center;
}

.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined.btn[b-391iuau2gn] {
    /* match lovedone cancel button shape & sizing */
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #E9E4E0;
    border: 1px solid #dcd6d4;
    color: var(--text);
}

.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium.btn[b-391iuau2gn] {
    /* match lovedone save button sizing & rounded rectangle */
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    /* keep existing primary gradient but ensure text contrast like lovedone save */
    color: var(--white);
}

/* Ensure mobile stacked footer keeps the same visual padding when column layout is used */
@media (max-width: 480px) {
    .premium-avatar-modal .premium-form-actions[b-391iuau2gn] {
        padding: 0.9rem 0.5rem;
    }
}

/* Make Premium modal buttons match BasicDetailsStep pill buttons */
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
    border-radius: 25px; /* pill shape like BasicDetailsStep */
    font-size: 1.11rem;
    font-weight: 600;
    padding: 0.8em 2.5em;
    letter-spacing: -0.5px;
}

/* tertiary/cancel visual: match BasicDetailsStep tertiary */
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
}

/* primary/save visual: match BasicDetailsStep primary */
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
    background-color: #fbbbad;
    color: #38250d;
    box-shadow: 0 2px 8px rgba(247,186,173,0.10);
}

/* Mobile: stacked buttons style like BasicDetailsStep (large pill full-width) */
@media (max-width: 600px) {
    .premium-avatar-modal .premium-form-actions[b-391iuau2gn] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn],
    .premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
        width: 100%;
        padding: 1rem 1.2rem;
        font-size: 1.06rem;
    }
}


/* Mobile responsiveness for topics */
@media (max-width: 768px) {
    .topics-grid[b-391iuau2gn] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    
    .topic-tag[b-391iuau2gn] {
        padding: 10px 6px;
        min-height: 60px;
    }
    
    .topic-name[b-391iuau2gn] {
        font-size: 0.85em;
    }
    
    .topic-editor-section[b-391iuau2gn] {
        padding: 15px;
        margin-top: 15px;
    }
    
    .topic-input-section[b-391iuau2gn] {
        flex-direction: column;
        gap: 8px;
    }
    
    .subtopics-list[b-391iuau2gn] {
        gap: 6px;
    }
    
    .subtopic-item[b-391iuau2gn] {
        font-size: 0.8em;
        padding: 5px 6px 5px 10px;
    }

    .lovedone-modal-footer[b-391iuau2gn] {
        padding: 18px;
        flex-direction: column;
        gap: 10px;
    }

    .btn-modal-cancel-refined[b-391iuau2gn],
    .btn-modal-save-refined[b-391iuau2gn] {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ========================================= */
/*   Personality Tags Styling              */
/* ========================================= */

.tags-selection-area[b-391iuau2gn] {
    margin-top: 1rem;
    width: 100%;
}

.tags-container[b-391iuau2gn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center; /* Center the tags */
    margin-top: 1rem;
    margin-bottom: 1rem
}

.tag-chip[b-391iuau2gn] { /* Same as .tag-option-button in PrivateReflectionModal */
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid #E0D8D1; /* Lighter border */
    border-radius: 15px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

    .tag-chip:hover[b-391iuau2gn] {
        border-color: var(--peach);
        background-color: #FFF9F7; /* Very subtle hover */
    }

    .tag-chip.selected[b-391iuau2gn] { /* Same as .active in PrivateReflectionModal */
        background-color: var(--peach);
        color: var(--text);
        border-color: var(--accent);
        font-weight: 500;
    }

/* Better spacing for the form group */
.form-group-describe .tags-selection-area[b-391iuau2gn] {
    background: rgba(255,255,255,0.75); /* Slightly transparent like example-block */
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin: 1.2rem auto 0 auto;
    max-width: 500px;
    box-shadow: 0 2px 12px rgba(204,170,150,0.06);
}

/* ========================================= */
/*   End Personality Tags Styling          */
/* ========================================= */

@media (max-width: 480px) {
    .modal-content[b-391iuau2gn] {
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 1.5rem 1rem !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .lovedone-modal-body[b-391iuau2gn] {
        position: relative;
    }

    /* Add a more prominent shadow/gradient above the footer on very small screens */
    .lovedone-modal-body[b-391iuau2gn]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to top, rgba(255, 252, 250, 0.95) 0%, rgba(255, 252, 250, 0.4) 60%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -0.25rem; /* Compensate for body padding */
    }    
    .lovedone-modal-footer[b-391iuau2gn] {
        flex-shrink: 0;
        padding: 20px;
        flex-direction: column;
        gap: 12px;
        /* Add a subtle shadow above the footer */
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
        background-color: #FFFCFA; /* Ensure consistent background */
    }

    .btn-modal-cancel-refined[b-391iuau2gn],
    .btn-modal-save-refined[b-391iuau2gn] {
        width: 100%;
        padding: 16px 24px;
        font-size: 1rem;
    }
}

/* ========================================= */
/*   Premium Avatar Styles */
/* ========================================= */

/* Tabs inside premium modal (Text / Photo) */
.avatar-mode-tabs[b-391iuau2gn] {
    display: inline-flex;
    gap: 8px;
    background: #fff6f0; /* slightly lighter pill */
    border: 1px solid #f3e1d0;
    border-radius: 999px; /* full pill */
    padding: 6px;
    margin: 0.5rem 0 1rem 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}

.avatar-mode-tab[b-391iuau2gn] {
    appearance: none;
    background: transparent;
    color: #6d5946;
    border: none; /* rely on pill container */
    border-radius: 999px; /* round */
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.avatar-mode-tab:hover[b-391iuau2gn] {
    background: #fff6f0;
    border-color: #f3c7a4;
}

.avatar-mode-tab.active[b-391iuau2gn] {
    background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
    color: #38250d;
    border-color: #f9ac9c;
    box-shadow: 0 2px 8px rgba(251, 187, 173, 0.25);
}

/* Style presets (chips) layout: 4 across, small thumbnails and labels underneath */
.premium-style-presets[b-391iuau2gn] {
    text-align: center;
    margin-bottom: 0.6rem;
}

.style-chips-row[b-391iuau2gn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    justify-items: center;
    align-items: start;
    margin-top: 8px;
}

.style-chip[b-391iuau2gn] {
    background: #fff9f4;
    border: 1px solid #f0e1d0;
    border-radius: 12px;
    padding: 6px 6px 8px 6px;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.style-chip .chip-icon[b-391iuau2gn] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff6f0 0%, #fdeee0 100%);
    border: 2px solid #efd7bb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #6d5946;
}

.style-chip .chip-label[b-391iuau2gn] {
    font-size: 0.72rem;
    color: #6d5946;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.style-chip.selected[b-391iuau2gn] {
    background: linear-gradient(180deg,#fdefe8 0%, #fff6f2 100%);
    border-color: #f9c8b0;
    box-shadow: 0 2px 8px rgba(249,172,156,0.12);
}

/* Photo upload preview inside premium modal */
.uploaded-photo-preview[b-391iuau2gn] {
    margin-top: 0.5rem;
    padding: 8px;
    background: #fff6f0;
    border: 1px dashed #f0e1d0;
    border-radius: 12px;
    display: inline-block;
}

.uploaded-photo-preview img[b-391iuau2gn] {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #fbbbad;
    box-shadow: 0 2px 10px rgba(251, 187, 173, 0.25);
}

/* Inline options row spacing */
.premium-form-group.options-inline[b-391iuau2gn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-form-group.options-inline label[b-391iuau2gn] {
    margin: 0;
}

.premium-form-group select.form-select-styled[b-391iuau2gn] {
    padding: 10px 42px 10px 12px;
    border: 1.3px solid #f0e1d0;
    background-color: #fff9f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b5243' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #473b26;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Premium Avatar Tile in the avatar picker list */
.premium-avatar-tile[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #fbbbad;
    background: #fff3ec;
    border-radius: 16px;
    color: #bc8b62;
    font-weight: 600;
    width: 68px;
    height: 68px;
    cursor: pointer;
    font-size: 0.85em;
    gap: 2px;
    transition: border 0.16s, background 0.16s;
    text-align: center;
    padding: 4px;
    width:100%
}

.premium-avatar-tile:hover[b-391iuau2gn] {
    border-color: #ff9d7a;
    background: #fff0e7;
}

/* Make the premium tile span 3 columns on desktop and be full-width on mobile */
@media (min-width: 900px) {
    .avatar-picker-list .premium-avatar-tile[b-391iuau2gn] {
        /* Desktop: make the premium tile stack and occupy the full row */
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        height: auto; /* let content determine height for better stacking */
        padding: 14px;
        font-size: 1.05rem;
    }
}

@media (max-width: 899px) {
    .avatar-picker-list .premium-avatar-tile[b-391iuau2gn] {
        grid-column: auto;
        width: 100%;
        height: auto;
        padding: 10px 12px;
    }
}

.premium-icon[b-391iuau2gn] {
    font-size: 1.2em;
    color: #ffad60;
    margin-bottom: 2px;
}

.premium-text[b-391iuau2gn] {
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.1;
}

.premium-subtitle[b-391iuau2gn] {
    font-size: 0.65em;
    font-weight: 400;
    opacity: 0.8;
    line-height: 1;
}

/* Premium Avatar Modal */
.premium-avatar-modal[b-391iuau2gn] {
    background: #fff9f4;
    padding: 2.2em 2.5em;
    border-radius: 24px;
    box-shadow: 0 8px 32px #b2805040;
    min-width: 340px;
    max-width: 97vw;
    position: relative;
    text-align: center;
}

/* Desktop & tablet: constrain modal content and allow scrolling for tall content */
@media (min-width: 601px) {
    .premium-avatar-modal[b-391iuau2gn] {
        max-height: 88vh; /* keep some viewport breathing room */
        display: flex;
        flex-direction: column;
        padding: 1.6rem 2rem;
        overflow: hidden; /* inner area will scroll */
    }

    .premium-avatar-body[b-391iuau2gn] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        padding-right: 8px; /* allow for scrollbar without touching layout */
    }

    /* Keep actions visible by making them sticky within the modal */
    .premium-form-actions[b-391iuau2gn] {
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255,249,246,0.0), #fff9f4 40%);
        padding: 1rem 0.5rem;
        z-index: 20;
    }
}

/* Mobile-friendly: make premium modal full-screen on small devices and inner content scrollable */
@media (max-width: 600px) {
    .premium-avatar-modal[b-391iuau2gn] {
        width: 100% !important;
        height: 100vh; /* occupy full viewport height */
        max-width: 100vw !important;
        border-radius: 0 !important;
        padding: 1rem 1rem 0.5rem 1rem !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Make header and tabs flow naturally and allow body to scroll */
    .premium-avatar-header[b-391iuau2gn] {
        padding: 0 0.25rem;
        margin-bottom: 0.5rem;
    }

    .avatar-mode-tabs[b-391iuau2gn] {
        justify-content: center;
        margin-bottom: 0.5rem;
        overflow: auto;
    }

    .premium-avatar-body[b-391iuau2gn] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        padding: 0.25rem 0.25rem 0.5rem 0.25rem;
    }

    /* Make preview card and form pane stack and be responsive */
    .premium-form-pane[b-391iuau2gn],
    .premium-preview-card[b-391iuau2gn] {
        width: 100%;
        box-sizing: border-box;
    }

    /* Sticky actions footer at the bottom */
    .premium-form-actions[b-391iuau2gn] {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
       /* background: linear-gradient(180deg, rgba(255,249,246,0.0), #fff9f4 30%);*/
        box-shadow: 0 -6px 18px rgba(120,80,55,0.06);
        z-index: 30;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        align-items: center;
    }

    .premium-form-actions .actions-right[b-391iuau2gn] {
        display: flex;
        gap: 0.5rem;
    }

    .premium-form-actions .actions-left[b-391iuau2gn] {
        display: none; /* hide cancel on left to prioritize primary actions */
    }

    .btn-modal-premium[b-391iuau2gn] {
        flex: 1 1 auto;
    }

    .btn-modal-cancel-refined[b-391iuau2gn] {
        flex: 1 1 auto;
    }
}

.premium-modal-subtitle[b-391iuau2gn] {
    color: #967f6b;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.premium-form-group[b-391iuau2gn] {
    margin-bottom: 1.5rem;
    text-align: left;
}

.premium-form-group label[b-391iuau2gn] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: #594a3a;
}

.premium-form-group textarea[b-391iuau2gn] {
    width: 100%;
    border: 1.3px solid #f0e1d0;
    background: #fff9f4;
    border-radius: 15px;
    padding: 0.92em 1.1em;
    font-size: 1.06rem;
    color: #473b26;
    transition: border 0.18s;
    box-sizing: border-box;
    outline: none;
    resize: none;
    font-family: inherit;
}

.premium-form-group textarea:focus[b-391iuau2gn] {
    border-color: #fbbbad;
    background: #fff6f0;
}

.premium-form-group .input-hint[b-391iuau2gn] {
    display: block;
    color: #967f6b;
    font-size: 0.9rem;
    margin-top: 0.5em;
}

.premium-form-actions[b-391iuau2gn] {
    display: flex;
    gap: 1em;
    justify-content: center;
    
}

.btn-modal-premium[b-391iuau2gn] {
    background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
    color: #38250d;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    padding: 0.8em 2em;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.btn-modal-premium:hover[b-391iuau2gn] {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(251, 187, 173, 0.4);
}

.btn-modal-premium:disabled[b-391iuau2gn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
}

.premium-icon-small[b-391iuau2gn] {
    font-size: 1em;
    color: #ffad60;
}

/* Progressbar-style two-step stepper (Generate Avatar -> Done) */
.premium-two-step-stepper[b-391iuau2gn] {
    margin: 0.75rem 0 1rem 0;
    width: 100%;
    max-width: 720px;
}

.premium-two-step-stepper .stepper-inner[b-391iuau2gn] {
    position: relative;
    height: 60px;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

.premium-two-step-stepper .stepper-track[b-391iuau2gn] {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
    top: 50%;
    transform: translateY(-50%);
}

.premium-two-step-stepper .stepper-progress[b-391iuau2gn] {
    position: absolute;
    left: 14px;
    height: 12px;
    border-radius: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #fbbbad 0%, #f9ac9c 100%);
    transition: width 360ms ease;
    box-shadow: 0 4px 12px rgba(249, 172, 156, 0.12);
}

.premium-two-step-stepper .stepper-labels[b-391iuau2gn] {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 2; /* above track */
}

.premium-two-step-stepper .step-label[b-391iuau2gn] {
    font-weight: 700;
    color: #7a5a43;
    font-size: 0.98rem;
    padding: 6px 10px;
    border-radius: 10px;
}

/* State-specific subtle visual cues */
.premium-two-step-stepper .stepper-inner.idle .stepper-progress[b-391iuau2gn] {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.04) 100%);
}

.premium-two-step-stepper .stepper-inner.in-progress .stepper-progress[b-391iuau2gn] {
    background: linear-gradient(90deg, #ffd6c2 0%, #ffb79a 100%);
}

.premium-two-step-stepper .stepper-inner.done .stepper-progress[b-391iuau2gn] {
    background: linear-gradient(90deg, #b9f1c7 0%, #6fe39a 100%);
}

.premium-two-step-stepper .stepper-inner.in-progress .step-left[b-391iuau2gn] {
    color: #38250d;
}

.premium-two-step-stepper .stepper-inner.done .step-right[b-391iuau2gn] {
    color: #165d3a;
}

/* Small screens: compress height */
@media (max-width: 600px) {
    .premium-two-step-stepper .stepper-inner[b-391iuau2gn] { height: 54px; padding: 8px 10px; }
    .premium-two-step-stepper .stepper-labels .step-label[b-391iuau2gn] { font-size: 0.92rem; }
}

.spinner-inline[b-391iuau2gn] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #38250d;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin-b-391iuau2gn 1s ease-in-out infinite;
}

/* New upload-specific styles */
.preview-cancel-btn[b-391iuau2gn] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(220, 38, 38, 0.95);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
    transition: all 0.2s ease;
    z-index: 10;
}

.preview-cancel-btn:hover[b-391iuau2gn] {
    background: rgba(185, 28, 28, 0.95);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.4);
}

.preview-cancel-btn:active[b-391iuau2gn] {
    transform: scale(0.95);
}

.upload-overlay[b-391iuau2gn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.upload-spinner[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #594a3a;
}

.upload-spinner p[b-391iuau2gn] {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.spinner-large[b-391iuau2gn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f0e1d0;
    border-radius: 50%;
    border-top-color: #fbbbad;
    animation: spin-b-391iuau2gn 1s linear infinite;
}

.upload-success-overlay[b-391iuau2gn] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(76, 175, 80, 0.95);
    color: white;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.success-icon[b-391iuau2gn] {
    font-size: 1.1em;
    font-weight: bold;
}

.upload-security-caption[b-391iuau2gn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.security-icon[b-391iuau2gn] {
    color: #10b981;
    font-size: 1rem;
}

.preview-actions[b-391iuau2gn] {
    display: flex;
    gap: 0.8em;
    justify-content: center;
    margin-top: 0;
}

.premium-preview-empty[b-391iuau2gn] {
    width: 220px;
    height: 220px;
    border: 3px dashed #f3cbb9;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a6651;
    font-style: normal;
    background: #fffaf6;
    flex-direction: column;
    gap: 10px;
}

.premium-preview-empty.clickable[b-391iuau2gn] {
    cursor: pointer;
    transition: all 0.2s ease;
    flex-direction: column;
    gap: 8px;
}

.premium-preview-empty.clickable:hover[b-391iuau2gn] {
    background: #fff6f0;
    border-color: #e8d2b8;
    color: #7a6651;
}

.premium-preview-empty .upload-icon[b-391iuau2gn] {
    font-size: 2.4rem;
    margin-bottom: 0;
}

/* Slim, neutral stylization slider appearance */
.stylization-slider[b-391iuau2gn] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #efe6dc 0%, #f9f1e9 100%);
    border-radius: 20px;
    outline: none;
}

.stylization-slider[b-391iuau2gn]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fbbbad;
    box-shadow: 0 2px 6px rgba(251,187,173,0.18);
    margin-top: -4px; /* center thumb */
}

.stylization-slider[b-391iuau2gn]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fbbbad;
    box-shadow: 0 2px 6px rgba(251,187,173,0.18);
}

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

/* Generated Avatar Preview */
.generated-avatar-preview[b-391iuau2gn] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #fff6f0;
    border-radius: 16px;
    border: 1px solid #f0e1d0;
}

.generated-avatar-preview h4[b-391iuau2gn] {
    color: #594a3a;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.generated-avatar-img[b-391iuau2gn] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #fbbbad;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: 0 3px 12px rgba(251, 187, 173, 0.2);
}

.generated-avatar-actions[b-391iuau2gn] {
    display: flex;
    gap: 0.8em;
    justify-content: center;
}

.btn-modal-secondary[b-391iuau2gn] {
    background: #fbbbad;
    color: #38250d;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    padding: 0.7em 1.5em;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
    transition: all 0.2s ease;
}

.btn-modal-secondary:hover[b-391iuau2gn] {
    background: #f9ac9c;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
}

.btn-modal-tertiary[b-391iuau2gn] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
    border-radius: 20px;
    font-weight: 600;
    padding: 0.7em 1.5em;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-modal-tertiary:hover[b-391iuau2gn] {
    background-color: rgba(239, 215, 187, 0.15);
    border-color: #e8c8a0;
}

/* Error message styling */
.error-message[b-391iuau2gn] {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 12px;
    border: 1px solid #fecaca;
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    .modal-overlay[b-391iuau2gn] {
        align-items: flex-start;
    }

    .modal-content[b-391iuau2gn] {
        margin-top: 0;
    }

    .premium-avatar-modal[b-391iuau2gn] {
        padding: 1.5em 1.8em;
        min-width: 280px;
    }

    .premium-form-actions[b-391iuau2gn] {
        flex-direction: column;
        align-items: stretch;
    }

    .generated-avatar-actions[b-391iuau2gn],
    .preview-actions[b-391iuau2gn] {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-preview-img[b-391iuau2gn] {
        width: 150px;
        height: 150px;
    }

    .premium-preview-empty[b-391iuau2gn] {
        width: 150px;
        height: 150px;
    }
}

.premium-form-group .input-hint[b-391iuau2gn] {
    display: block;
    color: #967f6b;
    font-size: 0.9rem;
    margin-top: 0.5em;
}

.premium-form-actions[b-391iuau2gn] {
    display: flex;
    gap: 1em;
    justify-content: center;
    
}

.btn-modal-premium[b-391iuau2gn] {
    background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
    color: #38250d;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    padding: 0.8em 2em;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.btn-modal-premium:hover[b-391iuau2gn] {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(251, 187, 173, 0.4);
}

.btn-modal-premium:disabled[b-391iuau2gn] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
}

.premium-icon-small[b-391iuau2gn] {
    font-size: 1em;
    color: #ffad60;
}

/* Close button positioning for premium modal — match parent modal placement */
.modal-close-icon-button.premium-close[b-391iuau2gn] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    z-index: 5;
}

.modal-close-icon-button.premium-close:hover[b-391iuau2gn] {
    color: var(--text);
}

.spinner-inline[b-391iuau2gn] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #38250d;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin-b-391iuau2gn 1s ease-in-out infinite;
}

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

/* Generated Avatar Preview */
.generated-avatar-preview[b-391iuau2gn] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #fff6f0;
    border-radius: 16px;
    border: 1px solid #f0e1d0;
}

.generated-avatar-preview h4[b-391iuau2gn] {
    color: #594a3a;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.generated-avatar-img[b-391iuau2gn] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #fbbbad;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: 0 3px 12px rgba(251, 187, 173, 0.2);
}

.generated-avatar-actions[b-391iuau2gn] {
    display: flex;
    gap: 0.8em;
    justify-content: center;
}

.btn-modal-secondary[b-391iuau2gn] {
    background: #fbbbad;
    color: #38250d;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    padding: 0.7em 1.5em;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
    transition: all 0.2s ease;
}

.btn-modal-secondary:hover[b-391iuau2gn] {
    background: #f9ac9c;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
}

.btn-modal-tertiary[b-391iuau2gn] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
    border-radius: 20px;
    font-weight: 600;
    padding: 0.7em 1.5em;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-modal-tertiary:hover[b-391iuau2gn] {
    background-color: rgba(239, 215, 187, 0.15);
    border-color: #e8c8a0;
}

/* Error message styling */
.error-message[b-391iuau2gn] {
    margin-top: 1rem;
    padding: 1rem;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 12px;
    border: 1px solid #fecaca;
    font-size: 0.95rem;
}

/* ============================
   Premium AI Avatar Modal - Exclusive styling
   ============================ */
.premium-avatar-modal[b-391iuau2gn] {
    background: #FFFCFA;
    border-radius: 20px;
    padding: 22px 24px;
    border: 1px solid #f0e1d0;
    box-shadow: 0 10px 28px rgba(168, 120, 78, 0.18);
    max-width: 600px;
    width: 92vw;
    position: relative; /* ensure absolute children like close button are placed correctly */
}

.premium-avatar-modal.large[b-391iuau2gn] {
    /* mobile-card style: compact, tall, frosted feel */
    max-width: 480px;
    width: 92vw;
    border-radius: 22px;
    padding: 18px 18px;
    box-shadow: 0 18px 50px rgba(148, 96, 48, 0.12), 0 3px 0 rgba(255, 236, 225, 0.35) inset;
    position: relative;
    background: linear-gradient(180deg,#fffaf6,#fff6f2);
}

/* Two-state stepper (Skapa -> Välj) specific styles */
.premium-two-step-stepper[b-391iuau2gn] {
    display: flex;
    justify-content: center;
    margin: 8px 0 14px;
}
.premium-two-step-stepper .stepper-inner[b-391iuau2gn] {
    display: flex;
    gap: 10px;
    background: #fff8f4;
    border: 1px solid rgba(240,222,210,0.6);
    padding: 6px;
    border-radius: 12px;
    align-items: center;
}
.premium-two-step-stepper .stepper-item[b-391iuau2gn] {
    padding: 8px 14px;
    border-radius: 10px;
    color: #8b6a52;
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 80px;
    text-align: center;
}
.premium-two-step-stepper .stepper-item.active[b-391iuau2gn] {
    background: linear-gradient(180deg,#ffd7c2,#fbb0a0);
    color: #482b20;
    box-shadow: 0 10px 26px rgba(251,187,173,0.18);
}
.premium-two-step-stepper .stepper-item .step-sub[b-391iuau2gn] {
    display: block;
    font-size: 0.8rem;
    color: #6b5243;
    font-weight: 600;
    margin-top: 4px;
}
.premium-two-step-stepper .stepper-item .step-sub.error[b-391iuau2gn] {
    color: #b91c1c;
}

@media (max-width: 520px) {
    .premium-two-step-stepper .stepper-inner[b-391iuau2gn] { gap: 8px; padding: 6px; }
    .premium-two-step-stepper .stepper-item[b-391iuau2gn] { padding: 8px 10px; min-width: 64px; font-size: 0.88rem; }
}

.premium-avatar-header[b-391iuau2gn] {
    text-align: left;
    margin-bottom: 0.75rem;
}

.premium-avatar-header .premium-title[b-391iuau2gn] {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem 0;
}

.premium-avatar-header .premium-modal-subtitle[b-391iuau2gn] {
    color: #967f6b;
    margin: 0 0 0.75rem 0;
}

.avatar-mode-tabs[b-391iuau2gn] {
    display: flex;
    gap: 10px;
    margin: 10px 0 16px 0;
}

.avatar-mode-tab[b-391iuau2gn] {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: #6e5a4a;
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s ease;
}

.avatar-mode-tab:hover[b-391iuau2gn] {
    border-color: #e8c8a0;
    transform: translateY(-1px);
}

.avatar-mode-tab.active[b-391iuau2gn] {
    background: linear-gradient(180deg,#ffdcc6,#fbbbad);
    color: #38250d;
    box-shadow: 0 6px 18px rgba(251,187,173,0.24);
}

/* pill stepper */
.premium-stepper[b-391iuau2gn] {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 6px 0 12px;
    padding: 4px;
    background: #fff8f4;
    border: 1px solid rgba(240,222,210,0.55);
    border-radius: 12px;
    max-width: 420px;
}
.premium-stepper .stepper-item[b-391iuau2gn] {
    padding: 8px 14px;
    border-radius: 10px;
    background: transparent;
    color: #8b6a52;
    font-weight: 700;
    font-size: 0.92rem;
    border: none;
}
.premium-stepper .stepper-item.active[b-391iuau2gn] { background: linear-gradient(180deg,#ffd7c2,#fbb0a0); color: #482b20; box-shadow: 0 10px 26px rgba(251,187,173,0.18); }
.premium-stepper .stepper-item.done[b-391iuau2gn] { opacity: 0.95; }

/* Style chips */
.premium-style-presets[b-391iuau2gn] { display:flex; flex-direction:column; align-items:center; gap:12px; margin: 10px 0 18px; }
.premium-style-presets .style-presets-label[b-391iuau2gn] { font-weight:700; color:var(--text); font-family: var(--font-serif); }
.style-chips-row[b-391iuau2gn] {
    display: grid;
    gap: 8px;
    justify-content: center;
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    max-width: 480px;
}
.style-chip[b-391iuau2gn] { background:#fff8f6; border:1px solid #f4e4d8; padding:12px 10px; border-radius:14px; font-weight:700; cursor:pointer; color:#5c3f31; display:flex; flex-direction:column; align-items:center; gap:8px; width:100px; height:100px; box-shadow: 0 6px 18px rgba(200,120,60,0.03); transition: box-shadow 140ms ease, transform 140ms ease, background 140ms ease; }
.style-chip.selected[b-391iuau2gn] { background: linear-gradient(180deg,#ffd7c2,#fdb6a4); color:#3d261c; box-shadow: 0 12px 30px rgba(251,187,173,0.12); transform: translateY(-4px); }

.style-chip .chip-icon[b-391iuau2gn] { width:56px; height:56px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fffefc, #fff6f2); display:flex; align-items:center; justify-content:center; font-weight:700; color:#8b5f4a; border:1px solid rgba(245,220,205,0.95); box-shadow: inset 0 4px 12px rgba(255,255,255,0.6); }
.style-chip .chip-label[b-391iuau2gn] { font-size:0.95rem; margin-top:6px; color:#4a2e24; }

/* smaller adjustments used in tighter grid contexts */
@media (max-width: 520px) {
    .modal-content.lovedone-edit-modal-content[b-391iuau2gn] { padding: 18px 16px; max-width: 420px; }
    .premium-style-presets[b-391iuau2gn] { margin-top: 8px; }
    .style-chips-row[b-391iuau2gn] { gap:10px; }
    .style-chip[b-391iuau2gn] { min-width:84px; padding:10px; }
    .style-chip .chip-icon[b-391iuau2gn] { width:48px; height:48px; }
}

.chip-icon[b-391iuau2gn] { width:56px; height:56px; border-radius:50%; background: linear-gradient(180deg,#fff6f0,#ffe9dd); display:flex; align-items:center; justify-content:center; font-weight:800; color:#8b6a52; border:1px solid #f0d9c5; box-shadow: 0 6px 18px rgba(200,120,60,0.06); }
.chip-label[b-391iuau2gn] { font-size:0.86rem; color:#6e5844; font-weight:700; text-align:center; margin-top:4px; }

/* Force stacking/centering of label + chips inside the mobile card (.large) so the chips appear under the tabs */
.premium-avatar-modal.large .options-inline[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.premium-avatar-modal.large .options-inline label[b-391iuau2gn] { text-align: center; }

/* Ensure the grid-style options-inline used elsewhere becomes a single centered column inside the large mobile modal
   so the chips are positioned under the tabs exactly like the design mock. This targets the .large modal only. */
.premium-avatar-modal.large .premium-form-group.options-inline[b-391iuau2gn] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 12px;
}

/* circular preview */
.premium-preview-img[b-391iuau2gn] { width: 180px; height: 180px; border-radius: 999px; object-fit:cover; border:6px solid rgba(251,187,173,0.85); box-shadow: 0 18px 40px rgba(205,125,60,0.12); }

/* generated thumbnails */
.generated-thumbnails-row[b-391iuau2gn] { display:flex; gap:10px; justify-content:center; margin-top:12px; }
.generated-thumb[b-391iuau2gn] { width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid #efdbc6; box-shadow:0 8px 20px rgba(150,100,60,0.06); cursor:pointer; }
.generated-thumb img[b-391iuau2gn] { width:100%; height:100%; object-fit:cover; }
.generated-actions[b-391iuau2gn] { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.generated-action-btn[b-391iuau2gn] { padding:8px 12px; border-radius:12px; border:1px solid #efd7bb; background:#fff6f0; font-weight:700; color:#6e4f3a; }
.generated-action-btn.primary[b-391iuau2gn] { background: linear-gradient(180deg,#ffdcc8,#fbbbad); color:#38250d; }

/* Stacked single-column mobile-card layout to match design mock */
.premium-avatar-body[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.premium-form-pane[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}

/* Preview card (centered circular focal point with dashed inner box for photo upload) */
.premium-preview-card[b-391iuau2gn] {
    background: transparent;
    border: none;
    border-radius: 18px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0 0 0;
    width: 100%;
}

.preview-content-wrapper[b-391iuau2gn] { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.preview-image-container[b-391iuau2gn] { position:relative; display:flex; align-items:center; justify-content:center; width:100%; }

/* outer preview area */
.premium-preview-empty[b-391iuau2gn] {
    width: 220px;
    height: 220px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background: #fff7f4;
    box-shadow: 0 8px 26px rgba(170,110,70,0.06);
}

/* inner dashed upload box */
.premium-preview-inner[b-391iuau2gn] {
    width: 220px;
    height: 220px;
    border-radius: 14px;
    border: 3px dashed rgba(242,195,173,0.95);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b57f5b;
    font-weight:700;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    padding: 12px;
}

/* circular preview when image present */
.premium-preview-img[b-391iuau2gn] { width: 180px; height:180px; border-radius:999px; object-fit:cover; border:6px solid rgba(251,187,173,0.9); box-shadow: 0 22px 44px rgba(200,120,60,0.10); }

/* Sticky actions */
.premium-form-actions.sticky[b-391iuau2gn] {
    position: sticky;
    bottom: -8px; /* inside modal */
    /*background: linear-gradient(180deg, rgba(255,252,250,0.0), #FFFCFA 60%);*/
    padding-top: 10px;
    margin-top: 6px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0e1d0;
}

/* cancel (left) smaller rounded rectangle */
.premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn] {
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(236,220,208,0.9);
    background: #fffaf8;
    color: #4a2e24;
    font-weight:700;
}

/* primary (right) large pill */
.premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
    padding: 14px 26px;
    border-radius: 28px;
    font-weight:800;
    background: linear-gradient(180deg,#ffd7c2,#fdb6a4);
    color:#3d261c;
    box-shadow: 0 18px 40px rgba(245,150,100,0.12);
}

/* Inputs spacing within premium modal */
.premium-avatar-modal .premium-form-group label[b-391iuau2gn] {
    font-weight: 700;
    color: var(--text);
}

.premium-avatar-modal .premium-form-group textarea[b-391iuau2gn],
.premium-avatar-modal .premium-form-group select[b-391iuau2gn],
.premium-avatar-modal .premium-form-group input[type="range"][b-391iuau2gn] {
    margin-top: 6px;
}

.premium-avatar-modal .options-inline[b-391iuau2gn] {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 10px;
}

/* Responsive */
@media (min-width: 900px) {
    .premium-avatar-body[b-391iuau2gn] {
        grid-template-columns: 1fr 300px;
        gap: 22px;
    }
}

@media (max-width: 600px) {
    .premium-avatar-modal.large[b-391iuau2gn] {
        padding: 22px 18px;
        border-radius: 20px;
        max-width: 92vw;
    }

    .premium-form-actions.sticky[b-391iuau2gn] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Stack label above style chips on mobile and center them */
    .premium-avatar-modal .options-inline[b-391iuau2gn] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .premium-avatar-modal .options-inline label[b-391iuau2gn] {
        width: 100%;
        text-align: center;
    }

    .premium-preview-inner[b-391iuau2gn] { width: 260px; height: 260px; }

    /* make chips flow in two columns on narrow mobile to match mock spacing */
    .style-chips-row[b-391iuau2gn] { justify-content: center; gap: 12px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
    .style-chip[b-391iuau2gn] { min-width: 0; width: 140px; box-sizing: border-box; }
    .chip-icon[b-391iuau2gn] { width:60px; height:60px; }
}

/* Mobile: center the primary button as a pill and avoid full-width stretching
   This override makes the premium modal mobile footer match the provided mock */
@media (max-width: 600px) {
    .premium-avatar-modal .premium-form-actions[b-391iuau2gn] {
        flex-direction: column;
        gap: 12px;
        align-items: center; /* center children horizontally */
        justify-content: center;
        padding: 0.9rem 0.75rem;
    }

    /* Show the cancel above the centered primary on mobile: make it a centered pill */
    .premium-avatar-modal .premium-form-actions .actions-left[b-391iuau2gn] {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        order: 0; /* ensure it appears above the primary */
    }

    .premium-avatar-modal .premium-form-actions .actions-right[b-391iuau2gn] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Make the primary a centered pill with max-width so it doesn't span full width */
    .premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
        width: auto !important;
        min-width: 260px;
        max-width: 92%;
        padding: 0.9rem 2.4rem;
        border-radius: 25px;
        display: inline-flex;
        justify-content: center;
    }

    /* Make cancel match primary width on mobile: same min-width and centered pill */
    .premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn] {
        width: auto !important;
        min-width: 260px; /* match primary min-width used for centered primary */
        max-width: 92%;
        padding: 0.9rem 2.4rem;
        border-radius: 25px;
        display: inline-flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-overlay[b-391iuau2gn] {
        align-items: flex-start;
    }

    .modal-content[b-391iuau2gn] {
        margin-top: 0;
    }

    .premium-avatar-modal[b-391iuau2gn] {
        padding: 1.5em 1.8em;
        min-width: 280px;
    }

    .premium-form-actions[b-391iuau2gn] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .generated-avatar-actions[b-391iuau2gn] {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    
    .chip-icon[b-391iuau2gn] { width:48px; height:48px; font-size:1rem; }
    .premium-preview-inner[b-391iuau2gn] { width:200px; height:200px; }
@media (max-width: 600px) {
  /* Footer buttons side-by-side on mobile (like Pet modal) */
  .lovedone-modal-footer[b-391iuau2gn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.08);
    position: sticky;
    bottom: 0;
    background: #FFFCFA;
  }
  .lovedone-modal-footer .btn-modal-cancel-refined[b-391iuau2gn],
  .lovedone-modal-footer .btn-modal-save-refined[b-391iuau2gn] {
    width: auto;
    flex: 1 1 0;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    font-size: 1rem;
  }
}}

/* ── Seed Family Tree Prompt Card ── */

.seed-prompt-card[b-391iuau2gn] {
    background: linear-gradient(135deg, #FDF8F0 0%, #FFF4E4 100%);
    border: 1.5px solid #E8DCC8;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.seed-prompt-icon[b-391iuau2gn] {
    font-size: 2rem;
    line-height: 1;
}

.seed-prompt-title[b-391iuau2gn] {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: #3A3228;
    margin: 0;
}

.seed-prompt-body[b-391iuau2gn] {
    font-size: 0.95rem;
    color: #5A534C;
    line-height: 1.6;
    margin: 0;
}

.seed-prompt-select[b-391iuau2gn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.seed-prompt-select label[b-391iuau2gn] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4A3F35;
}

.form-select-styled[b-391iuau2gn] {
    padding: 0.6rem 2.6rem 0.6rem 0.85rem;
    border: 1.3px solid #f0e1d0;
    border-radius: 12px;
    background-color: #fff9f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b5243' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    font-size: 0.95rem;
    color: #473b26;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-select-styled:focus[b-391iuau2gn] {
    outline: none;
    border-color: #fbbbad;
    background-color: #fff6f0;
    box-shadow: 0 0 0 2px rgba(251, 187, 173, 0.15);
}

.seed-prompt-actions[b-391iuau2gn] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.seed-btn-primary[b-391iuau2gn] {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #C49A6C, #A67B50);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.seed-btn-primary:hover:not(:disabled)[b-391iuau2gn] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.seed-btn-primary:disabled[b-391iuau2gn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.seed-btn-dismiss[b-391iuau2gn] {
    padding: 0.6rem 1.25rem;
    border: 1.5px solid #D3C5B0;
    border-radius: 24px;
    background: transparent;
    color: #6B5D4D;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.seed-btn-dismiss:hover[b-391iuau2gn] {
    background: rgba(176, 141, 110, 0.08);
}

.spinner-inline[b-391iuau2gn] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-inline-b-391iuau2gn 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

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

@media (max-width: 540px) {
    .seed-prompt-card[b-391iuau2gn] {
        padding: 1.15rem 1.25rem;
    }

    .seed-prompt-actions[b-391iuau2gn] {
        flex-direction: column;
    }

    .seed-btn-primary[b-391iuau2gn],
    .seed-btn-dismiss[b-391iuau2gn] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/LovedOneTypeSelectorModal.razor.rz.scp.css */
/* LovedOneTypeSelectorModal — Art Card storybook design */

/* ─── Overlay ─── */
.modal-overlay[b-f2wm694rio] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 28px);
    box-sizing: border-box;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9999;
}

.modal-overlay.visible[b-f2wm694rio] { opacity: 1; visibility: visible; }

/* ─── Modal card ─── */
.modal-content.type-selector-modal[b-f2wm694rio] {
    position: relative;
    background: #fff8f6;
    border-radius: 22px;
    width: min(560px, 100%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    margin: auto;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 28px 28px 16px;
    transform: translateY(6px) scale(0.985);
    transition: transform .25s ease;
}

.modal-overlay.visible .modal-content.type-selector-modal[b-f2wm694rio] {
    transform: translateY(0) scale(1);
    z-index: 10000;
}

/* ─── Explicit close control ─── */
.selector-close-button[b-f2wm694rio] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(75, 46, 46, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.74);
    color: #4B2E2E;
    box-shadow: 0 6px 18px rgba(75, 46, 46, 0.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    padding: 0 0 3px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.selector-close-button:hover[b-f2wm694rio],
.selector-close-button:focus-visible[b-f2wm694rio] {
    background: #ffffff;
    border-color: rgba(75, 46, 46, 0.2);
    box-shadow: 0 8px 22px rgba(75, 46, 46, 0.12);
}

.selector-close-button:focus-visible[b-f2wm694rio] {
    outline: 2px solid rgba(224, 142, 46, 0.38);
    outline-offset: 2px;
}

.selector-close-button:active[b-f2wm694rio] {
    transform: scale(0.96);
}

/* ─── Title + subtitle ─── */
.selector-title[b-f2wm694rio] {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.25;
    color: #4B2E2E;
    margin: 8px 48px 12px 4px;
}

.selector-subtitle[b-f2wm694rio] {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #7B6A66;
    margin: 0 0 22px 4px;
}

/* ─── Options grid ─── */
.type-options[b-f2wm694rio] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 12px 0 8px;
}

/* ─── Art Card button ─── */
.type-option[b-f2wm694rio] {
    background: #ffffff;
    border: 1.5px solid #f1dbd4;
    border-radius: 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 260px;
    cursor: pointer;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.type-option:hover[b-f2wm694rio] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(210, 160, 100, 0.25);
    border-color: #e4c9a8;
}

.type-option:active[b-f2wm694rio] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(210, 160, 100, 0.18);
}

/* ─── Art Card image wrapper ─── */
.art-card-image-wrapper[b-f2wm694rio] {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 65%;
    overflow: hidden;
}

/* ─── Art Card image ─── */
.art-card-image[b-f2wm694rio] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s ease;
}

.type-option:hover .art-card-image[b-f2wm694rio] {
    transform: scale(1.04);
}

/* ─── Fade: image → white card ─── */
.art-card-fade[b-f2wm694rio] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent 0%, transparent 30%, #ffffff 100%);
    pointer-events: none;
}

/* ─── Type label ─── */
.type-label[b-f2wm694rio] {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: #4B2E2E;
    text-align: center;
    padding: 10px 12px 18px;
}

/* ─── Cancel link ─── */
.cancel-link[b-f2wm694rio] {
    margin-top: 18px;
    background: transparent;
    border: none;
    color: #6f5b56;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 6px;
    border-radius: 10px;
    transition: background-color .2s ease;
    display: inline-flex;
    text-align: left;
}

.cancel-link:hover[b-f2wm694rio] {
    background: rgba(0, 0, 0, 0.04);
}

/* ─── Mobile ─── */
@media (max-width: 640px) {
    .modal-content.type-selector-modal[b-f2wm694rio] {
        padding: 24px 20px 18px;
        border-radius: 20px;
    }

    .selector-close-button[b-f2wm694rio] {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        font-size: 1.6rem;
    }

    .type-options[b-f2wm694rio] {
        grid-template-columns: 1fr;
    }

    .selector-title[b-f2wm694rio] {
        font-size: 1.5rem;
    }

    .selector-subtitle[b-f2wm694rio] {
        font-size: 0.9rem;
    }

    .type-option[b-f2wm694rio] {
        min-height: 200px;
    }

    .art-card-image-wrapper[b-f2wm694rio] {
        padding-bottom: 55%;
    }
}
/* /Components/LovOnePageLoader.razor.rz.scp.css */
/* ============================================================
   LovOnePageLoader — "Someone is preparing the room for you"
   ============================================================
   No box. No border. No SaaS.
   Just a warm candle floating on cream, with poetic text.
   The wait becomes a breath, not an interruption.
   ============================================================ */

.lovone-page-loader[b-cwlbzj15ek] {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: clamp(20rem, 50vh, 34rem);
    padding: 3rem 1.5rem;
    overflow: hidden;
}

.lovone-page-loader--fullscreen[b-cwlbzj15ek] {
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Warm cream backdrop — never cold, never blue --- */
.lovone-page-loader__backdrop[b-cwlbzj15ek] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 224, 168, 0.35), transparent 70%),
        linear-gradient(180deg, #FDF8F0 0%, #FAF3E5 40%, #F5EDE0 100%);
}

/* --- Central area — free-floating, no box, maximum air --- */
.lovone-page-loader__center[b-cwlbzj15ek] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: 22rem;
}

/* --- Candle flame wrapper with living glow --- */
.lovone-page-loader__flame-wrap[b-cwlbzj15ek] {
    position: relative;
    display: grid;
    place-items: center;
    width: 9rem;
    height: 9rem;
}

/* The golden aura — pulsing like a real candle */
.lovone-page-loader__glow[b-cwlbzj15ek] {
    position: absolute;
    inset: -1.5rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 210, 140, 0.50) 0%,
        rgba(255, 195, 115, 0.25) 35%,
        rgba(255, 180, 100, 0.08) 60%,
        transparent 80%
    );
    filter: blur(12px);
    animation: lovone-glow-breathe-b-cwlbzj15ek 3s ease-in-out infinite;
}

/* The warm candle image — gentle hover, no bounce */
.lovone-page-loader__candle[b-cwlbzj15ek] {
    width: 7rem;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(180, 130, 70, 0.3));
    animation: lovone-candle-breathe-b-cwlbzj15ek 3.5s ease-in-out infinite;
}

/* --- Poetic title — Fraunces serif italic, warm brown --- */
.lovone-page-loader__title[b-cwlbzj15ek] {
    margin: 0;
    padding-top: 0.4rem;
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
    font-weight: 400;
    font-style: italic;
    color: #4A3F35;
    letter-spacing: 0.02em;
    text-align: center;
    opacity: 0;
    animation: lovone-text-appear-b-cwlbzj15ek 0.8s ease-out 0.3s forwards;
}

.lovone-page-loader__subtitle[b-cwlbzj15ek] {
    margin: 0;
    max-width: 18rem;
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 0.92rem;
    font-weight: 300;
    font-style: italic;
    color: #7A6B58;
    line-height: 1.6;
    text-align: center;
    opacity: 0;
    animation: lovone-text-appear-b-cwlbzj15ek 0.8s ease-out 0.6s forwards;
}

.lovone-page-loader__screen-reader-only[b-cwlbzj15ek] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===================
   Night mode
   =================== */
body.night-mode .lovone-page-loader__backdrop[b-cwlbzj15ek] {
    background:
        radial-gradient(ellipse 50% 40% at 50% 40%, rgba(255, 190, 120, 0.12), transparent 70%),
        linear-gradient(180deg, #1C2126 0%, #181F24 50%, #151A1E 100%);
}

body.night-mode .lovone-page-loader__glow[b-cwlbzj15ek] {
    background: radial-gradient(
        circle,
        rgba(255, 195, 115, 0.35) 0%,
        rgba(255, 170, 90, 0.15) 40%,
        transparent 75%
    );
}

body.night-mode .lovone-page-loader__candle[b-cwlbzj15ek] {
    filter: drop-shadow(0 8px 28px rgba(255, 170, 90, 0.35));
}

body.night-mode .lovone-page-loader__title[b-cwlbzj15ek] {
    color: #E8DDD0;
}

body.night-mode .lovone-page-loader__subtitle[b-cwlbzj15ek] {
    color: #B8A898;
}

/* ===================
   Animations
   =================== */

/* Glow pulses like a candle — slow, organic, asymmetric */
@keyframes lovone-glow-breathe-b-cwlbzj15ek {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.94);
    }
    35% {
        opacity: 1;
        transform: scale(1.06);
    }
    65% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* Candle barely moves — stillness with a hint of life */
@keyframes lovone-candle-breathe-b-cwlbzj15ek {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-2px) scale(1.01);
    }
}

/* Text fades in gently, slightly rising */
@keyframes lovone-text-appear-b-cwlbzj15ek {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================
   Responsive
   =================== */
@media (max-width: 640px) {
    .lovone-page-loader[b-cwlbzj15ek] {
        min-height: clamp(18rem, 44vh, 26rem);
        padding: 2.5rem 1rem;
    }

    .lovone-page-loader__flame-wrap[b-cwlbzj15ek] {
        width: 7.5rem;
        height: 7.5rem;
    }

    .lovone-page-loader__candle[b-cwlbzj15ek] {
        width: 5.8rem;
    }

    .lovone-page-loader__glow[b-cwlbzj15ek] {
        inset: -1rem;
    }
}
/* /Components/MemorialCarousel.razor.rz.scp.css */
.memorial-carousel[b-oe5bocnw1p] {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0.5rem auto 0;
}

/* Ambient warm halo — candlelight glow, not a spotlight */
.memorial-carousel-halo[b-oe5bocnw1p] {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%,
            rgba(234, 210, 170, 0.18) 0%,
            rgba(220, 190, 145, 0.08) 35%,
            transparent 65%),
        radial-gradient(ellipse 90% 80% at 50% 50%,
            rgba(196, 154, 108, 0.06) 0%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Images wrapper — first image is relative to set flow height */
.memorial-carousel-images[b-oe5bocnw1p] {
    position: relative;
    width: 100%;
}

/* Portrait layers — soft radial mask fade (no hard frame) */
.memorial-carousel-image[b-oe5bocnw1p] {
    width: 100%;
    height: auto;
    display: block;
    -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
    mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
    object-fit: cover;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    animation: kenBurns-b-oe5bocnw1p 16s ease-in-out infinite alternate;
    transition: opacity 2s ease-in-out;
    z-index: 1;
    will-change: opacity;
}

/* First image sets the flow height (not absolute) */
.memorial-carousel-image:first-of-type[b-oe5bocnw1p] {
    position: relative;
}

.memorial-carousel-image.active[b-oe5bocnw1p] {
    opacity: 1;
}

/* Gentle continuous Ken Burns — never removed, so no snap during crossfade */
@keyframes kenBurns-b-oe5bocnw1p {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.03); }
}

/* Caption — museum placard feel */
.memorial-carousel-caption[b-oe5bocnw1p] {
    position: relative;
    z-index: 5;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-style: italic;
    color: #8B7B6B;
    text-align: center;
    margin-top: 0.85rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    letter-spacing: 0.01em;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.memorial-carousel-caption.visible[b-oe5bocnw1p] {
    opacity: 1;
}

/* Owner overlay */
.memorial-carousel-owner-overlay[b-oe5bocnw1p] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 12px;
    pointer-events: none;
}

.memorial-carousel-create-btn[b-oe5bocnw1p] {
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
    background: rgba(255, 244, 228, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(196, 117, 93, 0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #8B5E3C;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(139, 94, 60, 0.08);
}

.memorial-carousel:hover .memorial-carousel-create-btn[b-oe5bocnw1p] {
    opacity: 1;
}

.memorial-carousel-create-btn:hover[b-oe5bocnw1p] {
    background: rgba(255, 244, 228, 0.96);
    border-color: rgba(196, 117, 93, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(139, 94, 60, 0.12);
}

.memorial-carousel-create-btn:active[b-oe5bocnw1p] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(139, 94, 60, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .memorial-carousel[b-oe5bocnw1p] {
        max-width: 420px;
    }

    .memorial-carousel-caption[b-oe5bocnw1p] {
        font-size: 0.8rem;
        max-width: 280px;
    }

    /* Always show on mobile (no hover) */
    .memorial-carousel-create-btn[b-oe5bocnw1p] {
        opacity: 0.88;
    }
}

@media (max-width: 480px) {
    .memorial-carousel[b-oe5bocnw1p] {
        max-width: 320px;
    }

    .memorial-carousel-caption[b-oe5bocnw1p] {
        max-width: 280px;
    }
}

/* Night mode — warm but dimmed */
body.night-mode .memorial-carousel-halo[b-oe5bocnw1p] {
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%,
            rgba(196, 154, 108, 0.12) 0%,
            rgba(180, 140, 100, 0.05) 35%,
            transparent 65%),
        radial-gradient(ellipse 90% 80% at 50% 50%,
            rgba(160, 130, 90, 0.04) 0%,
            transparent 70%);
}

body.night-mode .memorial-carousel-caption[b-oe5bocnw1p] {
    color: #B0A090;
}

body.night-mode .memorial-carousel-create-btn[b-oe5bocnw1p] {
    background: rgba(55, 45, 38, 0.88);
    backdrop-filter: blur(6px);
    color: #D4C4A8;
    border-color: rgba(196, 154, 108, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.night-mode .memorial-carousel-create-btn:hover[b-oe5bocnw1p] {
    background: rgba(65, 55, 45, 0.95);
    border-color: rgba(196, 154, 108, 0.4);
}
/* /Components/MemorialGalleryModal.razor.rz.scp.css */
/* MemorialGalleryModal */

.mgallery-backdrop[b-bprihharuk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    animation: mgalleryOverlayIn-b-bprihharuk 0.25s ease-out;
}

@keyframes mgalleryOverlayIn-b-bprihharuk {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mgallery-modal[b-bprihharuk] {
    background: linear-gradient(170deg, #fdfaf5 0%, #faf6f0 40%, #f5efe6 100%);
    border-radius: 20px;
    border: 1px solid rgba(196, 154, 108, 0.15);
    width: 600px;
    max-width: 94%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(139, 115, 85, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: mgalleryContentIn-b-bprihharuk 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

/* Warm scrollbar */
.mgallery-modal[b-bprihharuk]::-webkit-scrollbar {
    width: 5px;
}

.mgallery-modal[b-bprihharuk]::-webkit-scrollbar-track {
    background: transparent;
}

.mgallery-modal[b-bprihharuk]::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.25);
    border-radius: 3px;
}

.mgallery-modal[b-bprihharuk]::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 154, 108, 0.4);
}

@keyframes mgalleryContentIn-b-bprihharuk {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */

.mgallery-header[b-bprihharuk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(232, 213, 200, 0.5);
}

.mgallery-title[b-bprihharuk] {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: #3A3228;
    margin: 0;
}

.mgallery-header-actions[b-bprihharuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Create Portrait button — outline pill, warm copper */
.mgallery-create-btn[b-bprihharuk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: transparent;
    border: 1.5px solid rgba(196, 154, 108, 0.45);
    border-radius: 20px;
    color: #A85E46;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mgallery-create-btn:hover[b-bprihharuk] {
    background: rgba(206, 133, 104, 0.08);
    border-color: rgba(196, 117, 93, 0.65);
    color: #8B4532;
    transform: translateY(-1px);
}

.mgallery-create-btn:active[b-bprihharuk] {
    transform: translateY(0);
}

.mgallery-create-icon[b-bprihharuk] {
    font-size: 0.9rem;
}

/* Variant inside empty state — larger, more prominent */
.mgallery-create-btn-empty[b-bprihharuk] {
    margin-top: 12px;
    padding: 9px 22px;
    font-size: 0.9rem;
    border-color: rgba(196, 117, 93, 0.5);
}

.mgallery-close[b-bprihharuk] {
    background: none;
    border: none;
    font-size: 24px;
    color: #8b6b66;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.mgallery-close:hover[b-bprihharuk] {
    background: rgba(196, 154, 108, 0.08);
    color: #5a3a33;
}

/* Loading */

.mgallery-loading[b-bprihharuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

/* Empty State */

.mgallery-empty[b-bprihharuk] {
    text-align: center;
    padding: 48px 24px;
    color: #8b7355;
}

.mgallery-empty-icon[b-bprihharuk] {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Grid */

.mgallery-grid[b-bprihharuk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 24px;
}

/* Card */

.mgallery-card[b-bprihharuk] {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    border: 1px solid rgba(232, 213, 200, 0.45);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mgallery-card:hover[b-bprihharuk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 115, 85, 0.1);
    border-color: rgba(232, 213, 200, 0.65);
}

.mgallery-card.featured[b-bprihharuk] {
    border-color: rgba(196, 117, 93, 0.4);
    box-shadow: 0 0 0 1px rgba(196, 117, 93, 0.08), 0 2px 12px rgba(196, 117, 93, 0.08);
}

.mgallery-card.featured:hover[b-bprihharuk] {
    box-shadow: 0 0 0 1px rgba(196, 117, 93, 0.12), 0 6px 20px rgba(196, 117, 93, 0.12);
}

/* Image */

.mgallery-image-wrapper[b-bprihharuk] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

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

.mgallery-card:hover .mgallery-image[b-bprihharuk] {
    transform: scale(1.03);
}

.mgallery-primary-badge[b-bprihharuk] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #CE8568, #A85E46);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(168, 94, 70, 0.3);
}

/* Actions */

.mgallery-card-actions[b-bprihharuk] {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px 4px;
}

.mgallery-btn[b-bprihharuk] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    color: #a09080;
}

.mgallery-btn:hover[b-bprihharuk] {
    background: rgba(196, 154, 108, 0.08);
}

.mgallery-pin-btn.active[b-bprihharuk] {
    color: #CE8568;
    border-color: rgba(206, 133, 104, 0.25);
    background: rgba(206, 133, 104, 0.08);
}

.mgallery-pin-btn.active:hover[b-bprihharuk] {
    background: rgba(206, 133, 104, 0.14);
}

.mgallery-star-btn.active[b-bprihharuk] {
    color: #B08D6E;
    border-color: rgba(176, 141, 110, 0.25);
    background: rgba(176, 141, 110, 0.08);
}

.mgallery-star-btn.active:hover[b-bprihharuk] {
    background: rgba(176, 141, 110, 0.14);
}

.mgallery-delete-btn:hover[b-bprihharuk] {
    color: #b73a3a;
    background: rgba(183, 58, 58, 0.06);
}

/* Caption Input — organic bottom-border-only */

.mgallery-caption-input[b-bprihharuk] {
    width: calc(100% - 16px);
    margin: 0 8px 10px;
    padding: 6px 4px;
    border: none;
    border-bottom: 1px solid rgba(196, 154, 108, 0.3);
    border-radius: 0;
    background: transparent;
    color: #5a3a33;
    font-size: 0.8rem;
    font-family: var(--font-serif);
    font-style: italic;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.mgallery-caption-input:focus[b-bprihharuk] {
    outline: none;
    border-bottom-color: #CE8568;
    box-shadow: 0 1px 0 rgba(206, 133, 104, 0.2);
}

.mgallery-caption-input[b-bprihharuk]::placeholder {
    color: #b5a89e;
    font-style: italic;
}

/* Footer */

.mgallery-footer[b-bprihharuk] {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(232, 213, 200, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mgallery-error[b-bprihharuk] {
    color: #b73a3a;
    font-size: 0.85rem;
    margin: 0;
}

.mgallery-save-btn[b-bprihharuk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(168, 94, 70, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.mgallery-save-btn:hover:not(:disabled)[b-bprihharuk] {
    background: linear-gradient(180deg, #d99a80 0%, #b86e54 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(168, 94, 70, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.mgallery-save-btn:active:not(:disabled)[b-bprihharuk] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(168, 94, 70, 0.2);
}

.mgallery-save-btn:disabled[b-bprihharuk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive */

@media (max-width: 540px) {
    .mgallery-modal[b-bprihharuk] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .mgallery-grid[b-bprihharuk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .mgallery-header[b-bprihharuk] {
        padding: 16px 16px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mgallery-create-btn[b-bprihharuk] {
        font-size: 0.78rem;
        padding: 5px 12px;
    }

    .mgallery-footer[b-bprihharuk] {
        padding: 12px 16px 16px;
    }
}

/* ================ Night Mode ================ */

body.night-mode .mgallery-backdrop[b-bprihharuk] {
    background: rgba(0, 0, 0, 0.6);
}

body.night-mode .mgallery-modal[b-bprihharuk] {
    background: linear-gradient(170deg, #2A3640 0%, #253038 40%, #1E2830 100%);
    border-color: rgba(196, 154, 108, 0.12);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(196, 154, 108, 0.06);
}

body.night-mode .mgallery-modal[b-bprihharuk]::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.2);
}

body.night-mode .mgallery-header[b-bprihharuk] {
    border-bottom-color: rgba(196, 154, 108, 0.12);
}

body.night-mode .mgallery-title[b-bprihharuk] {
    color: #E8F4F8;
}

body.night-mode .mgallery-close[b-bprihharuk] {
    color: #A0B4BC;
}

body.night-mode .mgallery-close:hover[b-bprihharuk] {
    background: rgba(196, 154, 108, 0.1);
    color: #E8F4F8;
}

body.night-mode .mgallery-create-btn[b-bprihharuk] {
    color: #CE9A7A;
    border-color: rgba(196, 154, 108, 0.25);
}

body.night-mode .mgallery-create-btn:hover[b-bprihharuk] {
    background: rgba(196, 154, 108, 0.1);
    border-color: rgba(196, 154, 108, 0.4);
    color: #E8C4A0;
}

body.night-mode .mgallery-empty[b-bprihharuk] {
    color: #A0B4BC;
}

body.night-mode .mgallery-card[b-bprihharuk] {
    background: rgba(45, 59, 68, 0.7);
    border-color: rgba(196, 154, 108, 0.1);
}

body.night-mode .mgallery-card:hover[b-bprihharuk] {
    border-color: rgba(196, 154, 108, 0.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

body.night-mode .mgallery-card.featured[b-bprihharuk] {
    border-color: rgba(196, 117, 93, 0.35);
    box-shadow: 0 0 0 1px rgba(196, 117, 93, 0.06), 0 2px 12px rgba(0, 0, 0, 0.15);
}

body.night-mode .mgallery-primary-badge[b-bprihharuk] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.night-mode .mgallery-btn[b-bprihharuk] {
    color: #A0B4BC;
}

body.night-mode .mgallery-btn:hover[b-bprihharuk] {
    background: rgba(196, 154, 108, 0.1);
}

body.night-mode .mgallery-pin-btn.active[b-bprihharuk] {
    color: #CE8568;
    border-color: rgba(206, 133, 104, 0.2);
    background: rgba(206, 133, 104, 0.1);
}

body.night-mode .mgallery-star-btn.active[b-bprihharuk] {
    color: #C49A6C;
    border-color: rgba(196, 154, 108, 0.2);
    background: rgba(196, 154, 108, 0.1);
}

body.night-mode .mgallery-delete-btn:hover[b-bprihharuk] {
    color: #e05555;
    background: rgba(224, 85, 85, 0.08);
}

body.night-mode .mgallery-caption-input[b-bprihharuk] {
    color: #E8F4F8;
    border-bottom-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .mgallery-caption-input:focus[b-bprihharuk] {
    border-bottom-color: #CE8568;
    box-shadow: 0 1px 0 rgba(206, 133, 104, 0.15);
}

body.night-mode .mgallery-caption-input[b-bprihharuk]::placeholder {
    color: #7A9AA8;
}

body.night-mode .mgallery-footer[b-bprihharuk] {
    border-top-color: rgba(196, 154, 108, 0.12);
}

body.night-mode .mgallery-error[b-bprihharuk] {
    color: #e05555;
}

body.night-mode .mgallery-save-btn[b-bprihharuk] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.night-mode .mgallery-save-btn:hover:not(:disabled)[b-bprihharuk] {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* /Components/MemorialMemoryModal.razor.rz.scp.css */
.memory-manage-modal-overlay[b-z7ya1o8r5t] {
    position: fixed;
    inset: 0;
    background-color: rgba(38, 29, 22, 0.64);
    -webkit-backdrop-filter: blur(10px) saturate(108%);
    backdrop-filter: blur(10px) saturate(108%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: clamp(0.85rem, 3vw, 1.5rem);
}

.memory-manage-modal-content[b-z7ya1o8r5t] {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 238, 216, 0.7), transparent 50%),
        linear-gradient(180deg, #FFFDF8 0%, #FFF4E7 100%);
    border-radius: 18px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(55, 39, 27, 0.24), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
    border: 1px solid rgba(196, 154, 108, 0.2);
}

.memory-manage-modal-header[b-z7ya1o8r5t] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.2rem 0;
}

.memory-manage-modal-close[b-z7ya1o8r5t] {
    background: none;
    border: none;
    border-radius: 999px;
    font-size: 1.35rem;
    color: rgba(91, 69, 52, 0.68);
    cursor: pointer;
    padding: 0.2rem 0.55rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.memory-manage-modal-close:focus-visible[b-z7ya1o8r5t] {
    background: rgba(164, 123, 80, 0.12);
    color: #5C4033;
    outline: 2px solid rgba(164, 123, 80, 0.34);
    outline-offset: 2px;
}

.memory-manage-modal-body[b-z7ya1o8r5t] {
    padding: 0 clamp(1.15rem, 4vw, 2.2rem) 1rem;
}

.memory-manage-modal-title[b-z7ya1o8r5t] {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 3.3vw, 1.72rem);
    font-weight: 600;
    line-height: 1.14;
    color: #33291F;
    margin: 0 0 1rem;
    text-align: center;
}

.memory-manage-card[b-z7ya1o8r5t] {
    background: rgba(255, 252, 246, 0.8);
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 12px;
    padding: clamp(1.05rem, 3vw, 1.35rem);
}

.memory-manage-image-wrapper[b-z7ya1o8r5t] {
    width: 100%;
    margin: 0 0 0.9rem;
}

.memory-manage-image[b-z7ya1o8r5t] {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 10px;
}

.memory-manage-content[b-z7ya1o8r5t] {
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 1.75vw, 1rem);
    line-height: 1.82;
    color: #3E3329;
    margin: 0 0 0.9rem;
}

.memory-manage-meta[b-z7ya1o8r5t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    border-top: 1px solid rgba(232, 213, 200, 0.3);
    padding-top: 0.7rem;
}

.memory-manage-author[b-z7ya1o8r5t] {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.9rem;
    color: #66584B;
}

.memory-manage-relation[b-z7ya1o8r5t] {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #86725D;
}

.memory-manage-date[b-z7ya1o8r5t] {
    font-family: var(--font-sans);
    font-size: 0.79rem;
    color: #9C8A74;
    margin-left: auto;
}

.memory-manage-modal-footer[b-z7ya1o8r5t] {
    border-top: 1px solid rgba(196, 154, 108, 0.14);
    background: linear-gradient(180deg, rgba(255, 249, 240, 0.65) 0%, rgba(255, 244, 232, 0.92) 100%);
    padding: 0.95rem clamp(1.15rem, 4vw, 2.2rem) 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.memory-manage-footnote[b-z7ya1o8r5t] {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.86rem;
    color: #775E47;
    line-height: 1.58;
}

.memory-manage-ai-section[b-z7ya1o8r5t] {
    margin: 0;
    padding: 0.85rem 0.9rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(196, 154, 108, 0.2);
    background: rgba(255, 252, 246, 0.82);
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    box-shadow: inset 3px 0 0 rgba(196, 154, 108, 0.26);
}

.memory-manage-ai-title[b-z7ya1o8r5t] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.93rem;
    color: #5F4635;
    line-height: 1.45;
}

.memory-manage-ai-toggle-label[b-z7ya1o8r5t] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #5C4033;
    cursor: pointer;
    width: fit-content;
}

.memory-manage-ai-toggle-input[b-z7ya1o8r5t] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.memory-manage-ai-toggle-box[b-z7ya1o8r5t] {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    border-radius: 7px;
    border: 1.5px solid rgba(164, 123, 80, 0.48);
    background: rgba(255, 252, 246, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition: all 0.3s ease;
}

.memory-manage-ai-toggle-box[b-z7ya1o8r5t]::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.18rem;
    width: 0.34rem;
    height: 0.62rem;
    border: solid #4A3122;
    border-width: 0 1.8px 1.8px 0;
    opacity: 0;
    transform: rotate(42deg) scale(0.82);
    transition: all 0.3s ease;
}

.memory-manage-ai-toggle-input:checked + .memory-manage-ai-toggle-box[b-z7ya1o8r5t] {
    border-color: rgba(144, 91, 50, 0.22);
    background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
}

.memory-manage-ai-toggle-input:checked + .memory-manage-ai-toggle-box[b-z7ya1o8r5t]::after {
    opacity: 1;
    transform: rotate(42deg) scale(1);
}

.memory-manage-ai-toggle-input:focus-visible + .memory-manage-ai-toggle-box[b-z7ya1o8r5t] {
    outline: 2px solid rgba(196, 154, 108, 0.45);
    outline-offset: 3px;
}

.memory-manage-ai-toggle-copy[b-z7ya1o8r5t] {
    line-height: 1.35;
}

.memory-manage-ai-help[b-z7ya1o8r5t] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-style: italic;
    color: #6F5542;
    line-height: 1.5;
}

.memory-manage-ai-enable-btn[b-z7ya1o8r5t] {
    align-self: flex-start;
    border: 1px solid rgba(171, 120, 78, 0.26);
    border-radius: 999px;
    background: linear-gradient(145deg, #FAEBDD 0%, #F6DFC8 100%);
    color: #5D4131;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 2.5rem;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: all 0.3s ease;
}

.memory-manage-ai-enable-btn:focus-visible[b-z7ya1o8r5t] {
    background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
    border-color: rgba(171, 120, 78, 0.4);
    outline: 2px solid rgba(164, 123, 80, 0.32);
    outline-offset: 2px;
    box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}

.memory-manage-ai-enable-btn:disabled[b-z7ya1o8r5t] {
    opacity: 0.64;
    cursor: not-allowed;
}

.memory-manage-ai-note[b-z7ya1o8r5t] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    color: #6D5644;
    line-height: 1.48;
    background: rgba(196, 154, 108, 0.08);
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 10px;
    padding: 0.65rem 0.78rem;
}

.memory-manage-linked-memory-btn[b-z7ya1o8r5t] {
    align-self: flex-start;
    border: 1px solid rgba(171, 120, 78, 0.28);
    border-radius: 999px;
    background: rgba(255, 252, 246, 0.9);
    color: #5D4131;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 2.55rem;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    transition: all 0.3s ease;
}

.memory-manage-linked-memory-btn:focus-visible[b-z7ya1o8r5t] {
    background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
    border-color: rgba(171, 120, 78, 0.4);
    outline: 2px solid rgba(164, 123, 80, 0.32);
    outline-offset: 2px;
    box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}

.memory-manage-linked-memory-btn:disabled[b-z7ya1o8r5t] {
    opacity: 0.64;
    cursor: not-allowed;
}

.memory-manage-linked-memory-icon[b-z7ya1o8r5t],
.memory-manage-linked-memory-icon svg[b-z7ya1o8r5t] {
    width: 1rem;
    height: 1rem;
}

.memory-manage-linked-memory-icon[b-z7ya1o8r5t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.memory-manage-success[b-z7ya1o8r5t] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    color: #5C6F4D;
    background: rgba(241, 249, 236, 0.92);
    border: 1px solid rgba(142, 171, 112, 0.28);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
}

.memory-manage-error[b-z7ya1o8r5t] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #7A4B3A;
    background: rgba(255, 247, 239, 0.82);
    border: 1px solid rgba(153, 93, 64, 0.18);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
}

.memory-manage-hide-btn[b-z7ya1o8r5t] {
    align-self: flex-start;
    border: 1px solid rgba(171, 120, 78, 0.26);
    border-radius: 999px;
    background: linear-gradient(145deg, #FAEBDD 0%, #F6DFC8 100%);
    color: #5D4131;
    font-family: var(--font-sans);
    font-size: 0.91rem;
    font-weight: 600;
    min-height: 2.75rem;
    padding: 0.58rem 1.05rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.memory-manage-hide-btn:focus-visible[b-z7ya1o8r5t] {
    background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
    border-color: rgba(171, 120, 78, 0.4);
    outline: 2px solid rgba(164, 123, 80, 0.32);
    outline-offset: 2px;
    box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}

.memory-manage-hide-btn:disabled[b-z7ya1o8r5t] {
    opacity: 0.64;
    cursor: not-allowed;
}

.memory-manage-spinner[b-z7ya1o8r5t] {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(94, 60, 44, 0.25);
    border-top-color: rgba(94, 60, 44, 0.9);
    animation: memory-manage-spin-b-z7ya1o8r5t 0.85s linear infinite;
}

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

.memory-manage-hide-icon[b-z7ya1o8r5t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: currentColor;
    opacity: 0.82;
}

.memory-manage-hide-icon svg[b-z7ya1o8r5t] {
    width: 1rem;
    height: 1rem;
}

@media (hover: hover) {
    .memory-manage-modal-close:hover[b-z7ya1o8r5t] {
        background: rgba(164, 123, 80, 0.1);
        color: #5C4033;
    }

    .memory-manage-hide-btn:hover:not(:disabled)[b-z7ya1o8r5t] {
        background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
        border-color: rgba(171, 120, 78, 0.4);
        box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
    }

    .memory-manage-linked-memory-btn:hover:not(:disabled)[b-z7ya1o8r5t] {
        background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
        border-color: rgba(171, 120, 78, 0.4);
        box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
    }
}

@media (max-width: 640px) {
    .memory-manage-modal-overlay[b-z7ya1o8r5t] {
        align-items: flex-end;
        padding: 0;
    }

    .memory-manage-modal-content[b-z7ya1o8r5t] {
        max-width: none;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
    }

    .memory-manage-modal-header[b-z7ya1o8r5t] {
        padding: 0.8rem 0.95rem 0;
    }

    .memory-manage-modal-body[b-z7ya1o8r5t] {
        padding: 0 1rem 0.95rem;
    }

    .memory-manage-modal-footer[b-z7ya1o8r5t] {
        padding: 0.85rem 1rem 1rem;
    }

    .memory-manage-hide-btn[b-z7ya1o8r5t] {
        width: 100%;
    }

    .memory-manage-ai-enable-btn[b-z7ya1o8r5t] {
        width: 100%;
    }

    .memory-manage-linked-memory-btn[b-z7ya1o8r5t] {
        width: 100%;
    }
}

body.night-mode .memory-manage-modal-content[b-z7ya1o8r5t] {
    background:
        radial-gradient(circle at 50% 0%, rgba(161, 124, 84, 0.2), transparent 50%),
        linear-gradient(180deg, #2B3740 0%, #232E35 100%);
    border-color: rgba(196, 154, 108, 0.22);
}

body.night-mode .memory-manage-modal-title[b-z7ya1o8r5t],
body.night-mode .memory-manage-content[b-z7ya1o8r5t] {
    color: #E8F4F8;
}

body.night-mode .memory-manage-card[b-z7ya1o8r5t] {
    background: rgba(34, 46, 53, 0.85);
    border-color: rgba(196, 154, 108, 0.16);
}

body.night-mode .memory-manage-author[b-z7ya1o8r5t],
body.night-mode .memory-manage-relation[b-z7ya1o8r5t],
body.night-mode .memory-manage-date[b-z7ya1o8r5t],
body.night-mode .memory-manage-footnote[b-z7ya1o8r5t] {
    color: #CABFB5;
}

body.night-mode .memory-manage-error[b-z7ya1o8r5t] {
    color: #F2D7C4;
    background: rgba(120, 74, 56, 0.35);
    border-color: rgba(228, 182, 154, 0.25);
}

body.night-mode .memory-manage-ai-section[b-z7ya1o8r5t] {
    background: rgba(34, 46, 53, 0.84);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .memory-manage-ai-title[b-z7ya1o8r5t],
body.night-mode .memory-manage-ai-note[b-z7ya1o8r5t],
body.night-mode .memory-manage-ai-help[b-z7ya1o8r5t] {
    color: #CABFB5;
}

body.night-mode .memory-manage-ai-toggle-copy[b-z7ya1o8r5t] {
    color: #E8F4F8;
}

body.night-mode .memory-manage-ai-enable-btn[b-z7ya1o8r5t] {
    background: linear-gradient(145deg, rgba(120, 92, 56, 0.84) 0%, rgba(96, 74, 47, 0.94) 100%);
    color: #F9E8CC;
    border-color: rgba(230, 198, 152, 0.28);
}

body.night-mode .memory-manage-ai-enable-btn:focus-visible[b-z7ya1o8r5t] {
    outline-color: rgba(230, 198, 152, 0.36);
}

body.night-mode .memory-manage-linked-memory-btn[b-z7ya1o8r5t] {
    background: rgba(34, 46, 53, 0.86);
    color: #F9E8CC;
    border-color: rgba(230, 198, 152, 0.28);
}

body.night-mode .memory-manage-linked-memory-btn:focus-visible[b-z7ya1o8r5t] {
    outline-color: rgba(230, 198, 152, 0.36);
}

body.night-mode .memory-manage-success[b-z7ya1o8r5t] {
    color: #D8E9CC;
    background: rgba(74, 106, 64, 0.36);
    border-color: rgba(164, 204, 136, 0.3);
}

body.night-mode .memory-manage-hide-btn[b-z7ya1o8r5t] {
    background: linear-gradient(145deg, rgba(120, 92, 56, 0.84) 0%, rgba(96, 74, 47, 0.94) 100%);
    color: #F9E8CC;
    border-color: rgba(230, 198, 152, 0.28);
}

body.night-mode .memory-manage-hide-btn:focus-visible[b-z7ya1o8r5t] {
    outline-color: rgba(230, 198, 152, 0.36);
}
/* /Components/MemorialReportModal.razor.rz.scp.css */
.memorial-report-overlay[b-k7lh1oke8u] {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(35, 25, 18, 0.62);
    backdrop-filter: blur(7px);
}

.memorial-report-modal[b-k7lh1oke8u] {
    width: min(100%, 460px);
    max-height: min(90vh, 720px);
    overflow: auto;
    border: 1px solid rgba(232, 213, 200, 0.58);
    border-radius: 18px;
    background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
    box-shadow: 0 18px 48px rgba(92, 64, 51, 0.22);
    color: #3A3228;
}

.memorial-report-header[b-k7lh1oke8u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.45rem 1.6rem 0.9rem;
}

.memorial-report-kicker[b-k7lh1oke8u] {
    margin: 0 0 0.2rem;
    color: #A89880;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-style: italic;
}

.memorial-report-header h2[b-k7lh1oke8u] {
    margin: 0;
    color: #3A3228;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 650;
    line-height: 1.2;
}

.memorial-report-close[b-k7lh1oke8u] {
    border: none;
    background: transparent;
    color: #8B7355;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
}

.memorial-report-close:hover[b-k7lh1oke8u] {
    color: #5C4033;
}

.memorial-report-body[b-k7lh1oke8u] {
    display: grid;
    gap: 1rem;
    padding: 0 1.6rem 1.2rem;
}

.memorial-report-intro[b-k7lh1oke8u] {
    margin: 0;
    color: #6B5B4E;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.5;
}

.memorial-report-field[b-k7lh1oke8u] {
    display: grid;
    gap: 0.4rem;
    color: #5C4033;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 650;
}

.memorial-report-select[b-k7lh1oke8u],
.memorial-report-input[b-k7lh1oke8u],
.memorial-report-textarea[b-k7lh1oke8u] {
    width: 100%;
    border: 1px solid rgba(196, 154, 108, 0.32);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: #3A3228;
    font: inherit;
    font-weight: 400;
    outline: none;
}

.memorial-report-select[b-k7lh1oke8u],
.memorial-report-input[b-k7lh1oke8u] {
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
}

.memorial-report-textarea[b-k7lh1oke8u] {
    min-height: 7.5rem;
    resize: vertical;
    padding: 0.7rem;
    line-height: 1.5;
}

.memorial-report-select:focus[b-k7lh1oke8u],
.memorial-report-input:focus[b-k7lh1oke8u],
.memorial-report-textarea:focus[b-k7lh1oke8u] {
    border-color: rgba(166, 123, 80, 0.62);
    box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.14);
}

.memorial-report-error[b-k7lh1oke8u] {
    margin: -0.2rem 0 0;
    color: #8f3f2f;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.4;
}

.memorial-report-footer[b-k7lh1oke8u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding: 0 1.6rem 1.45rem;
}

.memorial-report-primary[b-k7lh1oke8u],
.memorial-report-secondary[b-k7lh1oke8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.62rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    cursor: pointer;
}

.memorial-report-primary[b-k7lh1oke8u] {
    border: none;
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: #fff;
}

.memorial-report-secondary[b-k7lh1oke8u] {
    border: 1px solid rgba(164, 123, 80, 0.28);
    background: transparent;
    color: #6B5B4E;
}

.memorial-report-primary:disabled[b-k7lh1oke8u] {
    cursor: not-allowed;
    opacity: 0.54;
}

.memorial-report-secondary:hover[b-k7lh1oke8u],
.memorial-report-primary:hover:not(:disabled)[b-k7lh1oke8u] {
    filter: brightness(0.98);
}

.memorial-report-spinner[b-k7lh1oke8u] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 999px;
    animation: memorial-report-spin-b-k7lh1oke8u 0.7s linear infinite;
}

.memorial-report-success[b-k7lh1oke8u] {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding: 2.2rem 1.7rem 2.5rem;
    text-align: center;
    color: #5C4033;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.45;
}

.memorial-report-success p[b-k7lh1oke8u] {
    margin: 0;
}

.memorial-report-success-icon[b-k7lh1oke8u] {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: rgba(196, 154, 108, 0.14);
    color: #8B6B48;
    font-family: var(--font-sans);
    font-weight: 700;
}

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

@media (max-width: 540px) {
    .memorial-report-overlay[b-k7lh1oke8u] {
        align-items: flex-end;
        padding: 0;
    }

    .memorial-report-modal[b-k7lh1oke8u] {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }

    .memorial-report-header[b-k7lh1oke8u],
    .memorial-report-body[b-k7lh1oke8u],
    .memorial-report-footer[b-k7lh1oke8u] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .memorial-report-footer[b-k7lh1oke8u] {
        flex-direction: column-reverse;
    }

    .memorial-report-primary[b-k7lh1oke8u],
    .memorial-report-secondary[b-k7lh1oke8u] {
        width: 100%;
    }
}
/* /Components/MemorialRestingPlaceModal.razor.rz.scp.css */
.memorial-resting-modal-overlay[b-k1q26az1p0] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(51, 40, 28, 0.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.memorial-resting-modal[b-k1q26az1p0] {
    width: min(680px, 100%);
    max-height: min(90vh, 780px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFF9EF 0%, #FAF0E2 100%);
    border: 1px solid rgba(196, 154, 108, 0.28);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(74, 52, 32, 0.28);
    overflow: hidden;
}

.memorial-resting-modal-header[b-k1q26az1p0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}

.memorial-resting-modal-kicker[b-k1q26az1p0] {
    margin: 0 0 0.35rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.94rem;
    color: #9A7A55;
}

.memorial-resting-modal h2[b-k1q26az1p0] {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    color: #34281F;
    font-size: clamp(1.55rem, 4vw, 2.15rem);
    line-height: 1.12;
}

.memorial-resting-modal-close[b-k1q26az1p0] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(164, 123, 80, 0.22);
    border-radius: 50%;
    background: rgba(255, 251, 244, 0.72);
    color: #6B5541;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.memorial-resting-modal-body[b-k1q26az1p0] {
    padding: 1.25rem 1.75rem;
    overflow-y: auto;
}

.memorial-resting-error[b-k1q26az1p0] {
    margin-bottom: 1rem;
    border: 1px solid rgba(164, 72, 55, 0.18);
    border-radius: 12px;
    background: rgba(255, 238, 232, 0.82);
    padding: 0.8rem 1rem;
    color: #8A3B2D;
    font-family: var(--font-sans);
    font-size: 0.92rem;
}

.memorial-resting-toggle[b-k1q26az1p0] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(196, 154, 108, 0.22);
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.68);
    color: #4A3A2D;
    font-family: var(--font-sans);
}

.memorial-resting-toggle input[b-k1q26az1p0] {
    margin-top: 0.2rem;
}

.memorial-resting-toggle-title[b-k1q26az1p0] {
    display: block;
    font-weight: 600;
}

.memorial-resting-toggle-hint[b-k1q26az1p0] {
    display: block;
    margin-top: 0.2rem;
    color: #806D5B;
    font-size: 0.88rem;
    line-height: 1.5;
}

.memorial-resting-grid[b-k1q26az1p0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}

.memorial-resting-grid label[b-k1q26az1p0],
.memorial-resting-field[b-k1q26az1p0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #6B5541;
    font-family: var(--font-sans);
    font-size: 0.88rem;
}

.memorial-resting-field[b-k1q26az1p0] {
    margin-top: 1rem;
}

.memorial-resting-grid input[b-k1q26az1p0],
.memorial-resting-field input[b-k1q26az1p0],
.memorial-resting-field textarea[b-k1q26az1p0] {
    border: 1px solid rgba(196, 154, 108, 0.22);
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.82);
    padding: 0.78rem 0.9rem;
    color: #3E332A;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    outline: none;
}

.memorial-resting-field textarea[b-k1q26az1p0] {
    resize: vertical;
    line-height: 1.55;
}

.memorial-resting-image-field[b-k1q26az1p0] {
    margin-top: 1.1rem;
    padding: 1rem;
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.42);
}

.memorial-resting-image-copy[b-k1q26az1p0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #6B5541;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.memorial-resting-image-copy small[b-k1q26az1p0] {
    color: #806D5B;
    font-size: 0.82rem;
}

.memorial-resting-image-dropzone[b-k1q26az1p0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    margin-top: 0.8rem;
    border: 1px dashed rgba(164, 123, 80, 0.36);
    border-radius: 14px;
    background: rgba(255, 249, 239, 0.68);
    color: #7B5B3E;
    font-family: var(--font-sans);
    cursor: pointer;
}

.memorial-resting-image-dropzone input[b-k1q26az1p0] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.memorial-resting-image-preview[b-k1q26az1p0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
    margin-top: 0.8rem;
}

.memorial-resting-image-preview img[b-k1q26az1p0] {
    width: 100%;
    max-height: 220px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
}

.memorial-resting-image-preview button[b-k1q26az1p0] {
    border: 1px solid rgba(164, 123, 80, 0.24);
    border-radius: 999px;
    background: rgba(255, 251, 244, 0.68);
    padding: 0.65rem 0.95rem;
    color: #6B4A34;
    font-family: var(--font-sans);
    cursor: pointer;
}

.memorial-resting-alt-field[b-k1q26az1p0] {
    margin-top: 0.85rem;
}

.memorial-resting-grid input:focus[b-k1q26az1p0],
.memorial-resting-field input:focus[b-k1q26az1p0],
.memorial-resting-field textarea:focus[b-k1q26az1p0] {
    border-color: rgba(164, 123, 80, 0.46);
    box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12);
}

.memorial-resting-modal-footer[b-k1q26az1p0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.75rem 1.4rem;
    border-top: 1px solid rgba(196, 154, 108, 0.14);
}

.memorial-resting-secondary[b-k1q26az1p0],
.memorial-resting-primary[b-k1q26az1p0] {
    border-radius: 999px;
    padding: 0.72rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.93rem;
    cursor: pointer;
}

.memorial-resting-secondary[b-k1q26az1p0] {
    border: 1px solid rgba(164, 123, 80, 0.24);
    background: transparent;
    color: #6B5541;
}

.memorial-resting-primary[b-k1q26az1p0] {
    border: 1px solid rgba(164, 123, 80, 0.26);
    background: linear-gradient(145deg, #F8E5C8 0%, #EBCFA5 100%);
    color: #4A3426;
    box-shadow: 0 8px 20px rgba(164, 123, 80, 0.14);
}

.memorial-resting-primary:disabled[b-k1q26az1p0] {
    opacity: 0.64;
    cursor: wait;
}

@media (max-width: 640px) {
    .memorial-resting-modal-overlay[b-k1q26az1p0] {
        align-items: stretch;
        padding: 0;
    }

    .memorial-resting-modal[b-k1q26az1p0] {
        max-height: none;
        min-height: 100dvh;
        border-radius: 0;
    }

    .memorial-resting-modal-header[b-k1q26az1p0],
    .memorial-resting-modal-body[b-k1q26az1p0],
    .memorial-resting-modal-footer[b-k1q26az1p0] {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .memorial-resting-grid[b-k1q26az1p0] {
        grid-template-columns: 1fr;
    }

    .memorial-resting-image-preview[b-k1q26az1p0] {
        grid-template-columns: 1fr;
    }
}
/* /Components/MemorialServiceModal.razor.rz.scp.css */
.memorial-service-modal-overlay[b-nn28mxoq7a] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(51, 40, 28, 0.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.memorial-service-modal[b-nn28mxoq7a] {
    width: min(860px, 100%);
    max-height: min(92vh, 860px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(196, 154, 108, 0.28);
    border-radius: 18px;
    background: linear-gradient(180deg, #FFF9EF 0%, #FAF0E2 100%);
    box-shadow: 0 24px 80px rgba(74, 52, 32, 0.28);
}

.memorial-service-modal-header[b-nn28mxoq7a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}

.memorial-service-modal-kicker[b-nn28mxoq7a] {
    margin: 0 0 0.35rem;
    color: #9A7A55;
    font-family: var(--font-serif);
    font-size: 0.94rem;
    font-style: italic;
}

.memorial-service-modal h2[b-nn28mxoq7a] {
    margin: 0;
    color: #34281F;
    font-family: var(--font-serif);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 400;
    line-height: 1.12;
}

.memorial-service-modal-close[b-nn28mxoq7a] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(164, 123, 80, 0.22);
    border-radius: 50%;
    background: rgba(255, 251, 244, 0.72);
    color: #6B5541;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.memorial-service-modal-body[b-nn28mxoq7a] {
    padding: 1.25rem 1.75rem;
    overflow-y: auto;
}

.memorial-service-error[b-nn28mxoq7a] {
    margin-bottom: 1rem;
    border: 1px solid rgba(164, 72, 55, 0.18);
    border-radius: 12px;
    background: rgba(255, 238, 232, 0.82);
    padding: 0.8rem 1rem;
    color: #8A3B2D;
    font-family: var(--font-sans);
    font-size: 0.92rem;
}

.memorial-service-toggle[b-nn28mxoq7a] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(196, 154, 108, 0.22);
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.68);
    color: #4A3A2D;
    font-family: var(--font-sans);
}

.memorial-service-toggle input[b-nn28mxoq7a] {
    margin-top: 0.2rem;
}

.memorial-service-toggle-title[b-nn28mxoq7a] {
    display: block;
    font-weight: 600;
}

.memorial-service-toggle-hint[b-nn28mxoq7a] {
    display: block;
    margin-top: 0.2rem;
    color: #806D5B;
    font-size: 0.88rem;
    line-height: 1.5;
}

.memorial-service-grid[b-nn28mxoq7a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}

.memorial-service-grid label[b-nn28mxoq7a],
.memorial-service-field[b-nn28mxoq7a] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #6B5541;
    font-family: var(--font-sans);
    font-size: 0.88rem;
}

.memorial-service-field[b-nn28mxoq7a] {
    margin-top: 1rem;
}

.memorial-service-grid input[b-nn28mxoq7a],
.memorial-service-grid select[b-nn28mxoq7a],
.memorial-service-field input[b-nn28mxoq7a],
.memorial-service-field textarea[b-nn28mxoq7a],
.memorial-service-program-row input[b-nn28mxoq7a],
.memorial-service-program-row select[b-nn28mxoq7a],
.memorial-service-program-document-fields input[b-nn28mxoq7a],
.memorial-service-program-document-fields textarea[b-nn28mxoq7a] {
    border: 1px solid rgba(196, 154, 108, 0.22);
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.82);
    padding: 0.78rem 0.9rem;
    color: #3E332A;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    outline: none;
}

.memorial-service-field textarea[b-nn28mxoq7a] {
    resize: vertical;
    line-height: 1.55;
}

.memorial-service-program-document-fields textarea[b-nn28mxoq7a] {
    min-height: 12rem;
    resize: vertical;
    line-height: 1.62;
}

.memorial-service-grid input:focus[b-nn28mxoq7a],
.memorial-service-grid select:focus[b-nn28mxoq7a],
.memorial-service-field input:focus[b-nn28mxoq7a],
.memorial-service-field textarea:focus[b-nn28mxoq7a],
.memorial-service-program-row input:focus[b-nn28mxoq7a],
.memorial-service-program-row select:focus[b-nn28mxoq7a],
.memorial-service-program-document-fields input:focus[b-nn28mxoq7a],
.memorial-service-program-document-fields textarea:focus[b-nn28mxoq7a] {
    border-color: rgba(164, 123, 80, 0.46);
    box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12);
}

.memorial-service-image-field[b-nn28mxoq7a] {
    margin-top: 1.1rem;
    padding: 1rem;
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.42);
}

.memorial-service-image-copy[b-nn28mxoq7a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #6B5541;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.memorial-service-image-copy small[b-nn28mxoq7a] {
    color: #806D5B;
    font-size: 0.82rem;
}

.memorial-service-image-dropzone[b-nn28mxoq7a] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
    margin-top: 0.8rem;
    border: 1px dashed rgba(164, 123, 80, 0.36);
    border-radius: 14px;
    background: rgba(255, 249, 239, 0.68);
    color: #7B5B3E;
    font-family: var(--font-sans);
    cursor: pointer;
}

.memorial-service-image-dropzone input[b-nn28mxoq7a] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.memorial-service-image-preview[b-nn28mxoq7a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
    margin-top: 0.8rem;
}

.memorial-service-image-preview img[b-nn28mxoq7a] {
    width: 100%;
    max-height: 240px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
}

.memorial-service-image-preview button[b-nn28mxoq7a],
.memorial-service-program-header button[b-nn28mxoq7a],
.memorial-service-program-remove[b-nn28mxoq7a],
.memorial-service-program-document-toggle[b-nn28mxoq7a] {
    border: 1px solid rgba(164, 123, 80, 0.24);
    border-radius: 999px;
    background: rgba(255, 251, 244, 0.68);
    color: #6B4A34;
    font-family: var(--font-sans);
    cursor: pointer;
}

.memorial-service-image-preview button[b-nn28mxoq7a] {
    padding: 0.65rem 0.95rem;
}

.memorial-service-alt-field[b-nn28mxoq7a] {
    margin-top: 0.85rem;
}

.memorial-service-program-editor[b-nn28mxoq7a] {
    margin-top: 1.15rem;
    padding: 1rem;
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.42);
}

.memorial-service-program-header[b-nn28mxoq7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #6B5541;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.memorial-service-program-header button[b-nn28mxoq7a] {
    padding: 0.48rem 0.85rem;
}

.memorial-service-program-empty[b-nn28mxoq7a] {
    margin: 0.8rem 0 0;
    color: #806D5B;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-style: italic;
}

.memorial-service-program-row[b-nn28mxoq7a] {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) 2.4rem;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.memorial-service-program-remove[b-nn28mxoq7a] {
    min-width: 2.4rem;
    min-height: 2.4rem;
    font-size: 1.2rem;
    line-height: 1;
}

.memorial-service-program-document[b-nn28mxoq7a] {
    margin: 0.55rem 0 0 10.2rem;
}

.memorial-service-program-document-toggle[b-nn28mxoq7a] {
    padding: 0.42rem 0.8rem;
    font-size: 0.82rem;
}

.memorial-service-program-document-fields[b-nn28mxoq7a] {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.75rem;
    padding: 0.95rem;
    border: 1px solid rgba(196, 154, 108, 0.16);
    border-radius: 14px;
    background: rgba(255, 249, 239, 0.46);
}

.memorial-service-program-document-fields label[b-nn28mxoq7a] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #6B5541;
    font-family: var(--font-sans);
    font-size: 0.86rem;
}

.memorial-service-modal-footer[b-nn28mxoq7a] {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.75rem 1.4rem;
    border-top: 1px solid rgba(196, 154, 108, 0.14);
}

.memorial-service-secondary[b-nn28mxoq7a],
.memorial-service-primary[b-nn28mxoq7a] {
    border-radius: 999px;
    padding: 0.72rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.93rem;
    cursor: pointer;
}

.memorial-service-secondary[b-nn28mxoq7a] {
    border: 1px solid rgba(164, 123, 80, 0.24);
    background: transparent;
    color: #6B5541;
}

.memorial-service-primary[b-nn28mxoq7a] {
    border: 1px solid rgba(164, 123, 80, 0.26);
    background: linear-gradient(145deg, #F8E5C8 0%, #EBCFA5 100%);
    color: #4A3426;
    box-shadow: 0 8px 20px rgba(164, 123, 80, 0.14);
}

.memorial-service-primary:disabled[b-nn28mxoq7a] {
    opacity: 0.64;
    cursor: wait;
}

@media (max-width: 640px) {
    .memorial-service-modal-overlay[b-nn28mxoq7a] {
        align-items: stretch;
        padding: 0;
    }

    .memorial-service-modal[b-nn28mxoq7a] {
        max-height: none;
        min-height: 100dvh;
        border-radius: 0;
    }

    .memorial-service-modal-header[b-nn28mxoq7a],
    .memorial-service-modal-body[b-nn28mxoq7a],
    .memorial-service-modal-footer[b-nn28mxoq7a] {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .memorial-service-grid[b-nn28mxoq7a],
    .memorial-service-image-preview[b-nn28mxoq7a],
    .memorial-service-program-row[b-nn28mxoq7a] {
        grid-template-columns: 1fr;
    }

    .memorial-service-program-document[b-nn28mxoq7a] {
        margin-left: 0;
    }

    .memorial-service-modal-footer[b-nn28mxoq7a] {
        padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    }
}
/* /Components/MemorialSettingsModal.razor.rz.scp.css */
/* MemorialSettingsModal.razor.css */

.settings-modal-overlay[b-70akwifjd4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(35, 25, 18, 0.72);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: 1rem;
}

.settings-modal-content[b-70akwifjd4] {
    background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(139, 115, 85, 0.25);
    border: 1px solid rgba(232, 213, 200, 0.4);
}

.settings-modal-header[b-70akwifjd4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem 0;
}

.settings-title[b-70akwifjd4] {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: #3A3228;
    margin: 0;
}

.settings-modal-close[b-70akwifjd4] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #8B7355;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.settings-modal-close:hover[b-70akwifjd4] {
    color: #5C4033;
}

.settings-modal-body[b-70akwifjd4] {
    padding: 1.5rem 2rem;
}

.settings-locked-banner[b-70akwifjd4] {
    display: grid;
    gap: 0.25rem;
    background: rgba(255, 244, 228, 0.78);
    border: 1px solid rgba(196, 154, 108, 0.45);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.45;
    color: #6B5B4E;
}

.settings-locked-title[b-70akwifjd4] {
    font-weight: 700;
    color: #5C4033;
}

.settings-error-banner[b-70akwifjd4] {
    background: #FFF0F0;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #a94442;
}

.settings-section[b-70akwifjd4] {
    margin-bottom: 1.2rem;
}

.settings-label[b-70akwifjd4] {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: #5C4033;
    margin-bottom: 0.4rem;
}

.settings-link-container[b-70akwifjd4] {
    display: flex;
    gap: 0.5rem;
}

.settings-link-input[b-70akwifjd4] {
    flex: 1;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(232, 213, 200, 0.6);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #6B5B4E;
    background: rgba(255, 255, 255, 0.7);
    outline: none;
    min-width: 0;
}

.settings-copy-btn[b-70akwifjd4] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #A67B50;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.settings-copy-btn:hover[b-70akwifjd4] {
    background: rgba(164, 123, 80, 0.08);
}

.settings-copy-btn:disabled[b-70akwifjd4] {
    opacity: 0.45;
    cursor: not-allowed;
}

.settings-copy-btn:disabled:hover[b-70akwifjd4] {
    background: transparent;
}

.settings-copy-feedback[b-70akwifjd4] {
    color: #2f7a4d;
    font-weight: 600;
}

.settings-generate-btn[b-70akwifjd4] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 24px;
    padding: 0.6rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #A67B50;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.settings-generate-btn:hover:not(:disabled)[b-70akwifjd4] {
    background: rgba(164, 123, 80, 0.08);
}

.settings-generate-btn:disabled[b-70akwifjd4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-link-input:disabled[b-70akwifjd4] {
    color: rgba(107, 91, 78, 0.62);
    background: rgba(255, 255, 255, 0.42);
}

/* Toggle Labels */
.settings-toggle-label[b-70akwifjd4] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #3A3228;
    cursor: pointer;
    line-height: 1.4;
}

.settings-toggle-title[b-70akwifjd4] {
    display: block;
}

.settings-toggle-hint[b-70akwifjd4] {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.82rem;
    color: #8B7355;
}

.settings-toggle-label input[type="checkbox"][b-70akwifjd4] {
    accent-color: #C49A6C;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.settings-toggle-label:has(input:disabled)[b-70akwifjd4] {
    cursor: not-allowed;
    color: rgba(58, 50, 40, 0.55);
}

.settings-toggle-label input[type="checkbox"]:disabled[b-70akwifjd4] {
    cursor: not-allowed;
    opacity: 0.55;
}

.settings-toggle-label:has(input:disabled) .settings-toggle-hint[b-70akwifjd4] {
    color: rgba(139, 115, 85, 0.62);
}

.settings-responsibility-panel[b-70akwifjd4] {
    display: grid;
    gap: 0.45rem;
    margin: 0.75rem 0 0.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(196, 154, 108, 0.36);
    border-radius: 12px;
    background: rgba(255, 244, 228, 0.82);
    color: #6B5B4E;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.45;
}

.settings-responsibility-title[b-70akwifjd4] {
    font-weight: 700;
    color: #5C4033;
}

.settings-responsibility-check[b-70akwifjd4] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.2rem;
    color: #4A3D35;
    cursor: pointer;
}

.settings-responsibility-check input[type="checkbox"][b-70akwifjd4] {
    accent-color: #C49A6C;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Footer */
.settings-modal-footer[b-70akwifjd4] {
    padding: 0 2rem 1.5rem;
}

.settings-footer-actions[b-70akwifjd4] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.settings-btn-primary[b-70akwifjd4] {
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 0.65rem 1.3rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s;
}

.settings-btn-primary:hover:not(:disabled)[b-70akwifjd4] {
    opacity: 0.9;
}

.settings-btn-primary:disabled[b-70akwifjd4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-btn-close[b-70akwifjd4] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 24px;
    padding: 0.65rem 1.3rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #6B5B4E;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-btn-close:hover[b-70akwifjd4] {
    background: rgba(164, 123, 80, 0.08);
}

.settings-spinner[b-70akwifjd4] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-70akwifjd4 0.7s linear infinite;
}

.settings-generate-btn .settings-spinner[b-70akwifjd4] {
    border-color: rgba(166, 123, 80, 0.3);
    border-top-color: #A67B50;
}

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

@media (max-width: 540px) {
    .settings-modal-overlay[b-70akwifjd4] {
        align-items: stretch;
        padding: 0;
    }

    .settings-modal-content[b-70akwifjd4] {
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }

    .settings-modal-header[b-70akwifjd4] {
        padding: 1.25rem 1.5rem 0;
    }

    .settings-modal-body[b-70akwifjd4] {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
    }

    /* Generous toggle rows — native settings feel */
    .settings-section[b-70akwifjd4] {
        margin-bottom: 0;
    }

    .settings-toggle-label[b-70akwifjd4] {
        font-size: 1rem;
        gap: 0.85rem;
        padding: 1.1rem 0;
        border-bottom: 1px solid rgba(232, 213, 200, 0.35);
    }

    .settings-toggle-label input[type="checkbox"][b-70akwifjd4] {
        width: 22px;
        height: 22px;
        margin-top: 1px;
    }

    .settings-toggle-hint[b-70akwifjd4] {
        font-size: 0.88rem;
    }

    .settings-responsibility-panel[b-70akwifjd4] {
        margin: 0.2rem 0 1rem;
    }

    .settings-modal-footer[b-70akwifjd4] {
        flex-shrink: 0;
        padding: 1rem 1.5rem 1.5rem;
    }
}
/* /Components/MemorialTapestry.razor.rz.scp.css */
/* ============================================================
   MemorialTapestry.razor.css
   "This is art, not an org chart"
   A radial constellation — the LovedOne is the sun at center,
   family members orbit at specific positions connected by
   organic golden bezier curves.
   ============================================================ */

/* === Section Container === */
.tapestry[b-s8j9ymyogz] {
    position: relative;
    padding: 3rem 1.5rem 3.5rem;
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
}

/* Linen texture — subtle noise via radial-gradient dots */
.tapestry-linen[b-s8j9ymyogz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        radial-gradient(ellipse 1px 1px at 20% 30%, rgba(160, 130, 100, 0.25) 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 70% 60%, rgba(140, 115, 85, 0.2) 0%, transparent 100%),
        radial-gradient(ellipse 1px 1px at 45% 80%, rgba(170, 140, 110, 0.18) 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 1px at 90% 15%, rgba(150, 125, 95, 0.22) 0%, transparent 100%),
        radial-gradient(ellipse 1px 1.5px at 10% 70%, rgba(165, 135, 105, 0.2) 0%, transparent 100%);
    background-size: 120px 100px, 90px 130px, 150px 80px, 110px 140px, 130px 110px;
}

/* === Header === */
.tapestry-header[b-s8j9ymyogz] {
    text-align: center;
    /* margin-bottom: 3rem; */
    position: relative;
}

.tapestry-header-line[b-s8j9ymyogz] {
    width: 80px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.5), transparent);
}

.tapestry-title[b-s8j9ymyogz] {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 2rem;
    color: #3A3228;
    margin: 0.75rem 0 0.35rem;
    letter-spacing: 0;
}

.tapestry-subtitle[b-s8j9ymyogz] {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 350;
    font-size: 0.95rem;
    color: #8B7355;
    margin: 0 0 0.75rem;
    letter-spacing: 0;
}

/* === Desktop Canvas — Radial Constellation === */
.tapestry-canvas[b-s8j9ymyogz] {
    position: relative;
    width: 100%;
    min-height: 480px;
    max-width: 940px;
    margin: 0 auto;
}

.tapestry-mobile[b-s8j9ymyogz] {
    display: none;
}

.tapestry-mobile-header-action[b-s8j9ymyogz] {
    display: none;
}

/* Central LovedOne — absolute center of the constellation, top set via inline style */
.tapestry-center[b-s8j9ymyogz] {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -55px);
    z-index: 3;
}

/* Orbit nodes — positioned absolutely via inline style */
.tapestry-orbit-node[b-s8j9ymyogz] {
    position: absolute;
    transform: translate(-50%, -36px);
    z-index: 3;
}

.tapestry-orbit-node--actions-open[b-s8j9ymyogz] {
    z-index: 26;
}

/* SVG threads overlay — bezier curves from center to each member */
.tapestry-threads[b-s8j9ymyogz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.tapestry-thread-curve[b-s8j9ymyogz] {
    position: relative;
    fill: none;
    stroke-width: 0.7;
    opacity: 0.5;
    stroke-linecap: round;
}

/* === Node (each family member) === */
.tapestry-node[b-s8j9ymyogz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 80px;
    max-width: 120px;
    position: relative;
}

.tapestry-node--central[b-s8j9ymyogz] {
    max-width: 150px;
}

.tapestry-mobile-member[b-s8j9ymyogz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

.tapestry-actions-trigger[b-s8j9ymyogz] {
    position: absolute;
    top: -0.25rem;
    left: 0.05rem;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(196, 154, 108, 0.2);
    border-radius: 999px;
    background: rgba(253, 248, 240, 0.88);
    color: #7F6A59;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 14px rgba(92, 66, 45, 0.08);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 6;
}

.tapestry-actions-trigger:hover[b-s8j9ymyogz],
.tapestry-actions-trigger:focus-visible[b-s8j9ymyogz] {
    background: rgba(249, 240, 227, 0.97);
    border-color: rgba(196, 154, 108, 0.34);
    color: #5F4B3E;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(92, 66, 45, 0.12);
    outline: none;
}

.tapestry-actions-trigger-dots[b-s8j9ymyogz] {
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-1px);
}

.tapestry-node-actions-menu[b-s8j9ymyogz] {
    position: absolute;
    top: 2rem;
    left: 0.1rem;
    min-width: 172px;
    padding: 0.32rem;
    background: linear-gradient(180deg, rgba(253, 248, 240, 0.99) 0%, rgba(248, 239, 226, 0.98) 100%);
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(60, 41, 30, 0.14);
    z-index: 20;
}

.tapestry-node-actions-menu[b-s8j9ymyogz]::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 13px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid rgba(196, 154, 108, 0.18);
    border-left: 1px solid rgba(196, 154, 108, 0.18);
    transform: rotate(45deg);
}

.tapestry-node-action-item[b-s8j9ymyogz] {
    width: 100%;
    display: block;
    padding: 0.68rem 0.84rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #5B493D;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.tapestry-node-action-item:hover[b-s8j9ymyogz],
.tapestry-node-action-item:focus-visible[b-s8j9ymyogz] {
    background: rgba(214, 188, 157, 0.18);
    color: #46362C;
    outline: none;
}

.tapestry-actions-backdrop[b-s8j9ymyogz] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 18;
}

.tapestry-action-sheet[b-s8j9ymyogz] {
    display: none;
}

.tapestry-action-sheet-header[b-s8j9ymyogz] {
    padding: 0.85rem 1.15rem 0.55rem;
    border-bottom: 1px solid rgba(196, 154, 108, 0.14);
}

.tapestry-action-sheet-title[b-s8j9ymyogz] {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    color: #4B352B;
    line-height: 1.2;
}

.tapestry-action-sheet-item[b-s8j9ymyogz],
.tapestry-action-sheet-dismiss[b-s8j9ymyogz] {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.82rem 1.15rem;
    color: #4B352B;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.tapestry-action-sheet-item:hover[b-s8j9ymyogz],
.tapestry-action-sheet-item:focus-visible[b-s8j9ymyogz],
.tapestry-action-sheet-dismiss:hover[b-s8j9ymyogz],
.tapestry-action-sheet-dismiss:focus-visible[b-s8j9ymyogz] {
    background: rgba(214, 188, 157, 0.16);
    outline: none;
}

.tapestry-action-sheet-dismiss[b-s8j9ymyogz] {
    justify-content: center;
    border-top: 1px solid rgba(196, 154, 108, 0.14);
    color: #7A6657;
}

@keyframes tapestryActionSheetRise-b-s8j9ymyogz {
    from {
        opacity: 0;
        transform: translate(-50%, 18px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

:global(body.night-mode) .tapestry-actions-trigger[b-s8j9ymyogz] {
    background: rgba(42, 34, 29, 0.92);
    border-color: rgba(196, 154, 108, 0.2);
    color: #D8CCBE;
    box-shadow: 0 8px 18px rgba(6, 4, 3, 0.28);
}

:global(body.night-mode) .tapestry-actions-trigger:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-actions-trigger:focus-visible[b-s8j9ymyogz] {
    background: rgba(53, 43, 36, 0.98);
    color: #F0E4D6;
}

:global(body.night-mode) .tapestry-node-actions-menu[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet[b-s8j9ymyogz] {
    background: linear-gradient(180deg, rgba(35, 29, 25, 0.98) 0%, rgba(29, 24, 21, 0.98) 100%);
    border-color: rgba(196, 154, 108, 0.18);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}

:global(body.night-mode) .tapestry-node-actions-menu[b-s8j9ymyogz]::before {
    border-top-color: rgba(196, 154, 108, 0.18);
    border-left-color: rgba(196, 154, 108, 0.18);
}

:global(body.night-mode) .tapestry-node-action-item[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-item[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-dismiss[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-title[b-s8j9ymyogz] {
    color: #E6DBCF;
}

:global(body.night-mode) .tapestry-node-action-item:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-node-action-item:focus-visible[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-item:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-item:focus-visible[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-dismiss:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-dismiss:focus-visible[b-s8j9ymyogz] {
    background: rgba(196, 154, 108, 0.14);
}

/* === Portrait === */
.tapestry-portrait[b-s8j9ymyogz] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: visible;
    position: relative;
    border: 1.5px solid rgba(212, 165, 116, 0.4);
    transition: all 0.35s ease;
    flex-shrink: 0;
    background: rgba(245, 236, 216, 0.6);
    isolation: isolate;
    --tapestry-badge-size: 19px;
    --tapestry-badge-top: -4px;
    --tapestry-badge-right: -4px;
    box-shadow:
        0 0 0 3px rgba(249, 243, 232, 0.9),
        0 2px 12px rgba(180, 140, 90, 0.1);
}

@media (max-width: 768px) {
    .tapestry-actions-trigger[b-s8j9ymyogz] {
        top: -0.28rem;
        left: -0.05rem;
        width: 34px;
        height: 34px;
        background: rgba(253, 248, 240, 0.94);
    }

    .tapestry-node-actions-menu[b-s8j9ymyogz] {
        display: none;
    }

    .tapestry-actions-backdrop[b-s8j9ymyogz] {
        background: rgba(24, 16, 12, 0.34);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 1205;
    }

    .tapestry-action-sheet[b-s8j9ymyogz] {
        position: fixed;
        left: 50%;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        width: min(92vw, 360px);
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, rgba(253, 248, 240, 0.995) 0%, rgba(247, 238, 226, 0.99) 100%);
        border: 1px solid rgba(196, 154, 108, 0.2);
        border-radius: 22px;
        padding: 0.22rem 0 0.3rem;
        box-shadow: 0 18px 38px rgba(83, 51, 43, 0.22);
        transform: translate(-50%, 12px);
        animation: tapestryActionSheetRise-b-s8j9ymyogz 0.2s ease-out forwards;
        z-index: 1210;
    }

    :global(body.night-mode) .tapestry-action-sheet[b-s8j9ymyogz] {
        background: linear-gradient(180deg, rgba(35, 29, 25, 0.99) 0%, rgba(27, 22, 19, 0.99) 100%);
    }
}

.tapestry-portrait-img[b-s8j9ymyogz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
}

.tapestry-portrait-link[b-s8j9ymyogz] {
    text-decoration: none;
    display: block;
    border-radius: 50%;
    transition: transform 0.35s ease;
}

.tapestry-portrait-link:focus-visible[b-s8j9ymyogz] {
    outline: 2px solid rgba(196, 154, 108, 0.72);
    outline-offset: 4px;
}

.tapestry-portrait-link:focus-visible .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(196, 154, 108, 0.82);
    box-shadow:
        0 0 0 3px rgba(249, 243, 232, 0.94),
        0 0 0 6px rgba(212, 165, 116, 0.22),
        0 4px 18px rgba(180, 140, 90, 0.18);
}

.tapestry-portrait-link:hover[b-s8j9ymyogz] {
    transform: translateY(-2px);
}

.tapestry-portrait-link:hover .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(196, 154, 108, 0.7);
    box-shadow:
        0 0 20px rgba(212, 165, 116, 0.25),
        0 4px 16px rgba(180, 140, 90, 0.18);
}

.tapestry-private-badge[b-s8j9ymyogz] {
    position: absolute;
    top: var(--tapestry-badge-top);
    right: var(--tapestry-badge-right);
    width: var(--tapestry-badge-size);
    height: var(--tapestry-badge-size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(218, 180, 150, 0.98) 0%, rgba(178, 119, 92, 0.96) 52%, rgba(126, 77, 58, 0.96) 100%);
    border: 1px solid rgba(124, 72, 53, 0.26);
    box-shadow:
        0 0 0 2.5px rgba(249, 243, 232, 0.95),
        0 4px 9px rgba(102, 71, 50, 0.16),
        inset 0 1px 1px rgba(255, 249, 241, 0.62),
        inset 0 -1px 2px rgba(120, 84, 61, 0.22);
    color: rgba(255, 248, 239, 0.98);
    z-index: 4;
}

.tapestry-private-badge-icon[b-s8j9ymyogz] {
    width: 12px;
    height: 12px;
    display: block;
    filter: drop-shadow(0 1px 0 rgba(122, 84, 61, 0.18));
    overflow: visible;
}

/* Central portrait — the sun of the constellation (110px, golden glow) */
.tapestry-portrait--central[b-s8j9ymyogz] {
    width: 110px;
    height: 110px;
    border: 2.5px solid rgba(196, 154, 108, 0.55);
    box-shadow:
    0 0 0 4px rgba(249, 243, 232, 0.94),
        0 0 32px rgba(212, 165, 116, 0.22),
        0 0 64px rgba(212, 165, 116, 0.08),
        0 4px 24px rgba(139, 115, 85, 0.12);
}

/* Warm glow behind central portrait */
.tapestry-portrait-glow[b-s8j9ymyogz] {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(246, 211, 101, 0.14) 0%,
        rgba(253, 160, 133, 0.07) 50%,
        transparent 75%
    );
    pointer-events: none;
    z-index: -1;
    animation: tapestryGlow-b-s8j9ymyogz 4s ease-in-out infinite alternate;
}

@keyframes tapestryGlow-b-s8j9ymyogz {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.12); }
}

/* === Monogram fallback medallion === */
.tapestry-monogram-medallion[b-s8j9ymyogz] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    transform: scale(0.88);
    transform-origin: center;
    background:
        radial-gradient(ellipse at 36% 26%, rgba(255, 252, 244, 0.92) 0%, rgba(255, 252, 244, 0.22) 32%, transparent 56%),
        radial-gradient(circle at 68% 74%, rgba(166, 111, 82, 0.08) 0%, transparent 50%),
        linear-gradient(145deg, #F7EDD9 0%, #EAD7B9 58%, #C9937D 100%);
    color: rgba(124, 70, 56, 0.78);
    box-shadow:
        inset 0 1px 2px rgba(255, 252, 244, 0.66),
        inset 0 -5px 10px rgba(137, 83, 59, 0.09);
}

.tapestry-monogram-medallion[b-s8j9ymyogz]::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1px solid rgba(137, 83, 59, 0.13);
    box-shadow:
        inset 0 0 0 1px rgba(255, 249, 238, 0.36),
        inset 0 0 0 5px rgba(255, 247, 232, 0.1);
}

.tapestry-monogram-medallion[b-s8j9ymyogz]::after {
    content: "";
    position: absolute;
    inset: 15px 13px;
    border-top: 1px solid rgba(124, 70, 56, 0.07);
    border-bottom: 1px solid rgba(255, 249, 238, 0.18);
    transform: rotate(-8deg);
    opacity: 0.5;
}

.tapestry-monogram-initials[b-s8j9ymyogz] {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 560;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255, 249, 238, 0.42);
}

.tapestry-monogram-medallion--central .tapestry-monogram-initials[b-s8j9ymyogz] {
    font-size: 1.8rem;
}

/* === Text Labels === */
.tapestry-name[b-s8j9ymyogz] {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-weight: 400;
    color: #3A3228;
    text-align: center;
    line-height: 1.25;
    max-width: 120px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.tapestry-name--central[b-s8j9ymyogz] {
    font-size: 1.05rem;
    font-weight: 500;
    color: #2E2318;
    max-width: 150px;
}

.tapestry-name--unlinked[b-s8j9ymyogz] {
    font-style: italic;
    color: #8B7355;
    opacity: 0.75;
}

.tapestry-relation[b-s8j9ymyogz] {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    color: #A0927E;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.tapestry-years[b-s8j9ymyogz] {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: #8B7355;
    letter-spacing: 0.03em;
}

.tapestry-years--central[b-s8j9ymyogz] {
    font-size: 0.8rem;
    color: #6B5D4D;
    letter-spacing: 0.05em;
}

/* === Linked node hover === */
.tapestry-node--linked .tapestry-name[b-s8j9ymyogz] {
    color: #4A3F35;
}

/* === Unlinked node — faded presence === */
.tapestry-node--unlinked .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(200, 180, 155, 0.25);
    box-shadow: none;
    opacity: 0.65;
}

/* ============================================================
   MOBILE LAYOUT
   ============================================================ */
@media (max-width: 768px) {
    .tapestry-canvas[b-s8j9ymyogz] {
        display: none;
    }

    .tapestry-mobile[b-s8j9ymyogz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .tapestry-mobile-header-action[b-s8j9ymyogz] {
        display: flex;
        justify-content: center;
        margin: -1rem 0 1.35rem;
    }

    .tapestry[b-s8j9ymyogz] {
        padding: 2.5rem 1rem 3rem;
    }

    .tapestry-title[b-s8j9ymyogz] {
        font-size: 1.65rem;
    }

    .tapestry-header[b-s8j9ymyogz] {
        margin-bottom: 2rem;
    }

    /* Mobile rows */
    .tapestry-mobile-row[b-s8j9ymyogz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0;
    }

    .tapestry-mobile-row--central[b-s8j9ymyogz] {
        padding: 0.75rem 0;
    }

    .tapestry-mobile-label[b-s8j9ymyogz] {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        color: #A0927E;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 500;
    }

    .tapestry-mobile-members[b-s8j9ymyogz] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
    }

    .tapestry-mobile-member[b-s8j9ymyogz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .tapestry-mobile-central[b-s8j9ymyogz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }

    /* Mobile portraits — larger sizes */
    .tapestry-portrait--mobile[b-s8j9ymyogz] {
        width: 52px;
        height: 52px;
        --tapestry-badge-size: 16px;
        --tapestry-badge-top: -3px;
        --tapestry-badge-right: -3px;
    }

    .tapestry-private-badge[b-s8j9ymyogz] {
        box-shadow:
            0 0 0 2px rgba(249, 243, 232, 0.94),
            0 3px 7px rgba(102, 71, 50, 0.15),
            inset 0 1px 1px rgba(255, 249, 241, 0.6),
            inset 0 -1px 2px rgba(120, 84, 61, 0.2);
    }

    .tapestry-private-badge-icon[b-s8j9ymyogz] {
        width: 10px;
        height: 10px;
    }

    .tapestry-portrait--mobile .tapestry-monogram-initials[b-s8j9ymyogz] {
        font-size: 0.9rem;
    }

    .tapestry-portrait--mobile-central .tapestry-monogram-initials[b-s8j9ymyogz] {
        font-size: 1.4rem;
    }

    .tapestry-portrait--mobile-central[b-s8j9ymyogz] {
        width: 76px;
        height: 76px;
    }

    /* Mobile name wrapping */
    .tapestry-name--mobile[b-s8j9ymyogz] {
        font-size: 0.75rem;
        max-width: 90px;
    }

    /* Mobile vertical thread */
    .tapestry-mobile-thread[b-s8j9ymyogz] {
        width: 1.5px;
        height: 20px;
        background: linear-gradient(180deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.45), rgba(212, 165, 116, 0.15));
        border-radius: 1px;
    }

    /* Mobile linked member hover */
    .tapestry-mobile-member--linked .tapestry-portrait-link:active .tapestry-portrait[b-s8j9ymyogz] {
        border-color: rgba(196, 154, 108, 0.6);
        box-shadow: 0 0 16px rgba(212, 165, 116, 0.2);
    }
}

@media (max-width: 480px) {
    .tapestry[b-s8j9ymyogz] {
        padding: 2rem 0.75rem 2.5rem;
    }

    .tapestry-title[b-s8j9ymyogz] {
        font-size: 1.45rem;
    }

    .tapestry-subtitle[b-s8j9ymyogz] {
        font-size: 0.85rem;
    }

    .tapestry-portrait--mobile-central[b-s8j9ymyogz] {
        width: 64px;
        height: 64px;
    }

    .tapestry-portrait--mobile[b-s8j9ymyogz] {
        width: 46px;
        height: 46px;
        --tapestry-badge-size: 15px;
        --tapestry-badge-top: -2px;
        --tapestry-badge-right: -2px;
    }

    .tapestry-mobile-members[b-s8j9ymyogz] {
        gap: 1rem;
    }

    .tapestry-name--mobile[b-s8j9ymyogz] {
        max-width: 80px;
    }
}

/* ============================================================
   NIGHT MODE
   ============================================================ */
:global(body.night-mode) .tapestry-linen[b-s8j9ymyogz] {
    opacity: 0.15;
}

:global(body.night-mode) .tapestry-header-line[b-s8j9ymyogz] {
    background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.3), transparent);
}

:global(body.night-mode) .tapestry-title[b-s8j9ymyogz] {
    color: #E8DDD0;
}

:global(body.night-mode) .tapestry-subtitle[b-s8j9ymyogz] {
    color: #A89880;
}

:global(body.night-mode) .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(196, 154, 108, 0.3);
    box-shadow:
        0 0 0 3px rgba(28, 33, 38, 0.9),
        0 2px 12px rgba(0, 0, 0, 0.25);
    background-color: rgba(50, 42, 34, 0.5);
}

:global(body.night-mode) .tapestry-portrait--central[b-s8j9ymyogz] {
    border-color: rgba(196, 154, 108, 0.45);
    box-shadow:
        0 0 0 4px rgba(28, 33, 38, 0.92),
        0 0 24px rgba(196, 154, 108, 0.15),
        0 0 48px rgba(196, 154, 108, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

:global(body.night-mode) .tapestry-portrait-glow[b-s8j9ymyogz] {
    background: radial-gradient(
        circle,
        rgba(200, 160, 80, 0.1) 0%,
        rgba(200, 160, 80, 0.04) 50%,
        transparent 75%
    );
}

:global(body.night-mode) .tapestry-private-badge[b-s8j9ymyogz] {
    background: linear-gradient(160deg, rgba(156, 103, 82, 0.96) 0%, rgba(111, 68, 51, 0.96) 52%, rgba(76, 45, 35, 0.98) 100%);
    border-color: rgba(216, 184, 153, 0.18);
    color: rgba(253, 246, 238, 0.98);
    box-shadow:
        0 0 0 2.5px rgba(28, 33, 38, 0.92),
        0 4px 10px rgba(0, 0, 0, 0.32),
        inset 0 1px 1px rgba(255, 246, 234, 0.18),
        inset 0 -1px 2px rgba(48, 31, 19, 0.35);
}

:global(body.night-mode) .tapestry-monogram-medallion[b-s8j9ymyogz] {
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 234, 202, 0.13) 0%, transparent 48%),
        radial-gradient(circle at 68% 74%, rgba(176, 98, 70, 0.11) 0%, transparent 50%),
        linear-gradient(145deg, #45362F 0%, #382D28 56%, #5C3F35 100%);
    color: rgba(229, 205, 183, 0.78);
    box-shadow:
        inset 0 1px 2px rgba(255, 239, 218, 0.09),
        inset 0 -5px 10px rgba(7, 4, 3, 0.2);
}

:global(body.night-mode) .tapestry-monogram-medallion[b-s8j9ymyogz]::before {
    border-color: rgba(229, 205, 183, 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 212, 0.06),
        inset 0 0 0 5px rgba(255, 228, 196, 0.03);
}

:global(body.night-mode) .tapestry-monogram-medallion[b-s8j9ymyogz]::after {
    border-top-color: rgba(229, 205, 183, 0.06);
    border-bottom-color: rgba(255, 236, 212, 0.04);
}

:global(body.night-mode) .tapestry-monogram-initials[b-s8j9ymyogz] {
    text-shadow: 0 1px 0 rgba(8, 5, 4, 0.38);
}

:global(body.night-mode) .tapestry-name[b-s8j9ymyogz] {
    color: #D4C8B8;
}

:global(body.night-mode) .tapestry-name--central[b-s8j9ymyogz] {
    color: #E8DDD0;
}

:global(body.night-mode) .tapestry-name--unlinked[b-s8j9ymyogz] {
    color: #8A7D6D;
}

:global(body.night-mode) .tapestry-relation[b-s8j9ymyogz] {
    color: #7A6D5D;
}

:global(body.night-mode) .tapestry-years[b-s8j9ymyogz] {
    color: #8A7D6D;
}

:global(body.night-mode) .tapestry-years--central[b-s8j9ymyogz] {
    color: #A89880;
}

:global(body.night-mode) .tapestry-node--unlinked .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(160, 140, 110, 0.15);
    opacity: 0.5;
}

:global(body.night-mode) .tapestry-portrait-link:hover .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(196, 154, 108, 0.55);
    box-shadow:
        0 0 20px rgba(196, 154, 108, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

:global(body.night-mode) .tapestry-portrait-link:focus-visible[b-s8j9ymyogz] {
    outline-color: rgba(220, 188, 150, 0.82);
}

:global(body.night-mode) .tapestry-portrait-link:focus-visible .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(216, 184, 153, 0.74);
    box-shadow:
        0 0 0 3px rgba(28, 33, 38, 0.94),
        0 0 0 6px rgba(196, 154, 108, 0.18),
        0 4px 18px rgba(0, 0, 0, 0.3);
}

:global(body.night-mode) .tapestry-mobile-label[b-s8j9ymyogz] {
    color: #7A6D5D;
}

:global(body.night-mode) .tapestry-mobile-thread[b-s8j9ymyogz] {
    background: linear-gradient(180deg, rgba(196, 154, 108, 0.08), rgba(196, 154, 108, 0.3), rgba(196, 154, 108, 0.08));
}

:global(body.night-mode) .tapestry-mobile-member--linked .tapestry-portrait-link:active .tapestry-portrait[b-s8j9ymyogz] {
    border-color: rgba(196, 154, 108, 0.5);
    box-shadow: 0 0 16px rgba(196, 154, 108, 0.15);
}

:global(body.night-mode) .tapestry-thread-curve[b-s8j9ymyogz] {
    opacity: 0.3;
}
/* /Components/MemorialTributeModal.razor.rz.scp.css */
.memorial-edit-modal-overlay[b-zcmqhptmdp] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(51, 40, 28, 0.32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.memorial-edit-modal[b-zcmqhptmdp] {
    width: min(760px, 100%);
    max-height: min(90vh, 820px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFF9EF 0%, #FAF0E2 100%);
    border: 1px solid rgba(196, 154, 108, 0.28);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(74, 52, 32, 0.28);
    overflow: hidden;
}

.memorial-edit-modal-header[b-zcmqhptmdp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}

.memorial-edit-modal-kicker[b-zcmqhptmdp] {
    margin: 0 0 0.35rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.94rem;
    color: #9A7A55;
}

.memorial-edit-modal h2[b-zcmqhptmdp] {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    color: #34281F;
    font-size: clamp(1.55rem, 4vw, 2.15rem);
    line-height: 1.12;
}

.memorial-edit-modal-close[b-zcmqhptmdp] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(164, 123, 80, 0.22);
    border-radius: 50%;
    background: rgba(255, 251, 244, 0.72);
    color: #6B5541;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.memorial-edit-modal-body[b-zcmqhptmdp] {
    padding: 1.25rem 1.75rem;
    overflow-y: auto;
}

.memorial-tribute-textarea[b-zcmqhptmdp] {
    width: 100%;
    min-height: 320px;
    resize: vertical;
    border: 1px solid rgba(196, 154, 108, 0.22);
    border-radius: 14px;
    background: rgba(255, 252, 246, 0.82);
    padding: 1.25rem 1.35rem;
    color: #3E332A;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.8;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.memorial-tribute-textarea:focus[b-zcmqhptmdp] {
    border-color: rgba(164, 123, 80, 0.46);
    box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12);
}

.memorial-edit-hint[b-zcmqhptmdp] {
    margin: 0.85rem 0 0;
    color: #806D5B;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.6;
}

.memorial-edit-error[b-zcmqhptmdp] {
    margin-bottom: 1rem;
    border: 1px solid rgba(164, 72, 55, 0.18);
    border-radius: 12px;
    background: rgba(255, 238, 232, 0.82);
    padding: 0.8rem 1rem;
    color: #8A3B2D;
    font-family: var(--font-sans);
    font-size: 0.92rem;
}

.memorial-edit-modal-footer[b-zcmqhptmdp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.75rem 1.4rem;
    border-top: 1px solid rgba(196, 154, 108, 0.14);
}

.memorial-edit-secondary[b-zcmqhptmdp],
.memorial-edit-primary[b-zcmqhptmdp] {
    border-radius: 999px;
    padding: 0.72rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.93rem;
    cursor: pointer;
}

.memorial-edit-secondary[b-zcmqhptmdp] {
    border: 1px solid rgba(164, 123, 80, 0.24);
    background: transparent;
    color: #6B5541;
}

.memorial-edit-primary[b-zcmqhptmdp] {
    border: 1px solid rgba(164, 123, 80, 0.26);
    background: linear-gradient(145deg, #F8E5C8 0%, #EBCFA5 100%);
    color: #4A3426;
    box-shadow: 0 8px 20px rgba(164, 123, 80, 0.14);
}

.memorial-edit-primary:disabled[b-zcmqhptmdp] {
    opacity: 0.64;
    cursor: wait;
}

:global(body.night-mode) .memorial-edit-modal[b-zcmqhptmdp] {
    background: linear-gradient(180deg, #2A2119 0%, #211A15 100%);
    border-color: rgba(196, 154, 108, 0.22);
}

:global(body.night-mode) .memorial-edit-modal h2[b-zcmqhptmdp] {
    color: #E8DDD0;
}

:global(body.night-mode) .memorial-tribute-textarea[b-zcmqhptmdp] {
    background: rgba(35, 29, 23, 0.86);
    color: #E8DDD0;
}

@media (max-width: 640px) {
    .memorial-edit-modal-overlay[b-zcmqhptmdp] {
        align-items: stretch;
        padding: 0;
    }

    .memorial-edit-modal[b-zcmqhptmdp] {
        max-height: none;
        min-height: 100dvh;
        border-radius: 0;
    }

    .memorial-edit-modal-header[b-zcmqhptmdp],
    .memorial-edit-modal-body[b-zcmqhptmdp],
    .memorial-edit-modal-footer[b-zcmqhptmdp] {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .memorial-tribute-textarea[b-zcmqhptmdp] {
        min-height: 46dvh;
    }
}
/* /Components/MemoryModal.razor.rz.scp.css */
.modal-overlay[b-uc69yhuklp] {
    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;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2000;
}

    .modal-overlay.visible[b-uc69yhuklp] {
        opacity: 1;
        visibility: visible;
    }

.modal-content[b-uc69yhuklp] {
    position: relative;
    background: #FDF8F2;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

@media (min-width: 769px) {
    .modal-content[b-uc69yhuklp] {
        width: min(92vw, 620px);
        max-width: 620px;
    }
}

.modal-overlay.visible .modal-content[b-uc69yhuklp] {
    transform: scale(1) translateY(0);
}

.memory-header[b-uc69yhuklp] {
    background: linear-gradient(135deg, #F4E4BC 0%, #E8D5A3 100%);
    padding: 32px 0px 0 0px; /* Added right padding for close button */
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.loved-one-info[b-uc69yhuklp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loved-one-info-with-dropdown[b-uc69yhuklp] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 24px 10px 24px;
}

.loved-one-avatar[b-uc69yhuklp] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.loved-one-name[b-uc69yhuklp] {
    margin: 0;
    color: #5D4037;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.memory-question[b-uc69yhuklp] {
    padding: 0px 24px 0px 24px;
    text-align: center;
    border-bottom: 1px solid #E8DCC0;
}

    .memory-question h3[b-uc69yhuklp] {
        margin: 0 0 8px 0;
        color: #3E2723;
        font-size: 1.375rem;
        font-weight: 600;
        line-height: 1.3;
    }

.question-subtitle[b-uc69yhuklp] {
    margin: 0;
    color: #8B7355;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
}

.memory-form[b-uc69yhuklp] {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.form-group[b-uc69yhuklp] {
    margin-bottom: 24px;
}

.memory-source-attribution[b-uc69yhuklp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(123, 90, 83, 0.14);
    border-left: 4px solid #D4AF37;
    border-radius: 10px;
    background: rgba(255, 250, 244, 0.88);
    color: #5D4037;
}

.memory-source-label[b-uc69yhuklp] {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #A67B5B;
}

.memory-source-author[b-uc69yhuklp] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4C342E;
}

    .form-group label[b-uc69yhuklp] {
        display: block;
        margin-bottom: 8px;
        color: #5D4037;
        font-weight: 600;
        font-size: 0.95rem;
    }

.form-input[b-uc69yhuklp],
.form-textarea[b-uc69yhuklp] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E8DCC0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #3E2723;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .form-input:focus[b-uc69yhuklp],
    .form-textarea:focus[b-uc69yhuklp] {
        outline: none;
        border-color: #D4AF37;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
        background: #FEFBF7;
    }

    .form-input[b-uc69yhuklp]::placeholder,
    .form-textarea[b-uc69yhuklp]::placeholder {
        color: #B8A082;
    }

.form-textarea[b-uc69yhuklp] {
    resize: none;
    min-height: 100px;
    line-height: 1.5;
}

.bottom-section[b-uc69yhuklp] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.image-upload-container[b-uc69yhuklp] {
    flex: 0 0 140px;
}



.upload-area[b-uc69yhuklp] {
    position: relative;
    width: 140px;
    height: 100px;
    border: 2px dashed #E6B9A6;
    border-radius: 12px;
    background: #FFF9F5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .upload-area:hover[b-uc69yhuklp] {
        border-color: #D4AF37;
        background: #FFF4EA;
        transform: translateY(-1px);
    }

    .upload-area:focus-visible[b-uc69yhuklp] {
        outline: none;
        border-color: #D4AF37;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
        background: #FFF4EA;
    }

    .upload-area.has-image[b-uc69yhuklp] {
        border: none;
        background: transparent;
        padding: 0;
    }

.upload-placeholder[b-uc69yhuklp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #A86E4C;
    text-align: center;
}

.camera-icon[b-uc69yhuklp] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.upload-placeholder span[b-uc69yhuklp] {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.uploaded-image[b-uc69yhuklp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.remove-image-btn[b-uc69yhuklp] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.3s ease;
}

    .remove-image-btn:hover[b-uc69yhuklp] {
        background: rgba(0, 0, 0, 0.9);
    }

.memory-type-select[b-uc69yhuklp] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E8DCC0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #3E2723;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A86E4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

    .memory-type-select:focus[b-uc69yhuklp] {
        outline: none;
        border-color: #D4AF37;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
        background-color: #FEFBF7;
    }

.modal-actions[b-uc69yhuklp] {
    padding: 14px;
    border-top: 1px solid #E8DCC0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.btn[b-uc69yhuklp] {
    padding: 14px 28px;
    border-radius: 25px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    justify-content: center;
}

.btn-cancel[b-uc69yhuklp] {
    background: rgba(255, 255, 255, 0.35);
    color: #6F6258;
    border: 1px solid #E8DCC0;
    box-shadow: none;
}

    .btn-cancel:hover:not(:disabled)[b-uc69yhuklp] {
        background: #F7EFE6;
        color: #5D4037;
        border-color: #D9C9AA;
        transform: translateY(-1px);
    }

.btn-edit[b-uc69yhuklp],
.btn-save[b-uc69yhuklp] {
    background: linear-gradient(135deg, #E6B9A6 0%, #D4AF37 100%);
    color: #3E2723;
    box-shadow: 0 4px 12px rgba(168, 110, 76, 0.22);
}

    .btn-edit:hover:not(:disabled)[b-uc69yhuklp],
    .btn-save:hover:not(:disabled)[b-uc69yhuklp] {
        background: linear-gradient(135deg, #EBC4B4 0%, #C99A30 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(168, 110, 76, 0.28);
    }

    .btn-edit:focus-visible[b-uc69yhuklp],
    .btn-save:focus-visible[b-uc69yhuklp],
    .btn-cancel:focus-visible[b-uc69yhuklp] {
        outline: 2px solid #D4AF37;
        outline-offset: 2px;
    }

.btn:disabled[b-uc69yhuklp] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.spinner[b-uc69yhuklp] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-uc69yhuklp 1s linear infinite;
}


.memory-type-container[b-uc69yhuklp] {
    flex: 1;
    width: 100%;
}

@keyframes spin-b-uc69yhuklp {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .modal-content[b-uc69yhuklp] {
        width: 95%;
        margin: 20px auto;
        max-height: calc(100vh - 40px);
    }

    


    .loved-one-avatar[b-uc69yhuklp] {
        width: 80px;
        height: 80px;
    }

    .loved-one-name[b-uc69yhuklp] {
        font-size: 1.25rem;
    }

    
        .memory-question h3[b-uc69yhuklp] {
            font-size: 1.2rem;
        }

    .question-subtitle[b-uc69yhuklp] {
        font-size: 0.9rem;
    }

    .memory-form[b-uc69yhuklp] {
        padding: 20px;
    }

    .bottom-section[b-uc69yhuklp] {
        flex-direction: column;
        gap: 20px;
    }

    .image-upload-container[b-uc69yhuklp] {
        flex: none;
        align-self: center;
    }

    .modal-actions[b-uc69yhuklp] {
        padding: 20px;
        flex-direction: row;
        gap: 12px;
    }

    .btn[b-uc69yhuklp] {
        flex: 1;
        padding: 14px 20px;
    }
    
    .loved-one-dropdown[b-uc69yhuklp] {
        max-width: none;
        width: 100%;
    }

    .memory-type-container[b-uc69yhuklp] {
        flex: none;
        width: 100%;
    }

    .memory-type-select[b-uc69yhuklp] {
        width: 100%;
    }
}

.loved-one-selector[b-uc69yhuklp] {
    flex: 1;
    margin-bottom: 0;
    text-align: left;
}

.loved-one-dropdown[b-uc69yhuklp] {
    width: 100%;
    margin: 0 auto;
    padding: 12px 16px;
    border: 2px solid #E8DCC0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #3E2723;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A86E4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

    .loved-one-dropdown:focus[b-uc69yhuklp] {
        outline: none;
        border-color: #D4AF37;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
        background-color: #FEFBF7;
    }

@media (max-width: 480px) {
    .modal-content[b-uc69yhuklp] {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
    }

    .memory-header[b-uc69yhuklp] {
        border-radius: 0;
        flex-shrink: 0;
    }
    
    .loved-one-info-with-dropdown .loved-one-avatar[b-uc69yhuklp] {
        width: 50px;
        height: 50px;
    }
    
    .loved-one-info-with-dropdown[b-uc69yhuklp] {
        padding: 0 16px 16px 16px;
        gap: 12px;
    }
    
    .memory-form[b-uc69yhuklp] {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        /* Add subtle scroll indicator at bottom */
        position: relative;
    }    /* Add a more prominent shadow/gradient above the footer on very small screens */
    .memory-form[b-uc69yhuklp]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to top, rgba(253, 248, 242, 0.95) 0%, rgba(253, 248, 242, 0.4) 60%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    .modal-actions[b-uc69yhuklp] {
        flex-shrink: 0;
        padding: 16px;
        flex-direction: row;
        gap: 8px;
        position: sticky;
        bottom: 0;
        background: #FDF8F2;
        border-top: 1px solid #E8DCC0;
        /* Add a subtle shadow above the footer */
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    }

    .btn[b-uc69yhuklp] {
        flex: 1;
        padding: 14px 16px;
        font-size: 0.9rem;
    }
}

/* Styles for the tags section, copied from PrivateReflectionModal.razor.css */
.reflection-tags-area[b-uc69yhuklp] {
    margin-top: 1rem;
}

.tags-label[b-uc69yhuklp] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text); /* Slightly darker label */
    margin-bottom: 0.6rem;
    text-align: left;
}

.tags-options-container[b-uc69yhuklp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center
}

.tag-option-button[b-uc69yhuklp] { /* Softer, more subtle tags */
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid #E0D8D1; /* Lighter border */
    border-radius: 15px;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

    .tag-option-button:hover[b-uc69yhuklp] {
        border-color: var(--peach);
        background-color: #FFF9F7; /* Very subtle hover */
    }

    .tag-option-button.active[b-uc69yhuklp] { /* Selected tag */
        background-color: var(--peach);
        color: var(--text);
        border-color: var(--accent);
        font-weight: 500;
    }

    .memory-type-explanation[b-uc69yhuklp] {
    margin-top: 16px;
    padding: 16px;
    background: #FFF9F5;
    border: 1px solid #F0E6D6;
    border-radius: 12px;
    border-left: 4px solid #D4AF37;
}

.memory-type-description[b-uc69yhuklp] {
    margin: 0;
    color: #5D4037;
    font-size: 0.9rem;
    line-height: 1.5;
}

.memory-type-description strong[b-uc69yhuklp] {
    color: #3E2723;
    font-weight: 600;
}

.memory-type-description em[b-uc69yhuklp] {
    color: #8B7355;
    font-style: italic;
    display: block;
    margin-top: 8px;
}

/* Mobile adjustments for memory type explanation */
@media (max-width: 768px) {
    .memory-type-explanation[b-uc69yhuklp] {
        margin-top: 12px;
        padding: 12px;
    }
    
    .memory-type-description[b-uc69yhuklp] {
        font-size: 0.85rem;
    }
}

.memory-date-container[b-uc69yhuklp] {
    margin-top: 20px;
    flex: none;
    width: 100%;
}

.memory-date-container label[b-uc69yhuklp] {
    display: block;
    margin-bottom: 8px;
    color: #5D4037;
    font-weight: 600;
    font-size: 0.95rem;
}

.memory-date-subtitle[b-uc69yhuklp] {
    margin: 0 0 8px 0;
    color: #3E2723;
    font-size: 0.9rem;
    font-weight: 500;
}

.memory-date-container .input-hint[b-uc69yhuklp] {
    display: block;
    margin-bottom: 12px;
    color: #8B7355;
    font-size: 0.85rem;
    line-height: 1.4;
}

.no-date-hint[b-uc69yhuklp] {
    display: block;
    margin-top: 12px;
    color: #8B7355;
    font-size: 0.8rem;
    font-style: italic;
    padding: 8px 12px;
    background: #FFF9F5;
    border-left: 3px solid #E8DCC0;
    border-radius: 4px;
}

/* Mobile adjustments for memory date picker */
@media (max-width: 768px) {
    .memory-date-container[b-uc69yhuklp] {
        margin-top: 16px;
    }
    
    .memory-date-subtitle[b-uc69yhuklp] {
        font-size: 0.85rem;
    }
    
    .memory-date-container .input-hint[b-uc69yhuklp] {
        font-size: 0.8rem;
    }
    
    .no-date-hint[b-uc69yhuklp] {
        font-size: 0.75rem;
    }
}

.set-today-btn[b-uc69yhuklp] {
    display: block;
    margin: 12px auto 8px auto;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #E8DCC0;
    border-radius: 20px;
    color: #8B7355;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    max-width: 200px;
}

.set-today-btn:hover[b-uc69yhuklp] {
    border-color: #D4AF37;
    color: #5D4037;
    background: #FFF9F5;
    transform: translateY(-1px);
}

.set-today-btn:focus-visible[b-uc69yhuklp] {
    outline: 2px solid rgba(212, 175, 55, 0.75);
    outline-offset: 3px;
    border-color: #D4AF37;
    color: #5D4037;
    background: #FFF9F5;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

.set-today-hint[b-uc69yhuklp] {
    display: block;
    font-size: 0.75rem;
    color: #B8A082;
    margin-top: 2px;
    font-weight: normal;
}

.set-today-btn:hover .set-today-hint[b-uc69yhuklp] {
    color: #8B7355;
}

/* Mobile adjustments for set today button */
@media (max-width: 768px) {
    .set-today-btn[b-uc69yhuklp] {
        font-size: 0.8rem;
        padding: 6px 12px;
        max-width: 180px;
    }
    
    .set-today-hint[b-uc69yhuklp] {
        font-size: 0.7rem;
    }
}

/* === Close Button Styling === */
.modal-close-icon-button[b-uc69yhuklp] {
    position: absolute;
    top: 12px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 400;
    color: #8B7355;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
}

.modal-close-icon-button:hover[b-uc69yhuklp] {
    color: #5D4037;
}

.modal-close-icon-button:focus-visible[b-uc69yhuklp] {
    outline: 2px solid rgba(212, 175, 55, 0.75);
    outline-offset: 3px;
    color: #5D4037;
    background: rgba(255, 249, 245, 0.82);
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}

/* === Close Button Mobile Responsiveness === */
@media (max-width: 768px) {
    .modal-close-icon-button[b-uc69yhuklp] {
        top: 10px;
        right: 15px;
        font-size: 1.4rem;
    }
    
    .memory-header[b-uc69yhuklp] {
        padding: 24px 0px 0px 0px; /* Adjusted for mobile close button */
    }
}

@media (max-width: 480px) {
    .modal-close-icon-button[b-uc69yhuklp] {
        top: 0px;
        right: 12px;
        font-size: 1.3rem;
    }
    
    .memory-header[b-uc69yhuklp] {
        padding: 24px 0px 0px 0px; /* Adjusted for small mobile close button */
    }
}

/* === Modal Overlay and Content === */
/* /Components/MobileTopBar.razor.rz.scp.css */
/* MobileTopBar - Floating transparent header (premium memorial-page style) */
/* Follows the pointer-events pattern from MemorialPage floating headers */

.mobile-floating-header[b-c8x160tvjz] {
    display: none; /* Hidden on desktop — CSS-only visibility */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    padding: 16px calc(20px + env(safe-area-inset-right, 0px)) 12px calc(20px + env(safe-area-inset-left, 0px));
    pointer-events: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    transition: background 0.22s ease, box-shadow 0.22s ease;
}

@media (max-width: 1024px) {
    .mobile-floating-header[b-c8x160tvjz] {
        display: flex;
    }
}

.mobile-floating-header.menu-open[b-c8x160tvjz] {
    background:
        linear-gradient(180deg, rgba(253, 247, 237, 0.98) 0%, rgba(253, 247, 237, 0.92) 78%, rgba(253, 247, 237, 0) 100%);
}

/* Logo */
.mobile-header-logo[b-c8x160tvjz] {
    pointer-events: all;
    display: flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: #4B2E2E;
    transition: color 0.2s ease;
}

.mobile-header-logo:hover[b-c8x160tvjz] {
    color: #3b241f;
}

.mobile-wordmark[b-c8x160tvjz] {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 650;
    letter-spacing: 0;
    color: currentColor;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

.mobile-wordmark-accent[b-c8x160tvjz] {
    color: #f0a9b3;
}

/* Actions container */
.mobile-header-actions[b-c8x160tvjz] {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Round hamburger button (frosted glass) */
.mobile-menu-btn[b-c8x160tvjz] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(164, 123, 80, 0.2);
    background: rgba(253, 248, 240, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.mobile-menu-btn:hover[b-c8x160tvjz] {
    background: rgba(253, 248, 240, 0.95);
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
}

.mobile-menu-btn:active[b-c8x160tvjz] {
    transform: scale(0.95);
}

.mobile-menu-btn.is-open[b-c8x160tvjz] {
    background: rgba(255, 253, 248, 0.96);
    border-color: rgba(151, 105, 75, 0.18);
    box-shadow:
        0 10px 24px rgba(96, 68, 48, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

/* Guest CTA pill (frosted glass treatment) */
.mobile-cta-pill[b-c8x160tvjz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: rgba(253, 248, 240, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(164, 123, 80, 0.25);
    padding: 8px 18px;
    border-radius: 22px;
    color: #3b241f;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
    pointer-events: all;
}

.mobile-cta-pill:hover[b-c8x160tvjz] {
    background: rgba(253, 248, 240, 0.97);
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
}

.mobile-cta-pill:active[b-c8x160tvjz] {
    background: rgba(242, 201, 165, 0.9);
}

/* Night mode */
:global(body.night-mode) .mobile-floating-header[b-c8x160tvjz] {
    /* Same structure, just subtly warmer for night */
}

:global(body.night-mode) .mobile-floating-header.menu-open[b-c8x160tvjz] {
    background:
        linear-gradient(180deg, rgba(38, 32, 27, 0.97) 0%, rgba(38, 32, 27, 0.9) 78%, rgba(38, 32, 27, 0) 100%);
}

:global(body.night-mode) .mobile-header-logo[b-c8x160tvjz] {
    color: #E8DDD0;
}

:global(body.night-mode) .mobile-wordmark-accent[b-c8x160tvjz] {
    color: #f0b0b8;
}

:global(body.night-mode) .mobile-menu-btn[b-c8x160tvjz] {
    background: rgba(40, 35, 30, 0.75);
    border-color: rgba(180, 140, 90, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

:global(body.night-mode) .mobile-menu-btn.is-open[b-c8x160tvjz] {
    background: rgba(58, 48, 39, 0.94);
    border-color: rgba(213, 170, 121, 0.25);
}

:global(body.night-mode) .mobile-menu-btn svg line[b-c8x160tvjz] {
    stroke: #E8DDD0;
}

:global(body.night-mode) .mobile-cta-pill[b-c8x160tvjz] {
    background: rgba(40, 35, 30, 0.75);
    border-color: rgba(180, 140, 90, 0.25);
    color: #E8DDD0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .mobile-floating-header[b-c8x160tvjz] {
        gap: 6px;
        padding-left: calc(16px + env(safe-area-inset-left, 0px));
        padding-right: calc(16px + env(safe-area-inset-right, 0px));
    }

    .mobile-header-actions[b-c8x160tvjz] {
        gap: 6px;
    }

    .mobile-wordmark[b-c8x160tvjz] {
        font-size: 1.38rem;
    }

    .mobile-cta-pill[b-c8x160tvjz] {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.84rem;
    }
}

@media (max-width: 380px) {
    .mobile-floating-header[b-c8x160tvjz] {
        gap: 8px;
        padding-left: calc(16px + env(safe-area-inset-left, 0px));
        padding-right: calc(16px + env(safe-area-inset-right, 0px));
    }

    .mobile-cta-pill[b-c8x160tvjz] {
        padding-left: 8px;
        padding-right: 8px;
    }
}
/* /Components/NewLovedOneOnboarding.razor.rz.scp.css */
/* === Modal Overlay and Centering === */
.modal-overlay[b-x2lcq3s2u7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.visible[b-x2lcq3s2u7] {
    opacity: 1;
    pointer-events: all;
}

.step-modal-content[b-x2lcq3s2u7], .modal-content[b-x2lcq3s2u7] {
    background: #FDF6F0;
    border-radius: 28px;
    box-shadow: 0 6px 36px 0 rgba(89, 74, 58, 0.10);
    /*padding: 2.4rem 2.6rem 2rem 2.6rem;*/
    min-width: 340px;
    max-width: 520px; /* Default width for mobile */
    width: 100%;
    position: relative;
    color: #32281b;
    font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
    text-align: left;
}

/* Make modal wider on desktop */
@media (min-width: 992px) {
    .step-modal-content[b-x2lcq3s2u7], .modal-content[b-x2lcq3s2u7] {
        max-width: 720px; /* Increased width for desktop */
        /*padding: 2.6rem 3rem 2.2rem 3rem;*/ /* Slightly increased padding for desktop */
    }
}

    /* === Headings & Paragraphs === */
    .step-modal-content h2[b-x2lcq3s2u7] {
        font-size: 2rem;
        font-weight: 700;
        color: #3c2917;
        margin-bottom: 0.8em;
        letter-spacing: -1px;
    }

    .step-modal-content p[b-x2lcq3s2u7] {
        font-size: 1.08rem;
        color: #78685c;
        margin-bottom: 1.1em;
    }

    /* === Inputs and Textareas === */
    .step-modal-content input[type="text"][b-x2lcq3s2u7],
    .step-modal-content input[type="number"][b-x2lcq3s2u7],
    .step-modal-content select[b-x2lcq3s2u7],
    .step-modal-content textarea[b-x2lcq3s2u7] {
        display: block;
        width: 100%;
        margin-bottom: 1.2em;
        padding: 0.92em 1.1em;
        border-radius: 15px;
        border: 1.3px solid #f0e1d0;
        background: #fff9f4;
        font-size: 1.06rem;
        color: #473b26;
        transition: border 0.18s;
        box-sizing: border-box;
        outline: none;
    }

        .step-modal-content input:focus[b-x2lcq3s2u7],
        .step-modal-content textarea:focus[b-x2lcq3s2u7],
        .step-modal-content select:focus[b-x2lcq3s2u7] {
            border-color: #fbbbad;
            background: #fff6f0;
        }

/* === Buttons === */
.btn-modal-primary[b-x2lcq3s2u7], .btn-modal-secondary[b-x2lcq3s2u7], .btn-modal-tertiary[b-x2lcq3s2u7], .btn[b-x2lcq3s2u7] {
    padding: 0.68em 1.65em;
    border-radius: 22px;
    font-size: 1.11rem;
    font-weight: 600;
    border: none;
    outline: none;
    margin-right: 0.75em;
    margin-top: 0.4em;
    cursor: pointer;
    transition: background 0.19s;
    letter-spacing: -0.5px;
}

.btn-modal-primary[b-x2lcq3s2u7], .btn-primary[b-x2lcq3s2u7] {
    background: #fbbbad;
    color: #38250d;
    box-shadow: 0 2px 8px rgba(247,186,173,0.10);
}

    .btn-modal-primary:disabled[b-x2lcq3s2u7] {
        background: #f4d8cc;
        color: #a1887f;
        cursor: not-allowed;
    }

.btn-modal-secondary[b-x2lcq3s2u7] {
    background: #f9e1c6;
    color: #835c34;
}

.btn-modal-tertiary[b-x2lcq3s2u7] {
    background: none;
    color: #a37a4c;
    border: 1.2px solid #efd7bb;
}

/* === Example/Helper Texts === */
.example-stories[b-x2lcq3s2u7] {
    background: #fff3ea;
    border-radius: 18px;
    padding: 0.9em 1.2em;
    font-size: 0.98rem;
    color: #967f6b;
    margin-bottom: 1.2em;
}

    .example-stories p[b-x2lcq3s2u7] {
        margin: 0 0 0.45em 0;
        font-style: italic;
    }

.step-buttons[b-x2lcq3s2u7] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2rem;
}

/* When we need all buttons aligned to the right */
.step-buttons.right-aligned[b-x2lcq3s2u7] {
    justify-content: flex-end;
    gap: 1rem;
}

/* === File input styling (optional) === */
.step-modal-content input[type="file"][b-x2lcq3s2u7] {
    padding: 0.7em 0;
    background: transparent;
    border: none;
    font-size: 0.97rem;
}

/* === Preview Image (photo upload) === */
.photo-upload-area[b-x2lcq3s2u7] {
    margin: 1.5rem 0;
}

.step-modal-content img[b-x2lcq3s2u7], .preview-photo[b-x2lcq3s2u7] {
    display: block;
    margin: 1.2rem 0;
    border-radius: 16px;
    box-shadow: 0 1px 8px rgba(140,116,90,0.09);
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

@media (max-width: 768px) {
    :global(html:has(.modal-overlay.visible))[b-x2lcq3s2u7],
    :global(body:has(.modal-overlay.visible))[b-x2lcq3s2u7] {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }

    .modal-overlay[b-x2lcq3s2u7] {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0;
        overflow: hidden;
    }

    .modal-content[b-x2lcq3s2u7] {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        /*padding: 1.5rem 1.25rem !important;*/
        box-shadow: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start;
    }

    @supports (height: 100svh) {
        .modal-content[b-x2lcq3s2u7] {
            height: 100svh !important;
        }
    }

    .modal-content .modal-footer[b-x2lcq3s2u7],
    .lovedone-modal-footer[b-x2lcq3s2u7] {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    }
}


/* /Components/NotificationMenu.razor.rz.scp.css */
/* NotificationMenu.razor.css */

.notification-menu[b-tyvv8tmdc0] {
    position: fixed;
    top: 1.5rem;
    right: 2.5rem;
    z-index: 1000;
    font-family: var(--font-lato);
}

    .notification-menu > button[b-tyvv8tmdc0] {
        background: var(--sidebar-bg);
        border: none;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        box-shadow: 0 2px 8px rgba(75, 46, 46, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        transition: background 0.2s;
    }

        .notification-menu > button:hover[b-tyvv8tmdc0] {
            background: var(--accent);
        }

.icon-bell[b-tyvv8tmdc0] {
    font-size: 1.5rem;
    color: var(--text-light);
}

.notification-dot[b-tyvv8tmdc0] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--sidebar-bg);
    box-shadow: 0 0 0 2px var(--card-content-bg);
}

.notification-list[b-tyvv8tmdc0] {
    position: absolute;
    right: 0;
    top: 60px;
    min-width: 320px;
    max-width: 400px;
    background: var(--card-content-bg);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(75, 46, 46, 0.15);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: fadeIn-b-tyvv8tmdc0 0.2s;
}

@keyframes fadeIn-b-tyvv8tmdc0 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-item[b-tyvv8tmdc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--main-content-bg);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.98rem;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(75, 46, 46, 0.04);
    border-left: 4px solid var(--accent);
    gap: 0.75rem;
    min-height: 48px;
}

    .notification-item.progress[b-tyvv8tmdc0] {
        border-left-color: var(--accent);
    }

    .notification-item.success[b-tyvv8tmdc0] {
        border-left-color: #8bc34a;
        background: #f3faef;
    }

    .notification-item.error[b-tyvv8tmdc0] {
        border-left-color: #e57373;
        background: #fff0f0;
        color: #a00;
    }

    .notification-item .spinner[b-tyvv8tmdc0] {
        width: 18px;
        height: 18px;
        border: 2px solid var(--accent);
        border-top: 2px solid var(--peach);
        border-radius: 50%;
        animation: spin-b-tyvv8tmdc0 1s linear infinite;
        margin-left: 0.5rem;
    }

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

.notification-item > button[b-tyvv8tmdc0] {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 0.5rem;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .notification-item > button:hover[b-tyvv8tmdc0] {
        background: var(--soft-border);
        color: var(--text);
    }

/* /Components/OracleAskCard.razor.rz.scp.css */
/* ─── Parchment Card ─── */
.oracle-card.parchment[b-ywngcuft2n] {
    width: min(720px, 100%);
    margin: 0 auto;
    background: radial-gradient(ellipse at 50% 40%, #f5ead4 0%, #e8d5b8 55%, #d4be9a 100%);
    border: 4px double #a07a52;
    border-radius: 10px;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        inset 0 0 100px rgba(139, 69, 19, 0.18),
        inset 0 0 30px rgba(160, 120, 60, 0.08);
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Decorative inner frame */
.oracle-card.parchment[b-ywngcuft2n]::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(160, 120, 70, 0.4);
    border-radius: 6px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(160, 120, 70, 0.12);
}

/* Corner ornaments on the inner frame */
.oracle-card.parchment[b-ywngcuft2n]::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid transparent;
    border-image: repeating-linear-gradient(
        90deg,
        rgba(160, 120, 70, 0.3) 0px,
        rgba(160, 120, 70, 0.3) 4px,
        transparent 4px,
        transparent 8px
    ) 1;
    pointer-events: none;
    border-radius: 0;
}

.oracle-card h1[b-ywngcuft2n] {
    margin: 0 0 1.4rem;
    color: #3d2b1f;
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 4.5vw, 2.6rem);
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* ─── Input (pressed into parchment) ─── */
.oracle-question-input[b-ywngcuft2n] {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(160, 120, 70, 0.45);
    background-color: rgba(255, 255, 255, 0.35);
    padding: 1rem 1.1rem;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-style: italic;
    color: #3E2723;
    resize: vertical;
    min-height: 140px;
    box-shadow: inset 0 2px 8px rgba(100, 60, 20, 0.1);
    position: relative;
    z-index: 1;
}

.oracle-question-input:focus[b-ywngcuft2n] {
    outline: none;
    border-color: rgba(160, 120, 70, 0.7);
    box-shadow: inset 0 2px 8px rgba(100, 60, 20, 0.14), 0 0 0 2px rgba(193, 154, 107, 0.15);
}

.oracle-question-input[b-ywngcuft2n]::placeholder {
    color: rgba(80, 55, 35, 0.5);
    font-style: italic;
}

/* ─── Chips (pill outlines) ─── */
.oracle-chip-row[b-ywngcuft2n] {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.oracle-chip[b-ywngcuft2n] {
    border-radius: 999px;
    border: 1px solid rgba(140, 100, 65, 0.5);
    padding: 0.4rem 1rem;
    background: rgba(255, 252, 245, 0.65);
    color: #5d4037;
    /* inherited font-sans */
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.oracle-chip:hover[b-ywngcuft2n] {
    background: rgba(222, 196, 162, 0.5);
    border-color: rgba(140, 100, 65, 0.7);
}

.oracle-chip.active[b-ywngcuft2n] {
    background: rgba(193, 154, 107, 0.35);
    border-color: #9a7b5a;
    color: #3e2b24;
}

/* ─── Cost label ─── */
.oracle-cost[b-ywngcuft2n] {
    margin: 1.1rem 0 0.6rem;
    color: #6b4c38;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

/* ─── Primary Button (bronze plate) ─── */
.oracle-primary-btn[b-ywngcuft2n] {
    width: min(420px, 100%);
    border-radius: 999px;
    border: 1px solid #d4a84b;
    background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
    color: #fff5d6;
    padding: 0.8rem 1.2rem;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255, 220, 140, 0.35);
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

.oracle-primary-btn:hover[b-ywngcuft2n] {
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255, 220, 140, 0.45);
}

.oracle-primary-btn:disabled[b-ywngcuft2n] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ─── Deep reading link ─── */
.oracle-deep-link[b-ywngcuft2n] {
    margin-top: 1.1rem;
    border: none;
    background: transparent;
    color: #6b4c38;
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-style: italic;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.oracle-deep-link:hover[b-ywngcuft2n] {
    text-decoration: underline;
    color: #4a3325;
}

/* ─── Weekly oracle link ─── */
.oracle-weekly-separator[b-ywngcuft2n] {
    width: 60%;
    max-width: 280px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 120, 70, 0.3), transparent);
    margin: 1.5rem auto 0;
    position: relative;
    z-index: 1;
}

.oracle-weekly-link[b-ywngcuft2n] {
    margin-top: 1rem;
    border: none;
    background: transparent;
    color: #6b4c38;
    font-family: var(--font-serif);
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.oracle-weekly-link:hover[b-ywngcuft2n] {
    text-decoration: underline;
    color: #4a3325;
}

.oracle-weekly-icon[b-ywngcuft2n] {
    font-size: 1em;
}

.oracle-weekly-helper[b-ywngcuft2n] {
    margin: 0.35rem 0 0;
    color: rgba(107, 76, 56, 0.65);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* ─── Mobile ─── */
@media (max-width: 680px) {
    .oracle-card.parchment[b-ywngcuft2n] {
        padding: clamp(1.6rem, 4vw, 2.2rem);
    }

    .oracle-card.parchment[b-ywngcuft2n]::before {
        inset: 10px;
    }

    .oracle-card.parchment[b-ywngcuft2n]::after {
        inset: 7px;
    }

    .oracle-question-input[b-ywngcuft2n] {
        min-height: 120px;
        font-size: 1.05rem;
    }

    .oracle-chip[b-ywngcuft2n] {
        font-size: 0.9rem;
        padding: 0.35rem 0.85rem;
    }

    .oracle-cost[b-ywngcuft2n] {
        font-size: 1rem;
    }

    .oracle-primary-btn[b-ywngcuft2n] {
        font-size: 1.35rem;
        padding: 0.7rem 1rem;
    }

    .oracle-weekly-link[b-ywngcuft2n] {
        font-size: 0.9rem;
    }

    .oracle-weekly-helper[b-ywngcuft2n] {
        font-size: 0.8rem;
    }
}
/* /Components/OracleCreditModal.razor.rz.scp.css */
/* ─── Oracle Credit Modal ─── Ritual-themed top-up ─── */

.oracle-credit-overlay[b-e3axvo3pno] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 6, 4, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2100;
}

.oracle-credit-overlay.visible[b-e3axvo3pno] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.oracle-credit-modal[b-e3axvo3pno] {
    background: radial-gradient(ellipse at 50% 30%, #f5ead4 0%, #e8d5b8 55%, #d9c4a0 100%);
    border: 3px double #a07a52;
    border-radius: 18px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        inset 0 0 80px rgba(139, 69, 19, 0.12),
        0 0 40px rgba(193, 154, 107, 0.15);
    position: relative;
    max-width: 640px;
    width: 94%;
    max-height: 92vh;
    overflow-y: auto;
    transform: scale(0.94);
    transition: transform 0.3s ease;
}

.oracle-credit-overlay.visible .oracle-credit-modal[b-e3axvo3pno] {
    transform: scale(1);
}

/* Decorative inner frame */
.oracle-credit-modal[b-e3axvo3pno]::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(160, 120, 70, 0.35);
    border-radius: 10px;
    pointer-events: none;
}

.oracle-credit-close[b-e3axvo3pno] {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.15rem;
    color: #8b6b50;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 2;
}

.oracle-credit-close:hover[b-e3axvo3pno] {
    color: #4a3325;
    background-color: rgba(160, 120, 70, 0.12);
}

/*  Header  */
.oracle-credit-header[b-e3axvo3pno] {
    padding: 32px 32px 12px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.oracle-credit-icon[b-e3axvo3pno] {
    width: 86px;
    height: 86px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #806044;
}

.oracle-credit-icon[b-e3axvo3pno]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid rgba(160, 120, 70, 0.18);
    box-shadow:
        inset 0 0 24px rgba(160, 120, 70, 0.08),
        0 0 18px rgba(160, 120, 70, 0.06);
    pointer-events: none;
}

.oracle-vision-icon[b-e3axvo3pno] {
    width: 56px;
    height: 56px;
    display: block;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 3px 5px rgba(139, 90, 43, 0.24))
        drop-shadow(0 0 8px rgba(217, 195, 176, 0.34));
    transform-origin: center;
    transition: transform 0.28s ease, filter 0.28s ease;
}

.oracle-credit-title[b-e3axvo3pno] {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 600;
    color: #3d2b1f;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
    position: relative;
}

.oracle-credit-subtitle[b-e3axvo3pno] {
    color: #6b4c38;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    margin: 0;
    line-height: 1.55;
}

.oracle-credit-usage[b-e3axvo3pno] {
    color: #9a7e65;
    /* inherited font-sans */
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    font-style: italic;
    margin: 10px 0 0;
}

/*  Body  */
.oracle-credit-body[b-e3axvo3pno] {
    padding: 8px 28px 20px;
    position: relative;
    z-index: 1;
}

.oracle-credit-loading[b-e3axvo3pno] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: #6b4c38;
    font-family: var(--font-serif);
}

.oracle-credit-loading .spinner[b-e3axvo3pno] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(160, 120, 70, 0.25);
    border-top-color: #a07a52;
    border-radius: 50%;
    animation: spin-b-e3axvo3pno 0.8s linear infinite;
}

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

/*  Packs Grid  */
.oracle-packs-grid[b-e3axvo3pno] {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 18px;
    align-items: end;
}

/*  Pack Card  */
.oracle-pack-card[b-e3axvo3pno] {
    background: rgba(255, 252, 245, 0.7);
    border: 1px solid rgba(160, 120, 70, 0.35);
    border-radius: 14px;
    padding: 22px 16px 18px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.oracle-pack-card:hover[b-e3axvo3pno] {
    border-color: rgba(160, 120, 70, 0.55);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.12);
    transform: translateY(-2px);
}

/*  Featured Card (center, recommended)  */
.oracle-pack-card--featured[b-e3axvo3pno] {
    border: 2px solid rgba(193, 154, 107, 0.6);
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(248, 235, 210, 0.85) 100%);
    box-shadow:
        0 6px 28px rgba(193, 154, 107, 0.25),
        0 0 20px rgba(193, 154, 107, 0.08);
    padding: 28px 18px 20px;
}

.oracle-pack-card--featured:hover[b-e3axvo3pno] {
    box-shadow:
        0 8px 32px rgba(193, 154, 107, 0.35),
        0 0 28px rgba(193, 154, 107, 0.12);
}

/* Value seal badge */
.oracle-pack-seal[b-e3axvo3pno] {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #9f7247;
    color: #fffaf0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(112, 72, 38, 0.16);
}

/*  Card internals  */
.oracle-pack-symbol[b-e3axvo3pno] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #806044;
    margin-bottom: 8px;
}

.oracle-pack-symbol .oracle-vision-icon[b-e3axvo3pno] {
    width: 34px;
    height: 34px;
}

.oracle-pack-card:hover .oracle-vision-icon[b-e3axvo3pno] {
    transform: rotate(5deg) scale(1.07);
    filter:
        drop-shadow(0 4px 7px rgba(139, 90, 43, 0.3))
        drop-shadow(0 0 10px rgba(198, 168, 139, 0.42));
}

.oracle-pack-card--featured .oracle-pack-symbol[b-e3axvo3pno] {
    width: 52px;
    height: 52px;
    color: #6f5038;
}

.oracle-pack-card--featured .oracle-pack-symbol .oracle-vision-icon[b-e3axvo3pno] {
    width: 40px;
    height: 40px;
}

.oracle-pack-amount[b-e3axvo3pno] {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: #3d2b1f;
    margin-bottom: 8px;
}

.oracle-pack-price[b-e3axvo3pno] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.oracle-price-number[b-e3axvo3pno] {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #5a3a25;
    line-height: 1;
}

.oracle-pack-card--featured .oracle-price-number[b-e3axvo3pno] {
    font-size: 2.1rem;
}

.oracle-price-currency[b-e3axvo3pno] {
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #8b6b50;
    font-weight: 400;
}

.oracle-pack-savings[b-e3axvo3pno] {
    font-size: 0.75rem;
    color: #9a7e65;
    margin-bottom: 6px;
    font-weight: 400;
    font-style: italic;
}

.oracle-pack-tagline[b-e3axvo3pno] {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-style: italic;
    color: #8b6b50;
    margin-bottom: 14px;
    line-height: 1.35;
}

/*  Buttons  */
.oracle-pack-btn[b-e3axvo3pno] {
    width: 100%;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(160, 120, 70, 0.3);
    background: rgba(255, 252, 245, 0.55);
    color: #7b5a45;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    margin-top: auto;
}

.oracle-pack-btn:hover:not(:disabled)[b-e3axvo3pno] {
    background: rgba(222, 196, 162, 0.45);
    border-color: rgba(160, 120, 70, 0.65);
}

.oracle-pack-btn:active:not(:disabled)[b-e3axvo3pno] {
    transform: translateY(1px);
}

.oracle-pack-btn:disabled[b-e3axvo3pno] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Featured button — warm copper, flatter and calmer */
.oracle-pack-btn--primary[b-e3axvo3pno] {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    background: #A67C52;
    border: 1px solid rgba(126, 84, 45, 0.45);
    color: #fffaf0;
    box-shadow: 0 6px 16px rgba(112, 72, 38, 0.18);
    text-shadow: none;
}

.oracle-pack-btn--primary:hover:not(:disabled)[b-e3axvo3pno] {
    background: #956d48;
    border-color: rgba(116, 75, 40, 0.55);
    box-shadow: 0 8px 18px rgba(112, 72, 38, 0.22);
    filter: none;
}

/*  Error  */
.oracle-credit-error[b-e3axvo3pno] {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: rgba(183, 58, 58, 0.1);
    border: 1px solid rgba(183, 58, 58, 0.25);
    border-radius: 10px;
    color: #8b2020;
    font-size: 0.9rem;
    text-align: center;
}

/*  Footer  */
.oracle-credit-footer[b-e3axvo3pno] {
    padding: 16px 28px 26px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.oracle-credit-promise[b-e3axvo3pno] {
    color: #5a3a25;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}

.oracle-credit-stripe[b-e3axvo3pno] {
    color: #a89a8a;
    font-size: 0.72rem;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/*  Mobile  */
@media (max-width: 600px) {
    .oracle-credit-modal[b-e3axvo3pno] {
        width: 96%;
        max-height: 95vh;
        border-radius: 14px;
    }

    .oracle-credit-header[b-e3axvo3pno] {
        padding: 24px 20px 10px;
    }

    .oracle-credit-title[b-e3axvo3pno] {
        font-size: 1.4rem;
    }

    .oracle-credit-body[b-e3axvo3pno] {
        padding: 8px 18px 16px;
    }

    .oracle-packs-grid[b-e3axvo3pno] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .oracle-pack-card--featured[b-e3axvo3pno] {
        order: -1;
    }

    .oracle-credit-footer[b-e3axvo3pno] {
        padding: 12px 20px 22px;
    }
}
/* /Components/OracleHeader.razor.rz.scp.css */
.oracle-header[b-eiawc3cs4p] {
    width: min(920px, 100%);
    margin: 0 auto 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.oracle-back-btn[b-eiawc3cs4p] {
    border: none;
    background: transparent;
    color: #f7e8dd;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.oracle-credits-pill[b-eiawc3cs4p] {
    border: 1px solid rgba(227, 190, 150, 0.45);
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    background: rgba(24, 12, 9, 0.58);
    color: #f4d8b8;
    /* inherited font-sans */
    font-size: clamp(1rem, 1.9vw, 1.25rem);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 10px 22px rgba(14, 6, 4, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
}

.oracle-credits-pill:hover:not(:disabled)[b-eiawc3cs4p] {
    background: rgba(43, 24, 18, 0.75);
    border-color: rgba(227, 190, 150, 0.75);
    transform: translateY(-1px);
}

.oracle-credits-pill:disabled[b-eiawc3cs4p] {
    opacity: 0.75;
    cursor: default;
}

@media (max-width: 768px) {
    .oracle-header[b-eiawc3cs4p] {
        margin-bottom: 0.8rem;
    }

    .oracle-back-btn[b-eiawc3cs4p] {
        font-size: 1.45rem;
    }

    .oracle-credits-pill[b-eiawc3cs4p] {
        font-size: 1rem;
        padding: 0.45rem 0.9rem;
    }
}
/* /Components/OracleRevealCard.razor.rz.scp.css */
.oracle-reveal-card[b-yiagrmotpw] {
    width: min(760px, 100%);
    margin: 0 auto;
    background: radial-gradient(ellipse at 50% 40%, #f5ead4 0%, #e8d5b8 55%, #d4be9a 100%);
    border: 4px double #a07a52;
    border-radius: 10px;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        inset 0 0 100px rgba(139, 69, 19, 0.18),
        inset 0 0 30px rgba(160, 120, 60, 0.08);
    padding: clamp(1.6rem, 4.5vw, 2.8rem);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Decorative inner frame */
.oracle-reveal-card[b-yiagrmotpw]::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(160, 120, 70, 0.4);
    border-radius: 6px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(160, 120, 70, 0.12);
}

.oracle-reveal-meta[b-yiagrmotpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #7b5b44;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

/* ─── Stargazer: Sun Sign Badge ─── */
.oracle-sun-sign-badge[b-yiagrmotpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 1;
}

.oracle-sun-sign-badge > span:last-child[b-yiagrmotpw] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: #7b5b44;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(201, 146, 58, 0.12), rgba(160, 120, 70, 0.08));
    border: 1px solid rgba(160, 120, 70, 0.28);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
}

.oracle-sun-sign-icon[b-yiagrmotpw] {
    font-size: 1.15rem;
}

/* ─── Stargazer: Opening Scene (atmospheric stage direction) ─── */
.oracle-opening-scene[b-yiagrmotpw] {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    line-height: 1.65;
    text-align: center;
    color: #6b5242;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

/* ─── Nostradamus: Quatrain (heroic verse) ─── */
.oracle-quatrain[b-yiagrmotpw] {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.65rem, 3.7vw, 2.3rem);
    line-height: 1.55;
    text-align: center;
    color: #3f2a1e;
    position: relative;
    z-index: 1;
    overflow-wrap: break-word;
    word-break: break-word;
}

.oracle-divider[b-yiagrmotpw] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 118, 83, 0.3), transparent);
    margin: 1.6rem 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.oracle-divider[b-yiagrmotpw]::after {
    content: '✧';
    background: #ecdcc3;
    padding: 0 0.6rem;
    color: rgba(144, 102, 69, 0.5);
    font-size: 1.1rem;
}

.oracle-interpretation[b-yiagrmotpw] {
    margin: 0.8rem 0 0;
    color: #4f382b;
    font-size: 1.06rem;
    line-height: 1.65;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    z-index: 1;
}

/* ─── Stargazer: Reading (flowing prose body) ─── */
.oracle-reading[b-yiagrmotpw] {
    margin: 0.8rem 0 0;
    color: #4f382b;
    font-size: 1.06rem;
    line-height: 1.72;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    z-index: 1;
}

/* ─── Signs (decorative symbols, not buttons) ─── */
.oracle-signs[b-yiagrmotpw] {
    margin-top: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    position: relative;
    z-index: 1;
}

.oracle-sign-pill[b-yiagrmotpw] {
    border-radius: 0;
    border: none;
    background: transparent;
    color: #6b4c38;
    padding: 0;
    font-size: 0.95rem;
    font-family: var(--font-serif);
    font-style: italic;
    letter-spacing: 0.02em;
}

.oracle-reflection[b-yiagrmotpw] {
    margin-top: 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: 8px;
    background: rgba(255, 248, 236, 0.55);
    border: 1px solid rgba(145, 103, 74, 0.2);
    box-shadow: inset 0 1px 4px rgba(100, 60, 20, 0.06);
    position: relative;
    z-index: 1;
}

.oracle-reflection strong[b-yiagrmotpw] {
    color: #523629;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
}

.oracle-reflection p[b-yiagrmotpw] {
    margin: 0.35rem 0 0;
    color: #5e4334;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: break-word;
}

.oracle-actions[b-yiagrmotpw] {
    margin-top: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.oracle-save-btn[b-yiagrmotpw],
.oracle-secondary-btn[b-yiagrmotpw],
.oracle-link-btn[b-yiagrmotpw] {
    border-radius: 999px;
    border: 1px solid rgba(130, 89, 58, 0.38);
    padding: 0.58rem 1rem;
    cursor: pointer;
    /* inherited font-sans */
    font-size: 0.96rem;
    transition: all 0.2s ease;
}

.oracle-autosave-line[b-yiagrmotpw] {
    margin-top: 1rem;
    color: #6b4c38;
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    position: relative;
    z-index: 1;
}

.oracle-inline-link-btn[b-yiagrmotpw] {
    border: none;
    background: transparent;
    color: #5a3e2f;
    text-decoration: underline;
    cursor: pointer;
    /* inherited font-sans */
    font-size: 0.9rem;
    margin-left: 0.35rem;
    padding: 0;
}

.oracle-inline-link-btn:hover[b-yiagrmotpw] {
    color: #3f2a1e;
}

.oracle-save-btn[b-yiagrmotpw] {
    background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
    color: #fff5d6;
    border: 1px solid #d4a84b;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 220, 140, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.oracle-save-btn:hover[b-yiagrmotpw] {
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255, 220, 140, 0.4);
}

.oracle-save-btn:disabled[b-yiagrmotpw] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.oracle-secondary-btn[b-yiagrmotpw] {
    background: transparent;
    color: #4d3427;
    border: 1px solid rgba(130, 89, 58, 0.4);
}

.oracle-secondary-btn:hover[b-yiagrmotpw] {
    background: rgba(130, 89, 58, 0.08);
    border-color: rgba(130, 89, 58, 0.65);
}

.oracle-link-btn[b-yiagrmotpw] {
    background: transparent;
    color: #6b4c38;
    border-color: transparent;
    text-decoration: underline;
    font-style: italic;
}

.oracle-link-btn:hover[b-yiagrmotpw] {
    color: #4a3325;
}

.oracle-link-btn:disabled[b-yiagrmotpw] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ─── Mobile ─── */
@media (max-width: 680px) {
    .oracle-reveal-card[b-yiagrmotpw] {
        padding: clamp(1.2rem, 4vw, 2rem);
    }

    .oracle-reveal-card[b-yiagrmotpw]::before {
        inset: 10px;
    }

    .oracle-signs[b-yiagrmotpw] {
        gap: 0.8rem;
    }
}
/* /Components/OracleTranceOverlay.razor.rz.scp.css */
.oracle-trance-overlay[b-3jpw21mfoj] {
    width: min(720px, 100%);
    margin: 0 auto;
    min-height: 420px;
    border-radius: 22px;
    background: rgba(12, 7, 5, 0.6);
    border: 1px solid rgba(220, 179, 132, 0.2);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.oracle-trance-core[b-3jpw21mfoj] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.oracle-ripple[b-3jpw21mfoj] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(241, 198, 142, 0.6);
    box-shadow: 0 0 0 0 rgba(241, 198, 142, 0.35);
    animation: oraclePulse-b-3jpw21mfoj 2.3s ease-in-out infinite;
}

.oracle-trance-core p[b-3jpw21mfoj] {
    color: #f8deba;
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.42);
}

@keyframes oraclePulse-b-3jpw21mfoj {
    0% {
        transform: scale(0.78);
        box-shadow: 0 0 0 0 rgba(241, 198, 142, 0.35);
        opacity: 0.8;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 28px rgba(241, 198, 142, 0);
        opacity: 1;
    }

    100% {
        transform: scale(0.82);
        box-shadow: 0 0 0 0 rgba(241, 198, 142, 0);
        opacity: 0.85;
    }
}

/* /Components/OracleWeeklyModal.razor.rz.scp.css */
/* ─── Oracle Weekly Signup Modal ─── Ritual-themed weekly letter opt-in ─── */

.oracle-weekly-overlay[b-b5juo10lju] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 6, 4, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2100;
}

.oracle-weekly-overlay.visible[b-b5juo10lju] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.oracle-weekly-modal[b-b5juo10lju] {
    background: radial-gradient(ellipse at 50% 30%, #f5ead4 0%, #e8d5b8 55%, #d9c4a0 100%);
    border: 3px double #a07a52;
    border-radius: 18px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        inset 0 0 80px rgba(139, 69, 19, 0.12),
        0 0 40px rgba(193, 154, 107, 0.15);
    position: relative;
    max-width: 620px;
    width: 94%;
    max-height: 92vh;
    box-sizing: border-box;
    overflow: visible;
    transform: scale(0.94);
    transition: transform 0.3s ease;
}

.oracle-weekly-overlay.visible .oracle-weekly-modal[b-b5juo10lju] {
    transform: scale(1);
}

/* Decorative inner frame */
.oracle-weekly-modal[b-b5juo10lju]::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(160, 120, 70, 0.35);
    border-radius: 10px;
    pointer-events: none;
}

/* Close button */
.oracle-weekly-close[b-b5juo10lju] {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.15rem;
    color: #8b6b50;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 2;
}

.oracle-weekly-close:hover[b-b5juo10lju] {
    color: #4a3325;
    background-color: rgba(160, 120, 70, 0.12);
}

/* ─── Header ─── */
.oracle-weekly-header[b-b5juo10lju] {
    padding: 42px 44px 16px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Avatar decorative area with filigree ornaments */
.oracle-weekly-avatar-area[b-b5juo10lju] {
    position: relative;
    width: 146px;
    margin: 0 auto 10px;
}

.oracle-weekly-avatar-area[b-b5juo10lju]::before,
.oracle-weekly-avatar-area[b-b5juo10lju]::after {
    content: '❧';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(180, 140, 90, 0.4);
    font-size: 1.15rem;
    pointer-events: none;
}

.oracle-weekly-avatar-area[b-b5juo10lju]::before {
    right: calc(100% + 8px);
    transform: translateY(-50%) scaleX(-1);
}

.oracle-weekly-avatar-area[b-b5juo10lju]::after {
    left: calc(100% + 8px);
}

.oracle-weekly-avatar-wrap[b-b5juo10lju] {
    width: 130px;
    height: 130px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(180, 140, 80, 0.55);
    box-shadow:
        0 0 0 1.5px rgba(220, 185, 130, 0.3),
        0 4px 18px rgba(139, 69, 19, 0.22),
        0 0 30px rgba(193, 154, 107, 0.15),
        inset 0 0 10px rgba(160, 120, 70, 0.1);
}

.oracle-weekly-avatar[b-b5juo10lju] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oracle-weekly-separator-glyph[b-b5juo10lju] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #b39570;
    font-size: 1.1rem;
    margin-bottom: 10px;
    opacity: 0.7;
}

.oracle-weekly-separator-glyph[b-b5juo10lju]::before,
.oracle-weekly-separator-glyph[b-b5juo10lju]::after {
    content: '';
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 120, 70, 0.4), transparent);
}

.oracle-weekly-title[b-b5juo10lju] {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 600;
    color: #3d2b1f;
    margin: 0 0 16px;
    letter-spacing: 0.01em;
}

.oracle-weekly-ingress[b-b5juo10lju] {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    color: #5e4030;
    line-height: 1.75;
    margin: 0;
}

/* ─── Body (checkboxes) ─── */
.oracle-weekly-body[b-b5juo10lju] {
    padding: 26px 44px 12px;
    position: relative;
    z-index: 1;
}

.oracle-weekly-checkbox-row[b-b5juo10lju] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: left;
    width: 100%;
}

.oracle-weekly-checkbox-row.disabled[b-b5juo10lju] {
    cursor: default;
    opacity: 0.7;
}

.oracle-weekly-checkmark[b-b5juo10lju] {
    width: 20px;
    height: 20px;
    margin-top: 0;
    flex-shrink: 0;
    border: 1.5px solid rgba(160, 120, 70, 0.5);
    border-radius: 4px;
    background: rgba(255, 252, 245, 0.5);
    box-shadow: inset 0 1px 3px rgba(100, 60, 20, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: transparent;
    font-weight: 700;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.oracle-weekly-checkmark.checked[b-b5juo10lju] {
    background: rgba(180, 140, 80, 0.18);
    border-color: #a07a52;
    color: #6b4520;
}

.oracle-weekly-checkbox-label[b-b5juo10lju] {
    font-size: 0.98rem;
    color: #4a3325;
    line-height: 1.45;
}

.oracle-weekly-checkbox-helper[b-b5juo10lju] {
    font-size: 0.8rem;
    color: #7d6550;
    font-style: italic;
    margin: -4px 0 0 0;
    line-height: 1.4;
    text-align: center;
}

/* ─── Frequency info (icon + text, no checkbox) ─── */
.oracle-weekly-frequency-info[b-b5juo10lju] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.oracle-weekly-frequency-icon[b-b5juo10lju] {
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.oracle-weekly-frequency-text[b-b5juo10lju] {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-style: italic;
    color: #5e4030;
    letter-spacing: 0.02em;
}

/* ─── Footer ─── */
.oracle-weekly-footer[b-b5juo10lju] {
    padding: 22px 44px 28px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.oracle-weekly-cost[b-b5juo10lju] {
    font-size: 0.82rem;
    color: #9a7e65;
    font-style: italic;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}

.oracle-weekly-confirm-btn[b-b5juo10lju] {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 999px;
    border: 1px solid #d4a84b;
    background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
    color: #fff5d6;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 220, 140, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, transform 0.1s ease;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.oracle-weekly-confirm-btn:hover[b-b5juo10lju] {
    background: linear-gradient(180deg, #d4a04a 0%, #a87530 40%, #8a5a20 100%);
}

.oracle-weekly-confirm-btn:active[b-b5juo10lju] {
    transform: translateY(1px);
}

.oracle-weekly-cancel[b-b5juo10lju] {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    color: #8b6b50;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 4px 8px;
}

.oracle-weekly-cancel:hover[b-b5juo10lju] {
    color: #4a3325;
}

/* ─── Unsubscribe (Mode 2) ─── */
.oracle-weekly-unsubscribe[b-b5juo10lju] {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    color: #8b5c48;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 4px 8px;
    opacity: 0.75;
}

.oracle-weekly-unsubscribe:hover[b-b5juo10lju] {
    color: #6e2b1a;
    opacity: 1;
}

/* ─── Wax seal placement (child component via ::deep) ─── */
[b-b5juo10lju] .oracle-weekly-seal {
    position: absolute;
    bottom: -24px;
    right: -16px;
    width: 118px;
    height: 118px;
    z-index: 3;
    filter:
        drop-shadow(0 2px 3px rgba(60, 30, 8, 0.38))
        drop-shadow(0 5px 12px rgba(80, 40, 10, 0.24))
        drop-shadow(0 0 18px rgba(193, 140, 70, 0.12));
}

/* ─── Toast (confirmation state) ─── */
@keyframes toastAppear-b-b5juo10lju {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes goldenGlow-b-b5juo10lju {
    0%, 100% {
        filter: drop-shadow(0 2px 6px rgba(160, 120, 60, 0.3));
    }
    50% {
        filter: drop-shadow(0 2px 14px rgba(200, 160, 60, 0.55)) drop-shadow(0 0 22px rgba(193, 154, 107, 0.3));
    }
}

.oracle-weekly-toast[b-b5juo10lju] {
    padding: 60px 32px;
    text-align: center;
    position: relative;
    z-index: 1;
    animation: toastAppear-b-b5juo10lju 0.4s ease-out forwards;
}

.oracle-weekly-toast-icon[b-b5juo10lju] {
    font-size: 2.6rem;
    color: #a07a52;
    margin-bottom: 16px;
    animation: goldenGlow-b-b5juo10lju 2.5s ease-in-out infinite;
}

.oracle-weekly-toast-text[b-b5juo10lju] {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-style: italic;
    color: #4a3325;
    line-height: 1.6;
    margin: 0;
}

/* ─── Mobile: full-viewport immersive ritual ─── */
@media (max-width: 600px) {
    .oracle-weekly-overlay[b-b5juo10lju] {
        align-items: stretch;
        justify-content: stretch;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .oracle-weekly-modal[b-b5juo10lju] {
        width: 100vw;
        max-width: none;
        min-width: 0;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100svh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        transform: none;
        box-shadow:
            inset 0 0 80px rgba(139, 69, 19, 0.12);
    }

    .oracle-weekly-overlay.visible .oracle-weekly-modal[b-b5juo10lju] {
        transform: none;
    }

    /* Adapt inner frame for fullscreen — slight inset from edges */
    .oracle-weekly-modal[b-b5juo10lju]::before {
        inset: 10px;
        border-radius: 12px;
    }

    .oracle-weekly-close[b-b5juo10lju] {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        background: rgba(255, 248, 235, 0.5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .oracle-weekly-header[b-b5juo10lju] {
        padding: 48px 28px 16px;
        flex-shrink: 0;
        margin-top: auto;
    }

    .oracle-weekly-title[b-b5juo10lju] {
        font-size: 1.5rem;
    }

    .oracle-weekly-ingress[b-b5juo10lju] {
        font-size: 1rem;
        line-height: 1.75;
        overflow-wrap: break-word;
    }

    .oracle-weekly-avatar-area[b-b5juo10lju] {
        width: 130px;
        margin-bottom: 10px;
    }

    .oracle-weekly-avatar-wrap[b-b5juo10lju] {
        width: 110px;
        height: 110px;
    }

    .oracle-weekly-avatar-area[b-b5juo10lju]::before,
    .oracle-weekly-avatar-area[b-b5juo10lju]::after {
        font-size: 1rem;
    }

    .oracle-weekly-body[b-b5juo10lju] {
        padding: 20px 28px 12px;
        flex-shrink: 0;
    }

    .oracle-weekly-checkbox-label[b-b5juo10lju] {
        font-size: 0.9rem;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .oracle-weekly-checkbox-helper[b-b5juo10lju] {
        font-size: 0.78rem;
    }

    .oracle-weekly-footer[b-b5juo10lju] {
        padding: 16px 28px 24px;
        flex-shrink: 0;
        margin-bottom: auto;
    }

    .oracle-weekly-confirm-btn[b-b5juo10lju] {
        width: 100%;
        max-width: 100%;
        padding: 14px 28px;
        font-size: 1.05rem;
    }

    /* Seal as centered colophon instead of absolute corner */
    [b-b5juo10lju] .oracle-weekly-seal {
        position: static;
        display: block;
        margin: 24px auto 32px;
        width: 80px;
        height: 80px;
        opacity: 0.8;
    }

    .oracle-weekly-toast[b-b5juo10lju] {
        padding: 80px 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 375px) {
    .oracle-weekly-header[b-b5juo10lju] {
        padding: 44px 22px 12px;
    }

    .oracle-weekly-title[b-b5juo10lju] {
        font-size: 1.35rem;
    }

    .oracle-weekly-ingress[b-b5juo10lju] {
        font-size: 0.93rem;
    }

    .oracle-weekly-body[b-b5juo10lju] {
        padding: 16px 22px 10px;
    }

    .oracle-weekly-footer[b-b5juo10lju] {
        padding: 14px 22px 20px;
    }

    .oracle-weekly-checkbox-label[b-b5juo10lju] {
        font-size: 0.86rem;
    }

    [b-b5juo10lju] .oracle-weekly-seal {
        width: 68px;
        height: 68px;
        margin-bottom: 22px;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* About page styles - aligned with FrontPage hero patterns */

[b-k3eatofagp] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

:global(html)[b-k3eatofagp] {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

:global(body)[b-k3eatofagp] {
    overflow-x: hidden;
    overscroll-behavior: none;
}

[b-k3eatofagp] .app-layout {
    --about-bg: #FAECDA;
    --about-ink: #5A4A3A;
    --about-muted: #7A6A5A;
    --about-card: #FAF3E5;
    --about-card-soft: #F8E8D8;
    --about-shadow: 0 18px 40px rgba(90, 70, 53, 0.12);

    display: flex;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: var(--about-bg);
    padding-top: 80px;
    overflow-x: hidden;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
}

@media (max-width: 1024px) {
    [b-k3eatofagp] .toggle-sidebar {
        display: none !important;
    }
}

[b-k3eatofagp] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-k3eatofagp] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-k3eatofagp] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-k3eatofagp] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-k3eatofagp] .sidebar a:hover {
    color: #000;
}

[b-k3eatofagp] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

[b-k3eatofagp] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-k3eatofagp] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-k3eatofagp] .sidebar-logo {
    text-align: center;
}

[b-k3eatofagp] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

[b-k3eatofagp] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-k3eatofagp] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-k3eatofagp] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
}

[b-k3eatofagp] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, 0.5);
}

[b-k3eatofagp] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text, #4F4A45);
}

[b-k3eatofagp] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

[b-k3eatofagp] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-k3eatofagp] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
    animation: fadeIn-b-k3eatofagp 0.2s ease-in-out;
}

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

[b-k3eatofagp] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

[b-k3eatofagp] .dropdown-item:hover {
    background-color: #f0dad3;
}

[b-k3eatofagp] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #FAECDA;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

[b-k3eatofagp] .container-v3 {
    flex: 1;
    max-width: 1200px;
    margin: 20px auto 80px;
    margin-left: 280px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: margin-left 0.3s ease;
}

[b-k3eatofagp] .container-v3.sidebar-hidden {
    margin-left: 0;
}

[b-k3eatofagp] .about-page h1,
[b-k3eatofagp] .about-page h2,
[b-k3eatofagp] .about-page h3 {
    margin-top: 0;
}

[b-k3eatofagp] .about-page p {
    font-family: var(--font-sans);
    color: var(--about-muted);
    line-height: 1.7;
    margin: 0;
}

/* Hero */
[b-k3eatofagp] .about-hero {
    margin: 0;
}

[b-k3eatofagp] .about-hero-media {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: var(--about-card);
    box-shadow: var(--about-shadow);
    height: 380px;
}

[b-k3eatofagp] .about-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 70% 50%;
}

[b-k3eatofagp] .about-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(253, 248, 240, 0.98) 0%, rgba(253, 248, 240, 0.96) 40%, rgba(253, 248, 240, 0.56) 58%, rgba(253, 248, 240, 0) 76%),
        linear-gradient(180deg, rgba(253, 248, 240, 0.28) 0%, rgba(253, 248, 240, 0) 46%);
    pointer-events: none;
}

[b-k3eatofagp] .about-hero-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    background: linear-gradient(to bottom, rgba(253, 248, 240, 0), var(--about-bg));
    pointer-events: none;
}

[b-k3eatofagp] .about-hero-copy {
    position: absolute;
    left: 5%;
    top: 34%;
    transform: translateY(-50%);
    max-width: 620px;
    z-index: 1;
}

[b-k3eatofagp] .about-hero-copy h1 {
    font-family: var(--font-serif);
    font-size: 3.2em;
    font-weight: 600;
    color: var(--about-ink);
    line-height: 1.25;
    margin: 0 0 16px 0;
    text-shadow: 0 1px 3px rgba(255, 249, 235, 0.72);
}

[b-k3eatofagp] .about-hero-copy p {
    font-size: 1.15em;
    font-weight: 400;
    color: var(--about-ink);
    line-height: 1.55;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(255, 249, 235, 0.74);
}

/* Story */
[b-k3eatofagp] .about-story {
    margin: 0;
}

[b-k3eatofagp] .about-story-media {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: var(--about-card);
    box-shadow: var(--about-shadow);
    height: 380px;
}

[b-k3eatofagp] .about-story-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 70% 55%;
}

[b-k3eatofagp] .about-story-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(253, 248, 240, 0.98) 0%, rgba(253, 248, 240, 0.96) 42%, rgba(253, 248, 240, 0.52) 60%, rgba(253, 248, 240, 0) 78%),
        linear-gradient(180deg, rgba(253, 248, 240, 0.2) 0%, rgba(253, 248, 240, 0) 52%);
    pointer-events: none;
}

[b-k3eatofagp] .about-story-copy {
    position: absolute;
    left: 6%;
    top: 40%;
    transform: translateY(-50%);
    max-width: 45%;
    z-index: 1;
}

[b-k3eatofagp] .about-story-copy h2 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--about-ink);
    line-height: 1.3;
    margin: 0 0 16px 0;
    text-shadow: 0 1px 3px rgba(255, 249, 235, 0.72);
}

[b-k3eatofagp] .about-story-copy p {
    font-size: 1.02rem;
    color: var(--about-ink);
    opacity: 0.88;
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(255, 249, 235, 0.72);
}

/* Values */
[b-k3eatofagp] .about-values {
    text-align: center;
}

[b-k3eatofagp] .about-values h2 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--about-ink);
    margin-bottom: 24px;
}

[b-k3eatofagp] .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 24px;
}

[b-k3eatofagp] .value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background: var(--about-card-soft);
    border-radius: 24px;
    padding: 26px 24px;
    text-align: center;
    border: 1px solid rgba(196, 125, 97, 0.18);
    box-shadow: 0 10px 22px rgba(90, 70, 53, 0.08);
}

[b-k3eatofagp] .value-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
    background: rgba(196, 125, 97, 0.16);
    color: #B36B4C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

[b-k3eatofagp] .value-icon-svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[b-k3eatofagp] .value-card h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--about-ink);
    margin: 0 0 10px 0;
}

[b-k3eatofagp] .value-card p {
    font-size: 0.98rem;
    color: #6d5849;
    margin: 0;
    flex: 1;
}

/* Promise */
[b-k3eatofagp] .about-promise {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
    padding: 40px;
    background: rgba(196, 125, 97, 0.15);
    border-radius: 28px;
    box-shadow: 0 12px 30px rgba(90, 70, 53, 0.12);
}

[b-k3eatofagp] .promise-copy {
    text-align: center;
}

[b-k3eatofagp] .promise-copy h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--about-ink);
    margin-bottom: 16px;
}

[b-k3eatofagp] .promise-copy p {
    font-size: 1.05rem;
    color: var(--about-ink);
    opacity: 0.88;
}

[b-k3eatofagp] .promise-copy .promise-signoff {
    margin-top: 22px;
    font-family: var(--font-handwriting);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-style: normal;
    line-height: 1.18;
    color: #5b3524;
    opacity: 0.96;
}

[b-k3eatofagp] .promise-media {
    display: flex;
    justify-content: center;
}

[b-k3eatofagp] .promise-media img {
    max-width: 280px;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(90, 70, 53, 0.2));
}

.sidebar-overlay[b-k3eatofagp] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-k3eatofagp] {
    display: none;
}

[b-k3eatofagp] .main-footer {
    width: calc(100% - 280px);
    margin-left: 280px;
    background-color: #FAF3E5;
    padding: 60px 0 30px 0;
    margin-top: 80px;
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
}

[b-k3eatofagp] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

[b-k3eatofagp] .footer-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
}

[b-k3eatofagp] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

[b-k3eatofagp] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-k3eatofagp] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-k3eatofagp] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

[b-k3eatofagp] .footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 40px;
}

[b-k3eatofagp] .footer-section {
    padding: 0 15px;
}

[b-k3eatofagp] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-k3eatofagp] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-k3eatofagp] .footer-section ul li {
    margin-bottom: 10px;
}

[b-k3eatofagp] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-k3eatofagp] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

[b-k3eatofagp] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    gap: 20px;
}

[b-k3eatofagp] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-k3eatofagp] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-k3eatofagp] .footer-languages a:hover,
[b-k3eatofagp] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

[b-k3eatofagp] .footer-legal-origin {
    text-align: right;
}

[b-k3eatofagp] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
}

[b-k3eatofagp] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

@media (max-width: 1024px) {
    [b-k3eatofagp] .app-layout {
        padding-top: 60px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

    [b-k3eatofagp] .container-v3 {
        margin-left: 0 !important;
        margin-top: 65px;
        padding: 0 var(--mobile-page-margin);
    }

    [b-k3eatofagp] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-k3eatofagp] .sidebar.visible {
        transform: translateX(0);
    }

    [b-k3eatofagp] .sidebar.hidden {
        transform: translateX(-100%);
    }

    [b-k3eatofagp] .main-footer {
        margin-left: 0 !important;
        width: 100%;
    }

    [b-k3eatofagp] .about-hero,
    [b-k3eatofagp] .about-story,
    [b-k3eatofagp] .about-values,
    [b-k3eatofagp] .about-promise {
        margin-left: 0;
        margin-right: 0;
    }

    [b-k3eatofagp] .about-hero-media {
        border-radius: 20px;
        min-height: 360px;
    }

    [b-k3eatofagp] .about-hero-media img {
        object-position: 70% 46%;
    }

    [b-k3eatofagp] .about-hero-copy {
        position: absolute;
        left: 8%;
        right: 8%;
        top: 8%;
        bottom: 8%;
        transform: none;
        max-width: 72%;
        display: flex;
        flex-direction: column;
    }

    [b-k3eatofagp] .about-hero-copy p {
        margin-top: auto;
    }

    [b-k3eatofagp] .about-story-media {
        height: clamp(340px, 42vw, 400px);
        border-radius: 20px;
    }

    [b-k3eatofagp] .about-story-copy {
        left: 8%;
        top: 20%;
        transform: none;
        max-width: 80%;
    }

    [b-k3eatofagp] .about-promise {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px;
    }
}

@media (max-width: 768px) {
    [b-k3eatofagp] .about-story-media {
        min-height: 380px;
    }

    [b-k3eatofagp] .values-grid {
        grid-template-columns: 1fr;
    }

    [b-k3eatofagp] .about-hero-copy h1 {
        font-size: 2.05rem;
    }

    [b-k3eatofagp] .about-hero-copy p {
        font-size: 0.98rem;
    }

    [b-k3eatofagp] .about-story-copy h2,
    [b-k3eatofagp] .about-values h2,
    [b-k3eatofagp] .promise-copy h2 {
        font-size: 1.7rem;
    }

    [b-k3eatofagp] .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    [b-k3eatofagp] .footer-section {
        text-align: center;
    }

    [b-k3eatofagp] .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-k3eatofagp] .footer-legal-origin {
        text-align: center;
    }

    [b-k3eatofagp] .footer-copyright {
        text-align: center;
    }
}
/* /Components/Pages/AppleOAuthSignIn.razor.rz.scp.css */
.apple-auth-page[b-bxjby9kwud] {
    --apple-auth-bg: #f7ecdf;
    --apple-auth-bg-soft: #fff8f0;
    --apple-auth-ink: #46352e;
    --apple-auth-muted: #6a5a52;
    --apple-auth-line: rgba(133, 103, 82, 0.18);
    --apple-auth-gold: #b88b5f;
    --apple-auth-gold-deep: #8f6847;
    --apple-auth-card: rgba(255, 250, 243, 0.94);
    --apple-auth-shadow: 0 28px 90px rgba(96, 67, 47, 0.14);
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.76), transparent 34%),
        radial-gradient(circle at bottom right, rgba(232, 244, 248, 0.58), transparent 32%),
        linear-gradient(180deg, var(--apple-auth-bg-soft) 0%, var(--apple-auth-bg) 100%);
    color: var(--apple-auth-ink);
}

.apple-auth-page__brand[b-bxjby9kwud] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding: 2rem 3rem 0;
}

.apple-auth-page__brand-link[b-bxjby9kwud] {
    display: block;
    text-decoration: none;
    opacity: 0.72;
    transition: opacity 0.2s ease;
}

.apple-auth-page__brand-link:hover[b-bxjby9kwud] {
    opacity: 1;
}

.apple-auth-page__brand-logo[b-bxjby9kwud] {
    height: 36px;
    width: auto;
    display: block;
}

.apple-auth-menu[b-bxjby9kwud] {
    position: relative;
}

.apple-auth-menu__button[b-bxjby9kwud] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(164, 123, 80, 0.2);
    background: rgba(253, 248, 240, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}

.apple-auth-menu__button:hover[b-bxjby9kwud] {
    background: rgba(253, 248, 240, 0.95);
    border-color: rgba(164, 123, 80, 0.4);
    box-shadow: 0 3px 12px rgba(139, 115, 85, 0.14);
}

.apple-auth-menu__dots[b-bxjby9kwud] {
    font-size: 1.4rem;
    color: #6b5b4e;
    letter-spacing: 2px;
    line-height: 1;
}

.apple-auth-menu__backdrop[b-bxjby9kwud] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.apple-auth-menu__dropdown[b-bxjby9kwud] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(253, 248, 240, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(232, 213, 200, 0.5);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14), 0 2px 8px rgba(139, 115, 85, 0.06);
    padding: 0.5rem 0;
    z-index: 70;
    animation: appleAuthMenuFadeIn-b-bxjby9kwud 0.2s ease-out;
}

@keyframes appleAuthMenuFadeIn-b-bxjby9kwud {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.apple-auth-menu__item[b-bxjby9kwud] {
    display: block;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #5c4033;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.apple-auth-menu__item:hover[b-bxjby9kwud] {
    background: rgba(196, 154, 108, 0.08);
}

.apple-auth-page__main[b-bxjby9kwud] {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
}

.apple-auth-card[b-bxjby9kwud] {
    position: relative;
    width: min(100%, 46rem);
    padding: 3.5rem 3rem 2.75rem;
    border-radius: 28px;
    border: 1px solid var(--apple-auth-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 240, 0.88)),
        var(--apple-auth-card);
    box-shadow: var(--apple-auth-shadow);
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.apple-auth-card__ornament[b-bxjby9kwud] {
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(184, 139, 95, 0.12);
    border-radius: 20px;
    pointer-events: none;
}

.apple-auth-card__eyebrow[b-bxjby9kwud] {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--apple-auth-gold-deep);
}

.apple-auth-card__icon[b-bxjby9kwud] {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--apple-auth-gold-deep);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(247, 225, 198, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 14px 34px rgba(184, 139, 95, 0.2);
}

.apple-auth-card__icon--error[b-bxjby9kwud] {
    color: #7a4b35;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 199, 182, 0.82));
}

.apple-auth-card__title[b-bxjby9kwud] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.apple-auth-card__lead[b-bxjby9kwud] {
    margin: 1rem auto 0;
    max-width: 33rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--apple-auth-muted);
}

.apple-auth-card__body[b-bxjby9kwud] {
    margin: 0.9rem auto 0;
    max-width: 32rem;
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(70, 53, 46, 0.82);
}

.apple-auth-card__actions[b-bxjby9kwud] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.apple-auth-card__action[b-bxjby9kwud] {
    min-width: 13rem;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.apple-auth-card__action:hover[b-bxjby9kwud] {
    transform: translateY(-1px);
}

.apple-auth-card__action--primary[b-bxjby9kwud] {
    color: #fffaf6;
    background: linear-gradient(135deg, var(--apple-auth-gold) 0%, var(--apple-auth-gold-deep) 100%);
    box-shadow: 0 12px 28px rgba(136, 102, 73, 0.22);
}

.apple-auth-card__action--secondary[b-bxjby9kwud] {
    color: var(--apple-auth-ink);
    background: rgba(255, 251, 246, 0.82);
    border: 1px solid rgba(143, 104, 71, 0.18);
}

.apple-auth-card__action--secondary:hover[b-bxjby9kwud] {
    border-color: rgba(143, 104, 71, 0.32);
    background: rgba(255, 255, 255, 0.92);
}

.apple-auth-card__help[b-bxjby9kwud] {
    margin: 1.6rem 0 0;
    font-size: 0.92rem;
    color: rgba(70, 53, 46, 0.68);
}

.apple-auth-card__help-link[b-bxjby9kwud] {
    color: var(--apple-auth-gold-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 104, 71, 0.24);
}

.apple-auth-card__help-link:hover[b-bxjby9kwud] {
    border-bottom-color: rgba(143, 104, 71, 0.48);
}

body.night-mode .apple-auth-page[b-bxjby9kwud] {
    --apple-auth-bg: #1a2a32;
    --apple-auth-bg-soft: #2d3b44;
    --apple-auth-ink: #e8f4f8;
    --apple-auth-muted: #cfd8dc;
    --apple-auth-line: rgba(232, 244, 248, 0.12);
    --apple-auth-card: rgba(30, 46, 54, 0.92);
    --apple-auth-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}

body.night-mode .apple-auth-card[b-bxjby9kwud] {
    background:
        linear-gradient(180deg, rgba(45, 59, 68, 0.92), rgba(30, 46, 54, 0.9)),
        var(--apple-auth-card);
}

body.night-mode .apple-auth-card__body[b-bxjby9kwud],
body.night-mode .apple-auth-card__help[b-bxjby9kwud] {
    color: rgba(232, 244, 248, 0.72);
}

body.night-mode .apple-auth-card__action--secondary[b-bxjby9kwud] {
    color: var(--apple-auth-ink);
    background: rgba(45, 59, 68, 0.88);
    border-color: rgba(232, 244, 248, 0.16);
}

body.night-mode .apple-auth-menu__button[b-bxjby9kwud] {
    background: rgba(45, 59, 68, 0.85);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .apple-auth-menu__dots[b-bxjby9kwud] {
    color: #cfd8dc;
}

body.night-mode .apple-auth-menu__dropdown[b-bxjby9kwud] {
    background: rgba(30, 46, 54, 0.97);
    border-color: rgba(196, 154, 108, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.night-mode .apple-auth-menu__item[b-bxjby9kwud] {
    color: #e8f4f8;
}

body.night-mode .apple-auth-menu__item:hover[b-bxjby9kwud] {
    background: rgba(196, 154, 108, 0.1);
}

@media (max-width: 768px) {
    .apple-auth-page__brand[b-bxjby9kwud] {
        padding: 1rem 1.5rem;
    }

    .apple-auth-page__main[b-bxjby9kwud] {
        padding: 1.25rem 1rem 2.5rem;
        min-height: calc(100vh - 4.5rem);
    }

    .apple-auth-card[b-bxjby9kwud] {
        padding: 2.6rem 1.35rem 2rem;
        border-radius: 22px;
    }

    .apple-auth-card__actions[b-bxjby9kwud] {
        flex-direction: column;
    }

    .apple-auth-card__action[b-bxjby9kwud] {
        width: 100%;
    }
}
/* /Components/Pages/CheckEmailPage.razor.rz.scp.css */
.check-email-page[b-gc1m2pd05c] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5rem, 8vw, 7rem) 1.5rem 3rem;
    background:
        linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 239, 214, 0.94) 100%),
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 229, 0.34) 38%, transparent 70%);
    color: #3b2a22;
    overflow: hidden;
}

.check-email-page[b-gc1m2pd05c]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(114, 77, 53, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(114, 77, 53, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.26;
    mask-image: radial-gradient(circle at 50% 44%, black 0%, transparent 72%);
}

.check-email-page[b-gc1m2pd05c]::after {
    content: "";
    position: absolute;
    width: min(54rem, 92vw);
    height: min(54rem, 92vw);
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 248, 238, 0.28) 43%, transparent 72%);
    pointer-events: none;
}

.check-email-logo[b-gc1m2pd05c] {
    position: absolute;
    top: 1.8rem;
    left: 2rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: #5c3f37;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    letter-spacing: 0;
}

.check-email-logo strong[b-gc1m2pd05c] {
    color: #ffaaa3;
    font-weight: 800;
}

.check-email-shell[b-gc1m2pd05c] {
    width: min(100%, 510px);
    position: relative;
    z-index: 1;
}

.check-email-card[b-gc1m2pd05c] {
    position: relative;
    width: 100%;
    padding: clamp(2rem, 5vw, 2.65rem);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
    border: 1px solid rgba(154, 111, 79, 0.2);
    box-shadow:
        0 28px 70px rgba(92, 62, 39, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.82) inset;
    text-align: left;
}

.check-email-icon[b-gc1m2pd05c] {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    color: #8e6346;
    background: rgba(255, 239, 223, 0.86);
    box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.16);
}

.check-email-line-icon[b-gc1m2pd05c] {
    width: 1.45rem;
    height: 1.45rem;
    display: block;
}

.check-email-eyebrow[b-gc1m2pd05c] {
    margin: 0 0 0.45rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a06942;
}

.check-email-card h1[b-gc1m2pd05c] {
    margin: 0;
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: var(--mobile-hero-heading-weight, 700);
    line-height: 1.06;
    color: #3b271f;
}

.check-email-intro[b-gc1m2pd05c] {
    margin: 0.85rem 0 1.5rem;
    max-width: 28rem;
    color: #745a4a;
    font-size: 1.02rem;
    line-height: 1.6;
}

.check-email-intro strong[b-gc1m2pd05c] {
    color: #3f2c22;
    font-weight: 800;
}

.check-email-help[b-gc1m2pd05c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    margin-bottom: 1rem;
    color: #745a4a;
    font-size: 0.95rem;
    line-height: 1.5;
}

.check-email-text-button[b-gc1m2pd05c],
.check-email-help-link[b-gc1m2pd05c] {
    border: 0;
    padding: 0;
    background: transparent;
    color: #8f5f34;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.check-email-text-button:hover[b-gc1m2pd05c],
.check-email-help-link:hover[b-gc1m2pd05c] {
    text-decoration: underline;
}

.check-email-help-divider[b-gc1m2pd05c] {
    width: 1px;
    height: 1rem;
    background: rgba(154, 111, 79, 0.24);
}

.check-email-tip[b-gc1m2pd05c] {
    margin-bottom: 1rem;
    border-radius: 14px;
    padding: 1rem;
    color: #425235;
    background: rgba(240, 248, 231, 0.92);
    border: 1px solid rgba(104, 132, 76, 0.22);
    font-size: 0.95rem;
    line-height: 1.5;
}

.check-email-submit[b-gc1m2pd05c] {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
    padding: 0.85rem 1.45rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4914f 0%, #bd7338 100%);
    color: #fffaf4;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(175, 99, 46, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.check-email-submit:hover[b-gc1m2pd05c] {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(175, 99, 46, 0.3);
}

.check-email-note[b-gc1m2pd05c] {
    margin: 1.35rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(154, 111, 79, 0.14);
    color: #8b735f;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .check-email-card[b-gc1m2pd05c] {
        animation: checkEmailEnter-b-gc1m2pd05c 0.42s ease-out both;
    }

    .check-email-tip[b-gc1m2pd05c] {
        animation: checkEmailTipEnter-b-gc1m2pd05c 0.22s ease-out both;
    }
}

@keyframes checkEmailEnter-b-gc1m2pd05c {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes checkEmailTipEnter-b-gc1m2pd05c {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .check-email-page[b-gc1m2pd05c] {
        align-items: flex-start;
        padding: 5.8rem 1rem 2rem;
    }

    .check-email-logo[b-gc1m2pd05c] {
        top: 1.4rem;
        left: 1.25rem;
        font-size: 1.28rem;
    }

    .check-email-card[b-gc1m2pd05c] {
        border-radius: 16px;
    }

    .check-email-icon[b-gc1m2pd05c] {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 1rem;
    }

    .check-email-help[b-gc1m2pd05c] {
        align-items: flex-start;
        flex-direction: column;
    }

    .check-email-help-divider[b-gc1m2pd05c] {
        display: none;
    }
}
/* /Components/Pages/ContactGranny.razor.rz.scp.css */
/* GrannysCorner.razor.css - Granny's Corner Page Styles */

/* Global body/html overflow prevention - REMOVED */

/* Base styles inherited from FrontPage but with warmer tones */
[b-0dwcy2ftk7] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

/* App Layout */
[b-0dwcy2ftk7] .app-layout {
    display: flex;
    min-height: 100vh;
    /* inherited font-sans */
    background: linear-gradient(135deg, #FFF9F0 0%, #FFEFD5 50%, #FFF4E4 100%);
    padding-top: 0;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-0dwcy2ftk7] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-0dwcy2ftk7] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

    [b-0dwcy2ftk7] .sidebar.hidden {
        transform: translateX(-100%);
    }

[b-0dwcy2ftk7] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1.0rem;
}

[b-0dwcy2ftk7] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-0dwcy2ftk7] .sidebar-logo img {
    max-width: 180px;
    width: auto;
    height: 50px;
}

[b-0dwcy2ftk7] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-0dwcy2ftk7] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
}

[b-0dwcy2ftk7] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-0dwcy2ftk7] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-0dwcy2ftk7] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

    [b-0dwcy2ftk7] .sidebar-user:hover {
        background-color: rgba(255, 228, 210, 0.5);
    }

[b-0dwcy2ftk7] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #4F4A45;
}

[b-0dwcy2ftk7] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

[b-0dwcy2ftk7] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-0dwcy2ftk7] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
}

[b-0dwcy2ftk7] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

    [b-0dwcy2ftk7] .dropdown-item:hover {
        background-color: #f0dad3;
    }



/* Toggle Sidebar Button */
[b-0dwcy2ftk7] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Main Container */
[b-0dwcy2ftk7] .container-v3 {
    flex: 1;
    max-width: 1200px;
    margin: 30px auto;
    margin-left: 280px;
    padding: 0 20px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

    [b-0dwcy2ftk7] .container-v3.sidebar-hidden {
        margin-left: 0;
    }

/* Granny Hero Section */
[b-0dwcy2ftk7] .granny-hero-section {
    /* background: linear-gradient(135deg, rgba(255, 249, 240, 0.95) 0%, rgba(255, 244, 228, 0.95) 100%);
    border-radius: 25px;
    padding: 50px 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3; */
    position: relative;
    overflow: hidden;
}

    [b-0dwcy2ftk7] .granny-hero-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(251, 207, 168, 0.18) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: candleFlicker-b-0dwcy2ftk7 4s ease-in-out infinite;
    }

    [b-0dwcy2ftk7] .granny-hero-section::after {
        content: '';
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -12px;
        height: 22px;
        background: radial-gradient(circle, rgba(84, 52, 33, 0.05) 0%, rgba(84, 52, 33, 0) 70%);
        filter: blur(2px);
        pointer-events: none;
    }

[b-0dwcy2ftk7] .granny-hero-content {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

[b-0dwcy2ftk7] .granny-illustration-wrapper {
    flex-shrink: 0;
   /* transform: translateY(-20px);*/
}

[b-0dwcy2ftk7] .granny-illustration {
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}

@keyframes candleFlicker-b-0dwcy2ftk7 {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.015);
    }
    70% {
        opacity: 0.96;
        transform: scale(1.01);
    }
}

[b-0dwcy2ftk7] .granny-welcome-text {
    flex: 1;
    max-width: 520px;
}

[b-0dwcy2ftk7] .granny-title {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.5em;
    font-weight: var(--mobile-hero-heading-weight);
    color: #4F4A45;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

[b-0dwcy2ftk7] .granny-subtitle {
    font-size: 1.2em;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Granny Section Base */
[b-0dwcy2ftk7] .granny-section {
    /* background: rgba(255, 255, 255, 0.7); */
    backdrop-filter: blur(10px);
    /* border-radius: 20px; */
    /* padding: 40px; */
    margin: 0 auto;
    max-width: 960px;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(245, 229, 211, 0.6); */
}

[b-0dwcy2ftk7] .granny-section-header {
    text-align: center;
    margin-bottom: 35px;
}

[b-0dwcy2ftk7] .granny-section-title {
    /* inherited font-sans */
    font-size: 2em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 10px 0;
}

[b-0dwcy2ftk7] .granny-section-subtitle {
    font-size: 1.1em;
    color: #666;
    margin: 0;
    font-style: italic;
}

/* Cards Grid */
[b-0dwcy2ftk7] .granny-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

[b-0dwcy2ftk7] .granny-card {
    background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0dad3;
    transition: all 0.3s ease;
}

    [b-0dwcy2ftk7] .granny-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

[b-0dwcy2ftk7] .granny-card-highlight {
    background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    border: 2px solid #E8B076;
}

[b-0dwcy2ftk7] .granny-card-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-align: center;
}

[b-0dwcy2ftk7] .granny-card-title {
    /* inherited font-sans */
    font-size: 1.3em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 10px 0;
}

[b-0dwcy2ftk7] .granny-card-text {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Progress Cards */
[b-0dwcy2ftk7] .granny-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

[b-0dwcy2ftk7] .granny-progress-card {
    background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3;
    transition: all 0.3s ease;
}

    [b-0dwcy2ftk7] .granny-progress-card:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

[b-0dwcy2ftk7] .progress-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

[b-0dwcy2ftk7] .progress-number {
    font-size: 3em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 10px;
}

[b-0dwcy2ftk7] .progress-label {
    font-size: 1em;
    color: #666;
    font-weight: 600;
}

/* Featured Theme */
[b-0dwcy2ftk7] .granny-featured-theme {
    display: flex;
    background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3;
    transition: all 0.3s ease;
}

    [b-0dwcy2ftk7] .granny-featured-theme:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

[b-0dwcy2ftk7] .theme-image {
    width: 40%;
    object-fit: cover;
    border-radius: 20px;
    margin: 1em;
}

[b-0dwcy2ftk7] .theme-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[b-0dwcy2ftk7] .theme-title {
    /* inherited font-sans */
    font-size: 1.8em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 15px 0;
}

[b-0dwcy2ftk7] .theme-description {
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

[b-0dwcy2ftk7] .btn-theme {
    align-self: flex-start;
    padding: 12px 30px;
    background-color: #FBCFA8;
    color: #4F4A45;
    border: 2px solid #F0C07A;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

    [b-0dwcy2ftk7] .btn-theme:hover {
        background-color: #F0C07A;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(251, 207, 168, 0.4);
    }

/* Wisdom Section */
[b-0dwcy2ftk7] .granny-wisdom {
    background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
}

[b-0dwcy2ftk7] .granny-wisdom-card {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

[b-0dwcy2ftk7] .granny-quote-icon {
    font-size: 3em;
    margin-bottom: 20px;
    opacity: 0.7;
}

[b-0dwcy2ftk7] .granny-quote {
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

    [b-0dwcy2ftk7] .granny-quote p {
        font-size: 1.4em;
        font-style: italic;
        color: #4F4A45;
        line-height: 1.6;
        margin: 0;
    }

[b-0dwcy2ftk7] .granny-signature {
    font-size: 1.1em;
    color: #666;
    font-weight: 600;
}

/* Quick Actions */
[b-0dwcy2ftk7] .granny-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

[b-0dwcy2ftk7] .granny-action-btn {
    background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
    border: 2px solid #f5e5d3;
    border-radius: 15px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* inherited font-sans */
}

    [b-0dwcy2ftk7] .granny-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    }

[b-0dwcy2ftk7] .action-icon {
    font-size: 2.5em;
}

[b-0dwcy2ftk7] .action-label {
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
}

/* Sidebar Overlay */
.sidebar-overlay[b-0dwcy2ftk7] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none; /* Prevent scroll-through when overlay is visible */
}

.sidebar-overlay.hidden[b-0dwcy2ftk7] {
    display: none;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    [b-0dwcy2ftk7] .mobile-top-bar {
        display: flex !important;
    }

    [b-0dwcy2ftk7] .toggle-sidebar {
        display: none !important;
    }

    [b-0dwcy2ftk7] .app-layout {
        padding-top: 60px;
    }

    [b-0dwcy2ftk7] .container-v3 {
        margin-left: 0 !important;
        margin-top: 70px;
    }

    [b-0dwcy2ftk7] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

        [b-0dwcy2ftk7] .sidebar.visible {
            transform: translateX(0);
        }

    [b-0dwcy2ftk7] .granny-hero-content {
        flex-direction: column;
        text-align: center;
    }

    [b-0dwcy2ftk7] .granny-illustration-wrapper {
        transform: none;
    }

    [b-0dwcy2ftk7] .granny-illustration {
        width: 300px;
    }

    [b-0dwcy2ftk7] .granny-featured-theme {
        flex-direction: column;
    }

    [b-0dwcy2ftk7] .theme-image {
        width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
    }
}

@media (max-width: 768px) {
    /* Mobile touch scroll fixes */
    [b-0dwcy2ftk7] .app-layout {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    [b-0dwcy2ftk7] .container-v3 {
        /*
        overflow-x: hidden;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior: contain;
        */
        padding: 0 var(--mobile-page-margin);
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        min-width: 0;
        gap: 30px;
    }

    [b-0dwcy2ftk7] .granny-hero-section {
        margin-top: 20px;
        padding: 30px 20px;
    }

    [b-0dwcy2ftk7] .granny-title {
        font-size: 2em;
    }

    [b-0dwcy2ftk7] .granny-subtitle {
        font-size: 1.1em;
    }

    [b-0dwcy2ftk7] .granny-section {
        padding: 30px 20px;
    }

    [b-0dwcy2ftk7] .granny-section-title {
        font-size: 1.6em;
    }

    [b-0dwcy2ftk7] .granny-cards-grid {
        grid-template-columns: 1fr;
    }

    [b-0dwcy2ftk7] .granny-progress-cards {
        grid-template-columns: 1fr;
    }

    [b-0dwcy2ftk7] .theme-content {
        padding: 25px;
    }

    [b-0dwcy2ftk7] .theme-title {
        font-size: 1.5em;
    }

    [b-0dwcy2ftk7] .granny-quote p {
        font-size: 1.2em;
    }

    [b-0dwcy2ftk7] .granny-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    [b-0dwcy2ftk7] .granny-illustration {
        width: 300px;
    }

    [b-0dwcy2ftk7] .granny-title {
        font-size: 1.8em;
    }

    [b-0dwcy2ftk7] .granny-subtitle {
        font-size: 1em;
    }

    [b-0dwcy2ftk7] .granny-section-title {
        font-size: 1.4em;
    }

    [b-0dwcy2ftk7] .granny-card {
        padding: 20px;
    }

    [b-0dwcy2ftk7] .granny-progress-card {
        padding: 20px;
    }

    [b-0dwcy2ftk7] .progress-number {
        font-size: 2.5em;
    }
}

/* Footer alignment to follow sidebar on desktop (mirrors ThemesAll layout) */
[b-0dwcy2ftk7] .main-footer {
    margin-left: 280px;
    width: calc(100% - 280px);
    margin-top: 80px;
    padding: 60px 0 30px 0;
    /*background-color: #FAF3E5;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(245, 229, 211, 0.6);*/
}

    [b-0dwcy2ftk7] .main-footer.sidebar-hidden {
        margin-left: 0;
        width: 100%;
    }

@media (max-width: 992px) {
    [b-0dwcy2ftk7] .main-footer {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    [b-0dwcy2ftk7] .main-footer {
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    [b-0dwcy2ftk7] .main-footer .footer-container {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    [b-0dwcy2ftk7] .main-footer .footer-bottom {
        min-width: 0;
    }

    [b-0dwcy2ftk7] .main-footer .footer-languages {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
}

/* --- Integrated ContactGranny Form Design --- */
[b-0dwcy2ftk7] .contact-granny-hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

[b-0dwcy2ftk7] .contact-granny-content-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
   /* background: linear-gradient(135deg, #FAECDA 0%, #FFF4E4 100%);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);*/
    overflow: hidden;
    position: relative;
}

[b-0dwcy2ftk7] .contact-granny-illustration-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 40px 20px 40px;
    /*background: linear-gradient(135deg, #FAECDA 0%, #FFF8ED 100%);*/
}

[b-0dwcy2ftk7] .granny-illustration {
    max-width: 500px;
    width: 100%;
    height: auto;
    /*border-radius: 20px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.15);*/
    transition: transform 0.3s ease;
}

    [b-0dwcy2ftk7] .granny-illustration:hover {
        transform: scale(1.02);
    }

[b-0dwcy2ftk7] .contact-granny-form-section {
    max-width: 700px;
    margin: 0 auto 32px auto;
    width: 100%;
    /*background: rgba(255,244,228,0.95);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);*/
    padding: 32px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*background: rgba(255,244,228,0.7);
    border-radius: 0;*/
    box-shadow: none;
    padding: 30px 40px 40px 40px;
    margin-bottom: 0;
    border-top: 1px solid rgba(240, 218, 211, 0.3);
}

[b-0dwcy2ftk7] .contact-granny-header {
    text-align: left;
    margin-bottom: 30px;
}

[b-0dwcy2ftk7] .contact-granny-title {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.8em;
    font-weight: var(--mobile-hero-heading-weight);
    color: #4F4A45;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[b-0dwcy2ftk7] .contact-granny-subtitle {
    font-size: 1.5em;
    color: #6B4F3A;
    margin-bottom: 0;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
}

[b-0dwcy2ftk7] .contact-granny-form {
    --foyer-field-bg: rgba(255, 251, 245, 0.74);
    --foyer-field-bg-focus: rgba(255, 248, 239, 0.92);
    --foyer-field-border: rgba(176, 141, 110, 0.34);
    --foyer-field-border-strong: rgba(176, 141, 110, 0.58);
    --foyer-peach: var(--accent2, #FFC7B6);
    --foyer-peach-soft: #FBCFA8;
    --foyer-copper: #E0A96D;
    --foyer-peach-focus: rgba(251, 207, 168, 0.92);
    --foyer-copper-border: rgba(224, 169, 109, 0.92);
    --foyer-copper-focus: rgba(224, 169, 109, 0.42);
    --foyer-copper-focus-strong: rgba(224, 169, 109, 0.62);
    --foyer-ink: var(--text-dark, #4F4A45);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-0dwcy2ftk7] .contact-granny-form-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items:center;
}

[b-0dwcy2ftk7] .contact-granny-error {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff4f3;
    color: #b42318;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 3px 12px rgba(180, 35, 24, 0.12);
}

[b-0dwcy2ftk7] .contact-granny-form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

[b-0dwcy2ftk7] .contact-granny-input {
    width: 100%;
    padding: 16px 20px;
    border: 1.5px solid var(--foyer-field-border);
    border-radius: 16px;
    font-size: 1.05em;
    /* inherited font-sans */
    background: var(--foyer-field-bg);
    color: var(--foyer-ink);
    margin-bottom: 2px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(107, 79, 58, 0.08), 0 1px 0 rgba(255, 255, 255, 0.58);
}

    [b-0dwcy2ftk7] .contact-granny-input::placeholder {
        color: rgba(79, 74, 69, 0.58);
    }

    [b-0dwcy2ftk7] .contact-granny-input:focus {
        outline: none;
        border-color: var(--foyer-peach-focus);
        box-shadow: inset 0 1px 3px rgba(107, 79, 58, 0.07), 0 0 0 4px rgba(251, 207, 168, 0.24), 0 8px 22px rgba(107, 79, 58, 0.08);
        background: var(--foyer-field-bg-focus);
    }

    [b-0dwcy2ftk7] .contact-granny-input:focus-visible {
        outline: 2px solid var(--foyer-copper-focus);
        outline-offset: 3px;
    }

[b-0dwcy2ftk7] .contact-granny-textarea {
    min-height: 120px;
    resize: none;
    /* inherited font-sans */
}

[b-0dwcy2ftk7] .contact-granny-checkbox-group {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

[b-0dwcy2ftk7] .contact-granny-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    color: var(--foyer-ink);
    gap: 12px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 14px;
    transition: all 0.3s ease;
}

    [b-0dwcy2ftk7] .contact-granny-checkbox-label:hover {
        background-color: rgba(251, 207, 168, 0.18);
    }

[b-0dwcy2ftk7] .contact-granny-checkbox {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    border: 1.5px solid var(--foyer-field-border-strong);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 251, 245, 0.96), rgba(255, 242, 225, 0.86));
    box-shadow: inset 0 1px 2px rgba(107, 79, 58, 0.08), 0 2px 8px rgba(107, 79, 58, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

    [b-0dwcy2ftk7] .contact-granny-checkbox:hover {
        border-color: rgba(240, 192, 122, 0.88);
        box-shadow: inset 0 1px 2px rgba(107, 79, 58, 0.08), 0 4px 12px rgba(251, 207, 168, 0.22);
    }

    [b-0dwcy2ftk7] .contact-granny-checkbox:checked {
        border-color: var(--foyer-copper-border);
        background-color: var(--foyer-peach);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.2 12.4l3.7 3.7 7.9-8.2' stroke='%23FFFBF5' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--foyer-peach) 0%, var(--foyer-peach-soft) 100%);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 17px 17px, cover;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), 0 5px 14px rgba(240, 192, 122, 0.28);
    }

    [b-0dwcy2ftk7] .contact-granny-checkbox:focus {
        outline: none;
    }

    [b-0dwcy2ftk7] .contact-granny-checkbox:focus-visible {
        outline: 2px solid var(--foyer-copper-focus-strong);
        outline-offset: 4px;
        box-shadow: inset 0 1px 2px rgba(107, 79, 58, 0.08), 0 0 0 5px rgba(251, 207, 168, 0.24);
    }

[b-0dwcy2ftk7] .contact-granny-submit-btn {
    width: 100%;
    max-width: 400px;
    padding: 18px 0;
    background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    color: #4F4A45;
    font-weight: 700;
    font-size: 1.2em;
    border: 2px solid #F0C07A;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(240, 192, 122, 0.3);
    text-transform: none;
    letter-spacing: 0.5px;
}

    [b-0dwcy2ftk7] .contact-granny-submit-btn:hover {
        background: linear-gradient(135deg, #F0C07A 0%, #E6B366 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(240, 192, 122, 0.4);
    }

    [b-0dwcy2ftk7] .contact-granny-submit-btn:focus {
        outline: none;
    }

    [b-0dwcy2ftk7] .contact-granny-submit-btn:focus-visible {
        outline: 2px solid var(--foyer-copper-focus-strong, rgba(224, 169, 109, 0.62));
        outline-offset: 4px;
        box-shadow: 0 0 0 5px rgba(251, 207, 168, 0.28), 0 6px 20px rgba(240, 192, 122, 0.34);
    }

[b-0dwcy2ftk7] .contact-granny-submit-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    background: linear-gradient(135deg, #ECD9C5 0%, #E1C7A0 100%);
}

[b-0dwcy2ftk7] .validation-message {
    color: #C44F4F;
    font-size: 0.92em;
    margin-top: 2px;
}

[b-0dwcy2ftk7] .validation-summary {
    color: #C44F4F;
    margin-bottom: 8px;
}

/* Responsive ContactGranny Form */
@media (max-width: 992px) {
    [b-0dwcy2ftk7] .container-v3 {
        margin-left: 0;
        max-width: 95vw;
        padding: 10px;
    }

    [b-0dwcy2ftk7] .contact-granny-illustration-section {
        padding: 30px 20px 15px 20px;
    }

    [b-0dwcy2ftk7] .contact-granny-form-section {
        padding: 25px 20px 30px 20px;
    }
}

@media (max-width: 600px) {
    [b-0dwcy2ftk7] .container-v3 {
        padding: 0 var(--mobile-page-margin);
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
    }

    [b-0dwcy2ftk7] .contact-granny-content-wrapper {
        /*border-radius: 16px;*/
        margin: 20px auto;
    }

    [b-0dwcy2ftk7] .contact-granny-illustration-section {
        padding: 20px 20px 10px 20px;
    }

    [b-0dwcy2ftk7] .contact-granny-form-section {
        padding: 20px 20px 25px 20px;
    }

    [b-0dwcy2ftk7] .granny-illustration {
        max-width: 400px;
        /*border-radius: 12px;*/
    }

    [b-0dwcy2ftk7] .contact-granny-title {
        font-size: 1.8em;
    }

    [b-0dwcy2ftk7] .contact-granny-checkbox-label {
        
        font-size: 1.1em;
       
    }

    [b-0dwcy2ftk7] .contact-granny-subtitle {
        font-size: 1.1em;
    }

    [b-0dwcy2ftk7] .contact-granny-input {
        padding: 14px 16px;
        font-size: 1em;
        border-radius: 12px;
    }

    [b-0dwcy2ftk7] .contact-granny-submit-btn {
        font-size: 1.1em;
        padding: 16px 0;
        border-radius: 25px;
    }
}

/* Reply note and confirmation message */
[b-0dwcy2ftk7] .contact-granny-reply-note {
    font-size: 0.98em;
    color: #6B4F3A;
    margin: 6px 0 10px 0;
    text-align: left;
    max-width: 560px;
}

[b-0dwcy2ftk7] .contact-granny-confirmation {
    margin-top: 18px;
    padding: 12px 18px;
    background: rgba(255, 250, 240, 0.6);
    border-radius: 12px;
    color: #4F4A45;
    font-size: 1em;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Thank-you panel that replaces the form after submit */
[b-0dwcy2ftk7] .contact-granny-thankyou {
    background: #FFFBF5;
    border-radius: 12px;
    padding: 36px 28px;
    max-width: 720px;
    margin: 18px auto 40px auto;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    animation: fadeInUp-b-0dwcy2ftk7 300ms ease forwards;
}

[b-0dwcy2ftk7] .contact-granny-thankyou .thankyou-title {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    color: #4F4A45;
}

[b-0dwcy2ftk7] .contact-granny-thankyou .thankyou-text {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 18px 0;
}

[b-0dwcy2ftk7] .contact-granny-thankyou .thankyou-actions {
    margin-top: 6px;
}

[b-0dwcy2ftk7] .contact-granny-thankyou-link {
    display: inline-block;
    background: linear-gradient(135deg, #E0A96D 0%, #D38C4A 100%);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

@keyframes fadeInUp-b-0dwcy2ftk7 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    [b-0dwcy2ftk7] .contact-granny-reply-note {
        text-align: left;
        font-size: 0.95em;
    }

    [b-0dwcy2ftk7] .contact-granny-confirmation {
        font-size: 0.95em;
    }
}

/* Desktop: center the contact form and set fixed width */
@media (min-width: 993px) {
    [b-0dwcy2ftk7] .contact-granny-content-wrapper {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    [b-0dwcy2ftk7] .contact-granny-form-section {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 30px 0 40px 0;
    }

    /* constrain form container and center it */
    [b-0dwcy2ftk7] .contact-granny-form {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    [b-0dwcy2ftk7] .contact-granny-form-fields {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* constrain form groups so inputs don't expand full width */
    [b-0dwcy2ftk7] .contact-granny-form-group {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* keep individual controls from growing too large */
    [b-0dwcy2ftk7] .contact-granny-input,
    [b-0dwcy2ftk7] .contact-granny-textarea {
        max-width: 100%;
    }

    /* ensure the submit button aligns with the inputs */
    [b-0dwcy2ftk7] .contact-granny-submit-btn {
        max-width: 100%;
    }
}

/* /Components/Pages/ConversationRoom.razor.rz.scp.css */
/* ============================================================
   ConversationRoom.razor.css — Phase 5 Visual Polish
   Sacred room shell with parchment atmosphere and quiet mobile chrome.
   ============================================================ */

.conversation-room[b-92lp8p9wiz] {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 243, 221, 0.98) 0%, rgba(255, 243, 221, 0.58) 22%, rgba(253, 248, 240, 0) 52%),
        radial-gradient(circle at 12% 16%, rgba(245, 214, 180, 0.18) 0%, rgba(245, 214, 180, 0) 26%),
        radial-gradient(circle at 88% 18%, rgba(241, 217, 189, 0.18) 0%, rgba(241, 217, 189, 0) 28%),
        linear-gradient(180deg, #FFF9F1 0%, #FDF8F0 26%, #FAF3E5 64%, #F7EEE1 100%);
}

.conversation-room[b-92lp8p9wiz]::before,
.conversation-room[b-92lp8p9wiz]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.conversation-room[b-92lp8p9wiz]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 18%),
        radial-gradient(circle at 50% 12%, rgba(239, 201, 151, 0.2) 0%, rgba(239, 201, 151, 0) 32%);
    opacity: 0.92;
}

.conversation-room[b-92lp8p9wiz]::after {
    background: linear-gradient(180deg, rgba(132, 100, 69, 0.02), rgba(132, 100, 69, 0.06));
    mix-blend-mode: multiply;
}

.conversation-room.sidebar-hidden[b-92lp8p9wiz]  .conversation-sidebar {
    transform: translateX(calc(-100% - 28px));
}

.conversation-continuity-notice[b-92lp8p9wiz] {
    margin: 20px auto;
    padding: 16px 20px;
    max-width: 600px;
    background: rgba(253, 248, 240, 0.9);
    border: 1px solid #E8DCC8;
    border-radius: 8px;
    text-align: center;
}

.continuity-notice-text[b-92lp8p9wiz] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #7B5A53;
    font-family: var(--font-sans);
}

.conversation-room-empty[b-92lp8p9wiz] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 2rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 242, 220, 0.88) 0%, rgba(255, 242, 220, 0) 28%),
        linear-gradient(180deg, #FFF9F1 0%, #FDF8F0 48%, #FAF3E5 100%);
    font-family: var(--font-serif);
    font-style: italic;
    color: #8E7864;
    font-size: 1.12rem;
    text-align: center;
}

.conversation-main[b-92lp8p9wiz] {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-left: 280px;
    display: flex;
    justify-content: center;
    padding: 0 clamp(1.4rem, 3.2vw, 2.6rem) 0;
    overflow-x: hidden;
    overflow-y: hidden;
    -ms-overflow-style: none;
    transition: margin-left 0.34s ease;
}

.conversation-main[b-92lp8p9wiz]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.conversation-main[b-92lp8p9wiz]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 78rem);
    height: clamp(16rem, 34vw, 28rem);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(250, 226, 192, 0.46) 0%, rgba(250, 226, 192, 0.12) 36%, rgba(250, 226, 192, 0) 70%);
    filter: blur(16px);
    pointer-events: none;
    opacity: 0.95;
}

.conversation-room.sidebar-hidden .conversation-main[b-92lp8p9wiz] {
    margin-left: 0;
}

.presence-line[b-92lp8p9wiz] {
    width: min(100%, 38rem);
    margin: 0.15rem auto 2rem;
    padding: 0.75rem 1.2rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.03em;
    text-align: center;
    color: #8E765D;
    border-top: 1px solid rgba(188, 152, 109, 0.18);
    border-bottom: 1px solid rgba(188, 152, 109, 0.12);
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.38), rgba(255, 250, 244, 0.08));
}

.conversation-surface[b-92lp8p9wiz] {
    position: relative;
    width: 100%;
    max-width: 860px;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.conversation-thread-shell[b-92lp8p9wiz] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    padding-top: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(4.75rem, 8vw, 6.5rem);
}

.conversation-thread-shell[b-92lp8p9wiz]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.conversation-latest-anchor[b-92lp8p9wiz] {
    width: 100%;
    height: clamp(3.8rem, 7vw, 5.2rem);
    margin-top: 0;
    pointer-events: none;
    flex: 0 0 auto;
}

.conversation-input-wrap[b-92lp8p9wiz] {
    position: relative;
    z-index: 10;
    width: 100%;
    isolation: isolate;
    padding-bottom: 24px;
    pointer-events: none;
}

[b-92lp8p9wiz] .conversation-input-shell {
    pointer-events: auto;
}

.conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
    position: absolute;
    bottom: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(176, 133, 85, 0.28);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(245, 235, 221, 0.96));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        0 0 0 6px rgba(253, 248, 240, 0.86),
        0 14px 30px rgba(96, 70, 45, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    z-index: 12;
    color: #6A4D31;
    animation: conversationScrollButtonRise-b-92lp8p9wiz 0.2s ease-out;
    pointer-events: auto;
}

.conversation-scroll-to-latest-btn[b-92lp8p9wiz]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 28px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 172, 122, 0.32) 0%, rgba(212, 172, 122, 0) 78%);
    pointer-events: none;
    z-index: -1;
}

@keyframes conversationScrollButtonRise-b-92lp8p9wiz {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.conversation-scroll-to-latest-btn:hover[b-92lp8p9wiz] {
    background: linear-gradient(180deg, rgba(255, 253, 249, 1), rgba(247, 238, 225, 0.98));
    box-shadow:
        0 0 0 6px rgba(253, 248, 240, 0.92),
        0 18px 34px rgba(96, 70, 45, 0.2);
    transform: translateX(-50%) scale(1.05);
}

.conversation-scroll-to-latest-btn:active[b-92lp8p9wiz] {
    transform: translateX(-50%) scale(0.95);
}

.conversation-scroll-to-latest-btn:focus-visible[b-92lp8p9wiz] {
    outline: 2px solid rgba(171, 123, 71, 0.4);
    outline-offset: 3px;
}

.conversation-scroll-to-latest-btn svg[b-92lp8p9wiz] {
    width: 22px;
    height: 22px;
}

.toggle-sidebar[b-92lp8p9wiz] {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: 10px;
    background: #FAF3E5;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.toggle-sidebar:hover[b-92lp8p9wiz] {
    background: rgba(255, 248, 240, 0.98);
}

.toggle-sidebar.sidebar-hidden[b-92lp8p9wiz] {
    background: rgba(255, 251, 245, 0.92);
    border: 1px solid rgba(232, 213, 200, 0.4);
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.12);
}

.conversation-sidebar-overlay[b-92lp8p9wiz] {
    display: none;
}

.conversation-mobile-header[b-92lp8p9wiz] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    pointer-events: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem calc(1rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px));
}

.mobile-back-link[b-92lp8p9wiz] {
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: min(74vw, 17rem);
    padding: 0.66rem 1rem;
    border: 1px solid rgba(188, 152, 109, 0.18);
    border-radius: 999px;
    background: rgba(253, 248, 240, 0.84);
    box-shadow: 0 10px 22px rgba(76, 56, 37, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 500;
    color: #5A4A3A;
    text-decoration: none;
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.mobile-back-link:hover[b-92lp8p9wiz] {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(76, 56, 37, 0.14);
}

.mobile-menu-btn[b-92lp8p9wiz] {
    pointer-events: all;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(188, 152, 109, 0.18);
    border-radius: 50%;
    background: rgba(253, 248, 240, 0.84);
    box-shadow: 0 10px 22px rgba(76, 56, 37, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 1.24rem;
    color: #5A4A3A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mobile-menu-btn:hover[b-92lp8p9wiz] {
    transform: translateY(-1px);
    background: rgba(255, 250, 245, 0.92);
    box-shadow: 0 14px 28px rgba(76, 56, 37, 0.14);
}

@keyframes menuFadeIn-b-92lp8p9wiz {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

:global(body.night-mode) .conversation-room[b-92lp8p9wiz] {
    background:
        radial-gradient(circle at 50% 0%, rgba(125, 92, 54, 0.26) 0%, rgba(125, 92, 54, 0.08) 20%, rgba(27, 23, 21, 0) 48%),
        radial-gradient(circle at 12% 18%, rgba(136, 88, 53, 0.14) 0%, rgba(136, 88, 53, 0) 24%),
        radial-gradient(circle at 88% 18%, rgba(125, 89, 58, 0.14) 0%, rgba(125, 89, 58, 0) 26%),
        linear-gradient(180deg, #231E1B 0%, #1E1916 44%, #181412 100%);
}

:global(body.night-mode) .conversation-room[b-92lp8p9wiz]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 16%),
        radial-gradient(circle at 50% 12%, rgba(194, 141, 75, 0.18) 0%, rgba(194, 141, 75, 0) 30%);
}

:global(body.night-mode) .conversation-main[b-92lp8p9wiz]::before {
    background: radial-gradient(circle, rgba(120, 84, 44, 0.28) 0%, rgba(120, 84, 44, 0.08) 34%, rgba(120, 84, 44, 0) 72%);
}

:global(body.night-mode) .presence-line[b-92lp8p9wiz] {
    color: #C9B7A2;
    border-top-color: rgba(197, 151, 95, 0.18);
    border-bottom-color: rgba(197, 151, 95, 0.1);
    background: linear-gradient(180deg, rgba(67, 52, 39, 0.3), rgba(67, 52, 39, 0.08));
}

:global(body.night-mode) .toggle-sidebar[b-92lp8p9wiz] {
    background: rgba(45, 59, 68, 0.9);
    border-color: rgba(196, 154, 108, 0.2);
}

:global(body.night-mode) .toggle-sidebar:hover[b-92lp8p9wiz] {
    background: rgba(54, 44, 37, 0.92);
}

:global(body.night-mode) .mobile-back-link[b-92lp8p9wiz],
:global(body.night-mode) .mobile-menu-btn[b-92lp8p9wiz] {
    border-color: rgba(191, 148, 91, 0.22);
    background: rgba(42, 34, 29, 0.86);
    color: #E3D4C2;
    box-shadow: 0 12px 24px rgba(4, 3, 2, 0.28);
}

:global(body.night-mode) .toggle-sidebar:hover[b-92lp8p9wiz],
:global(body.night-mode) .mobile-back-link:hover[b-92lp8p9wiz],
:global(body.night-mode) .mobile-menu-btn:hover[b-92lp8p9wiz] {
    background: rgba(54, 44, 37, 0.92);
    color: #F4E5D3;
}

:global(body.night-mode) .conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
    border-color: rgba(191, 148, 91, 0.22);
    background: linear-gradient(180deg, rgba(48, 39, 33, 0.96), rgba(37, 31, 27, 0.94));
    color: #E3D4C2;
    box-shadow:
        0 0 0 6px rgba(30, 25, 22, 0.84),
        0 16px 30px rgba(4, 3, 2, 0.34);
}

:global(body.night-mode) .conversation-scroll-to-latest-btn:hover[b-92lp8p9wiz] {
    background: linear-gradient(180deg, rgba(57, 46, 39, 0.98), rgba(43, 36, 31, 0.96));
}

:global(body.night-mode) .conversation-scroll-to-latest-btn[b-92lp8p9wiz]::after {
    background: radial-gradient(circle, rgba(170, 117, 52, 0.3) 0%, rgba(170, 117, 52, 0) 78%);
}

@media (max-width: 1024px) {
    .conversation-main[b-92lp8p9wiz] {
        margin-left: 0;
        padding-inline: clamp(1.2rem, 3.5vw, 2rem);
    }

    .toggle-sidebar[b-92lp8p9wiz] {
        display: none;
    }
}

@media (max-width: 1024px) {
    .conversation-thread-shell[b-92lp8p9wiz] {
        padding-top: clamp(2rem, 3.5vw, 3rem);
    }
}

@media (max-width: 768px) {
    .conversation-sidebar-overlay[b-92lp8p9wiz] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(45, 31, 18, 0.12);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .conversation-mobile-header[b-92lp8p9wiz] {
        display: flex;
    }

    .conversation-main[b-92lp8p9wiz] {
        padding-top: 0;
        padding-bottom: 0;
    }

    .conversation-thread-shell[b-92lp8p9wiz] {
        padding-top: 5.3rem;
    }

    .presence-line[b-92lp8p9wiz] {
        margin-bottom: 1.5rem;
        padding-inline: 1rem;
    }

    .conversation-surface[b-92lp8p9wiz],
    .conversation-thread-shell[b-92lp8p9wiz],
    .conversation-input-wrap[b-92lp8p9wiz] {
        width: 100%;
        max-width: 100%;
    }

    .conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
        width: 40px;
        height: 40px;
        bottom: calc(100% + 13px);
        box-shadow:
            0 0 0 5px rgba(253, 248, 240, 0.88),
            0 12px 24px rgba(96, 70, 45, 0.14);
    }

    .conversation-scroll-to-latest-btn svg[b-92lp8p9wiz] {
        width: 19px;
        height: 19px;
    }

    [b-92lp8p9wiz] .conversation-sidebar {
        top: 60px;
        width: min(86vw, 340px);
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        transform: translateX(calc(-100% - 20px));
        transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
        border-radius: 0 28px 28px 0;
        box-shadow: 28px 0 100px rgba(56, 39, 24, 0.22);
    }

    .conversation-room.mobile-sidebar-open[b-92lp8p9wiz]  .conversation-sidebar {
        transform: translateX(0);
    }
}

:global(body.night-mode) .conversation-sidebar-overlay[b-92lp8p9wiz] {
    background: rgba(7, 5, 4, 0.26);
}

@media (max-width: 768px) {
    :global(body.night-mode) .conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
        box-shadow:
            0 0 0 5px rgba(30, 25, 22, 0.88),
            0 14px 26px rgba(4, 3, 2, 0.32);
    }
}

@media (max-width: 480px) {
    .conversation-main[b-92lp8p9wiz] {
        padding-inline: 1rem;
    }

    .conversation-thread-shell[b-92lp8p9wiz] {
        padding-top: 5rem;
    }

    .presence-line[b-92lp8p9wiz] {
        font-size: 0.88rem;
        margin-bottom: 1.3rem;
    }

    .conversation-input-wrap[b-92lp8p9wiz] {
        padding-bottom: 20px;
    }

    .conversation-continuity-notice[b-92lp8p9wiz] {
        margin: 16px 1rem;
        padding: 14px 16px;
    }

    .continuity-notice-text[b-92lp8p9wiz] {
        font-size: 14px;
    }
}
/* /Components/Pages/EmailVerificationResult.razor.rz.scp.css */
.verification-page[b-4veto4b1ua] {
    --verification-bg: #f7ecdf;
    --verification-bg-soft: #fff8f0;
    --verification-ink: #46352e;
    --verification-muted: #6a5a52;
    --verification-line: rgba(133, 103, 82, 0.18);
    --verification-gold: #b88b5f;
    --verification-gold-deep: #8f6847;
    --verification-cream: rgba(255, 250, 243, 0.94);
    --verification-shadow: 0 28px 90px rgba(96, 67, 47, 0.14);
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 34%),
        radial-gradient(circle at bottom right, rgba(252, 223, 192, 0.55), transparent 30%),
        linear-gradient(180deg, var(--verification-bg-soft) 0%, var(--verification-bg) 100%);
    color: var(--verification-ink);
}

.verification-page__glow[b-4veto4b1ua] {
    position: absolute;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    pointer-events: none;
}

.verification-page__glow--left[b-4veto4b1ua] {
    top: -12rem;
    left: -10rem;
    background: rgba(255, 236, 209, 0.95);
}

.verification-page__glow--right[b-4veto4b1ua] {
    right: -10rem;
    bottom: -14rem;
    background: rgba(226, 196, 170, 0.82);
}

.verification-page__brand[b-4veto4b1ua] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding: 2rem 3rem 0;
}

.verification-page__brand-link[b-4veto4b1ua] {
    display: block;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.verification-page__brand-link:hover[b-4veto4b1ua] {
    opacity: 1;
}

.verification-page__brand-logo[b-4veto4b1ua] {
    height: 36px;
    width: auto;
    display: block;
}

.guest-menu-wrapper[b-4veto4b1ua] {
    position: relative;
}

.guest-menu-btn[b-4veto4b1ua] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(164, 123, 80, 0.2);
    background: rgba(253, 248, 240, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}

.guest-menu-btn:hover[b-4veto4b1ua] {
    background: rgba(253, 248, 240, 0.95);
    border-color: rgba(164, 123, 80, 0.4);
    box-shadow: 0 3px 12px rgba(139, 115, 85, 0.14);
}

.guest-menu-dots[b-4veto4b1ua] {
    font-size: 1.4rem;
    color: #6B5B4E;
    letter-spacing: 2px;
    line-height: 1;
}

.guest-menu-backdrop[b-4veto4b1ua] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.guest-menu-dropdown[b-4veto4b1ua] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(253, 248, 240, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(232, 213, 200, 0.5);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14), 0 2px 8px rgba(139, 115, 85, 0.06);
    padding: 0.5rem 0;
    z-index: 70;
    animation: guestMenuFadeIn-b-4veto4b1ua 0.2s ease-out;
}

@keyframes guestMenuFadeIn-b-4veto4b1ua {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.guest-menu-item[b-4veto4b1ua] {
    display: block;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #5C4033;
    text-decoration: none;
    transition: background 0.15s ease;
}

.guest-menu-item:hover[b-4veto4b1ua] {
    background: rgba(196, 154, 108, 0.08);
}

body.night-mode .guest-menu-btn[b-4veto4b1ua] {
    background: rgba(45, 59, 68, 0.85);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .guest-menu-btn:hover[b-4veto4b1ua] {
    background: rgba(45, 59, 68, 0.95);
    border-color: rgba(196, 154, 108, 0.35);
}

body.night-mode .guest-menu-dots[b-4veto4b1ua] {
    color: #CFD8DC;
}

body.night-mode .guest-menu-dropdown[b-4veto4b1ua] {
    background: rgba(30, 46, 54, 0.97);
    border-color: rgba(196, 154, 108, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.night-mode .guest-menu-item[b-4veto4b1ua] {
    color: #E8F4F8;
}

body.night-mode .guest-menu-item:hover[b-4veto4b1ua] {
    background: rgba(196, 154, 108, 0.1);
}

.verification-page__main[b-4veto4b1ua] {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
}

.verification-card[b-4veto4b1ua] {
    position: relative;
    width: min(100%, 46rem);
    padding: 3.5rem 3rem 2.75rem;
    border-radius: 2rem;
    border: 1px solid var(--verification-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 240, 0.88)),
        var(--verification-cream);
    box-shadow: var(--verification-shadow);
    text-align: center;
    backdrop-filter: blur(10px);
}

.verification-card__ornament[b-4veto4b1ua] {
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(184, 139, 95, 0.12);
    border-radius: 1.45rem;
    pointer-events: none;
}

.verification-card__eyebrow[b-4veto4b1ua] {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--verification-gold-deep);
}

.verification-card__icon[b-4veto4b1ua] {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    color: var(--verification-gold-deep);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(247, 225, 198, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 14px 34px rgba(184, 139, 95, 0.2);
}

.verification-card__title[b-4veto4b1ua] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.verification-card__lead[b-4veto4b1ua] {
    margin: 1rem auto 0;
    max-width: 33rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--verification-muted);
}

.verification-card__body[b-4veto4b1ua] {
    margin: 0.9rem auto 0;
    max-width: 31rem;
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(70, 53, 46, 0.82);
}

.verification-card__actions[b-4veto4b1ua] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.verification-card__action[b-4veto4b1ua] {
    min-width: 13rem;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.verification-card__action:hover[b-4veto4b1ua] {
    transform: translateY(-1px);
}

.verification-card__action--primary[b-4veto4b1ua] {
    color: #fffaf6;
    background: linear-gradient(135deg, var(--verification-gold) 0%, var(--verification-gold-deep) 100%);
    box-shadow: 0 12px 28px rgba(136, 102, 73, 0.22);
}

.verification-card__action--secondary[b-4veto4b1ua] {
    color: var(--verification-ink);
    background: rgba(255, 251, 246, 0.82);
    border: 1px solid rgba(143, 104, 71, 0.18);
}

.verification-card__action--secondary:hover[b-4veto4b1ua] {
    border-color: rgba(143, 104, 71, 0.32);
    background: rgba(255, 255, 255, 0.92);
}

.verification-card__help[b-4veto4b1ua] {
    margin: 1.6rem 0 0;
    font-size: 0.92rem;
    color: rgba(70, 53, 46, 0.68);
}

.verification-card__help-link[b-4veto4b1ua] {
    color: var(--verification-gold-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 104, 71, 0.24);
}

.verification-card__help-link:hover[b-4veto4b1ua] {
    border-bottom-color: rgba(143, 104, 71, 0.48);
}

@media (max-width: 768px) {
    .verification-page__glow[b-4veto4b1ua] {
        display: none;
    }

    .verification-page__brand[b-4veto4b1ua] {
        padding: 1rem 1.5rem;
    }

    .verification-page__main[b-4veto4b1ua] {
        padding: 1.25rem 1rem 2.5rem;
        min-height: calc(100vh - 4.5rem);
    }

    .verification-card[b-4veto4b1ua] {
        padding: 2.6rem 1.35rem 2rem;
        border-radius: 1.55rem;
    }

    .verification-card__actions[b-4veto4b1ua] {
        flex-direction: column;
    }

    .verification-card__action[b-4veto4b1ua] {
        width: 100%;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Generic recovery page. Keep this visually aligned with GrannysError. */

.error-layout[b-3sf5sc8kx5],
[b-3sf5sc8kx5] .app-layout {
    --error-bg: #fff7ee;
    --error-surface: rgba(255, 252, 246, 0.78);
    --error-border: #ead9c9;
    --error-ink: #3f312b;
    --error-muted: #786b62;
    --error-accent: #df9f6b;
    display: block;
    min-height: 100vh;
    width: 100%;
    background:
        repeating-linear-gradient(0deg, rgba(91, 65, 43, 0.018) 0, rgba(91, 65, 43, 0.018) 1px, transparent 1px, transparent 7px),
        linear-gradient(90deg, #fffaf4 0, var(--error-bg) 38%, #fffaf4 100%);
    color: var(--error-ink);
    overflow-x: hidden;
}

[b-3sf5sc8kx5] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

[b-3sf5sc8kx5] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #E7D5C4;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-3sf5sc8kx5] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-3sf5sc8kx5] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

[b-3sf5sc8kx5] .app-logo-link {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: -1.2rem;
}

[b-3sf5sc8kx5] .sidebar-logo img {
    display: inline-block;
    width: auto;
    height: 50px;
    max-width: 180px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
}

[b-3sf5sc8kx5] .sidebar-menu {
    width: 100%;
}

[b-3sf5sc8kx5] .sidebar-bottom,
[b-3sf5sc8kx5] .sidebar-guest-actions {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
}

[b-3sf5sc8kx5] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    border: 0;
    border-radius: 10px;
    background: #FFECE3;
    padding: 6px 10px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

[b-3sf5sc8kx5] .toggle-sidebar:hover,
[b-3sf5sc8kx5] .toggle-sidebar:focus-visible {
    background: #F8DFD2;
    transform: translateY(-1px);
}

.sidebar-overlay[b-3sf5sc8kx5] {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(63, 43, 31, 0.3);
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-3sf5sc8kx5] {
    display: none;
}

[b-3sf5sc8kx5] .container-v3.granny-error-page {
    flex: 1;
    min-width: 0;
    width: min(1180px, calc(100% - 328px));
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 48px 56px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    box-sizing: border-box;
    position: relative;
    left: 140px;
    transition: left 0.3s ease, width 0.3s ease;
}

[b-3sf5sc8kx5] .container-v3.granny-error-page.sidebar-hidden {
    width: min(1180px, calc(100% - 48px));
    left: 0;
}

.error-hero[b-3sf5sc8kx5] {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(410px, 1fr);
    align-items: center;
    gap: 72px;
    min-height: 356px;
    padding: 4px 0 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
    animation: errorPageEnter-b-3sf5sc8kx5 0.5s ease both;
}

.error-hero-visual[b-3sf5sc8kx5] {
    min-height: 360px;
    display: grid;
    place-items: end center;
}

.error-granny[b-3sf5sc8kx5] {
    width: min(100%, 470px);
    max-height: 360px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(118, 71, 31, 0.18));
    animation: errorIllustrationSettle-b-3sf5sc8kx5 0.62s ease both;
}

.error-hero-copy[b-3sf5sc8kx5] {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 6px;
}

.error-kicker[b-3sf5sc8kx5],
.support-kicker[b-3sf5sc8kx5] {
    margin-bottom: 12px;
    color: #78846e;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.error-hero h1[b-3sf5sc8kx5],
.recovery-heading h2[b-3sf5sc8kx5],
.support-copy h2[b-3sf5sc8kx5] {
    margin: 0;
    color: var(--error-ink);
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0;
}

.error-hero h1[b-3sf5sc8kx5] {
    max-width: 680px;
    font-size: 4.05rem;
    line-height: 1.03;
}

.error-hero p[b-3sf5sc8kx5] {
    max-width: 570px;
    margin: 18px 0 0;
    color: #4f4944;
    font-size: 1.14rem;
    line-height: 1.5;
}

.error-hero-actions[b-3sf5sc8kx5] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
}

.error-button[b-3sf5sc8kx5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 52px;
    max-width: 100%;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid #d8a983;
    color: #382f29;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.error-button:hover[b-3sf5sc8kx5],
.error-button:focus-visible[b-3sf5sc8kx5] {
    transform: translateY(-2px);
}

.error-button-primary[b-3sf5sc8kx5] {
    background: #dfa56e;
    border-color: #d99a63;
    color: #fff8ef;
    box-shadow: 0 14px 28px rgba(154, 95, 42, 0.17);
}

.error-button-primary:hover[b-3sf5sc8kx5],
.error-button-primary:focus-visible[b-3sf5sc8kx5] {
    background: #d99356;
    box-shadow: 0 18px 34px rgba(154, 95, 42, 0.23);
}

.error-button-secondary[b-3sf5sc8kx5] {
    background: rgba(255, 252, 246, 0.72);
    border-color: rgba(216, 169, 131, 0.72);
}

.error-button-secondary:hover[b-3sf5sc8kx5],
.error-button-secondary:focus-visible[b-3sf5sc8kx5] {
    background: rgba(255, 252, 246, 0.96);
    border-color: rgba(190, 132, 85, 0.72);
    box-shadow: 0 12px 24px rgba(111, 76, 48, 0.08);
}

.recovery-section[b-3sf5sc8kx5] {
    display: grid;
    gap: 26px;
}

.recovery-heading[b-3sf5sc8kx5] {
    max-width: 720px;
    padding: 0 4px;
}

.recovery-heading h2[b-3sf5sc8kx5],
.support-copy h2[b-3sf5sc8kx5] {
    font-size: 2.55rem;
    line-height: 1.08;
}

.recovery-heading p[b-3sf5sc8kx5],
.support-copy p[b-3sf5sc8kx5] {
    margin: 10px 0 0;
    color: var(--error-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.recovery-grid[b-3sf5sc8kx5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.recovery-card[b-3sf5sc8kx5] {
    min-height: 170px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
    padding: 30px 26px;
    border: 1px solid var(--error-border);
    border-radius: 12px;
    background: var(--error-surface);
    color: var(--error-ink);
    text-decoration: none;
    box-shadow: 0 14px 42px rgba(108, 75, 48, 0.035);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.recovery-card:hover[b-3sf5sc8kx5],
.recovery-card:focus-visible[b-3sf5sc8kx5] {
    transform: translateY(-3px);
    border-color: rgba(205, 152, 107, 0.58);
    background: rgba(255, 252, 246, 0.94);
    box-shadow: 0 18px 34px rgba(105, 75, 50, 0.1);
}

.recovery-card-featured[b-3sf5sc8kx5] {
    background: linear-gradient(180deg, rgba(255, 238, 215, 0.9) 0%, rgba(255, 252, 246, 0.84) 100%);
}

.recovery-icon[b-3sf5sc8kx5] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff0e3;
    color: #c46f3f;
    box-shadow: inset 0 0 0 1px rgba(232, 211, 193, 0.58);
}

.recovery-icon svg[b-3sf5sc8kx5] {
    width: 25px;
    height: 25px;
    display: block;
    vector-effect: non-scaling-stroke;
}

.recovery-copy[b-3sf5sc8kx5] {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.recovery-card strong[b-3sf5sc8kx5] {
    color: var(--error-ink);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.18;
}

.recovery-copy > span[b-3sf5sc8kx5] {
    color: var(--error-muted);
    font-size: 0.96rem;
    line-height: 1.5;
}

.support-panel[b-3sf5sc8kx5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 34px 38px;
    border: 1px solid var(--error-border);
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.78);
    box-shadow: 0 14px 42px rgba(108, 75, 48, 0.045);
}

.support-action[b-3sf5sc8kx5] {
    white-space: nowrap;
}

.technical-details[b-3sf5sc8kx5] {
    grid-column: 1 / -1;
    margin-top: 2px;
    color: var(--error-muted);
}

.technical-details summary[b-3sf5sc8kx5] {
    width: fit-content;
    cursor: pointer;
    color: #8b5b38;
    font-weight: 800;
}

.technical-details p[b-3sf5sc8kx5] {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    margin: 14px 0 0;
    font-size: 0.92rem;
}

.technical-details code[b-3sf5sc8kx5] {
    min-width: 0;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.66);
    padding: 0.3rem 0.52rem;
    color: #4B3428;
    font-family: Consolas, "Fira Code", monospace;
    box-shadow: inset 0 1px 3px rgba(140, 102, 78, 0.12);
}

[b-3sf5sc8kx5] .main-footer {
    width: min(1180px, calc(100% - 328px));
    margin: 76px auto 0;
    padding: 60px 48px 30px;
    box-sizing: border-box;
    position: relative;
    left: 140px;
}

[b-3sf5sc8kx5] .main-footer.sidebar-hidden {
    width: min(1180px, calc(100% - 48px));
    left: 0;
}

[b-3sf5sc8kx5] .footer-container {
    max-width: none;
    margin: 0;
    padding: 0;
}

@keyframes errorPageEnter-b-3sf5sc8kx5 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes errorIllustrationSettle-b-3sf5sc8kx5 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1280px) {
    .error-hero[b-3sf5sc8kx5] {
        gap: 48px;
    }

    .error-hero h1[b-3sf5sc8kx5] {
        font-size: 3.45rem;
    }

    .recovery-grid[b-3sf5sc8kx5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .error-layout[b-3sf5sc8kx5],
    [b-3sf5sc8kx5] .app-layout {
        padding-top: var(--mobile-topbar-height, 60px);
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
    }

    [b-3sf5sc8kx5] .toggle-sidebar {
        display: none !important;
    }

    [b-3sf5sc8kx5] .sidebar {
        top: var(--mobile-topbar-height, 60px);
        height: calc(100vh - var(--mobile-topbar-height, 60px));
        transform: translateX(-100%);
    }

    [b-3sf5sc8kx5] .sidebar.visible {
        transform: translateX(0);
    }

    [b-3sf5sc8kx5] .sidebar.hidden {
        transform: translateX(-100%);
    }

    [b-3sf5sc8kx5] .container-v3.granny-error-page,
    [b-3sf5sc8kx5] .container-v3.granny-error-page.sidebar-hidden {
        width: 100%;
        max-width: 100%;
        left: 0;
        margin: 0;
        padding: 46px 22px 42px;
    }

    .error-hero[b-3sf5sc8kx5] {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 22px;
        text-align: center;
    }

    .error-hero-visual[b-3sf5sc8kx5] {
        min-height: 265px;
        order: -1;
        place-items: end center;
    }

    .error-granny[b-3sf5sc8kx5] {
        width: min(330px, 100%);
    }

    .error-hero-copy[b-3sf5sc8kx5] {
        align-items: center;
        max-width: none;
    }

    .error-hero h1[b-3sf5sc8kx5] {
        font-size: 3rem;
    }

    .error-hero-actions[b-3sf5sc8kx5] {
        justify-content: center;
    }

    .support-panel[b-3sf5sc8kx5] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .support-action[b-3sf5sc8kx5],
    .technical-details summary[b-3sf5sc8kx5] {
        justify-self: center;
    }

    [b-3sf5sc8kx5] .main-footer,
    [b-3sf5sc8kx5] .main-footer.sidebar-hidden {
        width: 100%;
        left: 0;
        margin-top: 56px;
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (max-width: 640px) {
    [b-3sf5sc8kx5] .container-v3.granny-error-page,
    [b-3sf5sc8kx5] .container-v3.granny-error-page.sidebar-hidden {
        gap: 34px;
        padding: 20px 14px 38px;
    }

    .error-hero[b-3sf5sc8kx5] {
        padding-top: 8px;
    }

    .error-hero-visual[b-3sf5sc8kx5] {
        min-height: 210px;
    }

    .error-granny[b-3sf5sc8kx5] {
        width: min(250px, 100%);
    }

    .error-hero h1[b-3sf5sc8kx5] {
        font-size: 2.28rem;
        line-height: 1.06;
    }

    .error-hero p[b-3sf5sc8kx5] {
        font-size: 1rem;
        line-height: 1.58;
    }

    .error-hero-actions[b-3sf5sc8kx5] {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .recovery-section[b-3sf5sc8kx5] {
        margin-top: 70px;
    }

    .error-button[b-3sf5sc8kx5] {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .recovery-heading h2[b-3sf5sc8kx5],
    .support-copy h2[b-3sf5sc8kx5] {
        font-size: 2.02rem;
    }

    .recovery-grid[b-3sf5sc8kx5] {
        grid-template-columns: 1fr;
    }

    .recovery-card[b-3sf5sc8kx5] {
        min-height: 0;
        padding: 22px 20px;
    }

    .support-panel[b-3sf5sc8kx5] {
        padding: 24px 18px;
    }

    .technical-details p[b-3sf5sc8kx5] {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-3sf5sc8kx5],
    *[b-3sf5sc8kx5]::before,
    *[b-3sf5sc8kx5]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

::global(body.night-mode) .error-layout[b-3sf5sc8kx5],
::global(body.night-mode) .support-panel[b-3sf5sc8kx5],
::global(body.night-mode) .recovery-card[b-3sf5sc8kx5] {
    background: #2F2924;
    border-color: rgba(255, 226, 196, 0.12);
    color: #F5E8D8;
}

::global(body.night-mode) .error-hero h1[b-3sf5sc8kx5],
::global(body.night-mode) .recovery-heading h2[b-3sf5sc8kx5],
::global(body.night-mode) .support-copy h2[b-3sf5sc8kx5],
::global(body.night-mode) .recovery-card strong[b-3sf5sc8kx5] {
    color: #F5E8D8;
}

::global(body.night-mode) .error-hero p[b-3sf5sc8kx5],
::global(body.night-mode) .recovery-heading p[b-3sf5sc8kx5],
::global(body.night-mode) .support-copy p[b-3sf5sc8kx5],
::global(body.night-mode) .recovery-copy > span[b-3sf5sc8kx5] {
    color: rgba(245, 232, 216, 0.74);
}
/* /Components/Pages/FrontPage.razor.rz.scp.css */
/* ============================================
   Pass 1 — LovOne Premium Storybook Tokens
   "Image 2's soul with Image 1's polish."
   These cascade down through ::deep into all
   descendants of .app-layout / .container-v3.
   ============================================ */
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and],
[b-gamgjy5and] .container-v3,
.container-v3[b-gamgjy5and] {
    /* Card surface (warm cream) */
    --lov-card-surface: #FAF3E5;

    /* Unified radii — slightly larger than legacy 15px for that
       "premium foyer" feel, calmer than mockup's 24px clinical tone. */
    --lov-card-radius: 18px;
    --lov-card-radius-sm: 12px;       /* postcards, oracle fan, micro-tiles */
    --lov-section-radius: 24px;        /* outer section containers */

    /* Hairline warm border — replaces hard #EADDC0 lines */
    --lov-card-border: 1px solid rgba(120, 88, 60, 0.10);
    --lov-section-border: 1px solid rgba(120, 88, 60, 0.10);

    /* Warm-brown shadows (NOT cold black) — this is the single
       biggest "premium" lever. Black shadows look cheap on cream. */
    --lov-card-shadow: 0 4px 14px rgba(120, 88, 60, 0.06);
    --lov-card-shadow-hover: 0 14px 32px rgba(120, 88, 60, 0.12);
    --lov-section-shadow: 0 10px 30px rgba(120, 88, 60, 0.08);

    /* Section breathing room (Pass 4 will leverage this fully) */
    --lov-section-gap: clamp(48px, 7vw, 96px);

    /* Unified hover transition */
    --lov-transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Family themes grid responsive improvements */
.family-theme-grid[b-gamgjy5and] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .card-family-theme[b-gamgjy5and] {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile layout - account for fixed top bar */
@media (max-width: 1024px) {
    .app-layout[b-gamgjy5and] {
        padding-top: 64px;
        /* Account for topbar (56px) + small gap (8px) */
    }
}

main.container-v3[b-gamgjy5and] {
    padding-top: 0px;
}

/* FrontPage.razor.css - Scoped styles for the front page */

/* Base styles inherited from frontpage_v3.css but scoped */
[b-gamgjy5and] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

/* Logo Section - Always Visible */
[b-gamgjy5and] .logo-section {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: rgba(255, 244, 228, 0.95);
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-gamgjy5and] .main-logo-link {
    display: block;
    text-decoration: none;
}

[b-gamgjy5and] .main-logo {
    height: 40px;
    width: auto;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

/* Navigation Bar for Non-Authenticated Users */
[b-gamgjy5and] .main-nav-bar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 244, 228, 0.95);
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-gamgjy5and] .main-nav-bar a {
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    cursor: pointer;
}

[b-gamgjy5and] .main-nav-bar a:hover {
    color: #000;
}

/* App Layout */
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    /* Account for fixed logo */
    max-width: 100%;
    overflow-x: clip;
}

/* Header Styles */
[b-gamgjy5and] .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #FFF4E4;
    border-bottom: 1px solid #eee;
}

[b-gamgjy5and] .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.6em;
    font-weight: 700;
    color: #4F4A45;
}

[b-gamgjy5and] .header-logo {
    height: 40px;
    width: auto;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

[b-gamgjy5and] .main-nav {
    display: flex;
    align-items: center;
}

[b-gamgjy5and] .main-nav a {
    margin-right: 20px;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    cursor: pointer;
}

[b-gamgjy5and] .main-nav a:hover {
    color: #000;
}

/* Button Styles */
[b-gamgjy5and] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-gamgjy5and] .btn:hover {
    background-color: #FADDAA;
}

[b-gamgjy5and] .btn-login {
    background-color: #FBCFA8;
}

[b-gamgjy5and] .btn-primary {
    padding: 12px 25px;
    margin-top: 10px;
    background-color: #FBCFA8;
}

[b-gamgjy5and] .btn-secondary {
    padding: 8px 18px;
    margin-top: 10px;
}

/* Sidebar */
[b-gamgjy5and] .sidebar {
    width: 280px;
    background: #FAECDA;
    /* Light background for sidebar #fff2ec;*/
    padding: 1.5rem;
    border-right: 1px solid #d8b8ad;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-gamgjy5and] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-gamgjy5and] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-gamgjy5and] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-gamgjy5and] .sidebar a:hover {
    color: #000;
}

[b-gamgjy5and] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-gamgjy5and] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-gamgjy5and] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
    /*margin-left: 4em;*/
}

[b-gamgjy5and] .sidebar-logo {
    text-align: center;
}

[b-gamgjy5and] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    /* Remove any border */
    border-radius: 0 !important;
    /* Remove any border radius */
    box-shadow: none !important;
    /* Remove any box shadow */
    margin: 0;
    /* Remove any margin from general img rules */
}

/* Sidebar Bottom User Section */
[b-gamgjy5and] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-gamgjy5and] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-gamgjy5and] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
}

[b-gamgjy5and] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, 0.5);
}

[b-gamgjy5and] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text, #4F4A45);
}

[b-gamgjy5and] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

/* User Dropdown */
[b-gamgjy5and] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-gamgjy5and] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
    animation: fadeIn-b-gamgjy5and 0.2s ease-in-out;
}

@keyframes fadeIn-b-gamgjy5and {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[b-gamgjy5and] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

[b-gamgjy5and] .dropdown-item:hover {
    background-color: #f0dad3;
}


/* Toggle Button */
[b-gamgjy5and] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-gamgjy5and] .toggle-sidebar {
        display: none !important;
    }
}

/* Main Container */
[b-gamgjy5and] .container-v3 {
    flex: 1;
    width: min(100%, calc(100vw - 280px));
    max-width: min(1200px, calc(100vw - 280px));
    margin: 20px auto;
    margin-left: 280px;
    /* Always account for sidebar */
    padding: 0 20px;
    padding-bottom: 40px;
    /* ensures a clean transition before footer on all devices */
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

[b-gamgjy5and] .container-v3.sidebar-hidden {
    margin-left: 0;
    width: 100%;
    max-width: min(1200px, 100vw);
    /* Only on small screens */
}

/* When main header is present (non-authenticated users) */
[b-gamgjy5and] .main-header+* .container-v3 {
    margin-top: 120px;
    /* Account for fixed header */
}

/* Grid Areas */
[b-gamgjy5and] .hero-section {
    grid-area: hero;
}

[b-gamgjy5and] .relationship-selector-section {
    grid-area: relationship;
}

[b-gamgjy5and] .companion-section {
    grid-area: companion;
}

[b-gamgjy5and] .theme-showcase-section {
    grid-area: theme-showcase;
}

[b-gamgjy5and] .for-you-v3 {
    grid-area: for-you;
}

[b-gamgjy5and] .featured-top {
    grid-area: featured-top;
}

[b-gamgjy5and] .featured-bottom {
    grid-area: featured-bottom;
}

[b-gamgjy5and] .footer-bottom {
    grid-area: footer-bottom;
    grid-row: calc(var(--footer-row-start, 1));
}

/* Headings */
[b-gamgjy5and] h2,
[b-gamgjy5and] h3,
[b-gamgjy5and] h4,
[b-gamgjy5and] h5 {
    font-family: var(--font-sans) !important;
    font-weight: 700;
    color: #4F4A45;
    margin-top: 0;
}

[b-gamgjy5and] h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
}

[b-gamgjy5and] h3 {
    font-size: 1.7em;
    margin-bottom: 10px;
}

[b-gamgjy5and] h4 {
    font-size: 1.2em;
    margin-bottom: 8px;
}

[b-gamgjy5and] h5 {
    font-size: 1.1em;
    font-weight: 400;
    color: #555;
    margin-bottom: 5px;
}

[b-gamgjy5and] p {
    /* Pass 4a: bigger, warmer, more breathing. No more fine print. */
    margin-bottom: 15px;
    color: #4A3F35;
    font-size: 1rem;
    line-height: 1.6;
}

/* Large Card — unified via Pass 1 tokens */
[b-gamgjy5and] .large-card-v3 {
    background-color: var(--lov-card-surface, #FAF3E5);
    border-radius: var(--lov-card-radius, 18px);
    border: var(--lov-card-border, 1px solid rgba(120, 88, 60, 0.10));
    box-shadow: var(--lov-card-shadow, 0 4px 14px rgba(120, 88, 60, 0.06));
    overflow: hidden;
    display: flex;
    cursor: pointer;
    transition: var(--lov-transition, transform 0.3s ease, box-shadow 0.3s ease);
}

[b-gamgjy5and] .large-card-v3:hover {
    transform: translateY(-3px);
    box-shadow: var(--lov-card-shadow-hover, 0 14px 32px rgba(120, 88, 60, 0.12));
}

[b-gamgjy5and] .large-card-v3 .card-img {
    width: 50%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--lov-card-radius, 18px);
    margin: 0.8em;
}

[b-gamgjy5and] .large-card-v3 .card-content {
    width: 55%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[b-gamgjy5and] .large-card-v3 h3 {
    font-size: 1.5em;
}

[b-gamgjy5and] .large-card-v3 p {
    /* Pass 4a: scale up the headline card body */
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4A3F35;
}

/* Featured Grid */
[b-gamgjy5and] .featured-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

@media (max-width: 600px) {
    [b-gamgjy5and] .featured-grid-v3 {
        grid-template-columns: 1fr;
    }
}

/* Pass 4b: gentle invitation under the showcase */
[b-gamgjy5and] .showcase-explore-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

[b-gamgjy5and] .showcase-explore-more-link {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
    color: #8B6F4E;
    text-decoration: none;
    letter-spacing: 0.01em;
    padding: 6px 4px;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

[b-gamgjy5and] .showcase-explore-more-link:hover {
    color: #6E5A40;
    border-bottom-color: rgba(139, 111, 78, 0.4);
    transform: translateX(2px);
}

[b-gamgjy5and] .card-featured-v3 {
    border-radius: var(--lov-card-radius, 18px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: var(--lov-transition, transform 0.3s ease, box-shadow 0.3s ease);
}

[b-gamgjy5and] .card-featured-v3:hover {
    transform: translateY(-3px);
    box-shadow: var(--lov-card-shadow-hover, 0 14px 32px rgba(120, 88, 60, 0.12));
}

[b-gamgjy5and] .card-featured-v3 .card-img {
    width: 100%;
    border-radius: var(--lov-card-radius, 18px);
    object-fit: cover;
}

[b-gamgjy5and] .card-featured-v3 .card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

[b-gamgjy5and] .card-featured-v3 p {
    /* Pass 4a: lift card body from 0.9em to a readable 1rem. */
    font-size: 1rem;
    line-height: 1.55;
    color: #4A3F35;
    margin-bottom: 12px;
    flex-grow: 1;
}

[b-gamgjy5and] .card-featured-v3 .btn-secondary {
    margin-top: auto;
    align-self: flex-start;
}

/* Specific Card Styles */
[b-gamgjy5and] .card-legacy-v3 {
    background-color: #FAF3E5;
}

[b-gamgjy5and] .card-legacy-v3 .card-content {
    justify-content: space-between;
}

[b-gamgjy5and] .card-create-v3 {
    background-color: #FAF3E5;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
}

[b-gamgjy5and] .card-create-v3 .card-content {
    padding: 30px;
}

[b-gamgjy5and] .heart-icon {
    font-size: 3.5em;
    color: #F0C07A;
    margin-bottom: 15px;
}

[b-gamgjy5and] .card-create-v3 p {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    color: #4F4A45;
    font-weight: 700;
    margin: 0;
    flex-grow: 0;
}

[b-gamgjy5and] .card-placeholder {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Hero Section Styles */
[b-gamgjy5and] .hero-section {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 40px 80px 40px;
    text-align: left;
    margin-bottom: 20px;
}

/* ===== NEW HERO DESK SECTION ===== */
[b-gamgjy5and] .hero-section.hero-desk {
    position: relative;
    display: block;
    padding: 0;
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
    min-height: 400px;
}

[b-gamgjy5and] .hero-desk-image {
    position: relative;
    width: 100%;
}

[b-gamgjy5and] .hero-desk-image>img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Photo Frame Container - positioned over the frame in the illustration */
[b-gamgjy5and] .hero-frame-container {
    position: absolute;
    /* Calibrated position to overlay the photo frame in Hero16_9.png */
    --frame-right: 15.1%;
    --frame-top: 43.8%;
    --frame-width: 9.8%;
    --frame-height: 22.1%;
    --frame-rotation: 1.5deg;
    --frame-image-x: 50%;
    --frame-image-y: 43%;
    right: var(--frame-right);
    top: var(--frame-top);
    width: var(--frame-width);
    height: var(--frame-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(var(--frame-rotation));
    transform-origin: center;
    transition: all 0.6s ease-out;
}



/* Frame State: Awaiting Loved (logged in, no loved one yet) - subtle glow */
[b-gamgjy5and] .hero-frame-container.frame-awaiting {
    box-shadow: inset 0 0 20px rgba(255, 249, 235, 0.4);
    background: linear-gradient(135deg,
            rgba(255, 253, 248, 0.1) 0%,
            rgba(255, 244, 220, 0.15) 50%,
            rgba(255, 253, 248, 0.1) 100%);
}

[b-gamgjy5and] .hero-frame-container.frame-has-loved {
    overflow: hidden;
    border-radius: 3px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 238, 190, 0.62), rgba(224, 165, 75, 0.22) 70%),
        rgba(255, 229, 172, 0.44);
    box-shadow:
        inset 1px 1px 4px rgba(60, 40, 20, 0.55),
        0 0 0 1px rgba(98, 70, 45, 0.18);
}

[b-gamgjy5and] .hero-frame-container.frame-soft-glow {
    overflow: hidden;
    border-radius: 3px;
    background: transparent;
    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, 0.72),
        0 0 18px rgba(255, 225, 150, 0.42);
}

[b-gamgjy5and] .hero-frame-glow {
    position: absolute;
    inset: 4% 5% 5% 4%;
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 253, 242, 0.84) 34%, rgba(255, 228, 166, 0.34) 68%, rgba(179, 122, 58, 0.12) 100%),
        rgba(255, 244, 214, 0.62);
    box-shadow:
        inset 0 0 22px rgba(255, 255, 255, 0.84),
        inset 0 0 48px rgba(255, 221, 146, 0.4);
    filter: blur(0.2px);
    opacity: 0.96;
}

/* Frame State: Has Loved One - image visible */
[b-gamgjy5and] .hero-frame-container.frame-has-loved .hero-frame-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--frame-image-x) var(--frame-image-y);
    filter: sepia(0.2) contrast(1.08) brightness(0.96);
    mix-blend-mode: multiply;
    animation: heroImageFadeIn-b-gamgjy5and 700ms ease-out forwards;
}

[b-gamgjy5and] .hero-frame-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 3px;
    background: linear-gradient(135deg,
            rgba(255, 223, 168, 0.25) 0%,
            rgba(255, 255, 255, 0.02) 45%,
            rgba(40, 25, 15, 0.12) 100%);
}

[b-gamgjy5and] .hero-frame-container.frame-soft-glow .hero-frame-glass {
    opacity: 0.42;
}

@keyframes heroImageFadeIn-b-gamgjy5and {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Text Overlay - Positioned on the left side of the hero */
[b-gamgjy5and] .hero-text-overlay {
    position: absolute;
    left: 5%;
    top: 40%;
    transform: translateY(-50%);
    max-width: 620px;
    z-index: 1;
}

/* Eyebrow — brand-soul whisper above H1 */
[b-gamgjy5and] .hero-desk-eyebrow {
    font-family: var(--font-serif);
    font-size: 0.92em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
    color: #5A4A3A;
    line-height: 1.5;
    margin: 0 0 14px 0;
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(255, 249, 235, 0.6);
}

[b-gamgjy5and] .hero-desk-headline {
    font-family: var(--font-serif);
    /* Pass 3: stolen from the mockup — confidence over caution.
       Scales fluidly from 2.4rem (mobile) to 4.2rem (desktop). */
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    font-weight: 600;
    color: #5A4A3A;
    /* Tighter leading + a hair of tracking lifts the whole hero. */
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
    text-shadow: 0 1px 2px rgba(255, 249, 235, 0.5);
}

/* Manifest subtitle — emotional "why" below H1 */
[b-gamgjy5and] .hero-desk-manifest {
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 1.1em;
    font-style: normal;
    font-weight: 400;
    color: #6A5A4A;
    line-height: 1.6;
    margin: 0 0 28px 0;
    opacity: 0.9;
}

[b-gamgjy5and] .hero-desk-subline {
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 400;
    color: #5A4A3A;
    line-height: 1.55;
    margin: 0 0 28px 0;
    opacity: 0.88;
}

/* Trust micro-copy - builds confidence below CTAs */
[b-gamgjy5and] .hero-trust-microcopy {
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 0.85em;
    font-weight: 400;
    color: #7A6A5A;
    /* text-align: center; */
    margin-top: 8px;
    opacity: 0.75;
    letter-spacing: 0.02em;
}

/* Mobile-only text overlay - hidden on desktop */
[b-gamgjy5and] .hero-mobile-text-overlay {
    display: none;
}

/* Gentle CTA Group - within the glow, calm contrast */
[b-gamgjy5and] .hero-cta-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Hero primary CTA - shared gentle peach treatment for logged-out and logged-in states */
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
    padding: 16px 32px;
    font-size: 1.05em;
    font-weight: 600;
    background-color: rgba(251, 207, 168, 0.92);
    color: #4F4A45;
    border: 1px solid rgba(240, 192, 122, 0.6);
    border-radius: 28px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(251, 207, 168, 0.25);
    cursor: pointer;
}

[b-gamgjy5and] .btn-hero-logged-in-primary {
    white-space: nowrap;
}

[b-gamgjy5and] .btn-hero-gentle-primary:hover,
[b-gamgjy5and] .btn-hero-logged-in-primary:hover {
    background-color: rgba(240, 192, 122, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(251, 207, 168, 0.35);
}

[b-gamgjy5and] .btn-hero-gentle-primary:focus,
[b-gamgjy5and] .btn-hero-gentle-primary:active,
[b-gamgjy5and] .btn-hero-logged-in-primary:focus,
[b-gamgjy5and] .btn-hero-logged-in-primary:active {
    outline: none;
    background-color: rgba(240, 192, 122, 0.95);
    color: #4F4A45;
    border-color: rgba(240, 192, 122, 0.6);
    box-shadow: 0 0 0 3px rgba(251, 207, 168, 0.28), 0 3px 12px rgba(251, 207, 168, 0.25);
}

[b-gamgjy5and] .btn-hero-gentle-secondary {
    padding: 14px 28px;
    font-size: 1em;
    font-weight: 600;
    background-color: rgba(255, 252, 247, 0.92);
    color: #5A4A3A;
    border: 1.5px solid rgba(139, 115, 95, 0.35);
    border-radius: 28px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 115, 95, 0.08);
}

[b-gamgjy5and] .btn-hero-gentle-secondary:hover {
    background-color: rgba(245, 221, 195, 0.95);
    border-color: rgba(139, 115, 95, 0.5);
    transform: translateY(-1px);
}

[b-gamgjy5and] .btn-hero-gentle-secondary:focus,
[b-gamgjy5and] .btn-hero-gentle-secondary:active {
    outline: none;
    box-shadow: none;
}

/* Tagline above the headline for logged-in users */
[b-gamgjy5and] .hero-tagline {
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 0.95em;
    font-style: italic;
    font-weight: 400;
    color: #7A6A5A;
    line-height: 1.5;
    margin: 0 0 12px 0;
    opacity: 0.85;
}

/* Tertiary link below the CTA buttons */
[b-gamgjy5and] .hero-tertiary-link {
    display: inline-block;
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    color: #7A6A5A;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 12px;
    transition: color 0.2s ease;
    cursor: pointer;
}

[b-gamgjy5and] .hero-tertiary-link:hover {
    color: #5A4A3A;
}

/* "Senast: {LovedOneName}" caption positioned bottom-right of hero */
[b-gamgjy5and] .hero-last-active-caption {
    position: absolute;
    bottom: 8%;
    right: 16%;
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    color: #5A4A3A;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

/* ============================================
   Pass 3 — Floating Granny Note
   The mockup’s floating quote, dressed in LovOne clothes:
   handwritten Caveat on cream paper, slight tilt, warm shadow,
   a single quotation mark like a pinned watermark.
   ============================================ */
[b-gamgjy5and] .hero-floating-note {
    position: absolute;
    /* Upper-right of the desk image, gently overlapping toward the photo frame area
       but kept high enough to never collide with .hero-last-active-caption (bottom 8%). */
    top: 7%;
    right: 4%;
    width: clamp(190px, 19vw, 260px);
    padding: 22px 22px 18px 22px;
    background: linear-gradient(180deg, #FFFBF2 0%, #FAF1DD 100%);
    border-radius: var(--lov-card-radius-sm, 12px);
    border: 1px solid rgba(120, 88, 60, 0.10);
    box-shadow:
        0 14px 32px rgba(120, 88, 60, 0.18),
        0 2px 6px rgba(120, 88, 60, 0.10);
    transform: rotate(-2.5deg);
    transform-origin: top right;
    z-index: 4;
    pointer-events: none;          /* it’s decorative; never blocks the frame */
    -webkit-user-select: none;
    user-select: none;
    /* Soft entrance — the note settles after the hero loads. */
    animation: heroNoteSettle-b-gamgjy5and 0.9s ease-out 0.3s both;
}

[b-gamgjy5and] .hero-floating-note::before {
    /* A subtle paper-fold highlight along the top edge */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 28px;
    border-radius: var(--lov-card-radius-sm, 12px) var(--lov-card-radius-sm, 12px) 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    pointer-events: none;
}

[b-gamgjy5and] .hero-floating-note-quote-mark {
    position: absolute;
    top: -2px;
    left: 14px;
    font-family: var(--font-serif);
    font-size: 3.2rem;
    line-height: 1;
    color: rgba(180, 130, 70, 0.35);
    pointer-events: none;
}

[b-gamgjy5and] .hero-floating-note-text {
    font-family: var(--font-handwriting, 'Caveat'), 'Segoe Script', cursive;
    font-size: 1.32rem;
    font-weight: 500;
    line-height: 1.32;
    color: #5A4233;
    margin: 6px 0 10px 0;
    /* a tiny optical lift so the cursive feels handwritten, not printed */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

[b-gamgjy5and] .hero-floating-note-signature {
    display: block;
    font-family: var(--font-handwriting, 'Caveat'), 'Segoe Script', cursive;
    font-size: 1.05rem;
    color: #8A6E55;
    text-align: right;
    letter-spacing: 0.02em;
}

@keyframes heroNoteSettle-b-gamgjy5and {
    from {
        opacity: 0;
        transform: rotate(0deg) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: rotate(-2.5deg) translateY(0);
    }
}

/* Hide the floating note on small screens — the hero gets crowded
   and the message is already conveyed by the body copy below. */
@media (max-width: 900px) {
    [b-gamgjy5and] .hero-floating-note {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-gamgjy5and] .hero-floating-note {
        animation: none;
    }
}

/* ===== LEGACY HERO STYLES (kept for compatibility) ===== */
[b-gamgjy5and] .hero-illustration {
    flex: 0 0 320px;
    max-width: 320px;
    filter: drop-shadow(0 12px 30px rgba(102, 72, 59, 0.25));
    position: relative;
    transform: translateX(8%);
}

[b-gamgjy5and] .hero-illustration img {
    width: 100%;
    height: auto;
}

[b-gamgjy5and] .hero-content {
    max-width: 620px;
    margin: 0;
}

[b-gamgjy5and] .hero-headline {
    font-family: var(--font-sans) !important;
    font-size: 2.5em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 20px;
    line-height: 1.2;
}

[b-gamgjy5and] .hero-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 35px;
    line-height: 1.4;
}

[b-gamgjy5and] .hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

[b-gamgjy5and] .btn-hero-primary {
    padding: 15px 35px;
    font-size: 1.05em;
    font-weight: 700;
    background-color: #FBCFA8;
    color: #4F4A45;
    border: 2px solid #F0C07A;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(251, 207, 168, 0.3);
}

[b-gamgjy5and] .btn-hero-primary:hover {
    background-color: #F0C07A;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 207, 168, 0.4);
}

[b-gamgjy5and] .btn-hero-secondary {
    padding: 15px 35px;
    font-size: 1.1em;
    font-weight: 700;
    background-color: transparent;
    color: #4F4A45;
    border: 2px solid #EADDC0;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-decoration: none;
}

[b-gamgjy5and] .btn-hero-secondary:hover {
    background-color: #F5DDC3;
    border-color: #EADDC0;
    transform: translateY(-2px);
}

[b-gamgjy5and] .btn-hero-secondary:focus,
[b-gamgjy5and] .btn-hero-secondary:active,
[b-gamgjy5and] .btn-hero-secondary:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #EADDC0;
}

/* Companion Section Styles */
[b-gamgjy5and] .companion-section {
    text-align: center;
    padding: 30px 20px;
    background-color: rgba(255, 244, 228, 0.5);
    border-radius: 15px;
    border: 1px solid #f0dad3;
    margin-bottom: 20px;
}

[b-gamgjy5and] .companion-text {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
}

[b-gamgjy5and] .btn-companion {
    padding: 12px 30px;
    font-size: 1em;
    font-weight: 600;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
    border-radius: 25px;
    transition: all 0.3s ease;
}

[b-gamgjy5and] .btn-companion:hover {
    background-color: #FADDAA;
    transform: translateY(-1px);
}

/* Theme Showcase Section — unified via Pass 1 tokens */
[b-gamgjy5and] .theme-showcase-section {
    background: linear-gradient(135deg, #FAF3E5 0%, #FFF4E4 100%);
    border-radius: var(--lov-section-radius, 24px);
    padding: 40px;
    box-shadow: var(--lov-section-shadow, 0 10px 30px rgba(120, 88, 60, 0.08));
    border: var(--lov-section-border, 1px solid rgba(120, 88, 60, 0.10));
    margin-bottom: 20px;
}

/* Family Themes Section — unified via Pass 1 tokens */
.family-theme-section[b-gamgjy5and] {
    background: linear-gradient(135deg, #FAF3E5 0%, #FFF4E4 100%);
    border-radius: var(--lov-section-radius, 24px);
    padding: 34px 36px 36px 36px;
    box-shadow: var(--lov-section-shadow, 0 10px 30px rgba(120, 88, 60, 0.08));
    border: var(--lov-section-border, 1px solid rgba(120, 88, 60, 0.10));
    margin-bottom: 16px;
}

.family-theme-container[b-gamgjy5and] {
    max-width: 1100px;
    margin: 0 auto;
}

.family-theme-headline[b-gamgjy5and] {
    font-family: var(--font-sans) !important;
    font-size: 1.5em;
    font-weight: 600;
    color: #4F4A45;
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 0.01em;
}

.family-theme-grid[b-gamgjy5and] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.card-family-theme[b-gamgjy5and] {
    background-color: var(--lov-card-surface, #FAF3E5);
    border-radius: var(--lov-card-radius, 18px);
    border: var(--lov-card-border, 1px solid rgba(120, 88, 60, 0.10));
    box-shadow: var(--lov-card-shadow, 0 4px 14px rgba(120, 88, 60, 0.06));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--lov-transition, transform 0.3s ease, box-shadow 0.3s ease);
    cursor: pointer;
    width: 250px;
    min-width: 220px;
    max-width: 300px;
    min-height: 405px;
    margin-bottom: 0;
}

.card-family-theme:hover[b-gamgjy5and] {
    transform: translateY(-3px);
    box-shadow: var(--lov-card-shadow-hover, 0 14px 32px rgba(120, 88, 60, 0.12));
}

.card-family-theme .card-img[b-gamgjy5and] {
    width: 100%;

    object-fit: cover;
    border-radius: var(--lov-card-radius, 18px) var(--lov-card-radius, 18px) 0 0;
    display: block;
}

.card-family-theme .card-content[b-gamgjy5and] {
    padding: 22px 18px 20px 18px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card-family-theme h3[b-gamgjy5and] {
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-family-theme p[b-gamgjy5and] {
    /* Pass 4a: warmer color, more readable size */
    font-size: 1rem;
    line-height: 1.6;
    color: #4A3F35;
    margin-bottom: 18px;
    flex-grow: 1;
}

.card-family-theme .btn-secondary[b-gamgjy5and] {
    align-self: flex-start;
    margin-top: auto;
    min-width: 100px;
}

@media (max-width: 1024px) {
    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .card-family-theme[b-gamgjy5and] {
        width: 100%;
        min-width: 180px;
        max-width: 320px;
    }

    .family-theme-section[b-gamgjy5and] {
        padding: 30px 18px;
    }
}

@media (max-width: 600px) {
    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .card-family-theme[b-gamgjy5and] {
        width: 100%;
        min-width: 160px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .family-theme-section[b-gamgjy5and] {
        padding: 18px 12px;
        margin: 0 12px;
    }

    .family-theme-headline[b-gamgjy5and] {
        font-size: 1.15em;
        margin-bottom: 18px;
    }
}

/* ============================================
   Oracle Chamber Section — unified via Pass 1 tokens
   ============================================ */
.oracle-section[b-gamgjy5and] {
    background: linear-gradient(135deg, #FAF3E5 0%, #FFF4E4 100%);
    border-radius: var(--lov-section-radius, 24px);
    padding: 50px 48px;
    box-shadow: var(--lov-section-shadow, 0 10px 30px rgba(120, 88, 60, 0.08));
    border: var(--lov-section-border, 1px solid rgba(120, 88, 60, 0.10));
    margin-bottom: 20px;
    overflow: hidden;
}

.oracle-section-inner[b-gamgjy5and] {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.oracle-text-container[b-gamgjy5and] {
    flex: 1;
    min-width: 0;
}

.oracle-headline[b-gamgjy5and] {
    font-family: var(--font-serif) !important;
    font-size: 2.2em;
    font-weight: 700;
    color: #3A3228;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

/* Pass 4c: a soft whisper that bridges family-warmth to historical wisdom. */
.oracle-subheadline[b-gamgjy5and] {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-style: italic;
    font-weight: 400;
    color: #7A6A55;
    line-height: 1.5;
    margin: 0 0 20px 0;
    max-width: 480px;
    letter-spacing: 0.01em;
}

.oracle-body[b-gamgjy5and] {
    font-size: 1.05rem;
    color: #5A5248;
    line-height: 1.7;
    margin: 0 0 24px 0;
    max-width: 480px;
}

.oracle-features[b-gamgjy5and] {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}

.oracle-features li[b-gamgjy5and] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 1.02rem;
    color: #4F4A45;
    padding: 5px 0;
    line-height: 1.5;
}

.oracle-check[b-gamgjy5and] {
    color: #B08D6E;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.oracle-cta-btn[b-gamgjy5and] {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 28px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(166, 123, 80, 0.3);
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.oracle-cta-btn:hover[b-gamgjy5and] {
    background: linear-gradient(135deg, #D4AA7C 0%, #B68B60 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(166, 123, 80, 0.4);
    color: #fff;
    text-decoration: none;
}

.oracle-secondary-link[b-gamgjy5and] {
    margin: 14px 0 0 0;
    font-size: 0.92rem;
    font-style: italic;
    color: #8B7355;
}

.oracle-secondary-dot[b-gamgjy5and] {
    margin-right: 4px;
}

.oracle-secondary-link a[b-gamgjy5and] {
    color: #8B7355;
    text-decoration: none;
    transition: color 0.2s ease;
}

.oracle-secondary-link a:hover[b-gamgjy5and] {
    color: #6E5A40;
}

/* Oracle Cards - Fanned layout */
.oracle-cards-container[b-gamgjy5and] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    width: 480px;
    height: 340px;
    flex-shrink: 0;
}

.oracle-card[b-gamgjy5and] {
    position: absolute;
    width: 165px;
    background: #FDF8F0;
    /* Postcards keep the smaller radius — intentional, not a bug. */
    border-radius: var(--lov-card-radius-sm, 12px);
    /* Warm-brown shadow replaces the cold black tint. */
    box-shadow: 0 8px 22px rgba(120, 88, 60, 0.14);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.3s ease;
    border: 2px solid rgba(220, 200, 170, 0.5);
}

.oracle-card img[b-gamgjy5and] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.oracle-card-label[b-gamgjy5and] {
    padding: 10px 12px;
    text-align: center;
    background: linear-gradient(180deg, #FDF8F0 0%, #F5EDE0 100%);
}

.oracle-card-name[b-gamgjy5and] {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: #3A3228;
}

.oracle-card-title[b-gamgjy5and] {
    display: block;
    font-size: 0.78rem;
    color: #8B7355;
    font-style: italic;
    margin-top: 1px;
}

/* Card positions - Fanned spread */
.oracle-card-left[b-gamgjy5and] {
    left: 0;
    bottom: 20px;
    transform: rotate(-8deg);
    z-index: 1;
}

.oracle-card-center[b-gamgjy5and] {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) rotate(0deg);
    z-index: 3;
}

.oracle-card-right[b-gamgjy5and] {
    right: 0;
    bottom: 10px;
    transform: rotate(6deg);
    z-index: 2;
}

/* Hover effects */
.oracle-card:hover[b-gamgjy5and] {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow: 0 16px 36px rgba(120, 88, 60, 0.20);
    z-index: 10;
}

.oracle-card-center:hover[b-gamgjy5and] {
    transform: translateX(-50%) translateY(-6px) scale(1.03);
}

/* Tablet */
@media (max-width: 1024px) {
    .oracle-section[b-gamgjy5and] {
        padding: 36px 28px;
    }

    .oracle-section-inner[b-gamgjy5and] {
        gap: 32px;
    }

    .oracle-headline[b-gamgjy5and] {
        font-size: 1.8em;
    }

    .oracle-cards-container[b-gamgjy5and] {
        width: 320px;
        height: 290px;
    }

    .oracle-card[b-gamgjy5and] {
        width: 140px;
    }

    .oracle-card img[b-gamgjy5and] {
        height: 170px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .oracle-section[b-gamgjy5and] {
        padding: 28px 18px;
        margin: 0 12px 20px;
    }

    .oracle-section-inner[b-gamgjy5and] {
        flex-direction: column;
        gap: 28px;
        text-align: center;
    }

    .oracle-headline[b-gamgjy5and] {
        font-size: 1.6em;
    }

    .oracle-body[b-gamgjy5and] {
        max-width: 100%;
    }

    .oracle-features li[b-gamgjy5and] {
        justify-content: center;
    }

    .oracle-cta-btn[b-gamgjy5and] {
        display: block;
        text-align: center;
        max-width: 300px;
        margin: 0 auto;
    }

    .oracle-secondary-link[b-gamgjy5and] {
        text-align: center;
    }

    .oracle-cards-container[b-gamgjy5and] {
        width: 320px;
        height: 260px;
    }

    .oracle-card[b-gamgjy5and] {
        width: 130px;
    }

    .oracle-card img[b-gamgjy5and] {
        height: 155px;
    }

    .oracle-card-name[b-gamgjy5and] {
        font-size: 0.85rem;
    }

    .oracle-card-title[b-gamgjy5and] {
        font-size: 0.72rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .oracle-section[b-gamgjy5and] {
        padding: 22px 14px;
    }

    .oracle-headline[b-gamgjy5and] {
        font-size: 1.4em;
    }

    .oracle-cards-container[b-gamgjy5and] {
        width: 280px;
        height: 230px;
    }

    .oracle-card[b-gamgjy5and] {
        width: 115px;
    }

    .oracle-card img[b-gamgjy5and] {
        height: 135px;
    }
}

[b-gamgjy5and] .showcase-header {
    text-align: center;
    margin-bottom: 40px;
}

[b-gamgjy5and] .showcase-main-headline {
    font-family: var(--font-sans) !important;
    font-size: 1.8em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

[b-gamgjy5and] .showcase-subtitle {
    font-size: 1.1em;
    color: #666;
    margin: 0;
    line-height: 1.4;
    max-width: 600px;
    margin: 0 auto;
}

[b-gamgjy5and] .showcase-content {
    display: grid;
    grid-template-areas:
        "for-you featured-top"
        "featured-bottom featured-top";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 40px;
}

/* Cards Headline Section Styles - Legacy (can be removed if not used elsewhere) */
[b-gamgjy5and] .cards-headline-section {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 10px;
}

[b-gamgjy5and] .cards-main-headline {
    font-family: var(--font-sans) !important;
    font-size: 1.9em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0;
    line-height: 1.3;
}

/* Relationship Selector Section Styles */
[b-gamgjy5and] .relationship-selector-section {
    text-align: center;
    padding: 40px 20px;
    /*background-color: rgba(250, 243, 229, 0.7);
    border-radius: 15px;
    border: 1px solid #f0dad3;*/
    margin-bottom: 20px;
}

[b-gamgjy5and] .relationship-selector-title {
    font-family: var(--font-sans) !important;
    font-size: 1.8em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 30px;
}

[b-gamgjy5and] .relationship-icons {
    display: flex;
    justify-content: center;
    gap: 38px;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

[b-gamgjy5and] .relationship-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px;
    border-radius: 15px;
    min-width: 110px;
}

[b-gamgjy5and] .relationship-icon:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 244, 228, 0.8);
}

[b-gamgjy5and] .icon-circle {
    width: 84px;
    height: 84px;
    background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(251, 207, 168, 0.35);
    transition: all 0.3s ease;
}

[b-gamgjy5and] .relationship-icon:hover .icon-circle {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(251, 207, 168, 0.45);
}

[b-gamgjy5and] .icon-circle i {
    font-size: 2.1em;
    color: #4F4A45;
}

[b-gamgjy5and] .icon-label {
    font-family: var(--font-sans) !important;
    font-size: 1rem;
    font-weight: 600;
    color: #4F4A45;
    text-align: center;
    letter-spacing: 0.01em;
}

/* Sidebar Overlay */
.sidebar-overlay[b-gamgjy5and] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
}

.sidebar-overlay.hidden[b-gamgjy5and] {
    display: none;
}

/* --- New Footer Styles --- */

[b-gamgjy5and] .main-footer {
    /* This creates the full-width "floor" for the page */
    /* width: calc(100% - 280px);  Subtract sidebar width from total width */
    margin-left: 280px;
    /* Start where main content starts */
    background-color: #FAF3E5;
    /* Match the warm card background color */
    padding: 60px 0 30px 0;
    margin-top: 80px;
    /* Space above the footer */
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    /* Remove grid-area, as the footer is no longer part of the content grid */
}


[b-gamgjy5and] .main-footer.sidebar-hidden {
    margin-left: 0;
    /* Remove left margin when sidebar is hidden */
    width: 100%;
}



/* A container to keep the footer content aligned with the main page content */
[b-gamgjy5and] .footer-container {
    max-width: 1200px;
    margin: 30px auto;

    padding: 0 20px;
    transition: margin-left 0.3s ease;
}

/* When sidebar is hidden, use full width container */
[b-gamgjy5and] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
    /* Center when sidebar is hidden */
}


/* 1. Brand Section */
[b-gamgjy5and] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-gamgjy5and] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-gamgjy5and] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* 2. Navigation Links Section */
[b-gamgjy5and] .footer-nav-links {
    /* Use Flexbox to group and center the items */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Allows wrapping on smaller screens */
    /* The 'gap' now controls the space BETWEEN the columns */
    gap: 80px;
    /* Adjust this value to your liking (e.g., 60px, 100px) */

    margin-bottom: 40px;
}

[b-gamgjy5and] .footer-section {
    padding: 0 15px;
    /* Adds some space for smaller screens */
}

[b-gamgjy5and] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-gamgjy5and] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-gamgjy5and] .footer-section ul li {
    margin-bottom: 10px;
}

[b-gamgjy5and] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-gamgjy5and] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

/* 3. Bottom Bar (Utilities & Legal) */
[b-gamgjy5and] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 20px;
}

[b-gamgjy5and] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-gamgjy5and] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-gamgjy5and] .footer-languages a:hover,
[b-gamgjy5and] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

/* NEW: Wrapper for the right-aligned text */
[b-gamgjy5and] .footer-legal-origin {
    text-align: right;
}

/* NEW: Style for the "Made by" line */
[b-gamgjy5and] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
    /* Add a little space below it */
}


[b-gamgjy5and] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    /* Remove default paragraph margins */
    text-align: left;
    /* Ensure it stays right-aligned */
}

/* Responsive Styles */
/* Treat tablets (<=1024px) as mobile-view with top bar and hidden sidebar */
@media (max-width: 1024px) {

    /* Show mobile top bar + hamburger on tablet/phone */
    [b-gamgjy5and] .mobile-top-bar {
        display: flex !important;
    }

    [b-gamgjy5and] .hero-section {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    [b-gamgjy5and] .hero-content {
        max-width: 620px;
        text-align: center;
    }

    [b-gamgjy5and] .hero-buttons {
        justify-content: center;
    }

    [b-gamgjy5and] .hero-illustration {
        max-width: 240px;
        transform: none;
        margin: 0 auto;
    }

    /* New Hero Desk responsive styles for tablet */
    [b-gamgjy5and] .hero-section.hero-desk {
        min-height: auto;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    /* Tablet hero image with gradient fade */
    [b-gamgjy5and] .hero-desk-image {
        position: relative;
        width: 100%;
        height: 380px;
        overflow: hidden;
    }

    [b-gamgjy5and] .hero-desk-image>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 60% center;
    }

    /* Gradient overlay for tablet */
    [b-gamgjy5and] .hero-desk-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 35%;
        background: linear-gradient(to bottom, rgba(250, 236, 218, 0) 0%, rgba(250, 236, 218, 0.7) 50%, #FAECDA 100%);
        pointer-events: none;
    }

    [b-gamgjy5and] .hero-text-overlay {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: 100%;
        padding: 0 30px 40px 30px;
        text-align: center;
        background: transparent;
        margin-top: -40px;
        z-index: 5;
    }

    [b-gamgjy5and] .hero-desk-eyebrow {
        font-size: 0.85em;
        text-align: center;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: 1.8em;
    }

    [b-gamgjy5and] .hero-desk-manifest {
        font-size: 1em;
        text-align: center;
    }

    [b-gamgjy5and] .hero-desk-subline {
        font-size: 1.05em;
    }

    [b-gamgjy5and] .hero-trust-microcopy {
        text-align: center;
        margin-top: 14px;
    }

    [b-gamgjy5and] .hero-cta-group {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    [b-gamgjy5and] .btn-hero-gentle-primary,
    [b-gamgjy5and] .btn-hero-gentle-secondary {
        width: auto;
    }

    [b-gamgjy5and] .hero-frame-container {
        /* Adjust frame position for tablet aspect ratio */
        --frame-right: 14%;
        --frame-top: 45%;
        --frame-width: 10%;
        --frame-height: 22%;
    }

    /* Hide the floating desktop toggle on mobile-view; mobile top bar provides hamburger */
    [b-gamgjy5and] .toggle-sidebar {
        display: none !important;
    }

    /* Use mobile top bar spacing */
    [b-gamgjy5and] .app-layout,
    .app-layout[b-gamgjy5and] {
        padding-top: 60px;
        /* Account for mobile top bar height */
    }

    /* Collapse main grid to single column and remove reserved sidebar margin */
    [b-gamgjy5and] .container-v3 {
        grid-template-areas:
            "hero"
            "relationship"
            "companion"
            "theme-showcase"
            "footer-bottom";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        margin-left: 0 !important;
        margin-top: 0px;
        /* Adjust top margin for mobile/tablet */
    }

    /* Sidebar behaves like off-canvas beneath the top bar */
    [b-gamgjy5and] .sidebar {
        top: 60px;
        /* Start below the mobile top bar */
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [b-gamgjy5and] .sidebar.visible {
        transform: translateX(0);
    }

    [b-gamgjy5and] .sidebar.hidden {
        transform: translateX(-100%);
    }

    /* Force footer to full width when in mobile-view */
    [b-gamgjy5and] .main-footer {
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {

    /* Hide the old floating toggle button only on phones; keep it visible on tablets like iPad Air (820px) */
    [b-gamgjy5and] .toggle-sidebar {
        display: none;
    }

    /* Adjust app layout for mobile top bar */
    [b-gamgjy5and] .app-layout,
    .app-layout[b-gamgjy5and] {
        padding-top: 60px;
        /* Account for mobile top bar height */
        overflow-x: hidden;
    }

    [b-gamgjy5and] main.container-v3 {
        padding: 0 var(--mobile-page-margin);
        /* Let hero handle its own margins */
    }

    [b-gamgjy5and] .container-v3 {
        grid-template-areas:
            "hero"
            "relationship"
            "companion"
            "theme-showcase"
            "footer-bottom";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        margin-left: 0 !important;
        margin-top: 10px;
        /* Small gap between topbar and hero card */
        padding-top: 0px;
    }

    /* Adjust theme showcase for mobile */
    [b-gamgjy5and] .theme-showcase-section {
        padding: 30px 20px;
        margin: 0 12px;
    }

    [b-gamgjy5and] .showcase-header {
        margin-bottom: 30px;
    }

    [b-gamgjy5and] .showcase-main-headline {
        font-size: 1.8em;
    }

    [b-gamgjy5and] .showcase-subtitle {
        font-size: 1em;
    }

    [b-gamgjy5and] .showcase-content {
        grid-template-areas:
            "for-you"
            "featured-top"
            "featured-bottom";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 30px;
    }

    /* Adjust sidebar for mobile with top bar */
    [b-gamgjy5and] .sidebar {
        top: 60px;
        /* Start below the mobile top bar */
        height: calc(100vh - 60px);
        /* Adjust height */
    }

    /* Adjust hero section for mobile */
    [b-gamgjy5and] .hero-section {
        padding: 40px 20px;
        flex-direction: column;
        text-align: center;
    }

    [b-gamgjy5and] .hero-headline {
        font-size: 2em;
    }

    [b-gamgjy5and] .hero-subtitle {
        font-size: 1.1em;
    }

    [b-gamgjy5and] .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    [b-gamgjy5and] .hero-illustration {
        max-width: 300px;
        flex: none
    }

    [b-gamgjy5and] .btn-hero-primary,
    [b-gamgjy5and] .btn-hero-secondary {
        padding: 12px 30px;
        font-size: 1em;
        width: 100%;
        max-width: 280px;
    }

    /* New Hero Desk responsive styles for mobile - Card UI */
    [b-gamgjy5and] .hero-section.hero-desk {
        border-radius: 20px;
        /* Rounded corners for card feel */
        margin: 0 16px;
        /* Inset from edges - creates "card on page" look */
        width: auto;
        /* Let margins control width */
        display: flex;
        flex-direction: column;
        padding: 0;
        min-height: auto;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        /* Subtle shadow for physical card feel */
        overflow: hidden;
        /* Ensure content respects rounded corners */
        background: #FAF3E5;
        /* Card background - slightly different from page for definition */
    }

    /* Mobile hero image container with gradient fade */
    [b-gamgjy5and] .hero-desk-image {
        position: relative;
        width: 100%;
        height: 340px;
        overflow: hidden;
    }

    [b-gamgjy5and] .hero-desk-image>img {
        border-radius: 20px 20px 0 0;
        /* Rounded top corners only */
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Focus on the candle and frame (right side of image) */
        object-position: 70% center;
    }

    /* Gradient overlay - melts image into card background */
    [b-gamgjy5and] .hero-desk-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(to bottom, rgba(250, 243, 229, 0) 0%, rgba(250, 243, 229, 0.85) 60%, #FAF3E5 100%);
        pointer-events: none;
        /* No border-radius needed - contained within parent's overflow:hidden */
    }

    [b-gamgjy5and] .hero-text-overlay {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: 100%;
        padding: 0 24px 30px 24px;
        text-align: center;
        background: #FAF3E5;
        /* Match card background */
        margin-top: -30px;
        /* Pull text up into the gradient fade */
        z-index: 5;
    }

    [b-gamgjy5and] .hero-desk-eyebrow {
        font-size: 0.82em;
        text-align: center;
        margin-bottom: 10px;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: 1.6em;
        margin-bottom: 12px;
    }

    [b-gamgjy5and] .hero-desk-manifest {
        font-size: 0.95em;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 24px;
    }

    [b-gamgjy5and] .hero-desk-subline {
        font-size: 1em;
        line-height: 1.45;
        margin-bottom: 24px;
        opacity: 0.9;
    }

    [b-gamgjy5and] .hero-trust-microcopy {
        font-size: 0.8em;
        text-align: center;
        margin-top: 14px;
        width: 100%;
        max-width: 300px;
    }

    [b-gamgjy5and] .hero-cta-group {
        gap: 12px;
        width: 100%;
        align-items: center;
    }

    [b-gamgjy5and] .btn-hero-gentle-primary {
        width: 100%;
        max-width: 300px;
        text-align: center;
        padding: 16px 28px;
    }

    [b-gamgjy5and] .btn-hero-gentle-secondary {
        width: 100%;
        max-width: 300px;
        text-align: center;
        padding: 14px 24px;
        background-color: transparent;
        border: 1.5px solid rgba(139, 115, 95, 0.4);
        box-shadow: none;
    }

    [b-gamgjy5and] .btn-hero-gentle-secondary:hover {
        background-color: rgba(255, 252, 247, 0.6);
    }



    /* Adjust relationship selector for mobile */
    [b-gamgjy5and] .relationship-selector-section {
        padding: 30px 15px;
    }

    [b-gamgjy5and] .relationship-selector-title {
        font-size: 1.6em;
        margin-bottom: 25px;
    }

    [b-gamgjy5and] .relationship-icons {
        gap: 20px;
        justify-content: center;
    }

    [b-gamgjy5and] .relationship-icon {
        min-width: 80px;
        padding: 10px;
    }

    [b-gamgjy5and] .icon-circle {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

    [b-gamgjy5and] .icon-circle i {
        font-size: 1.5em;
    }

    [b-gamgjy5and] .icon-label {
        font-size: 0.85em;
    }

    /* Adjust companion section for mobile */
    [b-gamgjy5and] .companion-section {
        padding: 25px 15px;
    }

    [b-gamgjy5and] .companion-text {
        font-size: 1em;
    }

    /* Force footer to full width on mobile */
    [b-gamgjy5and] .main-footer {
        margin-left: 0 !important;
    }

    [b-gamgjy5and] .large-card-v3 {
        flex-direction: column;
    }

    [b-gamgjy5and] .large-card-v3 .card-img {
        width: 100%;
        border-radius: 15px 15px 0 0;
        margin: 0;
    }

    [b-gamgjy5and] .large-card-v3 .card-content {
        width: auto;
        padding: 25px;
    }

    /* On mobile, sidebar is hidden by default */
    [b-gamgjy5and] .sidebar {
        transform: translateX(-100%);
    }

    /* Show sidebar when it has visible class AND we're on small screen */
    [b-gamgjy5and] .sidebar.visible {
        transform: translateX(0);
    }

    /* Override the hidden class on mobile - we use transform instead */
    [b-gamgjy5and] .sidebar.hidden {
        transform: translateX(-100%);
    }

    [b-gamgjy5and] .toggle-sidebar {
        left: 1rem;
        z-index: 200;
        /* Make sure toggle button is above everything */
    }
}

/* ======= ULTRA-SMALL MOBILE POLISH (≤640px) ======= */
/* Premium mobile experience for iPhone-sized screens */
@media (max-width: 640px) {

    /* Tighter margins for very small screens */
    [b-gamgjy5and] .hero-section.hero-desk {
        margin: 0 auto;
        /* Slightly smaller margins on tiny phones */
    }

    /* === MOBILE TEXT OVERLAY (inside hero image) - Hidden by default === */
    [b-gamgjy5and] .hero-mobile-text-overlay {
        display: none;
    }

    /* === LOGGED-IN WITH LOVED ONES: Text inside image, buttons below === */
    /* Show the mobile text overlay inside the image */
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay {
        display: block;
        position: absolute;
        left: 8%;
        right: 20px;
        top: 10%;
        z-index: 1;
        text-align: left !important;
    }

    /* Style the mobile overlay text */
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay .hero-tagline {
        font-size: 0.85em;
        opacity: 0.85;
        margin-bottom: 8px;
        font-style: italic;
        text-align: left !important;
        padding-left: 0;
        margin-left: 0;
        margin-right: auto;
    }

    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay .hero-desk-headline {
        font-size: 2em;
        line-height: 1.1;
        margin-bottom: 10px;
        color: #4A3728;
        text-align: left !important;
        margin-left: 0;
        margin-right: auto;
        /* Force line break after comma for "Välkommen hem, Göran." */
        max-width: 310px;
    }

    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay .hero-desk-subline {
        font-size: 0.9em;
        line-height: 1.4;
        opacity: 0.85;
        color: #5A4738;
        text-align: left !important;
        margin-left: 0;
        margin-right: auto;
        /* Shorter on mobile - limit width */
        max-width: 220px;
    }

    /* Hide the text (tagline, headline, subline) in hero-text-overlay on mobile for logged-in with loved ones */
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay>.hero-tagline,
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay>.hero-desk-headline,
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay>.hero-desk-subline {
        display: none;
    }

    /* Keep buttons and microcopy visible below the image */
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay {
        position: relative;
        margin-top: -20px;
        padding: 0 20px 20px 20px;
        z-index: 5;
    }

    /* Hide last-active caption on mobile (conflicts with overlay) */
    [b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-last-active-caption {
        display: none;
    }

    /* === LOGGED-OUT / NO LOVED ONES: Keep text below image === */
    /* 1) CTA buttons: Stack vertically, full-width, thumb-friendly */
    [b-gamgjy5and] .hero-cta-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    [b-gamgjy5and] .btn-hero-gentle-primary,
    [b-gamgjy5and] .btn-hero-gentle-secondary,
    [b-gamgjy5and] .btn-hero-logged-in-primary {
        width: 100%;
        max-width: 100%;
        padding: 14px 16px;
        font-size: 1em;
        white-space: nowrap;
        /* Prevent ugly text wrapping */
    }

    /* 2) Default: Pull text up into the gradient fade - for logged-out users */
    [b-gamgjy5and] .hero-text-overlay {
        margin-top: -24px;
        padding-top: 0;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Eyebrow scales down on small mobile */
    [b-gamgjy5and] .hero-desk-eyebrow {
        font-size: 0.78em;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* 3) Tighter headline line-height for elegance */
    [b-gamgjy5and] .hero-desk-headline {
        line-height: 1.12;
        font-size: 1.5em;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Manifest constrained on small mobile */
    [b-gamgjy5and] .hero-desk-manifest {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 0.92em;
        line-height: 1.45;
    }

    /* 4) Center and constrain subline width */
    [b-gamgjy5and] .hero-desk-subline {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        line-height: 1.4;
    }

    /* 5) Trust micro-copy constrained width */
    [b-gamgjy5and] .hero-trust-microcopy {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.78em;
    }
}

@media (max-width: 400px) {

    /* Tighter margins for very small screens */
    [b-gamgjy5and] .hero-section.hero-desk {
        margin: 0 12px;
        /* Slightly smaller margins on tiny phones */
    }

}

/* Tablet-only tweak: make footer container a bit wider to visually align with content at ~iPad widths */
@media (min-width: 768px) and (max-width: 1024px) {

    [b-gamgjy5and] .hero-frame-container {
        /* Adjust frame position for mobile - larger and more prominent */
        --frame-right: 14%;
        --frame-top: 44%;
        --frame-width: 10%;
        --frame-height: 25%;
    }


    /* Keep sidebar hidden on tablets while keeping the toggle icon visible */
    [b-gamgjy5and] .sidebar {
        transform: translateX(-100%);
        /* hide off-canvas */
        top: 60px;
        /* align with mobile top bar if present */
        height: calc(100vh - 60px);
    }

    /* Ensure main content doesn't reserve left margin for hidden sidebar */
    [b-gamgjy5and] .container-v3 {
        margin-left: 0 !important;
    }

    /* Keep the desktop toggle button visible on tablets */
    [b-gamgjy5and] .toggle-sidebar {
        display: inline-block !important;
        left: 1rem;
        z-index: 200;
    }

    /* Footer tablet tweaks (existing) */
    [b-gamgjy5and] .main-footer .footer-container {
        max-width: 1100px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    [b-gamgjy5and] .main-footer {
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

/* --- Responsive Adjustments for Footer --- */
@media (max-width: 768px) {


    [b-gamgjy5and] .footer-nav-links {
        /* Stack the columns vertically on mobile */
        flex-direction: column;
        align-items: center;
        /* Center the stacked columns */
        gap: 40px;
    }

    [b-gamgjy5and] .footer-section {
        text-align: center;
    }

    [b-gamgjy5and] .footer-bottom {
        /* Stack the language and legal/origin info, with legal/origin last */
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-gamgjy5and] .footer-legal-origin {
        text-align: center;
        /* Center the text on mobile */
    }

    [b-gamgjy5and] .footer-copyright {
        text-align: center;
    }
}

@media (max-width: 768px) {
    [b-gamgjy5and] .main-header {
        padding: 12px 20px;
    }

    [b-gamgjy5and] .main-nav {
        gap: 10px;
    }

    [b-gamgjy5and] .main-nav a {
        margin-right: 0;
        font-size: 0.95em;
    }

    [b-gamgjy5and] .btn-login {
        padding: 6px 14px;
        font-size: 0.95em;
    }

    [b-gamgjy5and] .logo {
        font-size: 1.0em;
    }

    [b-gamgjy5and] .featured-grid-v3 {
        grid-template-columns: 1fr;
    }

    [b-gamgjy5and] .container-v3 {
        padding: 0 var(--mobile-page-margin);
        margin: 0px auto;
    }

    [b-gamgjy5and] h2 {
        font-size: 1.6em;
    }

    [b-gamgjy5and] h3 {
        font-size: 1.4em;
    }

    [b-gamgjy5and] .card-placeholder {
        display: none;
    }

    [b-gamgjy5and] .featured-grid-v3.bottom-grid {
        grid-template-columns: 1fr;
    }

    /* Adjust container margin for mobile when header is present */
    [b-gamgjy5and] .main-header+* .container-v3 {
        margin-top: 80px;
    }
}


@media (max-width: 600px) {

    [b-gamgjy5and] .hero-frame-container {
        --frame-right: 8%;
        --frame-top: 44.5%;
        --frame-width: 9.5%;
        --frame-height: 20%;
    }

    [b-gamgjy5and] .main-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
    }

    [b-gamgjy5and] .main-nav {
        flex-direction: row;
        gap: 10px;
        margin-top: 0;
    }
}

@media (max-width: 500px) {

    [b-gamgjy5and] .hero-frame-container {
        --frame-right: 7%;
        --frame-top: 44.5%;
        --frame-width: 10.5%;
        --frame-height: 20%;
    }


}



[b-gamgjy5and] .hero-eyebrow {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: #E08E2E;
    margin: 0 0 10px 0;
    letter-spacing: 0.02em;
}

/* ===== Bridge Section - Warm Memories to Timeless Wisdom ===== */
[b-gamgjy5and] .bridge-section {
    background: transparent;
    padding: 48px 20px;
    margin: 48px 0;
    border-radius: 0;
}

[b-gamgjy5and] .bridge-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Decorative fading line */
[b-gamgjy5and] .bridge-content::before,
[b-gamgjy5and] .bridge-content::after {
    content: '';
    flex: 1;
    height: 1px;
    max-width: 120px;
    background: linear-gradient(90deg, transparent, rgba(176, 141, 110, 0.35), transparent);
}

[b-gamgjy5and] .bridge-content::before {
    background: linear-gradient(90deg, transparent, rgba(176, 141, 110, 0.35));
}

[b-gamgjy5and] .bridge-content::after {
    background: linear-gradient(90deg, rgba(176, 141, 110, 0.35), transparent);
}

[b-gamgjy5and] .bridge-quote-icon {
    font-size: 1.8em;
    margin: 0 0 12px 0;
    opacity: 0.75;
    display: block;
}

[b-gamgjy5and] .bridge-quote {
    margin: 0;
    padding: 0 24px;
    border: none;
}

[b-gamgjy5and] .bridge-quote p {
    font-family: var(--font-serif);
    font-size: 1.2em;
    font-style: italic;
    color: #5A534C;
    line-height: 1.7;
    margin: 0;
}

/* ===== Bottom CTA Section - Granny's Reminder ===== */
[b-gamgjy5and] .bottom-cta-section {
    background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
    padding: 50px 20px;
    margin: 50px 0 30px 0;
    border-radius: 16px;
}

[b-gamgjy5and] .cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

[b-gamgjy5and] .cta-quote-icon {
    font-size: 3em;
    margin-bottom: 20px;
    opacity: 0.7;
}

[b-gamgjy5and] .cta-quote {
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

[b-gamgjy5and] .cta-quote p {
    font-family: var(--font-serif);
    font-size: 1.4em;
    font-style: italic;
    color: #4F4A45;
    line-height: 1.6;
    margin: 0;
}

[b-gamgjy5and] .cta-signature {
    font-family: var(--font-serif);
    font-size: 1.1em;
    color: #666;
    font-weight: 600;
}

/* Responsive styles for bridge and CTA sections */
@media (max-width: 768px) {
    [b-gamgjy5and] .bridge-section {
        padding: 32px 16px;
        margin: 32px 0;
    }

    [b-gamgjy5and] .bridge-content::before,
    [b-gamgjy5and] .bridge-content::after {
        max-width: 60px;
    }

    [b-gamgjy5and] .bridge-quote-icon {
        font-size: 1.5em;
    }

    [b-gamgjy5and] .bridge-quote p {
        font-size: 1.05em;
    }

    [b-gamgjy5and] .bottom-cta-section {
        padding: 40px 16px;
        margin: 40px 12px 20px 0;
    }

    [b-gamgjy5and] .cta-quote-icon {
        font-size: 2.5em;
    }

    [b-gamgjy5and] .cta-quote p {
        font-size: 1.2em;
    }

    [b-gamgjy5and] .cta-signature {
        font-size: 1em;
    }
}

/* ===== CINEMATIC SCROLL ANIMATIONS =====
   Creates a warm, "Farmor guiding you through memories" feeling
   with soft fade-ins and gentle hover effects */

/* Keyframes for scroll-triggered animations */
@keyframes fadeInUp-b-gamgjy5and {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale-b-gamgjy5and {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gentlePulse-b-gamgjy5and {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* Base class for scroll-triggered animations - hidden until triggered */
[b-gamgjy5and] .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Triggered state - element becomes visible */
[b-gamgjy5and] .animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Specific animation for quote/bridge sections - fade with scale */
[b-gamgjy5and] .animate-on-scroll.animate-quote {
    transform: scale(0.95);
}

[b-gamgjy5and] .animate-on-scroll.animate-quote.animate-in {
    transform: scale(1);
}

/* Staggered animation delays for cards */
[b-gamgjy5and] .animate-on-scroll[data-stagger="0"] {
    transition-delay: 0s;
}

[b-gamgjy5and] .animate-on-scroll[data-stagger="1"] {
    transition-delay: 0.1s;
}

[b-gamgjy5and] .animate-on-scroll[data-stagger="2"] {
    transition-delay: 0.2s;
}

[b-gamgjy5and] .animate-on-scroll[data-stagger="3"] {
    transition-delay: 0.3s;
}

[b-gamgjy5and] .animate-on-scroll[data-stagger="4"] {
    transition-delay: 0.4s;
}

[b-gamgjy5and] .animate-on-scroll[data-stagger="5"] {
    transition-delay: 0.5s;
}

[b-gamgjy5and] .animate-on-scroll[data-stagger="6"] {
    transition-delay: 0.6s;
}

/* Gentle hover zoom for card images - "looking closer at a memory" */
[b-gamgjy5and] .card-family-theme .card-img {
    transition: transform 0.4s ease-out;
}

[b-gamgjy5and] .card-family-theme:hover .card-img {
    transform: scale(1.05);
}

/* Gentle background zoom on hover for theme cards */
[b-gamgjy5and] .card-featured-v3 {
    overflow: hidden;
}

[b-gamgjy5and] .card-featured-v3 .card-img {
    transition: transform 0.5s ease-out;
}

[b-gamgjy5and] .card-featured-v3:hover .card-img {
    transform: scale(1.08);
}

/* Subtle lift effect for relationship icons */
[b-gamgjy5and] .relationship-icon {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

[b-gamgjy5and] .relationship-icon:hover {
    transform: translateY(-5px);
}

[b-gamgjy5and] .relationship-icon:hover .icon-circle {
    box-shadow: 0 8px 25px rgba(123, 90, 83, 0.2);
}

/* Emoji icons gentle pulse on section entry */
[b-gamgjy5and] .bridge-quote-icon,
[b-gamgjy5and] .cta-quote-icon {
    display: inline-block;
}

[b-gamgjy5and] .animate-in .bridge-quote-icon,
[b-gamgjy5and] .animate-in .cta-quote-icon {
    animation: gentlePulse-b-gamgjy5and 2s ease-in-out 0.5s 1;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    [b-gamgjy5and] .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [b-gamgjy5and] .animate-on-scroll.animate-in {
        animation: none;
    }

    [b-gamgjy5and] .card-family-theme .card-img,
    [b-gamgjy5and] .card-featured-v3 .card-img {
        transition: none;
    }

    [b-gamgjy5and] .card-family-theme:hover .card-img,
    [b-gamgjy5and] .card-featured-v3:hover .card-img {
        transform: none;
    }

    [b-gamgjy5and] .relationship-icon {
        transition: none;
    }

    [b-gamgjy5and] .relationship-icon:hover {
        transform: none;
    }

    [b-gamgjy5and] .animate-in .bridge-quote-icon,
    [b-gamgjy5and] .animate-in .cta-quote-icon {
        animation: none;
    }
}

/* ===== HERO FAVORITES ROW ("Dina närmaste" inside Hero) ===== 
   Design Philosophy: These are miniature portraits lying on the desk,
   not floating UI elements. Light comes from the candle (right side),
   so shadows fall to the left. Frame colors match the photo frame.
*/
.hero-favorites-row[b-gamgjy5and] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0;
    /* No background - let them rest on the desk */
    background: transparent;
}

.hero-favorites-label[b-gamgjy5and] {
    font-size: 0.85rem;
    font-weight: 400;
    color: #5C4A3A;
    white-space: nowrap;
    /* Elegant serif for that handwritten feel */
    font-family: var(--font-serif);
    font-style: italic;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 2px rgba(255, 248, 240, 0.6);
}

.hero-favorites-avatars[b-gamgjy5and] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.hero-favorite-avatar[b-gamgjy5and] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    /* Locket frame: warm gold outer + antique white inner ring */
    border: 2.5px solid #C9A86C;
    box-shadow:
        /* Inner antique white ring for locket effect */
        inset 0 0 0 2px rgba(255, 248, 240, 0.5),
        /* Shadow falling left (candlelight from right) - stronger */
        -4px 4px 10px rgba(30, 20, 10, 0.5),
        /* Secondary ambient shadow */
        -2px 2px 4px rgba(50, 35, 20, 0.3);
    background: #FFF8F2;
    padding: 0;
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Slight sepia filter for antique feel */
    filter: sepia(8%) saturate(95%);
}

.hero-favorite-avatar:hover[b-gamgjy5and] {
    transform: scale(1.12) translateY(-2px);
    border-color: #D4AF7F;
    box-shadow:
        /* Inner antique white ring */
        inset 0 0 0 2px rgba(255, 248, 240, 0.6),
        /* Strong shadow falling left */
        -5px 5px 14px rgba(30, 20, 10, 0.55),
        -3px 3px 6px rgba(50, 35, 20, 0.35),
        /* Warm glow from candlelight */
        0 0 14px rgba(255, 200, 140, 0.35);
    filter: sepia(0%) saturate(100%);
}

.hero-favorite-avatar img[b-gamgjy5and] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Soft "+" button - like a little coin or button on the desk */
.hero-favorite-avatar.add-avatar[b-gamgjy5and] {
    /* Paper/parchment fill - matches the book pages */
    background: rgba(250, 240, 225, 0.85);
    /* Soft solid border instead of harsh dashed */
    border: 2px solid rgba(180, 160, 130, 0.5);
    box-shadow:
        /* Inner subtle highlight */
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        /* Shadow falling left like the portraits */
        -3px 3px 8px rgba(30, 20, 10, 0.35),
        -1px 1px 3px rgba(50, 35, 20, 0.2);
    filter: none;
}

.hero-favorite-avatar.add-avatar:hover[b-gamgjy5and] {
    background: rgba(255, 248, 240, 0.95);
    border-color: rgba(160, 140, 110, 0.6);
    transform: scale(1.08);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.5),
        -4px 4px 10px rgba(30, 20, 10, 0.4),
        -2px 2px 4px rgba(50, 35, 20, 0.25);
}

.hero-favorite-avatar .add-icon[b-gamgjy5and] {
    /* Warm brown ink - like fountain pen on parchment */
    font-size: 1.3rem;
    color: #7A6550;
    font-weight: 400;
    font-family: var(--font-serif);
    text-shadow: 0 1px 1px rgba(255, 248, 240, 0.3);
}

.hero-favorite-avatar.add-avatar:hover .add-icon[b-gamgjy5and] {
    color: #5C4A3A;
}

@media (max-width: 768px) {
    .hero-favorites-row[b-gamgjy5and] {
        margin-top: 1.25rem;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .hero-favorites-label[b-gamgjy5and] {
        font-size: 0.8rem;
    }

    .hero-favorite-avatar[b-gamgjy5and] {
        width: 38px;
        height: 38px;
        border-width: 2px;
        box-shadow:
            inset 0 0 0 1.5px rgba(255, 248, 240, 0.45),
            -3px 3px 7px rgba(30, 20, 10, 0.45),
            -1px 1px 3px rgba(50, 35, 20, 0.25);
    }

    .hero-favorites-avatars[b-gamgjy5and] {
        gap: 0.6rem;
    }

    .hero-favorite-avatar .add-icon[b-gamgjy5and] {
        font-size: 1.1rem;
    }
}

/* ===== LEGACY FAVORITES SECTION (kept for backward compatibility) ===== */
.favorites-section[b-gamgjy5and] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #FFF9F5 0%, #FAF3ED 100%);
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 16px rgba(180, 140, 120, 0.08);
    border: 1px solid rgba(232, 213, 200, 0.4);
}

@media (max-width: 768px) {
    .favorites-section[b-gamgjy5and] {
        padding: 1rem 1.25rem;
        margin: 0 0.5rem 1.5rem 0.5rem;
        border-radius: 16px;
    }
}

.favorite-themes-section[b-gamgjy5and] {
    width: 100%;
    max-width: 1060px;
    margin: 1.5rem auto 18px auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.favorite-themes-section-header[b-gamgjy5and] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.favorite-themes-section-header h2[b-gamgjy5and] {
    margin: 0;
    color: #4C362B;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 2.7vw, 2.45rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: 0;
}

.favorite-themes-section-header p[b-gamgjy5and] {
    max-width: 620px;
    margin: 8px 0 0 0;
    color: #786654;
    font-size: 0.98rem;
    line-height: 1.55;
}

.favorite-themes-section-link[b-gamgjy5and] {
    flex: 0 0 auto;
    color: #805B3E;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 91, 62, 0.35);
    padding-bottom: 2px;
}

.favorite-themes-section-link:hover[b-gamgjy5and] {
    color: #5C3E2F;
    border-color: rgba(92, 62, 47, 0.72);
}

.favorite-themes-card-grid[b-gamgjy5and] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.favorite-theme-card[b-gamgjy5and] {
    appearance: none;
    display: grid;
    align-items: stretch;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 138px;
    padding: 0;
    overflow: hidden;
    text-align: left;
    border: 1px solid rgba(214, 184, 157, 0.72);
    border-radius: 8px;
    background: rgba(255, 250, 244, 0.78);
    box-shadow: 0 14px 32px rgba(103, 73, 49, 0.08);
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.favorite-theme-card:hover[b-gamgjy5and],
.favorite-theme-card:focus-visible[b-gamgjy5and] {
    transform: translateY(-2px);
    border-color: rgba(190, 148, 104, 0.9);
    box-shadow: 0 18px 38px rgba(103, 73, 49, 0.13);
    outline: none;
}

.favorite-theme-card-image[b-gamgjy5and] {
    width: 100%;
    height: 100%;
    min-height: 138px;
    object-fit: cover;
    filter: sepia(5%) saturate(96%);
}

.favorite-theme-card-body[b-gamgjy5and] {
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    padding: 16px;
}

.favorite-theme-card-persona[b-gamgjy5and] {
    display: block;
    overflow: hidden;
    color: #9a6a4a;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-theme-card-body strong[b-gamgjy5and] {
    display: -webkit-box;
    overflow: hidden;
    color: #4A352B;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.16;
    letter-spacing: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.favorite-theme-card-description[b-gamgjy5and] {
    display: -webkit-box;
    overflow: hidden;
    color: #6E5E4E;
    font-size: 0.86rem;
    line-height: 1.42;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.favorite-theme-card-action[b-gamgjy5and] {
    width: fit-content;
    margin-top: auto;
    color: #8C5E3F;
    font-family: var(--font-serif);
    font-size: 0.84rem;
    font-weight: 700;
}

.favorite-theme-card:hover .favorite-theme-card-action[b-gamgjy5and],
.favorite-theme-card:focus-visible .favorite-theme-card-action[b-gamgjy5and] {
    color: #6F432B;
}

@media (max-width: 980px) {
    .favorite-themes-card-grid[b-gamgjy5and] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .favorite-themes-section[b-gamgjy5and] {
        margin: 1rem auto 10px auto;
        padding: 0 18px;
    }

    .favorite-themes-section-header[b-gamgjy5and] {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .favorite-themes-section-header h2[b-gamgjy5and] {
        font-size: 1.72rem;
    }

    .favorite-themes-section-header p[b-gamgjy5and] {
        font-size: 0.92rem;
    }

    .favorite-themes-card-grid[b-gamgjy5and] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .favorite-theme-card[b-gamgjy5and] {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 124px;
    }

    .favorite-theme-card-image[b-gamgjy5and] {
        min-height: 124px;
    }

    .favorite-theme-card-body[b-gamgjy5and] {
        padding: 13px 14px;
    }

    .favorite-theme-card-body strong[b-gamgjy5and] {
        font-size: 1.04rem;
    }
}

/* ===== GRANNY'S WISDOM STRIP - "In The Room" ===== */
/* She's part of the world - no box, no divider, just presence */
/* Inspired by GrannysCorner hero layout */

.wisdom-strip[b-gamgjy5and] {
    width: 100%;
    max-width: 950px;
    margin: 0 auto 50px auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.wisdom-strip-inner[b-gamgjy5and] {
    display: flex;
    align-items: center;
    /* Vertically center Granny and text */
    gap: 44px;
    padding: 20px 0 30px 0;
    /* NO BACKGROUND - transparent, part of the world */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

/* Granny Illustration - BIG like GrannysCorner (320px) */
.wisdom-granny-container[b-gamgjy5and] {
    flex-shrink: 0;
    position: relative;
    width: 280px;
    z-index: 2;
}

.wisdom-granny-image[b-gamgjy5and] {
    width: 280px;
    height: auto;
    filter: drop-shadow(0 8px 28px rgba(70, 45, 25, 0.16)) drop-shadow(0 0 20px rgba(255, 220, 180, 0.25));
    /* Warm candlelight glow */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wisdom-strip-inner:hover .wisdom-granny-image[b-gamgjy5and] {
    transform: scale(1.025) translateY(-4px);
    filter: drop-shadow(0 10px 32px rgba(70, 45, 25, 0.2)) drop-shadow(0 0 28px rgba(255, 220, 180, 0.35));
    /* Stronger glow on hover */
}

/* The Wisdom Text - Side by side, left-aligned, with paper note effect */
.wisdom-text-container[b-gamgjy5and] {
    flex: 1;
    min-width: 0;
    /* Allow text to shrink properly */
    /* padding: 24px 28px 20px 28px; */
    /* Paper note effect */
    /* background: rgba(255, 252, 248, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(220, 200, 175, 0.3);
    box-shadow: 
        0 2px 12px rgba(140, 110, 80, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7); */
}

.wisdom-headline[b-gamgjy5and] {
    font-family: var(--font-serif);
    font-size: 2.2em;
    font-weight: 600;
    font-style: italic;
    color: #3D2E1E;
    margin: 0 0 20px 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.wisdom-body[b-gamgjy5and] {
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    color: #5A4A3A;
    line-height: 1.8;
    margin: 0 0 16px 0;
    max-width: 540px;
}

/* Soft CTA - gentle button, not a shout */
.wisdom-soft-link[b-gamgjy5and] {
    display: inline-block;
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 0.95em;
    font-weight: 500;
    color: #6A5A4A;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 22px;
    border: 1.5px solid rgba(140, 110, 80, 0.35);
    border-radius: 24px;
    background: rgba(255, 250, 245, 0.5);
    transition: all 0.25s ease;
    margin-top: 4px;
}

.wisdom-soft-link:hover[b-gamgjy5and] {
    color: #4A3A2A;
    border-color: rgba(140, 110, 80, 0.55);
    background: rgba(255, 248, 240, 0.8);
    box-shadow: 0 2px 8px rgba(140, 110, 80, 0.1);
    transform: translateY(-1px);
}

/* Microcopy - whisper of comfort */
.wisdom-microcopy[b-gamgjy5and] {
    font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
    font-size: 0.82em;
    font-style: italic;
    color: #9A8A7A;
    margin: 14px 0 0 0;
    letter-spacing: 0.01em;
}

/* ===== WISDOM STRIP RESPONSIVE ===== */

/* Tablet */
@media (max-width: 1024px) {
    .wisdom-strip[b-gamgjy5and] {
        max-width: 820px;
        margin: 0 auto 40px auto;
        padding: 0 28px;
    }

    .wisdom-strip-inner[b-gamgjy5and] {
        gap: 36px;
        padding: 16px 0 24px 0;
    }

    .wisdom-granny-container[b-gamgjy5and] {
        width: 240px;
    }

    .wisdom-granny-image[b-gamgjy5and] {
        width: 240px;
    }

    .wisdom-headline[b-gamgjy5and] {
        font-size: 1.9em;
    }

    .wisdom-body[b-gamgjy5and] {
        font-size: 1.05em;
    }
}

/* Mobile - Stack vertically, LEFT-ALIGNED for readability */
@media (max-width: 768px) {
    .wisdom-strip[b-gamgjy5and] {
        width: auto;
        max-width: none;
        margin: 0 20px 36px 20px;
        padding: 0;
    }

    .wisdom-strip-inner[b-gamgjy5and] {
        flex-direction: column;
        align-items: flex-start;
        /* Left-aligned, not centered */
        text-align: left;
        gap: 16px;
        padding: 16px 0 20px 0;
    }

    .wisdom-granny-container[b-gamgjy5and] {
        width: 180px;
        align-self: center;
        /* Only Granny is centered */
    }

    .wisdom-granny-image[b-gamgjy5and] {
        width: 180px;
    }

    .wisdom-text-container[b-gamgjy5and] {
        padding-top: 0;
        /* padding: 0 4px; */
        max-width: 400px;
    }

    .wisdom-headline[b-gamgjy5and] {
        font-size: 1.5em;
        margin-bottom: 14px;
        text-align: center;
        /* Headline centered */
        width: 100%;
    }

    .wisdom-body[b-gamgjy5and] {
        font-size: 1em;
        line-height: 1.75;
        max-width: none;
        padding: 0;
        text-align: center;
        /* Body left-aligned for readability */
    }

    .wisdom-soft-link[b-gamgjy5and] {
        display: block;
        text-align: center;
        margin: 8px auto 0 auto;
        width: fit-content;
    }

    .wisdom-microcopy[b-gamgjy5and] {
        text-align: center;
        width: 100%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .wisdom-strip[b-gamgjy5and] {
        width: auto;
        margin: 0 16px 28px 16px;
    }

    .wisdom-strip-inner[b-gamgjy5and] {
        padding: 12px 0 16px 0;
        gap: 14px;
    }

    .wisdom-granny-container[b-gamgjy5and] {
        width: 160px;
    }

    .wisdom-granny-image[b-gamgjy5and] {
        width: 160px;
    }

    .wisdom-headline[b-gamgjy5and] {
        font-size: 1.35em;
    }

    .wisdom-body[b-gamgjy5and] {
        font-size: 0.95em;
        text-align: center;
    }
}

/* ============================================
   Frontpage refinement: LovOne identity, Stitch discipline.
   Keep the candlelit room, reduce competing chrome, and let each section
   have one clear job.
   ============================================ */

[b-gamgjy5and] .container-v3 {
    gap: clamp(46px, 5vw, 72px);
}

[b-gamgjy5and] .hero-section.hero-desk {
    max-width: 1160px;
    margin: 0 auto 2px auto;
    border: 1px solid rgba(120, 88, 60, 0.11);
    box-shadow: 0 18px 46px rgba(120, 88, 60, 0.08);
}

[b-gamgjy5and] .hero-text-overlay {
    top: 38%;
    max-width: min(520px, 45%);
}

[b-gamgjy5and] .hero-desk-headline {
    max-width: 520px;
    margin-bottom: 16px;
    letter-spacing: 0;
}

[b-gamgjy5and] .hero-desk-subline,
[b-gamgjy5and] .hero-desk-manifest {
    max-width: 470px;
    margin-bottom: 20px;
}

[b-gamgjy5and] .hero-cta-group {
    gap: 10px;
}

[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
    padding: 13px 26px;
    background: linear-gradient(135deg, #F7C897 0%, #D58D4F 100%);
    border-color: rgba(172, 104, 52, 0.26);
    color: #3F2E23;
    box-shadow: 0 8px 20px rgba(180, 112, 56, 0.16);
}

[b-gamgjy5and] .btn-hero-gentle-primary:hover,
[b-gamgjy5and] .btn-hero-logged-in-primary:hover {
    background: linear-gradient(135deg, #F9D1A6 0%, #C97C3A 100%);
    box-shadow: 0 12px 26px rgba(180, 112, 56, 0.22);
}

[b-gamgjy5and] .btn-hero-gentle-secondary {
    padding: 12px 22px;
    background: rgba(255, 252, 247, 0.62);
    border-color: rgba(111, 78, 55, 0.22);
    color: #5A4A3A;
    box-shadow: none;
}

[b-gamgjy5and] .hero-tertiary-link {
    margin-top: 10px;
    font-size: 0.86rem;
    color: #6F5E4D;
}

[b-gamgjy5and] .hero-trust-microcopy {
    max-width: 440px;
    margin-top: 7px;
    font-size: 0.78rem;
    color: #7B6A57;
}

[b-gamgjy5and] .hero-floating-note {
    width: clamp(168px, 16vw, 218px);
    padding: 18px 18px 15px 18px;
    box-shadow: 0 12px 28px rgba(120, 88, 60, 0.14), 0 2px 6px rgba(120, 88, 60, 0.08);
}

[b-gamgjy5and] .hero-floating-note-text {
    font-size: 1.14rem;
    line-height: 1.28;
}

.hero-favorites-row[b-gamgjy5and] {
    margin-top: 0.9rem;
    gap: 0.75rem;
}

.hero-favorites-label[b-gamgjy5and] {
    letter-spacing: 0;
}

.hero-favorites-avatars[b-gamgjy5and] {
    gap: 0.45rem;
}

.hero-favorite-avatar[b-gamgjy5and] {
    width: 38px;
    height: 38px;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 248, 240, 0.45),
        -2px 3px 7px rgba(30, 20, 10, 0.34);
}

.wisdom-strip[b-gamgjy5and] {
    max-width: 860px;
    margin-bottom: 30px;
}

.wisdom-strip-inner[b-gamgjy5and] {
    gap: 34px;
    padding: 4px 0 8px 0;
}

.wisdom-granny-container[b-gamgjy5and],
.wisdom-granny-image[b-gamgjy5and] {
    width: 220px;
}

.wisdom-headline[b-gamgjy5and] {
    font-size: clamp(1.65rem, 2.3vw, 2rem);
    margin-bottom: 12px;
    letter-spacing: 0;
}

.wisdom-body[b-gamgjy5and] {
    max-width: 520px;
    font-size: 1.02rem;
    line-height: 1.72;
}

.wisdom-soft-link[b-gamgjy5and] {
    padding: 9px 18px;
}

[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and] {
    max-width: 1120px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 14px 38px rgba(120, 88, 60, 0.075);
}

[b-gamgjy5and] .theme-showcase-section {
    padding: clamp(28px, 4vw, 42px);
}

[b-gamgjy5and] .showcase-header {
    max-width: 700px;
    margin: 0 auto 30px auto;
}

[b-gamgjy5and] .showcase-main-headline {
    font-family: var(--font-serif) !important;
    font-size: clamp(1.55rem, 2.3vw, 2rem);
    font-weight: 650;
    letter-spacing: 0;
}

[b-gamgjy5and] .showcase-subtitle {
    color: #6B5E52;
    font-size: 1rem;
}

[b-gamgjy5and] .showcase-content {
    grid-template-areas:
        "for-you featured-top"
        "featured-bottom featured-top";
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
    gap: 24px;
    align-items: start;
}

[b-gamgjy5and] .large-card-v3,
[b-gamgjy5and] .card-featured-v3,
.card-family-theme[b-gamgjy5and] {
    background: rgba(255, 253, 248, 0.82);
    border: 1px solid rgba(120, 88, 60, 0.10);
    box-shadow: 0 4px 14px rgba(120, 88, 60, 0.045);
}

[b-gamgjy5and] .large-card-v3 {
    min-height: 286px;
}

[b-gamgjy5and] .large-card-v3 .card-img {
    width: 48%;
    min-height: 250px;
    margin: 10px;
    border-radius: 14px;
}

[b-gamgjy5and] .large-card-v3 .card-content {
    width: 52%;
    padding: 24px 24px 24px 12px;
}

[b-gamgjy5and] .large-card-v3 h3,
[b-gamgjy5and] .card-featured-v3 h4 {
    font-family: var(--font-serif) !important;
    color: #3F3027;
    letter-spacing: 0;
}

[b-gamgjy5and] .featured-grid-v3 {
    gap: 18px;
}

[b-gamgjy5and] .featured-grid-v3.bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[b-gamgjy5and] .card-featured-v3 .card-img {
    aspect-ratio: 16 / 10;
}

[b-gamgjy5and] .card-featured-v3 .card-content {
    padding: 17px 18px 18px 18px;
}

[b-gamgjy5and] .card-featured-v3 p {
    font-size: 0.95rem;
    line-height: 1.5;
}

[b-gamgjy5and] .card-featured-v3 .btn-secondary,
.card-family-theme .btn-secondary[b-gamgjy5and] {
    padding: 8px 15px;
    font-size: 0.86rem;
    background: rgba(245, 221, 195, 0.76);
    border-color: rgba(120, 88, 60, 0.14);
}

[b-gamgjy5and] .showcase-explore-more {
    margin-top: 20px;
}

.oracle-section[b-gamgjy5and] {
    padding: clamp(34px, 4vw, 46px);
}

.oracle-section-inner[b-gamgjy5and] {
    gap: 36px;
}

.oracle-headline[b-gamgjy5and] {
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    letter-spacing: 0;
}

.oracle-body[b-gamgjy5and] {
    max-width: 500px;
}

.family-theme-section[b-gamgjy5and] {
    padding: 30px 34px;
}

.family-theme-headline[b-gamgjy5and],
[b-gamgjy5and] .relationship-selector-title {
    font-family: var(--font-serif) !important;
    letter-spacing: 0;
    color: #3F3027;
}

.family-theme-grid[b-gamgjy5and] {
    gap: 18px;
}

.card-family-theme[b-gamgjy5and] {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
}

.card-family-theme .card-content[b-gamgjy5and] {
    padding: 18px 16px;
}

.card-family-theme p[b-gamgjy5and] {
    font-size: 0.95rem;
    line-height: 1.5;
}

[b-gamgjy5and] .relationship-selector-section {
    max-width: 860px;
    margin: -6px auto 4px auto;
    padding: 22px 20px 10px 20px;
}

[b-gamgjy5and] .relationship-selector-title {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    margin-bottom: 20px;
}

[b-gamgjy5and] .relationship-icons {
    gap: 18px;
}

[b-gamgjy5and] .relationship-icon {
    min-width: 88px;
    padding: 10px;
}

[b-gamgjy5and] .icon-circle {
    width: 62px;
    height: 62px;
    margin-bottom: 10px;
    box-shadow: 0 5px 14px rgba(191, 129, 74, 0.22);
}

[b-gamgjy5and] .icon-circle i {
    font-size: 1.45em;
}

[b-gamgjy5and] .icon-label {
    font-size: 0.88rem;
}

[b-gamgjy5and] .bottom-cta-section {
    max-width: 960px;
    width: 100%;
    margin: 18px auto 10px auto;
    padding: 38px 20px;
    border: 1px solid rgba(120, 88, 60, 0.08);
}

[b-gamgjy5and] .cta-quote-icon,
[b-gamgjy5and] .bridge-quote-icon {
    opacity: 0.55;
}

@media (max-width: 1100px) {
    [b-gamgjy5and] .showcase-content {
        grid-template-areas:
            "for-you"
            "featured-top"
            "featured-bottom";
        grid-template-columns: 1fr;
    }

    [b-gamgjy5and] .featured-grid-v3,
    [b-gamgjy5and] .featured-grid-v3.bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    [b-gamgjy5and] .hero-text-overlay {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        max-width: 54%;
    }

    .wisdom-strip[b-gamgjy5and] {
        max-width: 760px;
    }

    .wisdom-granny-container[b-gamgjy5and],
    .wisdom-granny-image[b-gamgjy5and] {
        width: 190px;
    }

    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    [b-gamgjy5and] .app-layout,
    .app-layout[b-gamgjy5and] {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    [b-gamgjy5and] .container-v3 {
        gap: 38px;
    }

    [b-gamgjy5and] main.container-v3,
    [b-gamgjy5and] .container-v3 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--mobile-page-margin, 16px) !important;
        padding-right: var(--mobile-page-margin, 16px) !important;
        box-sizing: border-box;
        overflow-x: clip;
    }

    [b-gamgjy5and] .hero-section.hero-desk,
    .wisdom-strip[b-gamgjy5and],
    [b-gamgjy5and] .theme-showcase-section,
    .oracle-section[b-gamgjy5and],
    .family-theme-section[b-gamgjy5and],
    [b-gamgjy5and] .relationship-selector-section,
    [b-gamgjy5and] .bottom-cta-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    [b-gamgjy5and] .hero-section.hero-desk {
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(120, 88, 60, 0.08);
    }

    [b-gamgjy5and] .hero-text-overlay {
        max-width: none;
    }

    .wisdom-strip[b-gamgjy5and] {
        margin-bottom: 22px;
    }

    .wisdom-strip-inner[b-gamgjy5and] {
        gap: 12px;
    }

    .wisdom-granny-container[b-gamgjy5and],
    .wisdom-granny-image[b-gamgjy5and] {
        width: 152px;
    }

    .wisdom-body[b-gamgjy5and] {
        line-height: 1.62;
    }

    [b-gamgjy5and] .theme-showcase-section,
    .oracle-section[b-gamgjy5and],
    .family-theme-section[b-gamgjy5and] {
        padding: 24px 18px;
    }

    [b-gamgjy5and] .large-card-v3 {
        flex-direction: column;
    }

    [b-gamgjy5and] .theme-showcase-section .card,
    [b-gamgjy5and] .large-card-v3,
    [b-gamgjy5and] .card-featured-v3,
    .card-family-theme[b-gamgjy5and] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    [b-gamgjy5and] .large-card-v3 .card-img,
    [b-gamgjy5and] .large-card-v3 .card-content,
    [b-gamgjy5and] .card-featured-v3 .card-img,
    [b-gamgjy5and] .card-featured-v3 .card-content {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    [b-gamgjy5and] .large-card-v3 .card-img {
        min-height: 0;
        aspect-ratio: 16 / 10;
        margin: 10px 10px 0 10px;
    }

    [b-gamgjy5and] .card-featured-v3 .card-img {
        width: 100% !important;
        height: auto;
        max-height: 210px;
    }

    [b-gamgjy5and] .large-card-v3 .card-content {
        padding: 18px;
    }

    [b-gamgjy5and] .featured-grid-v3,
    [b-gamgjy5and] .featured-grid-v3.bottom-grid,
    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: 1fr;
    }

    [b-gamgjy5and] .relationship-icons {
        gap: 12px;
    }

    [b-gamgjy5and] .relationship-icon {
        min-width: 78px;
    }
}

/* ============================================
   Frontpage refinement pass 2: make the difference visible.
   This pass keeps the LovOne room, but gives the page a stronger poster-like
   opening and a clearer editorial rhythm below.
   ============================================ */

@media (min-width: 1025px) {
    [b-gamgjy5and] .container-v3 {
        width: 100%;
        max-width: min(1200px, calc(100vw - 280px));
        gap: 76px;
    }

    [b-gamgjy5and] .container-v3.sidebar-hidden {
        width: 100%;
        max-width: 1200px;
    }

    [b-gamgjy5and] .hero-section.hero-desk {
        width: 100%;
        max-width: 1160px;
        min-height: auto;
        border-radius: 20px;
        box-shadow: 0 24px 70px rgba(120, 88, 60, 0.12);
    }

    [b-gamgjy5and] .hero-frame-container {
        /* Keep the original 16:9 artwork coordinates from feature/shared-page. */
        --frame-right: 14%;
        --frame-top: 46%;
        --frame-width: 10%;
        --frame-height: 20%;
        --frame-image-x: 50%;
        --frame-image-y: 50%;
        --frame-image-scale: 1.04;
    }

    [b-gamgjy5and] .hero-frame-container.frame-has-loved,
    [b-gamgjy5and] .hero-frame-container.frame-soft-glow {
        padding: 0;
        background: transparent;
        box-sizing: border-box;
    }

    [b-gamgjy5and] .hero-frame-container.frame-soft-glow {
        box-shadow:
            inset 0 0 15px rgba(255, 255, 255, 0.72),
            0 0 18px rgba(255, 225, 150, 0.42);
    }

    [b-gamgjy5and] .hero-frame-container.frame-has-loved .hero-frame-image {
        object-fit: cover;
        object-position: var(--frame-image-x) var(--frame-image-y);
        transform: scale(var(--frame-image-scale));
        transform-origin: center center;
        filter: sepia(0.2) contrast(1.08) brightness(0.96);
        mix-blend-mode: multiply;
    }

    [b-gamgjy5and] .hero-desk-image>img {
        height: auto;
        object-fit: initial;
        object-position: initial;
    }

    [b-gamgjy5and] .hero-text-overlay {
        left: 5.6%;
        top: 48%;
        max-width: 500px;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(3rem, 3.85vw, 4.45rem);
        line-height: 1.04;
        margin-bottom: 18px;
        max-width: 500px;
    }

    [b-gamgjy5and] .hero-desk-subline,
    [b-gamgjy5and] .hero-desk-manifest {
        max-width: 410px;
        font-size: 1.05rem;
        line-height: 1.55;
    }

    .container-v3.culture-el .hero-text-overlay[b-gamgjy5and],
    .container-v3.culture-fi .hero-text-overlay[b-gamgjy5and] {
        top: 52%;
        max-width: 560px;
    }

    .container-v3.culture-el .hero-desk-headline[b-gamgjy5and],
    .container-v3.culture-fi .hero-desk-headline[b-gamgjy5and] {
        font-size: clamp(2.35rem, 2.65vw, 3.2rem);
        line-height: 1.08;
        max-width: 560px;
    }

    .container-v3.culture-el .hero-desk-subline[b-gamgjy5and],
    .container-v3.culture-el .hero-desk-manifest[b-gamgjy5and],
    .container-v3.culture-fi .hero-desk-subline[b-gamgjy5and],
    .container-v3.culture-fi .hero-desk-manifest[b-gamgjy5and] {
        max-width: 500px;
        font-size: 1rem;
    }

    [b-gamgjy5and] .hero-cta-group {
        margin-top: 4px;
    }

    [b-gamgjy5and] .btn-hero-gentle-primary,
    [b-gamgjy5and] .btn-hero-logged-in-primary {
        padding: 14px 28px;
    }

    [b-gamgjy5and] .hero-floating-note {
        top: 8%;
        right: 5.3%;
        width: 220px;
    }

    .hero-favorites-row[b-gamgjy5and] {
        margin-top: 1.05rem;
    }

    .wisdom-strip[b-gamgjy5and] {
        max-width: 780px;
        margin-top: -22px;
        margin-bottom: 10px;
    }

    .wisdom-strip-inner[b-gamgjy5and] {
        gap: 28px;
    }

    .wisdom-granny-container[b-gamgjy5and],
    .wisdom-granny-image[b-gamgjy5and] {
        width: 184px;
    }

    .wisdom-headline[b-gamgjy5and] {
        font-size: 1.85rem;
    }

    .wisdom-body[b-gamgjy5and] {
        max-width: 500px;
        font-size: 0.98rem;
    }

    [b-gamgjy5and] .theme-showcase-section {
        max-width: 1160px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    [b-gamgjy5and] .showcase-header {
        max-width: none;
        margin: 0 0 24px 0;
        padding: 0 12px;
        text-align: left;
    }

    [b-gamgjy5and] .showcase-main-headline {
        font-size: clamp(2rem, 3vw, 2.65rem);
        margin-bottom: 8px;
    }

    [b-gamgjy5and] .showcase-subtitle {
        max-width: 560px;
        margin: 0;
        font-size: 1.02rem;
    }

    [b-gamgjy5and] .showcase-content {
        grid-template-areas:
            "for-you"
            "featured-top"
            "featured-bottom";
        grid-template-columns: 1fr;
        gap: 20px;
    }

    [b-gamgjy5and] .large-card-v3 {
        min-height: 390px;
        border-radius: 24px;
        background:
            linear-gradient(135deg, rgba(255, 253, 248, 0.96) 0%, rgba(250, 238, 218, 0.9) 100%);
        box-shadow: 0 18px 48px rgba(120, 88, 60, 0.13);
    }

    [b-gamgjy5and] .large-card-v3 .card-img {
        width: 56%;
        min-height: 360px;
        margin: 14px;
        border-radius: 18px;
    }

    [b-gamgjy5and] .large-card-v3 .card-content {
        width: 44%;
        padding: 42px 46px 42px 20px;
    }

    [b-gamgjy5and] .large-card-v3 h3 {
        font-size: 2.15rem;
        line-height: 1.08;
        margin-bottom: 14px;
    }

    [b-gamgjy5and] .large-card-v3 p {
        font-size: 1.04rem;
        line-height: 1.58;
        max-width: 360px;
    }

    [b-gamgjy5and] .large-card-v3 .btn-primary {
        align-self: flex-start;
        margin-top: 6px;
        padding: 11px 22px;
        background: #F4BE88;
        border-color: rgba(176, 111, 58, 0.2);
    }

    [b-gamgjy5and] .featured-grid-v3 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    [b-gamgjy5and] .featured-grid-v3.bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 568px;
        margin: 0 auto;
    }

    [b-gamgjy5and] .card-featured-v3 {
        border-radius: 18px;
    }

    [b-gamgjy5and] .card-featured-v3 .card-img {
        aspect-ratio: 4 / 3;
        border-radius: 16px 16px 0 0;
    }

    [b-gamgjy5and] .card-featured-v3 .card-content {
        padding: 16px 16px 17px 16px;
    }

    [b-gamgjy5and] .card-featured-v3 h4 {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    [b-gamgjy5and] .card-featured-v3 p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 4.45em;
    }

    [b-gamgjy5and] .showcase-explore-more {
        margin-top: 18px;
    }

    .oracle-section[b-gamgjy5and] {
        max-width: 1060px;
        padding: 44px 48px;
    }

    .family-theme-section[b-gamgjy5and] {
        max-width: 1060px;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .family-theme-headline[b-gamgjy5and] {
        margin-bottom: 22px;
        font-size: 1.85rem;
    }

    .family-theme-grid[b-gamgjy5and] {
        gap: 16px;
    }

    .card-family-theme[b-gamgjy5and] {
        border-radius: 18px;
    }

    [b-gamgjy5and] .relationship-selector-section {
        max-width: 760px;
        margin-top: -34px;
        padding-top: 20px;
        border-top: 1px solid rgba(120, 88, 60, 0.12);
    }

    [b-gamgjy5and] .relationship-icons {
        gap: 10px;
    }

    [b-gamgjy5and] .icon-circle {
        width: 54px;
        height: 54px;
    }

    [b-gamgjy5and] .bottom-cta-section {
        max-width: 820px;
        margin-top: -6px;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    [b-gamgjy5and] .container-v3 {
        width: 100%;
        max-width: min(1200px, calc(100vw - 280px));
    }

    [b-gamgjy5and] .hero-section.hero-desk {
        max-width: 1120px;
        min-height: 500px;
    }

    [b-gamgjy5and] .hero-desk-image>img {
        height: 500px;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(2.7rem, 3.5vw, 3.8rem);
    }

    [b-gamgjy5and] .theme-showcase-section {
        max-width: 1060px;
    }
}

/* ============================================
   Device coverage pass: phones, tablets, folds, and short hub screens.
   Keep the approved iPhone 14 Pro Max and desktop feel, but make the
   intermediate presets stop inheriting conflicting mobile/desktop sizing.
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    [b-gamgjy5and] main.container-v3,
    [b-gamgjy5and] .container-v3 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: clamp(24px, 4vw, 42px);
        padding-right: clamp(24px, 4vw, 42px);
        gap: clamp(46px, 6vw, 68px);
        box-sizing: border-box;
    }

    [b-gamgjy5and] .hero-section.hero-desk {
        width: 100%;
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 24px;
        overflow: hidden;
    }

    [b-gamgjy5and] .hero-desk-image {
        height: clamp(340px, 43vw, 440px);
    }

    [b-gamgjy5and] .hero-desk-image>img {
        object-position: 64% center;
    }

    [b-gamgjy5and] .hero-text-overlay {
        max-width: min(680px, calc(100% - 56px));
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(2.25rem, 6vw, 3.4rem);
        line-height: 1.08;
    }

    [b-gamgjy5and] .hero-desk-subline,
    [b-gamgjy5and] .hero-desk-manifest {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    [b-gamgjy5and] .hero-cta-group {
        flex-wrap: wrap;
    }

    [b-gamgjy5and] .theme-showcase-section,
    .oracle-section[b-gamgjy5and],
    .family-theme-section[b-gamgjy5and] {
        width: 100%;
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
    }

    [b-gamgjy5and] .theme-showcase-section {
        padding: clamp(28px, 4vw, 38px);
    }

    [b-gamgjy5and] .featured-grid-v3,
    [b-gamgjy5and] .featured-grid-v3.bottom-grid,
    .family-theme-grid[b-gamgjy5and] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oracle-section-inner[b-gamgjy5and] {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .oracle-text-container[b-gamgjy5and] {
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
    }

    .oracle-features[b-gamgjy5and] {
        text-align: left;
    }

    .oracle-cards-container[b-gamgjy5and] {
        margin: 0 auto;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    [b-gamgjy5and] .hero-section.hero-desk {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 680px !important;
    }

    [b-gamgjy5and] .hero-desk-image {
        height: clamp(330px, 52vw, 400px);
    }

    [b-gamgjy5and] .hero-text-overlay {
        max-width: min(600px, calc(100% - 44px));
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(2rem, 6.2vw, 2.9rem);
    }

    [b-gamgjy5and] .theme-showcase-section,
    .oracle-section[b-gamgjy5and],
    .family-theme-section[b-gamgjy5and] {
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 640px) {
    [b-gamgjy5and] .hero-section.hero-desk {
        max-width: 430px !important;
    }

    [b-gamgjy5and] .hero-desk-image {
        height: clamp(300px, 78vw, 360px);
    }

    /* Empty desk-frame glow reads as a stray blank square on phones; keep real portraits visible. */
    [b-gamgjy5and] .hero-frame-container.frame-soft-glow {
        display: none;
    }

    [b-gamgjy5and] .btn-hero-gentle-primary,
    [b-gamgjy5and] .btn-hero-gentle-secondary,
    [b-gamgjy5and] .btn-hero-logged-in-primary {
        white-space: normal;
        min-height: 54px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 390px) {
    [b-gamgjy5and] main.container-v3,
    [b-gamgjy5and] .container-v3 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 32px;
    }

    [b-gamgjy5and] .hero-section.hero-desk {
        border-radius: 16px;
    }

    [b-gamgjy5and] .hero-desk-image {
        height: clamp(270px, 76vw, 310px);
    }

    [b-gamgjy5and] .hero-text-overlay {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 24px;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(1.45rem, 8.2vw, 1.95rem);
    }

    [b-gamgjy5and] .hero-desk-manifest,
    [b-gamgjy5and] .hero-desk-subline {
        font-size: 0.92rem;
    }

    [b-gamgjy5and] .theme-showcase-section,
    .oracle-section[b-gamgjy5and],
    .family-theme-section[b-gamgjy5and] {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 640px) and (max-height: 760px) {
    [b-gamgjy5and] .hero-desk-image {
        height: clamp(260px, 68vw, 310px);
    }

    [b-gamgjy5and] .hero-text-overlay {
        padding-bottom: 22px;
    }

    [b-gamgjy5and] .hero-desk-eyebrow {
        margin-bottom: 8px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) and (max-height: 760px) {
    [b-gamgjy5and] .container-v3 {
        gap: 40px;
    }

    [b-gamgjy5and] .hero-desk-image {
        height: clamp(285px, 36vw, 340px);
    }

    [b-gamgjy5and] .hero-text-overlay {
        margin-top: -30px;
        padding-bottom: 30px;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(2rem, 5vw, 2.8rem);
        margin-bottom: 12px;
    }
}

@media (min-width: 1025px) and (max-height: 850px) {
    [b-gamgjy5and] .container-v3 {
        gap: 54px;
    }

    [b-gamgjy5and] .hero-section.hero-desk {
        max-width: 1120px;
    }

    [b-gamgjy5and] .hero-desk-headline {
        font-size: clamp(2.75rem, 3.4vw, 3.75rem);
    }

    [b-gamgjy5and] .hero-desk-subline,
    [b-gamgjy5and] .hero-desk-manifest {
        font-size: 1rem;
    }
}

/* ===== FRONTPAGE PORTRAIT HERO VARIANT ===== */
[b-gamgjy5and] .hero-section.hero-portrait {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    max-width: 1160px;
    min-height: 640px;
    padding: 4rem 4.2rem;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(105deg, rgba(255, 238, 219, 0.98) 0%, rgba(255, 246, 232, 0.94) 48%, rgba(242, 218, 189, 0.72) 100%);
    border: 1px solid rgba(130, 94, 64, 0.11);
    box-shadow: 0 24px 70px rgba(120, 88, 60, 0.13);
    isolation: isolate;
}

[b-gamgjy5and] .hero-section.hero-portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 218, 200, 0.34) 0%, rgba(255, 246, 232, 0.14) 44%, rgba(255, 255, 255, 0) 74%),
        repeating-linear-gradient(0deg, rgba(95, 70, 48, 0.018) 0, rgba(95, 70, 48, 0.018) 1px, transparent 1px, transparent 5px);
}

[b-gamgjy5and] .hero-portrait-copy {
    position: relative;
    z-index: 3;
    max-width: 520px;
}

[b-gamgjy5and] .hero-portrait .hero-desk-eyebrow,
[b-gamgjy5and] .hero-portrait .hero-tagline {
    margin-bottom: 1rem;
}

[b-gamgjy5and] .hero-portrait .hero-desk-headline {
    max-width: 540px;
    font-size: 4.1rem;
    line-height: 1.04;
    letter-spacing: 0;
    margin-bottom: 1.2rem;
}

[b-gamgjy5and] .hero-portrait .hero-desk-manifest,
[b-gamgjy5and] .hero-portrait .hero-desk-subline {
    max-width: 440px;
    font-size: 1.08rem;
    line-height: 1.58;
    margin-bottom: 1.65rem;
}

[b-gamgjy5and] .hero-portrait .hero-cta-group {
    align-items: center;
    gap: 0.75rem;
}

[b-gamgjy5and] .hero-portrait .hero-trust-microcopy {
    max-width: 390px;
}

[b-gamgjy5and] .hero-portrait .hero-favorites-row {
    margin-top: 1.45rem;
    gap: 0.9rem;
}

[b-gamgjy5and] .hero-portrait .hero-favorite-avatar {
    box-shadow:
        inset 0 0 0 2px rgba(255, 248, 240, 0.48),
        0 8px 20px rgba(82, 55, 34, 0.22);
}

[b-gamgjy5and] .hero-portrait-stage {
    position: relative;
    z-index: 2;
    min-height: 540px;
}

[b-gamgjy5and] .hero-portrait-halo {
    position: absolute;
    inset: 9% 0 5% 9%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 52% 46%, rgba(255, 250, 235, 0.92) 0%, rgba(247, 207, 154, 0.28) 54%, rgba(116, 84, 56, 0) 72%);
    filter: blur(2px);
    opacity: 0.9;
    pointer-events: none;
}

[b-gamgjy5and] .hero-portrait-main {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    z-index: 4;
    width: min(520px, 76%);
    aspect-ratio: 1 / 1;
    margin: 0;
    transform: translateY(-50%);
    border-radius: 14px;
    overflow: hidden;
    background: #fff5df;
    border: 1px solid rgba(120, 88, 60, 0.11);
    box-shadow:
        0 28px 62px rgba(80, 52, 28, 0.22),
        0 4px 14px rgba(80, 52, 28, 0.12);
    animation: portraitHeroSettle-b-gamgjy5and 720ms ease-out both;
}

[b-gamgjy5and] .hero-portrait-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

[b-gamgjy5and] .hero-portrait-main.is-sketch img {
    filter: sepia(0.08) contrast(1.03) brightness(0.99);
}

[b-gamgjy5and] .hero-portrait-main.is-loved-one img {
    filter: sepia(0.12) saturate(0.9) contrast(1.04);
}

[b-gamgjy5and] .hero-portrait-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 2rem);
    padding: 0.48rem 0.74rem;
    border-radius: 999px;
    background: rgba(255, 248, 236, 0.86);
    color: #5A4A3A;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: 0 8px 20px rgba(80, 52, 28, 0.12);
}

[b-gamgjy5and] .hero-portrait-support {
    position: absolute;
    z-index: 2;
    width: 168px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #fff5df;
    border: 1px solid rgba(120, 88, 60, 0.08);
    opacity: 0.58;
    box-shadow: 0 18px 46px rgba(80, 52, 28, 0.16);
    pointer-events: none;
}

[b-gamgjy5and] .hero-portrait-support img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: sepia(0.16) contrast(0.98) brightness(1.04);
}

[b-gamgjy5and] .hero-portrait-support.support-one {
    top: 7%;
    left: 6%;
    transform: rotate(-4deg);
}

[b-gamgjy5and] .hero-portrait-support.support-two {
    top: 3%;
    right: 12%;
    transform: rotate(3deg);
}

[b-gamgjy5and] .hero-portrait-support.support-three {
    bottom: 6%;
    left: 14%;
    width: 188px;
    transform: rotate(2.5deg);
}

[b-gamgjy5and] .hero-portrait-support.support-four {
    right: 1%;
    bottom: 3%;
    width: 146px;
    transform: rotate(-2deg);
}

@keyframes portraitHeroSettle-b-gamgjy5and {
    from {
        opacity: 0;
        transform: translateY(-47%) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

::global(body.night-mode) .hero-section.hero-portrait[b-gamgjy5and] {
    background:
        linear-gradient(105deg, rgba(39, 34, 30, 0.98) 0%, rgba(48, 40, 35, 0.96) 52%, rgba(62, 49, 40, 0.9) 100%);
    border-color: rgba(255, 226, 196, 0.1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

::global(body.night-mode) .hero-section.hero-portrait[b-gamgjy5and]::before {
    background:
        linear-gradient(90deg, rgba(118, 77, 55, 0.28) 0%, rgba(46, 37, 32, 0.16) 48%, rgba(0, 0, 0, 0) 76%),
        repeating-linear-gradient(0deg, rgba(255, 226, 196, 0.018) 0, rgba(255, 226, 196, 0.018) 1px, transparent 1px, transparent 5px);
}

::global(body.night-mode) .hero-portrait .hero-desk-headline[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-desk-eyebrow[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-tagline[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-desk-manifest[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-desk-subline[b-gamgjy5and] {
    color: #F5E8D8;
    text-shadow: none;
}

::global(body.night-mode) .hero-portrait .hero-trust-microcopy[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-tertiary-link[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-favorites-label[b-gamgjy5and] {
    color: rgba(245, 232, 216, 0.76);
}

::global(body.night-mode) .hero-portrait-main[b-gamgjy5and],
::global(body.night-mode) .hero-portrait-support[b-gamgjy5and] {
    background: #3a3029;
    border-color: rgba(255, 226, 196, 0.12);
}

@media (max-width: 1100px) {
    [b-gamgjy5and] .hero-section.hero-portrait {
        grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
        gap: 1.6rem;
        padding: 3.2rem;
    }

    [b-gamgjy5and] .hero-portrait .hero-desk-headline {
        font-size: 3.45rem;
    }

    [b-gamgjy5and] .hero-portrait-stage {
        min-height: 470px;
    }
}

@media (max-width: 900px) {
    [b-gamgjy5and] .hero-section.hero-portrait {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        max-width: 680px;
        min-height: auto;
        padding: 2rem;
    }

    [b-gamgjy5and] .hero-portrait-stage {
        order: -1;
        min-height: 390px;
    }

    [b-gamgjy5and] .hero-portrait-copy {
        max-width: none;
    }

    [b-gamgjy5and] .hero-portrait .hero-desk-headline {
        max-width: 620px;
        font-size: 3rem;
    }

    [b-gamgjy5and] .hero-portrait .hero-desk-manifest,
    [b-gamgjy5and] .hero-portrait .hero-desk-subline {
        max-width: 560px;
    }

    [b-gamgjy5and] .hero-portrait-main {
        right: 50%;
        width: min(390px, 72%);
        transform: translate(50%, -50%);
    }

    [b-gamgjy5and] .hero-portrait-support.support-one {
        left: 7%;
    }

    [b-gamgjy5and] .hero-portrait-support.support-two {
        right: 7%;
    }

    [b-gamgjy5and] .hero-portrait-support.support-three,
    [b-gamgjy5and] .hero-portrait-support.support-four {
        display: none;
    }

    @keyframes portraitHeroSettle-b-gamgjy5and {
        from {
            opacity: 0;
            transform: translate(50%, -47%) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translate(50%, -50%) scale(1);
        }
    }
}

@media (max-width: 640px) {
    [b-gamgjy5and] .hero-section.hero-portrait {
        max-width: 430px !important;
        padding: 1rem;
        border-radius: 18px;
    }

    [b-gamgjy5and] .hero-portrait-stage {
        min-height: 315px;
    }

    [b-gamgjy5and] .hero-portrait-main {
        width: min(292px, 82%);
        border-radius: 12px;
    }

    [b-gamgjy5and] .hero-portrait-support {
        width: 112px;
        border-radius: 10px;
    }

    [b-gamgjy5and] .hero-portrait-support.support-one {
        top: 8%;
        left: 0;
    }

    [b-gamgjy5and] .hero-portrait-support.support-two {
        top: 4%;
        right: 0;
    }

    [b-gamgjy5and] .hero-portrait-copy {
        padding: 0 0.35rem 0.45rem;
    }

    [b-gamgjy5and] .hero-portrait .hero-desk-headline {
        font-size: 2.25rem;
        line-height: 1.08;
    }

    [b-gamgjy5and] .hero-portrait .hero-desk-manifest,
    [b-gamgjy5and] .hero-portrait .hero-desk-subline {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    [b-gamgjy5and] .hero-portrait .hero-cta-group {
        align-items: stretch;
        width: 100%;
    }

    [b-gamgjy5and] .hero-portrait .btn-hero-gentle-primary,
    [b-gamgjy5and] .hero-portrait .btn-hero-gentle-secondary,
    [b-gamgjy5and] .hero-portrait .btn-hero-logged-in-primary {
        width: 100%;
    }

    [b-gamgjy5and] .hero-portrait-caption {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: calc(100% - 1.5rem);
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-gamgjy5and] .hero-portrait-main {
        animation: none;
    }
}

/* ===== FRONTPAGE PORTRAIT FOCUS HERO VARIANT ===== */
[b-gamgjy5and] .hero-section.hero-portrait-focus {
    display: block;
    min-height: 560px;
    padding: 0;
    background: #fbefd9;
}

[b-gamgjy5and] .hero-section.hero-portrait-focus::before {
    z-index: 2;
    background:
        linear-gradient(90deg,
            rgba(252, 220, 199, 0.95) 0%,
            rgba(252, 227, 210, 0.9) 28%,
            rgba(255, 246, 229, 0.72) 43%,
            rgba(255, 246, 229, 0.28) 53%,
            rgba(255, 246, 229, 0.05) 63%,
            rgba(255, 246, 229, 0) 72%),
        repeating-linear-gradient(0deg, rgba(95, 70, 48, 0.022) 0, rgba(95, 70, 48, 0.022) 1px, transparent 1px, transparent 5px);
}

[b-gamgjy5and] .hero-section.hero-portrait-focus::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 251, 241, 0.08), rgba(255, 247, 229, 0.02) 45%, rgba(126, 86, 50, 0.04)),
        linear-gradient(90deg, rgba(255, 236, 220, 0.12), rgba(255, 255, 255, 0) 36%);
    mix-blend-mode: multiply;
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
    position: absolute;
    left: 5.7%;
    top: 50%;
    z-index: 5;
    width: min(530px, 43%);
    max-width: 530px;
    transform: translateY(-50%);
}

[b-gamgjy5and] .hero-portrait-focus .hero-desk-headline {
    max-width: 515px;
    font-size: clamp(3.25rem, 3.85vw, 4.45rem);
    line-height: 1.04;
    margin-bottom: 1.1rem;
}

[b-gamgjy5and] .hero-portrait-focus .hero-desk-manifest,
[b-gamgjy5and] .hero-portrait-focus .hero-desk-subline {
    max-width: 505px;
}

[b-gamgjy5and] .hero-portrait-focus .hero-cta-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: 560px;
}

[b-gamgjy5and] .hero-portrait-focus .btn-hero-gentle-primary,
[b-gamgjy5and] .hero-portrait-focus .btn-hero-gentle-secondary,
[b-gamgjy5and] .hero-portrait-focus .btn-hero-logged-in-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-halo,
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-support {
    display: none;
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: 64%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    border: 0;
    border-radius: 0 20px 20px 0;
    background: transparent;
    box-shadow: none;
    animation: portraitFocusFade-b-gamgjy5and 760ms ease-out both;
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 45%;
    filter: sepia(0.1) saturate(0.94) contrast(1.17) brightness(0.98);
    transform: scale(1.32);
    transform-origin: right center;
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main.is-loved-one img {
    filter: sepia(0.08) saturate(0.94) contrast(1.08) brightness(1);
}

[b-gamgjy5and] .hero-portrait-focus .hero-portrait-caption {
    left: auto;
    right: 6%;
    bottom: 7%;
    z-index: 6;
    background: rgba(255, 248, 236, 0.78);
}

@keyframes portraitFocusFade-b-gamgjy5and {
    from {
        opacity: 0;
        transform: scale(1.015);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (min-width: 1025px) {
    [b-gamgjy5and] main.container-v3.frontpage-hero-focus-active {
        max-width: min(1200px, calc(100vw - 280px));
    }

    [b-gamgjy5and] .hero-section.hero-portrait-focus {
        width: min(100%, calc(100vw - 360px));
        max-width: 1160px;
        margin-left: auto;
        margin-right: auto;
    }
}

::global(body.night-mode) .hero-section.hero-portrait-focus[b-gamgjy5and] {
    background: #2f2924;
}

::global(body.night-mode) .hero-section.hero-portrait-focus[b-gamgjy5and]::before {
    background:
        linear-gradient(90deg,
            rgba(58, 39, 33, 0.94) 0%,
            rgba(64, 45, 38, 0.86) 33%,
            rgba(53, 43, 36, 0.55) 52%,
            rgba(45, 37, 31, 0.14) 72%,
            rgba(45, 37, 31, 0) 100%),
        repeating-linear-gradient(0deg, rgba(255, 226, 196, 0.018) 0, rgba(255, 226, 196, 0.018) 1px, transparent 1px, transparent 5px);
}

@media (max-width: 1100px) {
    [b-gamgjy5and] .hero-section.hero-portrait-focus {
        min-height: 520px;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
        width: min(510px, 48%);
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
        width: 62%;
    }
}

@media (max-width: 900px) {
    [b-gamgjy5and] .hero-section.hero-portrait-focus {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 0;
    }

    [b-gamgjy5and] .hero-section.hero-portrait-focus::before {
        background:
            linear-gradient(180deg, rgba(255, 246, 229, 0.08), rgba(252, 227, 210, 0.92) 48%, rgba(255, 246, 229, 0.98) 100%),
            repeating-linear-gradient(0deg, rgba(95, 70, 48, 0.022) 0, rgba(95, 70, 48, 0.022) 1px, transparent 1px, transparent 5px);
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-stage {
        position: relative;
        min-height: 360px;
        order: -1;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 18px 18px 0 0;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-main img {
        object-position: 54% 42%;
        transform: scale(1.16);
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        max-width: none;
        padding: 2rem;
        transform: none;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-cta-group {
        width: 100%;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-caption {
        right: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 640px) {
    [b-gamgjy5and] .hero-section.hero-portrait-focus {
        max-width: 430px !important;
        border-radius: 18px;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-stage {
        min-height: 320px;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
        padding: 1.5rem 1.2rem 1.4rem;
    }

    [b-gamgjy5and] .hero-portrait-focus .hero-desk-headline {
        font-size: 2.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
        animation: none;
    }
}
/* /Components/Pages/GoogleOAuthSignIn.razor.rz.scp.css */
/* /Components/Pages/GrannysCorner.razor.rz.scp.css */
/* GrannysCorner.razor.css - Granny's Corner Page Styles */

/* Base styles inherited from FrontPage but with warmer tones */
[b-zb0ja7fh7c] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

/* Global body/html overflow prevention - REMOVED */

/* App Layout */
[b-zb0ja7fh7c] .app-layout {
    display: flex;
    min-height: 100vh;
    /* inherited font-sans */
    background: linear-gradient(135deg, #FFF9F0 0%, #FFEFD5 50%, #FFF4E4 100%);
    padding-top: 0;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-zb0ja7fh7c] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-zb0ja7fh7c] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

    [b-zb0ja7fh7c] .sidebar.hidden {
        transform: translateX(-100%);
    }

[b-zb0ja7fh7c] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1.0rem;
}

[b-zb0ja7fh7c] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-zb0ja7fh7c] .sidebar-logo img {
    max-width: 180px;
    width: auto;
    height: 50px;
}

[b-zb0ja7fh7c] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-zb0ja7fh7c] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
}

[b-zb0ja7fh7c] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-zb0ja7fh7c] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-zb0ja7fh7c] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

    [b-zb0ja7fh7c] .sidebar-user:hover {
        background-color: rgba(255, 228, 210, 0.5);
    }

[b-zb0ja7fh7c] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #4F4A45;
}

[b-zb0ja7fh7c] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

[b-zb0ja7fh7c] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-zb0ja7fh7c] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
}

[b-zb0ja7fh7c] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

    [b-zb0ja7fh7c] .dropdown-item:hover {
        background-color: #f0dad3;
    }



/* Toggle Sidebar Button */
[b-zb0ja7fh7c] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Main Container */
[b-zb0ja7fh7c] .container-v3 {
    flex: 1;
    max-width: 1200px;
    margin: 30px auto;
    margin-left: 280px;
    padding: 0 20px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

    [b-zb0ja7fh7c] .container-v3.sidebar-hidden {
        margin-left: 0;
    }

/* Granny Hero Section */
[b-zb0ja7fh7c] .granny-hero-section {
    /* background: linear-gradient(135deg, rgba(255, 249, 240, 0.95) 0%, rgba(255, 244, 228, 0.95) 100%);
    border-radius: 25px;
    padding: 50px 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3; */
    position: relative;
    overflow: hidden;
}

    [b-zb0ja7fh7c] .granny-hero-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(251, 207, 168, 0.18) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: candleFlicker-b-zb0ja7fh7c 4s ease-in-out infinite;
    }

    [b-zb0ja7fh7c] .granny-hero-section::after {
        content: '';
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -12px;
        height: 22px;
        background: radial-gradient(circle, rgba(84, 52, 33, 0.05) 0%, rgba(84, 52, 33, 0) 70%);
        filter: blur(2px);
        pointer-events: none;
    }

[b-zb0ja7fh7c] .granny-hero-content {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

[b-zb0ja7fh7c] .granny-illustration-wrapper {
    flex-shrink: 0;
   /* transform: translateY(-20px);*/
}

[b-zb0ja7fh7c] .granny-illustration {
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}

@keyframes candleFlicker-b-zb0ja7fh7c {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.015);
    }
    70% {
        opacity: 0.96;
        transform: scale(1.01);
    }
}

[b-zb0ja7fh7c] .granny-welcome-text {
    flex: 1;
}

[b-zb0ja7fh7c] .granny-title {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.5em;
    font-weight: var(--mobile-hero-heading-weight);
    color: #4F4A45;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

[b-zb0ja7fh7c] .granny-subtitle {
    font-size: 1.2em;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Hero Action Buttons */
[b-zb0ja7fh7c] .granny-hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

[b-zb0ja7fh7c] .granny-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    color: #7b5a53;
    font-size: 0.98rem;
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid rgba(123, 90, 83, 0.28);
    padding-bottom: 0.15rem;
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

    [b-zb0ja7fh7c] .granny-help-link:hover {
        color: #5f433d;
        border-color: rgba(95, 67, 61, 0.5);
        transform: translateX(2px);
    }

[b-zb0ja7fh7c] .btn-hero-primary {
    padding: 14px 32px;
    background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    color: #4F4A45;
    border: 2px solid #E8B076;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(251, 207, 168, 0.3);
}

    [b-zb0ja7fh7c] .btn-hero-primary:hover {
        background: linear-gradient(135deg, #F0C07A 0%, #E8B076 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(251, 207, 168, 0.45);
    }

[b-zb0ja7fh7c] .btn-hero-secondary {
    padding: 14px 32px;
    background: transparent;
    color: #4F4A45;
    border: 2px solid #D9C4B0;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.05em;
    cursor: pointer;
    transition: all 0.3s ease;
}

    [b-zb0ja7fh7c] .btn-hero-secondary:hover {
        background: rgba(251, 207, 168, 0.15);
        border-color: #FBCFA8;
        transform: translateY(-2px);
    }

/* Granny Section Base */
[b-zb0ja7fh7c] .granny-section {
    /* background: rgba(255, 255, 255, 0.7); */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* border-radius: 20px; */
    padding: 40px;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(245, 229, 211, 0.6); */
}

[b-zb0ja7fh7c] .granny-section-header {
    text-align: center;
    margin-bottom: 35px;
}

[b-zb0ja7fh7c] .granny-section-title {
    /* inherited font-sans */
    font-size: 2em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 10px 0;
}

[b-zb0ja7fh7c] .granny-section-subtitle {
    font-size: 1.1em;
    color: #666;
    margin: 0;
    font-style: italic;
}

/* Cards Grid */
[b-zb0ja7fh7c] .granny-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

[b-zb0ja7fh7c] .granny-card {
    background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0dad3;
    transition: all 0.3s ease;
}

    [b-zb0ja7fh7c] .granny-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

[b-zb0ja7fh7c] .granny-card-button {
    width: 100%;
    text-align: left;
    appearance: none;
    cursor: pointer;
}

[b-zb0ja7fh7c] .granny-card-highlight {
    background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    border: 2px solid #E8B076;
}

[b-zb0ja7fh7c] .granny-card-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-align: center;
}

[b-zb0ja7fh7c] .granny-card-title {
    /* inherited font-sans */
    font-size: 1.3em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 10px 0;
}

[b-zb0ja7fh7c] .granny-card-text {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Progress Cards */
[b-zb0ja7fh7c] .granny-progress-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

[b-zb0ja7fh7c] .granny-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

[b-zb0ja7fh7c] .granny-progress-card {
    background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3;
    transition: all 0.3s ease;
}

[b-zb0ja7fh7c] .granny-progress-card-primary {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[b-zb0ja7fh7c] .granny-progress-card-glow {
    background: linear-gradient(135deg, #FFF8EE 0%, #FFDAB8 100%);
    box-shadow: 0 10px 28px rgba(233, 179, 112, 0.18);
}

    [b-zb0ja7fh7c] .granny-progress-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

[b-zb0ja7fh7c] .progress-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

[b-zb0ja7fh7c] .progress-number {
    font-size: 3em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 10px;
}

[b-zb0ja7fh7c] .progress-label {
    font-size: 1em;
    color: #666;
    font-weight: 600;
}

[b-zb0ja7fh7c] .progress-subtitle {
    font-size: 0.9em;
    color: #7a6b65;
    margin-top: 4px;
    line-height: 1.4;
}

[b-zb0ja7fh7c] .granny-progress-breakdown {
    background: linear-gradient(180deg, rgba(255, 249, 240, 0.8) 0%, rgba(255, 244, 228, 0.92) 100%);
    border: 1px solid rgba(240, 218, 211, 0.9);
    border-radius: 22px;
    padding: 22px 24px 24px;
    box-shadow: 0 6px 20px rgba(92, 63, 47, 0.05);
}

[b-zb0ja7fh7c] .granny-progress-breakdown-intro {
    margin: 0 0 16px 0;
    color: #7b5a53;
    font-size: 0.98rem;
    font-style: italic;
    text-align: center;
}

[b-zb0ja7fh7c] .granny-progress-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

[b-zb0ja7fh7c] .granny-progress-detail-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(240, 218, 211, 0.95);
    border-radius: 18px;
    padding: 18px 16px;
    text-align: center;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[b-zb0ja7fh7c] .progress-detail-icon {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

[b-zb0ja7fh7c] .progress-detail-number {
    font-size: 2rem;
    font-weight: 700;
    color: #4F4A45;
    line-height: 1;
    margin-bottom: 8px;
}

[b-zb0ja7fh7c] .progress-detail-label {
    font-size: 0.98rem;
    font-weight: 700;
    color: #5d4d46;
    margin-bottom: 5px;
}

[b-zb0ja7fh7c] .progress-detail-subtitle {
    font-size: 0.86rem;
    color: #7a6b65;
    line-height: 1.35;
}

/* Featured Theme */
[b-zb0ja7fh7c] .granny-featured-theme {
    display: flex;
    background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3;
    transition: all 0.3s ease;
}

    [b-zb0ja7fh7c] .granny-featured-theme:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

[b-zb0ja7fh7c] .theme-image {
    width: 40%;
    object-fit: cover;
    border-radius: 20px;
    margin: 1em;
}

[b-zb0ja7fh7c] .theme-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[b-zb0ja7fh7c] .theme-title {
    /* inherited font-sans */
    font-size: 1.8em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 15px 0;
}

[b-zb0ja7fh7c] .theme-description {
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

[b-zb0ja7fh7c] .btn-theme {
    align-self: flex-start;
    padding: 12px 30px;
    background-color: #FBCFA8;
    color: #4F4A45;
    border: 2px solid #F0C07A;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

    [b-zb0ja7fh7c] .btn-theme:hover {
        background-color: #F0C07A;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(251, 207, 168, 0.4);
    }

/* Granny's Safe Space CTA Banner */
/* ::deep .granny-safe-space {
    background: linear-gradient(135deg, rgba(251, 207, 168, 0.15) 0%, rgba(255, 249, 240, 0.6) 100%);
} */

[b-zb0ja7fh7c] .granny-safe-space-card {
    display: flex;
    /* background: linear-gradient(135deg, #FBE8D3 0%, #F5D5B8 100%);
    /* background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%); */
    /* border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid #E8C9A8; 
    transition: all 0.3s ease; */
}

    [b-zb0ja7fh7c] .granny-safe-space-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    }

[b-zb0ja7fh7c] .safe-space-image {
    width: 40%;
    object-fit: cover;
    border-radius: 20px;
    margin: 1.0em;
    mix-blend-mode: multiply
}

[b-zb0ja7fh7c] .safe-space-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[b-zb0ja7fh7c] .safe-space-title {
    /* inherited font-sans */
    font-size: 1.8em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 15px 0;
}

[b-zb0ja7fh7c] .safe-space-description {
    font-size: 1.1em;
    color: #5A5550;
    line-height: 1.7;
    margin: 0 0 25px 0;
}

[b-zb0ja7fh7c] .btn-safe-space {
    background-color: #E8B076;
    border-color: #D9A066;
}

    [b-zb0ja7fh7c] .btn-safe-space:hover {
        background-color: #D9A066;
        box-shadow: 0 4px 18px rgba(232, 176, 118, 0.5);
    }

/* Wisdom Section */
[b-zb0ja7fh7c] .granny-wisdom {
    background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
}

[b-zb0ja7fh7c] .granny-wisdom-card {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

[b-zb0ja7fh7c] .granny-quote-icon {
    font-size: 3em;
    margin-bottom: 20px;
    opacity: 0.7;
}

[b-zb0ja7fh7c] .granny-quote {
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

    [b-zb0ja7fh7c] .granny-quote p {
        font-size: 1.4em;
        font-style: italic;
        color: #4F4A45;
        line-height: 1.6;
        margin: 0;
    }

[b-zb0ja7fh7c] .granny-signature {
    font-size: 1.1em;
    color: #666;
    font-weight: 600;
}

/* Quick Actions */
[b-zb0ja7fh7c] .granny-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

[b-zb0ja7fh7c] .granny-action-btn {
    background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
    border: 2px solid #f5e5d3;
    border-radius: 15px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* inherited font-sans */
}

    [b-zb0ja7fh7c] .granny-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    }

[b-zb0ja7fh7c] .action-icon {
    font-size: 2.5em;
}

[b-zb0ja7fh7c] .action-label {
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
}

/* Sidebar Overlay */
.sidebar-overlay[b-zb0ja7fh7c] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none; /* Prevent scroll-through when overlay is visible */
}

.sidebar-overlay.hidden[b-zb0ja7fh7c] {
    display: none;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    [b-zb0ja7fh7c] .mobile-top-bar {
        display: flex !important;
    }

    [b-zb0ja7fh7c] .toggle-sidebar {
        display: none !important;
    }

    [b-zb0ja7fh7c] .app-layout {
        padding-top: 60px;
    }

    [b-zb0ja7fh7c] .container-v3 {
        margin-left: 0 !important;
        margin-top: 70px;
    }

    [b-zb0ja7fh7c] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

        [b-zb0ja7fh7c] .sidebar.visible {
            transform: translateX(0);
        }

    [b-zb0ja7fh7c] .granny-hero-content {
        flex-direction: column;
        text-align: center;
    }

    [b-zb0ja7fh7c] .granny-hero-actions {
        justify-content: center;
    }

    [b-zb0ja7fh7c] .granny-illustration-wrapper {
        transform: none;
    }

    [b-zb0ja7fh7c] .granny-illustration {
        width: 300px;
    }

    [b-zb0ja7fh7c] .granny-featured-theme {
        flex-direction: column;
    }

    [b-zb0ja7fh7c] .theme-image {
        width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
    }

    [b-zb0ja7fh7c] .granny-safe-space-card {
        flex-direction: column;
    }

    [b-zb0ja7fh7c] .safe-space-image {
        width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
        max-height: 280px;
    }

    [b-zb0ja7fh7c] .safe-space-content {
        text-align: center;
    }

    [b-zb0ja7fh7c] .btn-safe-space {
        align-self: center;
    }
}

@media (max-width: 768px) {
    /* Mobile touch scroll fixes - REMOVED */
    [b-zb0ja7fh7c] .app-layout {
        overflow-x: hidden;
    }

    [b-zb0ja7fh7c] .container-v3 {
        padding: 0 var(--mobile-page-margin);
        margin-top: 40px;
        gap: 30px;
    }

    [b-zb0ja7fh7c] .granny-hero-section {
        padding: 30px 20px;
    }

    [b-zb0ja7fh7c] .granny-hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    [b-zb0ja7fh7c] .btn-hero-primary,
    [b-zb0ja7fh7c] .btn-hero-secondary {
        width: 100%;
        max-width: 280px;
        padding: 12px 24px;
        font-size: 1em;
    }

    [b-zb0ja7fh7c] .granny-title {
        font-size: 2em;
    }

    [b-zb0ja7fh7c] .granny-subtitle {
        font-size: 1.1em;
    }

    [b-zb0ja7fh7c] .granny-section {
        padding: 30px 20px;
    }

    [b-zb0ja7fh7c] .granny-section-title {
        font-size: 1.6em;
    }

    [b-zb0ja7fh7c] .granny-cards-grid {
        grid-template-columns: 1fr;
    }

    [b-zb0ja7fh7c] .granny-progress-cards {
        grid-template-columns: 1fr;
    }

    [b-zb0ja7fh7c] .granny-progress-detail-grid {
        grid-template-columns: 1fr;
    }

    [b-zb0ja7fh7c] .theme-content {
        padding: 25px;
    }

    [b-zb0ja7fh7c] .theme-title {
        font-size: 1.5em;
    }

    [b-zb0ja7fh7c] .granny-quote p {
        font-size: 1.2em;
    }

    [b-zb0ja7fh7c] .granny-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    [b-zb0ja7fh7c] .granny-illustration {
        width: 300px;
    }

    [b-zb0ja7fh7c] .granny-title {
        font-size: 1.8em;
    }

    [b-zb0ja7fh7c] .granny-subtitle {
        font-size: 1em;
    }

    [b-zb0ja7fh7c] .granny-section-title {
        font-size: 1.4em;
    }

    [b-zb0ja7fh7c] .granny-card {
        padding: 20px;
    }

    [b-zb0ja7fh7c] .granny-progress-card {
        padding: 20px;
    }

    [b-zb0ja7fh7c] .progress-number {
        font-size: 2.5em;
    }

    [b-zb0ja7fh7c] .granny-progress-breakdown {
        padding: 18px;
    }

    [b-zb0ja7fh7c] .granny-progress-detail-card {
        min-height: unset;
    }

    [b-zb0ja7fh7c] .progress-detail-number {
        font-size: 1.8rem;
    }
}

/* Footer alignment to follow sidebar on desktop (mirrors ThemesAll layout) */
[b-zb0ja7fh7c] .main-footer {
    margin-left: 280px;
    width: calc(100% - 280px);
    margin-top: 80px;
    padding: 60px 0 30px 0;
    /*background-color: #FAF3E5;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(245, 229, 211, 0.6);*/
}

    [b-zb0ja7fh7c] .main-footer.sidebar-hidden {
        margin-left: 0;
        width: 100%;
    }

@media (max-width: 992px) {
    [b-zb0ja7fh7c] .main-footer {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Pages/GrannysError.razor.rz.scp.css */
/* Granny-specific recovery page. Mirrors the foyer language without becoming a full landing page. */

.error-layout[b-urgalnhb7z],
[b-urgalnhb7z] .app-layout {
    --error-bg: #fff7ee;
    --error-surface: rgba(255, 252, 246, 0.78);
    --error-border: #ead9c9;
    --error-ink: #3f312b;
    --error-muted: #786b62;
    --error-accent: #df9f6b;
    display: block;
    min-height: 100vh;
    width: 100%;
    background:
        repeating-linear-gradient(0deg, rgba(91, 65, 43, 0.018) 0, rgba(91, 65, 43, 0.018) 1px, transparent 1px, transparent 7px),
        linear-gradient(90deg, #fffaf4 0, var(--error-bg) 38%, #fffaf4 100%);
    color: var(--error-ink);
    overflow-x: hidden;
}

[b-urgalnhb7z] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

[b-urgalnhb7z] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #E7D5C4;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-urgalnhb7z] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-urgalnhb7z] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

[b-urgalnhb7z] .app-logo-link {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: -1.2rem;
}

[b-urgalnhb7z] .sidebar-logo img {
    display: inline-block;
    width: auto;
    height: 50px;
    max-width: 180px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: middle;
}

[b-urgalnhb7z] .sidebar-menu {
    width: 100%;
}

[b-urgalnhb7z] .sidebar-bottom,
[b-urgalnhb7z] .sidebar-guest-actions {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
}

[b-urgalnhb7z] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    border: 0;
    border-radius: 10px;
    background: #FFECE3;
    padding: 6px 10px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

[b-urgalnhb7z] .toggle-sidebar:hover,
[b-urgalnhb7z] .toggle-sidebar:focus-visible {
    background: #F8DFD2;
    transform: translateY(-1px);
}

.sidebar-overlay[b-urgalnhb7z] {
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(63, 43, 31, 0.3);
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-urgalnhb7z] {
    display: none;
}

[b-urgalnhb7z] .container-v3.granny-error-page {
    flex: 1;
    min-width: 0;
    width: min(1180px, calc(100% - 328px));
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 48px 56px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    box-sizing: border-box;
    position: relative;
    left: 140px;
    transition: left 0.3s ease, width 0.3s ease;
}

[b-urgalnhb7z] .container-v3.granny-error-page.sidebar-hidden {
    width: min(1180px, calc(100% - 48px));
    left: 0;
}

.error-hero[b-urgalnhb7z] {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(410px, 1fr);
    align-items: center;
    gap: 72px;
    min-height: 356px;
    padding: 4px 0 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
    animation: errorPageEnter-b-urgalnhb7z 0.5s ease both;
}

.error-hero-visual[b-urgalnhb7z] {
    min-height: 360px;
    display: grid;
    place-items: end center;
}

.error-granny[b-urgalnhb7z] {
    width: min(100%, 470px);
    max-height: 360px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(118, 71, 31, 0.18));
    animation: errorIllustrationSettle-b-urgalnhb7z 0.62s ease both;
}

.error-hero-copy[b-urgalnhb7z] {
    max-width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 6px;
}

.error-kicker[b-urgalnhb7z],
.support-kicker[b-urgalnhb7z] {
    margin-bottom: 12px;
    color: #78846e;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.error-hero h1[b-urgalnhb7z],
.recovery-heading h2[b-urgalnhb7z],
.support-copy h2[b-urgalnhb7z] {
    margin: 0;
    color: var(--error-ink);
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0;
}

.error-hero h1[b-urgalnhb7z] {
    max-width: 680px;
    font-size: 4.05rem;
    line-height: 1.03;
}

.error-hero p[b-urgalnhb7z] {
    max-width: 570px;
    margin: 18px 0 0;
    color: #4f4944;
    font-size: 1.14rem;
    line-height: 1.5;
}

.error-hero-actions[b-urgalnhb7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
}

.error-button[b-urgalnhb7z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 52px;
    max-width: 100%;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid #d8a983;
    color: #382f29;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.error-button:hover[b-urgalnhb7z],
.error-button:focus-visible[b-urgalnhb7z] {
    transform: translateY(-2px);
}

.error-button-primary[b-urgalnhb7z] {
    background: #dfa56e;
    border-color: #d99a63;
    color: #fff8ef;
    box-shadow: 0 14px 28px rgba(154, 95, 42, 0.17);
}

.error-button-primary:hover[b-urgalnhb7z],
.error-button-primary:focus-visible[b-urgalnhb7z] {
    background: #d99356;
    box-shadow: 0 18px 34px rgba(154, 95, 42, 0.23);
}

.error-button-secondary[b-urgalnhb7z] {
    background: rgba(255, 252, 246, 0.72);
    border-color: rgba(216, 169, 131, 0.72);
}

.error-button-secondary:hover[b-urgalnhb7z],
.error-button-secondary:focus-visible[b-urgalnhb7z] {
    background: rgba(255, 252, 246, 0.96);
    border-color: rgba(190, 132, 85, 0.72);
    box-shadow: 0 12px 24px rgba(111, 76, 48, 0.08);
}

.recovery-section[b-urgalnhb7z] {
    display: grid;
    gap: 26px;
}

.recovery-heading[b-urgalnhb7z] {
    max-width: 720px;
    padding: 0 4px;
}

.recovery-heading h2[b-urgalnhb7z],
.support-copy h2[b-urgalnhb7z] {
    font-size: 2.55rem;
    line-height: 1.08;
}

.recovery-heading p[b-urgalnhb7z],
.support-copy p[b-urgalnhb7z] {
    margin: 10px 0 0;
    color: var(--error-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.recovery-grid[b-urgalnhb7z] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.recovery-card[b-urgalnhb7z] {
    min-height: 170px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
    padding: 30px 26px;
    border: 1px solid var(--error-border);
    border-radius: 12px;
    background: var(--error-surface);
    color: var(--error-ink);
    text-decoration: none;
    box-shadow: 0 14px 42px rgba(108, 75, 48, 0.035);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.recovery-card:hover[b-urgalnhb7z],
.recovery-card:focus-visible[b-urgalnhb7z] {
    transform: translateY(-3px);
    border-color: rgba(205, 152, 107, 0.58);
    background: rgba(255, 252, 246, 0.94);
    box-shadow: 0 18px 34px rgba(105, 75, 50, 0.1);
}

.recovery-card-featured[b-urgalnhb7z] {
    background: linear-gradient(180deg, rgba(255, 238, 215, 0.9) 0%, rgba(255, 252, 246, 0.84) 100%);
}

.recovery-icon[b-urgalnhb7z] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff0e3;
    color: #c46f3f;
    box-shadow: inset 0 0 0 1px rgba(232, 211, 193, 0.58);
}

.recovery-icon svg[b-urgalnhb7z] {
    width: 25px;
    height: 25px;
    display: block;
    vector-effect: non-scaling-stroke;
}

.recovery-copy[b-urgalnhb7z] {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.recovery-card strong[b-urgalnhb7z] {
    color: var(--error-ink);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.18;
}

.recovery-copy > span[b-urgalnhb7z] {
    color: var(--error-muted);
    font-size: 0.96rem;
    line-height: 1.5;
}

.support-panel[b-urgalnhb7z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 34px 38px;
    border: 1px solid var(--error-border);
    border-radius: 12px;
    background: rgba(255, 252, 246, 0.78);
    box-shadow: 0 14px 42px rgba(108, 75, 48, 0.045);
}

.support-action[b-urgalnhb7z] {
    white-space: nowrap;
}

.technical-details[b-urgalnhb7z] {
    grid-column: 1 / -1;
    margin-top: 2px;
    color: var(--error-muted);
}

.technical-details summary[b-urgalnhb7z] {
    width: fit-content;
    cursor: pointer;
    color: #8b5b38;
    font-weight: 800;
}

.technical-details p[b-urgalnhb7z] {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    margin: 14px 0 0;
    font-size: 0.92rem;
}

.technical-details code[b-urgalnhb7z] {
    min-width: 0;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.66);
    padding: 0.3rem 0.52rem;
    color: #4B3428;
    font-family: Consolas, "Fira Code", monospace;
    box-shadow: inset 0 1px 3px rgba(140, 102, 78, 0.12);
}

[b-urgalnhb7z] .main-footer {
    width: min(1180px, calc(100% - 328px));
    margin: 76px auto 0;
    padding: 60px 48px 30px;
    box-sizing: border-box;
    position: relative;
    left: 140px;
}

[b-urgalnhb7z] .main-footer.sidebar-hidden {
    width: min(1180px, calc(100% - 48px));
    left: 0;
}

[b-urgalnhb7z] .footer-container {
    max-width: none;
    margin: 0;
    padding: 0;
}

@keyframes errorPageEnter-b-urgalnhb7z {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes errorIllustrationSettle-b-urgalnhb7z {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1280px) {
    .error-hero[b-urgalnhb7z] {
        gap: 48px;
    }

    .error-hero h1[b-urgalnhb7z] {
        font-size: 3.45rem;
    }

    .recovery-grid[b-urgalnhb7z] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .error-layout[b-urgalnhb7z],
    [b-urgalnhb7z] .app-layout {
        padding-top: var(--mobile-topbar-height, 60px);
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
    }

    [b-urgalnhb7z] .toggle-sidebar {
        display: none !important;
    }

    [b-urgalnhb7z] .sidebar {
        top: var(--mobile-topbar-height, 60px);
        height: calc(100vh - var(--mobile-topbar-height, 60px));
        transform: translateX(-100%);
    }

    [b-urgalnhb7z] .sidebar.visible {
        transform: translateX(0);
    }

    [b-urgalnhb7z] .sidebar.hidden {
        transform: translateX(-100%);
    }

    [b-urgalnhb7z] .container-v3.granny-error-page,
    [b-urgalnhb7z] .container-v3.granny-error-page.sidebar-hidden {
        width: 100%;
        max-width: 100%;
        left: 0;
        margin: 0;
        padding: 46px 22px 42px;
    }

    .error-hero[b-urgalnhb7z] {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 22px;
        text-align: center;
    }

    .error-hero-visual[b-urgalnhb7z] {
        min-height: 265px;
        order: -1;
        place-items: end center;
    }

    .error-granny[b-urgalnhb7z] {
        width: min(330px, 100%);
    }

    .error-hero-copy[b-urgalnhb7z] {
        align-items: center;
        max-width: none;
    }

    .error-hero h1[b-urgalnhb7z] {
        font-size: 3rem;
    }

    .error-hero-actions[b-urgalnhb7z] {
        justify-content: center;
    }

    .support-panel[b-urgalnhb7z] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .support-action[b-urgalnhb7z],
    .technical-details summary[b-urgalnhb7z] {
        justify-self: center;
    }

    [b-urgalnhb7z] .main-footer,
    [b-urgalnhb7z] .main-footer.sidebar-hidden {
        width: 100%;
        left: 0;
        margin-top: 56px;
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (max-width: 640px) {
    [b-urgalnhb7z] .container-v3.granny-error-page,
    [b-urgalnhb7z] .container-v3.granny-error-page.sidebar-hidden {
        gap: 34px;
        padding: 20px 14px 38px;
    }

    .error-hero[b-urgalnhb7z] {
        padding-top: 8px;
    }

    .error-hero-visual[b-urgalnhb7z] {
        min-height: 210px;
    }

    .error-granny[b-urgalnhb7z] {
        width: min(250px, 100%);
    }

    .error-hero h1[b-urgalnhb7z] {
        font-size: 2.28rem;
        line-height: 1.06;
    }

    .error-hero p[b-urgalnhb7z] {
        font-size: 1rem;
        line-height: 1.58;
    }

    .error-hero-actions[b-urgalnhb7z] {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .recovery-section[b-urgalnhb7z] {
        margin-top: 70px;
    }

    .error-button[b-urgalnhb7z] {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .recovery-heading h2[b-urgalnhb7z],
    .support-copy h2[b-urgalnhb7z] {
        font-size: 2.02rem;
    }

    .recovery-grid[b-urgalnhb7z] {
        grid-template-columns: 1fr;
    }

    .recovery-card[b-urgalnhb7z] {
        min-height: 0;
        padding: 22px 20px;
    }

    .support-panel[b-urgalnhb7z] {
        padding: 24px 18px;
    }

    .technical-details p[b-urgalnhb7z] {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-urgalnhb7z],
    *[b-urgalnhb7z]::before,
    *[b-urgalnhb7z]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

::global(body.night-mode) .error-layout[b-urgalnhb7z],
::global(body.night-mode) .support-panel[b-urgalnhb7z],
::global(body.night-mode) .recovery-card[b-urgalnhb7z] {
    background: #2F2924;
    border-color: rgba(255, 226, 196, 0.12);
    color: #F5E8D8;
}

::global(body.night-mode) .error-hero h1[b-urgalnhb7z],
::global(body.night-mode) .recovery-heading h2[b-urgalnhb7z],
::global(body.night-mode) .support-copy h2[b-urgalnhb7z],
::global(body.night-mode) .recovery-card strong[b-urgalnhb7z] {
    color: #F5E8D8;
}

::global(body.night-mode) .error-hero p[b-urgalnhb7z],
::global(body.night-mode) .recovery-heading p[b-urgalnhb7z],
::global(body.night-mode) .support-copy p[b-urgalnhb7z],
::global(body.night-mode) .recovery-copy > span[b-urgalnhb7z] {
    color: rgba(245, 232, 216, 0.74);
}
/* /Components/Pages/GrannysNewCorner.razor.rz.scp.css */
/* GrannysNewCorner.razor.css - foyer layout */

.app-layout[b-dp0oy34yb6] {
    --foyer-bg: #fff7ee;
    --foyer-surface: rgba(255, 252, 246, 0.74);
    --foyer-border: #ead9c9;
    --foyer-ink: #3f312b;
    --foyer-muted: #786b62;
    --foyer-accent: #df9f6b;
    display: flex;
    min-height: 100vh;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 42% 4%, rgba(255, 226, 190, 0.72), transparent 38%),
        linear-gradient(90deg, #fffaf4 0, var(--foyer-bg) 36%, #fffaf4 100%);
    color: var(--foyer-ink);
}

@media (max-width: 1024px) {
    [b-dp0oy34yb6] .toggle-sidebar {
        display: none !important;
    }
}

.sidebar[b-dp0oy34yb6] {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

.sidebar.hidden[b-dp0oy34yb6] {
    transform: translateX(-100%);
}

.sidebar-top-content[b-dp0oy34yb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}

.app-logo-link[b-dp0oy34yb6] {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

.sidebar-logo img[b-dp0oy34yb6] {
    max-width: 180px;
    width: auto;
    height: 50px;
}

[b-dp0oy34yb6] .sidebar-menu {
    width: 100%;
}

.toggle-sidebar[b-dp0oy34yb6] {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: 0;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    z-index: 100;
}

.foyer-content-shell[b-dp0oy34yb6] {
    flex: 1;
    min-width: 0;
    margin-left: 280px;
    transition: margin-left 0.3s ease;
}

.foyer-content-shell.sidebar-hidden[b-dp0oy34yb6] {
    margin-left: 0;
}

.foyer-main[b-dp0oy34yb6] {
    box-sizing: border-box;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 56px 48px 64px;
}

.soft-card[b-dp0oy34yb6] {
    background: var(--foyer-surface);
    border: 1px solid var(--foyer-border);
    border-radius: 12px;
    box-shadow: 0 14px 42px rgba(108, 75, 48, 0.035);
}

.foyer-hero[b-dp0oy34yb6] {
    margin-bottom: 56px;
}

/* Hero is open paper, not a card */
.foyer-hero-card[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(410px, 1fr);
    align-items: center;
    column-gap: 72px;
    min-height: 342px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.foyer-portrait[b-dp0oy34yb6] {
    display: grid;
    place-items: end center;
    min-height: 360px;
}

.foyer-granny[b-dp0oy34yb6] {
    width: min(100%, 470px);
    max-height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(118, 71, 31, 0.18));
}

.foyer-welcome[b-dp0oy34yb6] {
    padding-top: 6px;
}

.foyer-welcome h1[b-dp0oy34yb6],
.featured-copy h2[b-dp0oy34yb6],
.foyer-section-heading h2[b-dp0oy34yb6],
.foyer-pause p[b-dp0oy34yb6] {
    font-family: var(--font-serif);
    letter-spacing: 0;
    color: var(--foyer-ink);
}

.foyer-welcome h1[b-dp0oy34yb6] {
    max-width: 540px;
    margin: 0;
    font-size: clamp(2.5rem, 4.2vw, 4.15rem);
    line-height: 1.03;
    font-weight: 700;
}

.foyer-lede[b-dp0oy34yb6] {
    max-width: 430px;
    margin: 18px 0 0;
    color: #4f4944;
    font-size: 1.14rem;
    line-height: 1.45;
}

.foyer-actions[b-dp0oy34yb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}

.foyer-button[b-dp0oy34yb6] {
    min-width: 190px;
    min-height: 52px;
    border-radius: 999px;
    padding: 0 26px;
    border: 1px solid #d8a983;
    background: transparent;
    color: #382f29;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.foyer-button.primary[b-dp0oy34yb6] {
    background: var(--foyer-accent);
    color: #fffaf4;
    border-color: #d6905a;
    box-shadow: 0 12px 26px rgba(204, 130, 76, 0.18);
}

.foyer-button:hover[b-dp0oy34yb6],
.whisper-card:hover[b-dp0oy34yb6],
.guest-invitation-card:hover[b-dp0oy34yb6],
.next-card:hover[b-dp0oy34yb6] {
    transform: translateY(-2px);
}

.foyer-button.primary:hover[b-dp0oy34yb6] {
    background: #d5905f;
}

.foyer-button.secondary:hover[b-dp0oy34yb6] {
    background: rgba(255, 239, 224, 0.9);
    border-color: #c89167;
    color: #8b5a3d;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(143, 95, 68, 0.08), inset 0 0 0 1px rgba(255, 250, 244, 0.58);
}

.foyer-help-link[b-dp0oy34yb6] {
    display: inline-flex;
    margin-top: 20px;
    color: #b28165;
    font-size: 0.98rem;
    font-style: italic;
    text-decoration: none;
}

.foyer-help-link:hover[b-dp0oy34yb6] {
    color: #8f5f44;
}

.foyer-section[b-dp0oy34yb6] {
    margin-block: 34px;
}

.foyer-section-heading[b-dp0oy34yb6] {
    display: grid;
    gap: 6px;
    margin-bottom: 24px;
}

.foyer-section-heading.centered[b-dp0oy34yb6] {
    text-align: center;
    justify-items: center;
}

.foyer-section-heading h2[b-dp0oy34yb6] {
    margin: 0;
    font-size: clamp(1.55rem, 2.3vw, 2.15rem);
    line-height: 1.12;
    font-weight: 700;
}

.foyer-section-heading p[b-dp0oy34yb6] {
    margin: 0;
    color: var(--foyer-muted);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
}

.whispers-row[b-dp0oy34yb6],
.story-grid[b-dp0oy34yb6],
.next-grid[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.whisper-card[b-dp0oy34yb6] {
    min-height: 190px;
    padding: 32px 30px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    align-items: start;
    text-align: left;
    cursor: pointer;
}

.whisper-icon[b-dp0oy34yb6],
.guest-invitation-icon[b-dp0oy34yb6],
.next-icon[b-dp0oy34yb6],
.story-icon[b-dp0oy34yb6] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff0e3;
    color: #c46f3f;
    font-style: normal;
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(232, 211, 193, 0.58);
}

.whisper-icon svg[b-dp0oy34yb6],
.guest-invitation-icon svg[b-dp0oy34yb6],
.next-icon svg[b-dp0oy34yb6],
.story-icon svg[b-dp0oy34yb6],
.pause-icon svg[b-dp0oy34yb6] {
    width: 25px;
    height: 25px;
    display: block;
    vector-effect: non-scaling-stroke;
}

.whisper-copy[b-dp0oy34yb6],
.next-copy[b-dp0oy34yb6] {
    display: grid;
    gap: 10px;
}

.whisper-copy strong[b-dp0oy34yb6] {
    max-width: 170px;
    color: #3f312b;
    font-family: var(--font-serif);
    font-size: 1.22rem;
    line-height: 1.18;
}

.whisper-copy span[b-dp0oy34yb6],
.next-copy span[b-dp0oy34yb6] {
    color: #4f4944;
    font-size: 0.96rem;
    line-height: 1.42;
}

.whisper-copy em[b-dp0oy34yb6] {
    margin-top: 10px;
    color: #cc7544;
    font-style: normal;
    font-size: 0.93rem;
}

.story-section[b-dp0oy34yb6] {
    margin-top: 34px;
}

.story-grid[b-dp0oy34yb6] {
    gap: 28px;
}

.story-card[b-dp0oy34yb6] {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 248px;
    padding: 34px 28px;
    text-align: center;
}

.story-card + .story-card[b-dp0oy34yb6] {
    margin-left: 0;
}

.story-card .story-icon[b-dp0oy34yb6] {
    margin-bottom: 18px;
}

.story-icon.cloud[b-dp0oy34yb6] {
    background: #fff0de;
}

.story-icon.sparkle[b-dp0oy34yb6] {
    background: #fff0e2;
}

.story-icon.star[b-dp0oy34yb6] {
    background: #fff3cf;
}

.story-card strong[b-dp0oy34yb6] {
    font-family: var(--font-serif);
    color: var(--foyer-muted);
    font-size: 2.95rem;
    font-weight: 560;
    line-height: 1;
    font-variation-settings: "SOFT" 70, "WONK" 0.35;
}

.story-card span:not(.story-icon)[b-dp0oy34yb6] {
    margin-top: 8px;
    color: #2f2b27;
    font-size: 1.02rem;
    line-height: 1.35;
}

.story-card small[b-dp0oy34yb6] {
    max-width: 220px;
    margin-top: 7px;
    color: #665d55;
    font-size: 0.92rem;
    line-height: 1.35;
}

.story-breakdown[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
    padding: 30px 34px;
}

.breakdown-item[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    align-items: center;
    padding: 0 26px;
}

.breakdown-item + .breakdown-item[b-dp0oy34yb6] {
    border-left: 1px solid var(--foyer-border);
}

.breakdown-item .story-icon[b-dp0oy34yb6] {
    grid-row: 1 / span 3;
}

.breakdown-item strong[b-dp0oy34yb6] {
    font-family: var(--font-serif);
    color: var(--foyer-muted);
    font-size: 2rem;
    font-weight: 560;
    line-height: 1;
    font-variation-settings: "SOFT" 70, "WONK" 0.35;
}

.breakdown-item span:not(.story-icon)[b-dp0oy34yb6] {
    color: #2f2b27;
    font-weight: 700;
    line-height: 1.25;
}

.breakdown-item small[b-dp0oy34yb6] {
    margin-top: 6px;
    color: #665d55;
    line-height: 1.35;
}

.guest-invitation-section[b-dp0oy34yb6] {
    margin-top: 34px;
}

.guest-invitation-heading[b-dp0oy34yb6] {
    margin-bottom: 26px;
}

.guest-invitation-grid[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
}

.guest-invitation-card[b-dp0oy34yb6] {
    min-height: 178px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    align-content: start;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    background:
        linear-gradient(180deg, rgba(255, 252, 246, 0.86), rgba(255, 246, 235, 0.78));
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.guest-invitation-card:hover[b-dp0oy34yb6] {
    border-color: rgba(196, 111, 63, 0.32);
    box-shadow: 0 18px 44px rgba(108, 75, 48, 0.07);
}

.guest-invitation-card-wide[b-dp0oy34yb6] {
    grid-column: 1 / -1;
    min-height: 132px;
    align-items: center;
}

.guest-invitation-card:focus-visible[b-dp0oy34yb6] {
    outline: 3px solid rgba(196, 111, 63, 0.28);
    outline-offset: 4px;
}

.guest-invitation-icon[b-dp0oy34yb6] {
    width: 48px;
    height: 48px;
    background: #fff2e8;
}

.guest-invitation-copy[b-dp0oy34yb6] {
    display: grid;
    gap: 10px;
}

.guest-invitation-copy strong[b-dp0oy34yb6] {
    color: #3f312b;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.guest-invitation-copy span[b-dp0oy34yb6] {
    color: #514840;
    font-size: 0.95rem;
    line-height: 1.45;
}

.featured-section[b-dp0oy34yb6] {
    margin-top: 42px;
}

.featured-theme[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: minmax(390px, 0.92fr) minmax(360px, 1.08fr);
    gap: 46px;
    align-items: stretch;
    padding: 16px 44px 16px 16px;
    overflow: hidden;
}

.featured-image-wrap[b-dp0oy34yb6] {
    overflow: hidden;
    border-radius: 10px 0 0 10px;
    background: #f4e8d8;
    height: 100%;
    min-height: 280px;
}

.featured-image[b-dp0oy34yb6] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.featured-copy[b-dp0oy34yb6] {
    display: grid;
    justify-items: start;
    align-content: center;
}

.featured-copy h2[b-dp0oy34yb6] {
    margin: 0;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    line-height: 1.12;
}

.featured-copy > p[b-dp0oy34yb6] {
    max-width: 490px;
    margin: 18px 0 26px;
    color: #4f4944;
    line-height: 1.45;
}

.featured-copy .foyer-button[b-dp0oy34yb6] {
    min-width: 190px;
    min-height: 46px;
    padding-inline: 20px;
    color: #342820;
    background: #ffc99d;
    border-color: transparent;
    box-shadow: none;
}

.foyer-pause[b-dp0oy34yb6] {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 40px;
    min-height: 112px;
    margin-block: 38px;
    padding: 26px 42px;
}

.pause-icon[b-dp0oy34yb6] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff0e3;
    color: #c46f3f;
    font-size: 1.65rem;
    box-shadow: inset 0 0 0 1px rgba(232, 211, 193, 0.6);
}

.foyer-pause blockquote[b-dp0oy34yb6] {
    margin: 0;
    text-align: center;
}

.foyer-pause p[b-dp0oy34yb6] {
    margin: 0;
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    font-style: italic;
    line-height: 1.2;
}

.foyer-pause footer[b-dp0oy34yb6] {
    margin-top: 8px;
    color: #564d45;
    font-size: 0.94rem;
}

.next-section[b-dp0oy34yb6] {
    margin-top: 12px;
}

.next-grid[b-dp0oy34yb6] {
    gap: 28px;
}

.next-card[b-dp0oy34yb6] {
    min-height: 142px;
    padding: 28px 26px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 18px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.next-card + .next-card[b-dp0oy34yb6] {
    margin-left: 0;
}

.next-copy strong[b-dp0oy34yb6] {
    color: #2f2b27;
    font-size: 1rem;
}

.next-arrow[b-dp0oy34yb6] {
    align-self: end;
    color: #a36543;
    font-size: 1.2rem;
}

.sidebar-overlay[b-dp0oy34yb6] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    touch-action: none;
}

.sidebar-overlay.hidden[b-dp0oy34yb6] {
    display: none;
}

.foyer-content-shell[b-dp0oy34yb6]  .main-footer {
    width: 100%;
    margin-left: 0;
    margin-top: 56px;
    box-sizing: border-box;
}

.foyer-content-shell[b-dp0oy34yb6]  .main-footer.sidebar-hidden {
    width: 100%;
    margin-left: 0;
}

.foyer-content-shell[b-dp0oy34yb6]  .footer-container {
    margin: 0 auto;
}

@media (max-width: 1024px) {
    [b-dp0oy34yb6] .mobile-floating-header {
        display: flex !important;
        z-index: 1200;
        background:
            linear-gradient(180deg, rgba(255, 247, 238, 0.96) 0%, rgba(255, 247, 238, 0.82) 68%, rgba(255, 247, 238, 0) 100%);
    }

    .app-layout[b-dp0oy34yb6] {
        padding-top: var(--mobile-topbar-height, 60px);
        width: 100%;
        max-width: 100vw;
    }

    .sidebar[b-dp0oy34yb6] {
        top: var(--mobile-topbar-height, 60px);
        height: calc(100vh - var(--mobile-topbar-height, 60px));
        transform: translateX(-100%);
    }

    .sidebar.visible[b-dp0oy34yb6] {
        transform: translateX(0);
    }

    .foyer-content-shell[b-dp0oy34yb6],
    .foyer-content-shell.sidebar-hidden[b-dp0oy34yb6] {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    .foyer-main[b-dp0oy34yb6] {
        width: 100%;
        max-width: 720px;
        padding: 26px 18px 24px;
    }

    .foyer-content-shell[b-dp0oy34yb6]  .main-footer {
        margin-top: 42px;
    }

    .guest-invitation-grid[b-dp0oy34yb6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .foyer-hero-card[b-dp0oy34yb6] {
        grid-template-columns: 1fr;
        min-height: auto;
        text-align: center;
        justify-items: center;
        row-gap: 10px;
    }

    .foyer-portrait[b-dp0oy34yb6] {
        width: 100%;
        min-height: clamp(232px, 44vw, 312px);
    }

    .foyer-granny[b-dp0oy34yb6] {
        width: min(78vw, 350px);
        max-height: 312px;
    }

    .foyer-welcome[b-dp0oy34yb6] {
        width: 100%;
        padding-top: 0;
    }

    .foyer-welcome h1[b-dp0oy34yb6],
    .foyer-lede[b-dp0oy34yb6] {
        margin-inline: auto;
    }

    .foyer-actions[b-dp0oy34yb6] {
        justify-content: center;
    }

    .foyer-help-link[b-dp0oy34yb6] {
        justify-content: center;
    }

    .featured-theme[b-dp0oy34yb6] {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .featured-copy[b-dp0oy34yb6] {
        padding: 0 16px 18px;
    }
}

@media (max-width: 820px) {
    .foyer-main[b-dp0oy34yb6] {
        max-width: 680px;
        padding-inline: clamp(14px, 4vw, 28px);
    }

    .foyer-hero[b-dp0oy34yb6] {
        margin-bottom: 30px;
    }

    .foyer-section[b-dp0oy34yb6] {
        margin-block: 28px;
    }

    .foyer-section-heading[b-dp0oy34yb6] {
        margin-bottom: 18px;
    }

    .foyer-section-heading h2[b-dp0oy34yb6] {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    .whispers-row[b-dp0oy34yb6],
    .story-grid[b-dp0oy34yb6],
    .guest-invitation-grid[b-dp0oy34yb6],
    .next-grid[b-dp0oy34yb6],
    .story-breakdown[b-dp0oy34yb6] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .whisper-card + .whisper-card[b-dp0oy34yb6],
    .breakdown-item + .breakdown-item[b-dp0oy34yb6] {
        margin-left: 0;
        margin-top: -1px;
        border-left: 0;
    }

    .breakdown-item[b-dp0oy34yb6] {
        padding: 16px 0;
    }

    .foyer-pause[b-dp0oy34yb6] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
        margin-block: 30px;
        padding: 24px;
    }

}

@media (max-width: 560px) {
    .foyer-main[b-dp0oy34yb6] {
        padding: 18px var(--mobile-page-margin, 16px) 22px;
    }

    .foyer-hero[b-dp0oy34yb6] {
        margin-bottom: 24px;
    }

    .foyer-portrait[b-dp0oy34yb6] {
        min-height: 224px;
    }

    .foyer-granny[b-dp0oy34yb6] {
        width: min(82vw, 302px);
        max-height: 264px;
    }

    .foyer-welcome h1[b-dp0oy34yb6] {
        font-size: clamp(2.05rem, 9.4vw, 2.55rem);
        line-height: 1.06;
    }

    .foyer-lede[b-dp0oy34yb6] {
        margin-top: 14px;
        font-size: 1rem;
        line-height: 1.48;
    }

    .foyer-actions[b-dp0oy34yb6] {
        gap: 12px;
        margin-top: 22px;
    }

    .foyer-actions[b-dp0oy34yb6],
    .foyer-button[b-dp0oy34yb6] {
        width: 100%;
    }

    .foyer-button[b-dp0oy34yb6] {
        min-width: 0;
        min-height: 50px;
        padding-inline: 18px;
        font-size: 0.96rem;
    }

    .foyer-help-link[b-dp0oy34yb6] {
        margin-top: 16px;
    }

    .whisper-card[b-dp0oy34yb6],
    .guest-invitation-card[b-dp0oy34yb6],
    .next-card[b-dp0oy34yb6] {
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 16px;
        min-height: auto;
        padding: 18px;
    }

    .whisper-icon[b-dp0oy34yb6],
    .guest-invitation-icon[b-dp0oy34yb6],
    .next-icon[b-dp0oy34yb6] {
        width: 42px;
        height: 42px;
    }

    .whisper-icon svg[b-dp0oy34yb6],
    .guest-invitation-icon svg[b-dp0oy34yb6],
    .next-icon svg[b-dp0oy34yb6] {
        width: 22px;
        height: 22px;
    }

    .next-arrow[b-dp0oy34yb6] {
        display: none;
    }

    .whisper-copy[b-dp0oy34yb6],
    .guest-invitation-copy[b-dp0oy34yb6],
    .next-copy[b-dp0oy34yb6] {
        min-width: 0;
    }

    .whisper-copy strong[b-dp0oy34yb6],
    .guest-invitation-copy strong[b-dp0oy34yb6] {
        max-width: none;
        font-size: 1.12rem;
        line-height: 1.18;
    }

    .whisper-copy span[b-dp0oy34yb6],
    .guest-invitation-copy span[b-dp0oy34yb6],
    .next-copy span[b-dp0oy34yb6] {
        font-size: 0.95rem;
        line-height: 1.42;
    }

    .guest-invitation-section[b-dp0oy34yb6],
    .featured-section[b-dp0oy34yb6] {
        margin-top: 28px;
    }

    .featured-theme[b-dp0oy34yb6] {
        gap: 18px;
        padding: 10px;
    }

    .featured-image-wrap[b-dp0oy34yb6],
    .featured-image[b-dp0oy34yb6] {
        min-height: 250px;
    }

    .featured-copy[b-dp0oy34yb6] {
        justify-items: center;
        padding: 0 8px 16px;
        text-align: center;
    }

    .featured-copy h2[b-dp0oy34yb6] {
        font-size: 1.48rem;
    }

    .featured-copy > p[b-dp0oy34yb6] {
        margin: 14px 0 20px;
        font-size: 0.98rem;
    }

    .foyer-pause p[b-dp0oy34yb6] {
        font-size: 1.22rem;
    }
}
/* /Components/Pages/GuestChat.razor.rz.scp.css */
/* Main layout structure */
:global(:root)[b-vhsyrt31hq] {
    --primary-bg: #E8F4F8;
    --secondary-bg: #F5F3F2;
    --ai-bubble: #D8E8E5;
    --user-bubble: #FFFFFF;
    --highlight: #FFC7B6;
    --text-dark: #3A3A3A;
    --text-light: #5A5A5A;
    --input-bg: rgba(255, 255, 255, 0.9);
    --type-ramp-base-font-size: 16px;
}

body[b-vhsyrt31hq] {
    /* inherited font-sans */
    background: linear-gradient(45deg, var(--primary-bg), var(--secondary-bg));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

body.night-mode[b-vhsyrt31hq] {
    background: linear-gradient(45deg, var(--night-primary-bg), var(--night-secondary-bg));
    color: var(--night-text-dark);
}

.main-container[b-vhsyrt31hq] {
    display: flex;
    flex: 1;
    gap: 1.0rem;
    padding: 1.4rem;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
}

.side-panel[b-vhsyrt31hq] {
    flex: 0.25;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background 0.3s ease;
}

.side-panel h2[b-vhsyrt31hq] {
    font-size: 1.8rem;
    color: var(--text-dark);
    transition: color 0.3s ease;
    margin-top: 0.5rem;
}

.side-panel .ai-avatar[b-vhsyrt31hq] {
    padding: 1rem;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.solace-avatar[b-vhsyrt31hq] {
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.side-panel p[b-vhsyrt31hq] {
    color: var(--text-light);
    transition: color 0.3s ease;
}

.side-panel .action-buttons button[b-vhsyrt31hq] {
    display: block;
    width: 100%;
    margin: 1rem 0;
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    background: var(--highlight);
    color: white;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s ease;
}

.side-panel .action-buttons button:hover[b-vhsyrt31hq] {
    transform: scale(1.05);
}

.chat-area[b-vhsyrt31hq] {
    flex: 0.75;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
    max-height: 100vh;
}

.warning-message[b-vhsyrt31hq] {
    background: rgba(255, 230, 100, 0.2);
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, color 0.3s ease;
}

.chat-messages[b-vhsyrt31hq] {
    flex: 1;
    overflow-y: scroll;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
    min-height: 300px;
    scrollbar-width: none;
    max-height: calc(100vh - 200px);
    scroll-behavior: smooth;
}

.chat-messages[b-vhsyrt31hq]::-webkit-scrollbar {
    display: none;
}

.chat-messages .message[b-vhsyrt31hq] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-direction: column;
}

.chat-messages .message.ai[b-vhsyrt31hq] {
    flex-direction: row;
}

.chat-messages .message.user[b-vhsyrt31hq] {
    align-items: flex-end;
}

.chat-messages .message .avatar[b-vhsyrt31hq] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 1.5em;
    align-self: flex-start;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.chat-messages .message.user .avatar[b-vhsyrt31hq] {
    margin-left: 10px;
    margin-right: 0;
}

.chat-messages .message .message-content[b-vhsyrt31hq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chat-messages p[b-vhsyrt31hq] {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.chat-messages .message.user .message-content[b-vhsyrt31hq] {
    align-items: flex-end;
}

.chat-messages .message .bubble[b-vhsyrt31hq] {
    max-width: 70%;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
    word-wrap: break-word;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.chat-messages .message.ai .bubble[b-vhsyrt31hq] {
    border-radius: 1px 15px 15px 15px;
    background: var(--ai-bubble);
}

.chat-messages .message.user .bubble[b-vhsyrt31hq] {
    background: var(--user-bubble);
    border-radius: 15px 1px 15px 15px;
}

.chat-messages .message .timestamp[b-vhsyrt31hq] {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.typing-indicator[b-vhsyrt31hq] {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-light);
    margin-top: 0.5rem;
    text-align: left;
    padding-left: 1rem;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--text-light);
    width: 30ch;
    animation: typing-b-vhsyrt31hq 2s steps(15, end) infinite, blink-b-vhsyrt31hq 0.7s step-end infinite;
    transition: color 0.3s ease;
}

@keyframes typing-b-vhsyrt31hq {
    from { width: 0 }
    to { width: 30ch }
}

@keyframes blink-b-vhsyrt31hq {
    50% { border-color: transparent }
}

/* Chat toolbar */
.chat-toolbar[b-vhsyrt31hq] {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
    margin-bottom: 6px;
    transition: background 0.3s ease;
}

.chat-action-btn[b-vhsyrt31hq] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(50, 50, 50, 0.3);
    border: 1px solid;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.chat-action-btn:hover[b-vhsyrt31hq] {
    background: rgba(0, 0, 0, 0.1);
}

.chat-action-btn:active[b-vhsyrt31hq] {
    transform: scale(0.97);
}

/* Input area */
.chat-input[b-vhsyrt31hq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-textarea[b-vhsyrt31hq] {
    flex: 1;
    padding: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: var(--input-bg);
    font-size: 1rem;
    resize: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.chat-send-btn[b-vhsyrt31hq] {
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 8px;
    background: var(--highlight);
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
}

.chat-send-btn:hover:not(:disabled)[b-vhsyrt31hq] {
    transform: scale(1.05);
}

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

/* Night mode adjustments */
body.night-mode .chat-area[b-vhsyrt31hq] {
    background: var(--night-secondary-bg);
}

body.night-mode .side-panel[b-vhsyrt31hq] {
    background: rgba(40, 40, 40, 0.5);
}

body.night-mode .side-panel h2[b-vhsyrt31hq] {
    color: var(--night-text-dark);
}

body.night-mode .side-panel p[b-vhsyrt31hq] {
    color: var(--night-text-light);
}

body.night-mode .chat-messages .message.ai .bubble[b-vhsyrt31hq] {
    background: var(--night-ai-bubble);
}

body.night-mode .chat-messages .message.user .bubble[b-vhsyrt31hq] {
    background: var(--night-user-bubble);
}

body.night-mode .chat-textarea[b-vhsyrt31hq] {
    background: var(--night-input-bg);
    color: var(--night-text-light);
    border-color: rgba(255, 255, 255, 0.1);
}

body.night-mode .chat-messages .message .timestamp[b-vhsyrt31hq] {
    color: var(--night-text-light);
}

body.night-mode .warning-message[b-vhsyrt31hq] {
    background: rgba(255, 180, 50, 0.2);
    color: var(--night-text-dark);
}

body.night-mode .chat-toolbar[b-vhsyrt31hq] {
    background: rgba(30, 30, 30, 0.9);
}

body.night-mode .chat-action-btn[b-vhsyrt31hq] {
    background: rgba(50, 50, 50, 0.8);
}

body.night-mode .chat-send-btn[b-vhsyrt31hq] {
    background: var(--night-highlight);
}

body.night-mode .typing-indicator[b-vhsyrt31hq] {
    color: var(--night-text-light);
    border-color: var(--night-text-light);
}

body.night-mode .file-preview[b-vhsyrt31hq] {
    background: var(--night-secondary-bg);
    border-color: var(--night-text-light);
}

body.night-mode .uploaded-image[b-vhsyrt31hq] {
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
    filter: brightness(0.85);
}

body.night-mode .chat-input textarea[b-vhsyrt31hq] {
    background: var(--night-input-bg);
    color: var(--night-text-light);
}

body.night-mode .chat-input button[b-vhsyrt31hq] {
    background: var(--night-highlight);
}

/* File handling */
.file-preview[b-vhsyrt31hq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 5px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.uploaded-image[b-vhsyrt31hq] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.uploaded-image:hover[b-vhsyrt31hq] {
    transform: scale(1.05);
}

.preview-thumbnail[b-vhsyrt31hq] {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.remove-preview-btn[b-vhsyrt31hq] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    border: none;
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.remove-preview-btn:hover[b-vhsyrt31hq] {
    background: red;
}

/* Responsive design */
@media (max-width: 768px) {
    .main-container[b-vhsyrt31hq] {
        flex-direction: column;
        height: auto;
        padding: 0.7rem;
    }

    .side-panel[b-vhsyrt31hq] {
        flex: none;
        margin-bottom: 1rem;
    }

    .chat-area[b-vhsyrt31hq] {
        flex: 1;
        max-height: calc(100vh - 200px);
    }

    .message .bubble[b-vhsyrt31hq] {
        max-width: 85%;
    }

    .chat-messages[b-vhsyrt31hq] {
        max-height: calc(100vh - 350px);
    }
}

/* Language flag buttons styling */
.language-buttons[b-vhsyrt31hq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.lang-flag-btn[b-vhsyrt31hq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 20px;
    background: var(--highlight);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lang-flag-btn:hover[b-vhsyrt31hq] {
    background: #ffb199;
    transform: scale(1.05);
}

.lang-flag-btn.selected[b-vhsyrt31hq] {
    background: #333;
    color: #fff;
}

.lang-flag-btn img[b-vhsyrt31hq] {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    border: none;
}

/* --- Appended Responsive Enhancements --- */
@media (max-width: 1024px) {
    .side-panel[b-vhsyrt31hq] {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: absolute;
        left: 0;
        top: 50px; /* below top bar */
        height: calc(100% - 50px);
        z-index: 999;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 0 12px 12px 0;
        box-shadow: 2px 0 6px rgba(0,0,0,0.1);
    }

    .main-container[b-vhsyrt31hq] {
        padding-left: 0;
    }

    .chat-area[b-vhsyrt31hq] {
        flex: 1;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .side-panel[b-vhsyrt31hq] {
        display: none;
    }

    .chat-area[b-vhsyrt31hq] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Components/Pages/Help.razor.rz.scp.css */
[b-d3rcfhla0z] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.app-layout[b-d3rcfhla0z],
[b-d3rcfhla0z] .app-layout {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100vh;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FBF2E5 0%, #F8EDDF 100%);
    padding-top: 80px;
}

.app-layout[b-d3rcfhla0z] {
    display: block;
}

@media (max-width: 1024px) {
    [b-d3rcfhla0z] .toggle-sidebar {
        display: none !important;
    }
}

[b-d3rcfhla0z] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-d3rcfhla0z] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-d3rcfhla0z] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

[b-d3rcfhla0z] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-d3rcfhla0z] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

[b-d3rcfhla0z] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

[b-d3rcfhla0z] .container-v3 {
    flex: 1;
    min-width: 0;
    max-width: 1240px;
    margin: 30px auto;
    margin-left: 280px;
    padding: 0 24px 56px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    transition: margin-left 0.3s ease, left 0.3s ease, width 0.3s ease;
    box-sizing: border-box;
}

[b-d3rcfhla0z] .container-v3.sidebar-hidden {
    margin-left: 0;
}

@media (min-width: 1025px) {
    [b-d3rcfhla0z] .container-v3 {
        width: min(1240px, calc(100% - 328px));
        max-width: 1240px;
        margin: 30px auto;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        left: 140px;
    }

    [b-d3rcfhla0z] .container-v3.sidebar-hidden {
        width: min(1240px, calc(100% - 48px));
        margin-left: auto;
        margin-right: auto;
        left: 0;
    }
}

.sidebar-overlay[b-d3rcfhla0z] {
    position: fixed;
    inset: 0;
    background-color: rgba(63, 43, 31, 0.3);
    z-index: 9;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-d3rcfhla0z] {
    display: none;
}

[b-d3rcfhla0z] .help-container {
    width: 100%;
    min-width: 0;
    color: #4F4A45;
}

[b-d3rcfhla0z] .help-container,
[b-d3rcfhla0z] .help-container *,
[b-d3rcfhla0z] .help-container *::before,
[b-d3rcfhla0z] .help-container *::after {
    box-sizing: border-box;
}

[b-d3rcfhla0z] .granny-hero-section {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 34px;
    border: 1px solid rgba(168, 133, 98, 0.2);
    background: linear-gradient(135deg, rgba(255, 249, 240, 0.98) 0%, rgba(255, 244, 232, 0.98) 100%);
    box-shadow: 0 22px 55px rgba(120, 89, 67, 0.08);
}

[b-d3rcfhla0z] .granny-hero-section::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -70px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 197, 148, 0.25) 0%, rgba(245, 197, 148, 0) 72%);
    pointer-events: none;
}

[b-d3rcfhla0z] .granny-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(210px, 320px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
}

[b-d3rcfhla0z] .granny-illustration-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

[b-d3rcfhla0z] .granny-illustration {
    width: min(100%, 310px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(123, 90, 83, 0.15));
}

[b-d3rcfhla0z] .granny-welcome-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[b-d3rcfhla0z] .help-kicker {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(251, 207, 168, 0.35);
    color: #8D5E3B;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-d3rcfhla0z] .granny-title {
    margin: 0;
    color: #3F2B1F;
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.95;
    font-weight: var(--mobile-hero-heading-weight);
}

[b-d3rcfhla0z] .help-section-header h2,
[b-d3rcfhla0z] .help-panel h2,
[b-d3rcfhla0z] .help-callout-copy h2 {
    margin: 0;
    color: #3F2B1F;
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 0.95;
    font-weight: var(--mobile-section-heading-weight);
}

[b-d3rcfhla0z] .granny-subtitle {
    max-width: 660px;
    margin: 0;
    color: #7D695D;
    font-size: 1.12rem;
    line-height: 1.75;
}

[b-d3rcfhla0z] .granny-hero-actions,
[b-d3rcfhla0z] .help-callout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}

[b-d3rcfhla0z] .btn {
    display: inline-flex;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid #E5D3BC;
    background: #F7E2CB;
    color: #4F4A45;
    font-family: var(--font-sans);
    font-size: var(--mobile-button-font-size);
    font-weight: var(--mobile-button-font-weight);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

[b-d3rcfhla0z] .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(105, 76, 54, 0.08);
}

[b-d3rcfhla0z] .btn-hero-primary,
[b-d3rcfhla0z] .btn-callout-primary {
    background: linear-gradient(180deg, #F5C994 0%, #E1AE73 100%);
    border-color: #D8A56D;
    color: #3F2B1F;
}

[b-d3rcfhla0z] .btn-hero-secondary,
[b-d3rcfhla0z] .btn-callout-secondary {
    background: rgba(255, 249, 240, 0.85);
    color: #6E594D;
}

[b-d3rcfhla0z] .help-panel,
[b-d3rcfhla0z] .help-callout {
    border-radius: 30px;
    border: 1px solid rgba(173, 145, 117, 0.18);
    background: rgba(255, 250, 244, 0.94);
    box-shadow: 0 16px 36px rgba(120, 89, 67, 0.05);
}

[b-d3rcfhla0z] .help-section {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

[b-d3rcfhla0z] .help-section-header {
    margin-bottom: 28px;
    padding: 0 4px;
}

[b-d3rcfhla0z] .help-section-header h2,
[b-d3rcfhla0z] .help-panel h2,
[b-d3rcfhla0z] .help-callout-copy h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
}

[b-d3rcfhla0z] .help-section-header p,
[b-d3rcfhla0z] .help-panel p,
[b-d3rcfhla0z] .help-info-card p,
[b-d3rcfhla0z] .help-step-card p,
[b-d3rcfhla0z] .help-feature-card p,
[b-d3rcfhla0z] .help-faq-card p,
[b-d3rcfhla0z] .help-callout-copy p {
    margin: 0;
    color: #7D695D;
    line-height: 1.75;
    font-size: 1rem;
}

[b-d3rcfhla0z] .help-overview-grid,
[b-d3rcfhla0z] .help-steps-grid,
[b-d3rcfhla0z] .help-feature-grid,
[b-d3rcfhla0z] .help-faq-grid {
    display: grid;
    gap: 18px;
}

[b-d3rcfhla0z] .help-overview-grid,
[b-d3rcfhla0z] .help-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

[b-d3rcfhla0z] .help-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

[b-d3rcfhla0z] .help-feature-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    border-radius: 24px;
    border: 1px solid rgba(210, 162, 111, 0.28);
    background: linear-gradient(135deg, rgba(255, 244, 228, 0.96) 0%, rgba(251, 234, 208, 0.92) 100%);
    text-decoration: none;
    margin-bottom: 6px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

[b-d3rcfhla0z] .help-feature-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #F5C994 0%, #E1AE73 100%);
    border-radius: 24px 0 0 24px;
}

[b-d3rcfhla0z] .help-feature-hero:hover {
    transform: translateY(-2px);
    border-color: rgba(210, 162, 111, 0.55);
    box-shadow: 0 18px 40px rgba(120, 89, 67, 0.10);
}

[b-d3rcfhla0z] .help-feature-hero-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-d3rcfhla0z] .help-feature-hero h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 600;
    color: #3F2B1F;
    line-height: 1.25;
}

[b-d3rcfhla0z] .help-feature-hero p {
    margin: 0;
    color: #7D695D;
    font-size: 1.05rem;
    line-height: 1.75;
}

[b-d3rcfhla0z] .help-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[b-d3rcfhla0z] .help-info-card,
[b-d3rcfhla0z] .help-step-card,
[b-d3rcfhla0z] .help-feature-card,
[b-d3rcfhla0z] .help-faq-card {
    padding: 26px;
    border-radius: 24px;
    border: 1px solid rgba(186, 160, 136, 0.08);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 4px 24px rgba(140, 105, 78, 0.06), 0 1px 4px rgba(140, 105, 78, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[b-d3rcfhla0z] .help-info-card:hover,
[b-d3rcfhla0z] .help-step-card:hover,
[b-d3rcfhla0z] .help-faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(140, 105, 78, 0.10), 0 2px 8px rgba(140, 105, 78, 0.04);
}

[b-d3rcfhla0z] .help-info-card h3,
[b-d3rcfhla0z] .help-step-card h3,
[b-d3rcfhla0z] .help-feature-card h3,
[b-d3rcfhla0z] .help-faq-card h3 {
    margin: 0 0 10px;
    color: #463126;
    font-size: 1.25rem;
    line-height: 1.25;
}

[b-d3rcfhla0z] .help-step-card {
    position: relative;
    padding-top: 88px;
}

[b-d3rcfhla0z] .help-step-number {
    position: absolute;
    top: 24px;
    left: 26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 28%, #FFF2D7 0%, #F5D19F 58%, #E7B777 100%);
    color: #734D2F;
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    letter-spacing: -0.035em;
    line-height: 1;
    padding-bottom: 0.06em;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 49, 0.16), 0 10px 22px rgba(115, 77, 47, 0.14);
}

[b-d3rcfhla0z] .help-feature-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    height: 100%;
    text-decoration: none;
    transition: all 0.3s ease;
}

[b-d3rcfhla0z] .help-feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(210, 162, 111, 0.5);
    box-shadow: 0 16px 30px rgba(120, 89, 67, 0.08);
}

[b-d3rcfhla0z] .help-feature-link,
[b-d3rcfhla0z] .help-inline-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #8D5E3B;
    font-family: var(--font-sans);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(141, 94, 59, 0.28);
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

[b-d3rcfhla0z] .help-feature-link {
    margin-top: auto;
}

[b-d3rcfhla0z] .help-feature-card:hover .help-feature-link,
[b-d3rcfhla0z] .help-feature-hero:hover .help-feature-link,
[b-d3rcfhla0z] .help-inline-link:hover,
[b-d3rcfhla0z] .help-feature-link:hover {
    color: #6F4529;
    border-bottom-color: rgba(111, 69, 41, 0.62);
    transform: translateX(3px);
}

[b-d3rcfhla0z] .help-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

[b-d3rcfhla0z] .help-panel {
    padding: clamp(24px, 3vw, 34px);
}

[b-d3rcfhla0z] .help-panel-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #8D5E3B;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-d3rcfhla0z] .help-list {
    margin: 18px 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

[b-d3rcfhla0z] .help-list li {
    position: relative;
    padding-left: 22px;
    color: #6F5A4E;
    line-height: 1.65;
}

[b-d3rcfhla0z] .help-list li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E1AE73;
}

[b-d3rcfhla0z] .help-callout {
    padding: clamp(24px, 3vw, 34px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

[b-d3rcfhla0z] .help-callout-copy {
    max-width: 720px;
}

@media (min-width: 993px) {
    [b-d3rcfhla0z] .main-footer {
        width: min(1240px, calc(100% - 328px));
        margin: 80px auto 0;
        padding: 60px 24px 30px;
        box-sizing: border-box;
        position: relative;
        left: 140px;
    }

    [b-d3rcfhla0z] .main-footer.sidebar-hidden {
        width: min(1240px, calc(100% - 48px));
        left: 0;
    }

    [b-d3rcfhla0z] .footer-container {
        max-width: none;
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 1024px) {
    .app-layout[b-d3rcfhla0z],
    [b-d3rcfhla0z] .app-layout {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-top: 60px;
        overflow-x: clip;
        overflow-y: visible;
        overscroll-behavior-y: auto;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

    [b-d3rcfhla0z] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-d3rcfhla0z] .sidebar.visible {
        transform: translateX(0);
    }

    [b-d3rcfhla0z] .container-v3 {
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 65px 0 30px !important;
        padding: 0 16px 36px;
        box-sizing: border-box;
    }

    [b-d3rcfhla0z] .help-container,
    [b-d3rcfhla0z] .help-section,
    [b-d3rcfhla0z] .granny-hero-section,
    [b-d3rcfhla0z] .help-panel,
    [b-d3rcfhla0z] .help-callout,
    [b-d3rcfhla0z] .help-feature-hero,
    [b-d3rcfhla0z] .help-overview-grid,
    [b-d3rcfhla0z] .help-steps-grid,
    [b-d3rcfhla0z] .help-feature-grid,
    [b-d3rcfhla0z] .help-faq-grid,
    [b-d3rcfhla0z] .help-support-grid,
    [b-d3rcfhla0z] .help-info-card,
    [b-d3rcfhla0z] .help-step-card,
    [b-d3rcfhla0z] .help-feature-card,
    [b-d3rcfhla0z] .help-faq-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    [b-d3rcfhla0z] .granny-hero-content,
    [b-d3rcfhla0z] .help-overview-grid,
    [b-d3rcfhla0z] .help-steps-grid,
    [b-d3rcfhla0z] .help-feature-grid,
    [b-d3rcfhla0z] .help-faq-grid,
    [b-d3rcfhla0z] .help-support-grid,
    [b-d3rcfhla0z] .help-callout {
        grid-template-columns: 1fr;
    }

    [b-d3rcfhla0z] .granny-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    [b-d3rcfhla0z] .granny-illustration-wrapper {
        width: 300px;
        max-width: 100%;
        margin: 0 auto;
    }

    [b-d3rcfhla0z] .granny-illustration {
        width: 100%;
        margin-top: 0;
    }

    [b-d3rcfhla0z] .granny-welcome-text {
        width: 100%;
        min-width: 0;
        align-items: center;
    }

    [b-d3rcfhla0z] .granny-hero-actions {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    [b-d3rcfhla0z] .help-callout {
        display: grid;
    }

    [b-d3rcfhla0z] .help-feature-card {
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    [b-d3rcfhla0z] .granny-hero-section,
    [b-d3rcfhla0z] .help-panel,
    [b-d3rcfhla0z] .help-callout {
        padding: 22px 18px;
        border-radius: 24px;
    }

    [b-d3rcfhla0z] .help-section {
        padding: 0;
    }

    [b-d3rcfhla0z] .help-feature-hero {
        padding: 22px 18px;
        border-radius: 20px;
    }

    [b-d3rcfhla0z] .help-feature-hero h3 {
        font-size: 1.2rem;
    }

    [b-d3rcfhla0z] .granny-title {
        font-size: 2.35rem;
    }

    [b-d3rcfhla0z] .granny-subtitle,
    [b-d3rcfhla0z] .help-section-header p,
    [b-d3rcfhla0z] .help-panel p,
    [b-d3rcfhla0z] .help-info-card p,
    [b-d3rcfhla0z] .help-step-card p,
    [b-d3rcfhla0z] .help-feature-card p,
    [b-d3rcfhla0z] .help-faq-card p,
    [b-d3rcfhla0z] .help-callout-copy p {
        font-size: 0.96rem;
    }

    [b-d3rcfhla0z] .btn {
        width: 100%;
        min-width: 0;
    }

    [b-d3rcfhla0z] .granny-hero-actions,
    [b-d3rcfhla0z] .help-callout-actions {
        width: 100%;
        flex-direction: column;
    }
}
/* /Components/Pages/Keepsakes.razor.rz.scp.css */
/* ===========================================
   LAYOUT & NAVIGATION STYLES
   =========================================== */

/* Sidebar Overlay */
.sidebar-overlay[b-91w7vtwoww] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
    /* Prevent scroll-through when overlay is visible */
}

.sidebar-overlay.hidden[b-91w7vtwoww] {
    display: none;
}

/* App Layout */
[b-91w7vtwoww] .app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    /* Account for fixed logo */
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-91w7vtwoww] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-91w7vtwoww] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-91w7vtwoww] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-91w7vtwoww] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-91w7vtwoww] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-91w7vtwoww] .sidebar a:hover {
    color: #000;
}

[b-91w7vtwoww] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-91w7vtwoww] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-91w7vtwoww] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-91w7vtwoww] .app-logo-link:hover {
    outline: none;
    border: none;
    background: none;
}

[b-91w7vtwoww] .app-logo-link:focus {
    outline: none;
    border: none;
    background: none;
}

[b-91w7vtwoww] .sidebar-logo {
    text-align: center;
}

[b-91w7vtwoww] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

[b-91w7vtwoww] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-91w7vtwoww] .sidebar a:hover {
    color: #000;
}

/* Sidebar Bottom User Section */
[b-91w7vtwoww] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-91w7vtwoww] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-91w7vtwoww] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
}

[b-91w7vtwoww] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, 0.5);
}

[b-91w7vtwoww] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text, #4F4A45);
}

[b-91w7vtwoww] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

/* User Dropdown */
[b-91w7vtwoww] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-91w7vtwoww] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
    animation: fadeIn-b-91w7vtwoww 0.2s ease-in-out;
}

@keyframes fadeIn-b-91w7vtwoww {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[b-91w7vtwoww] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

[b-91w7vtwoww] .dropdown-item:hover {
    background-color: #f0dad3;
}



/* Button Styles */
[b-91w7vtwoww] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-91w7vtwoww] .btn:hover {
    background-color: #FADDAA;
}

[b-91w7vtwoww] .btn-login {
    background-color: #FBCFA8;
}

[b-91w7vtwoww] .btn-primary {
    padding: 12px 25px;
    margin-top: 10px;
    background-color: #FBCFA8;
}

[b-91w7vtwoww] .btn-secondary {
    padding: 8px 18px;
    margin-top: 10px;
}

/* Toggle Sidebar Button */
[b-91w7vtwoww] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Main Messages Container - Two Column Layout */
[b-91w7vtwoww] .messages-container {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    max-width: 1200px;
    min-width: 0;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    background: #FAECDA;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "main-content sidebar-content";
    gap: 0;
    box-sizing: border-box;
}

[b-91w7vtwoww] .messages-container.sidebar-hidden {
    margin-left: 0;
}

/* ===========================================
   VAULT MESSAGES - ELEGANT MASONRY DESIGN
   =========================================== */

/* Page Layout & Container */
[b-91w7vtwoww] .messages-container {
    min-height: calc(100vh - 60px);
    padding: 0;
    background: #FAECDA;
}

/* Vault Header */
[b-91w7vtwoww] .vault-header {
    grid-area: header;
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Filters Row */
[b-91w7vtwoww] .filters-panel {
    background: rgba(255, 252, 247, 0.94);
    border: 1px solid rgba(216, 168, 138, 0.42);
    border-radius: 14px;
    padding: 1.35rem;
    box-shadow: 0 14px 34px rgba(124, 90, 83, 0.09);
    margin-bottom: 2rem;
    position: sticky;
    top: 2rem;
}

[b-91w7vtwoww] .filters-panel-header {
    /* inherited font-sans */
    font-size: 1.05rem;
    font-weight: 600;
    color: #5A413A;
    letter-spacing: 0;
    margin-bottom: 0.25rem;
}

[b-91w7vtwoww] .filters-panel-status {
    font-size: 0.8rem;
    color: #8A7169;
    line-height: 1.35;
}

[b-91w7vtwoww] .filters-panel-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(216, 168, 138, 0.22);
}

[b-91w7vtwoww] .filters-clear-btn {
    border: none;
    background: rgba(123, 90, 83, 0.08);
    color: #6B4A43;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

[b-91w7vtwoww] .filters-clear-btn:hover,
[b-91w7vtwoww] .filters-clear-btn:focus-visible {
    background: rgba(123, 90, 83, 0.14);
    color: #4B2E2E;
}

[b-91w7vtwoww] .filters-clear-btn:focus-visible {
    outline: 2px solid rgba(123, 90, 83, 0.32);
    outline-offset: 2px;
}

[b-91w7vtwoww] .mobile-filters-trigger-row,
[b-91w7vtwoww] .mobile-filters-backdrop {
    display: none;
}

[b-91w7vtwoww] .mobile-filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #D8A88A;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #5A413A;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
}

[b-91w7vtwoww] .mobile-filters-trigger.has-active {
    background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}

[b-91w7vtwoww] .mobile-filters-trigger-badge {
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7B5A53;
    color: #fff;
    font-size: 0.8rem;
}

[b-91w7vtwoww] .mobile-filters-close {
    display: none;
    border: none;
    border-radius: 999px;
    background: rgba(123, 90, 83, 0.1);
    color: #5A413A;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

[b-91w7vtwoww] .filters-panel-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.35rem;
}

[b-91w7vtwoww] .filters-panel-section:last-of-type {
    margin-bottom: 0;
}

[b-91w7vtwoww] .filters-panel-label {
    /* inherited font-sans */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A67B5B;
}

[b-91w7vtwoww] .filter-search-shell {
    position: relative;
    display: flex;
    align-items: center;
}

[b-91w7vtwoww] .filter-search-icon {
    position: absolute;
    left: 0.8rem;
    color: #9A7A70;
    pointer-events: none;
}

[b-91w7vtwoww] .filter-search-input {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid rgba(216, 168, 138, 0.34);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: #4B2E2E;
    padding: 0.65rem 0.85rem 0.65rem 2.35rem;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

[b-91w7vtwoww] .filter-search-input::placeholder {
    color: #9A8780;
}

[b-91w7vtwoww] .filter-search-input:focus {
    outline: none;
    background: #fff;
    border-color: rgba(123, 90, 83, 0.46);
    box-shadow: 0 0 0 3px rgba(246, 217, 198, 0.46);
}

[b-91w7vtwoww] .filter-pill-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
}

[b-91w7vtwoww] .filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: 2.25rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(248, 238, 222, 0.62);
    /* inherited font-sans */
    font-size: 0.88rem;
    color: #6B5B57;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    box-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-91w7vtwoww] .filter-pill:hover {
    background: rgba(246, 217, 198, 0.5);
    color: #4B2E2E;
    transform: translateY(-1px);
}

[b-91w7vtwoww] .filter-pill:focus-visible {
    outline: 2px solid rgba(123, 90, 83, 0.45);
    outline-offset: 2px;
}

[b-91w7vtwoww] .filter-pill.active {
    background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
    border-color: transparent;
    color: #4B2E2E;
    box-shadow: none;
    font-weight: 600;
}

[b-91w7vtwoww] .filter-pill-check {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(123, 90, 83, 0.12);
    color: #7B5A53;
    font-size: 0.68rem;
    line-height: 1;
}

[b-91w7vtwoww] .theme-filter-tray {
    padding-bottom: 0.1rem;
}

[b-91w7vtwoww] .filters-panel-link-wrap {
    display: flex;
    justify-content: center;
    padding-top: 0.35rem;
}

@media (min-width: 1025px) {
    [b-91w7vtwoww] .filters-panel {
        max-height: calc(100vh - 4rem);
        overflow: hidden;
    }

    [b-91w7vtwoww] .theme-filter-section.expanded {
        margin-bottom: 0;
    }

    [b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray {
        max-height: min(42vh, 390px);
        overflow-y: auto;
        padding-right: 0.25rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(123, 90, 83, 0.38) transparent;
        overscroll-behavior: contain;
    }

    [b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray::-webkit-scrollbar {
        width: 6px;
    }

    [b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray::-webkit-scrollbar-track {
        background: transparent;
    }

    [b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray::-webkit-scrollbar-thumb {
        background: rgba(123, 90, 83, 0.28);
        border-radius: 999px;
    }

    [b-91w7vtwoww] .theme-filter-section.expanded .filters-panel-link-wrap {
        position: sticky;
        bottom: -0.35rem;
        margin: 0 -0.25rem;
        padding: 0.85rem 0 0.15rem;
        background: linear-gradient(180deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.98) 42%);
        z-index: 1;
    }
}

/* Main Content Area (left column) */
[b-91w7vtwoww] .main-content-area {
    grid-area: main-content;
    padding: 0 3rem 3rem 3rem;
    position: relative;
}

/* Sidebar Content Area (right column) */
[b-91w7vtwoww] .sidebar-content-area {
    grid-area: sidebar-content;
    padding: 0 2rem 3rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: stretch;
}

[b-91w7vtwoww] .vault-header h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: var(--mobile-hero-heading-weight);
    color: #2C2A28;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

[b-91w7vtwoww] .vault-subtitle {
    /* inherited font-sans */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6B5B57;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* ===========================================
   TODAY'S MEMORY CARD - SIDEBAR PLACEMENT
   =========================================== */

[b-91w7vtwoww] .today-memory-wrapper {
    margin-bottom: 2rem;
}

[b-91w7vtwoww] .today-memory-card {
    background: #FFF8F3;
    border: 1px solid #F0E6D2;
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    box-shadow: 0 4px 20px rgba(43, 42, 40, 0.08);
    position: relative;
    transform: rotate(-0.3deg);
    transition: all 0.3s ease;
}

[b-91w7vtwoww] .today-memory-card:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 6px 30px rgba(43, 42, 40, 0.12);
}

[b-91w7vtwoww] .today-memory-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

[b-91w7vtwoww] .today-memory-icon {
    font-size: 1.2rem;
}

[b-91w7vtwoww] .today-memory-title {
    /* inherited font-sans */
    font-weight: 600;
    font-size: 0.9rem;
    color: #7B5A53;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-91w7vtwoww] .today-memory-text {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.6;
    color: #2C2A28;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

[b-91w7vtwoww] .today-memory-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

[b-91w7vtwoww] .today-memory-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F0E6D2;
}

[b-91w7vtwoww] .today-memory-name {
    /* inherited font-sans */
    font-weight: 500;
    font-size: 0.9rem;
    color: #7B5A53;
}

[b-91w7vtwoww] .today-memory-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

[b-91w7vtwoww] .today-memory-date {
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #A67B5B;
    opacity: 0.8;
}

/* ===========================================
   FILTER & SORT SECTION
   =========================================== */

[b-91w7vtwoww] .vault-filters {
    display: flex;
    justify-content: flex-end;
    padding: 0 2rem;
    margin-bottom: 2rem;
    position: relative;
}

[b-91w7vtwoww] .filter-sort-btn {
    background: #F5E6D3;
    border: 1px solid #E8DCC0;
    border-radius: 25px;
    padding: 0.6rem 1.2rem;
    /* inherited font-sans */
    font-size: 0.9rem;
    font-weight: 500;
    color: #7B5A53;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-91w7vtwoww] .filter-sort-btn:hover {
    background: #EFDCC7;
    border-color: #D4C19A;
}

[b-91w7vtwoww] .filter-icon {
    font-size: 0.8rem;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

[b-91w7vtwoww] .filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #E8DCC0;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(43, 42, 40, 0.15);
    padding: 1.5rem;
    width: 280px;
    z-index: 100;
    margin-top: 0.5rem;
}

[b-91w7vtwoww] .filter-dropdown-title {
    /* inherited font-sans */
    font-size: 1rem;
    font-weight: 600;
    color: #2C2A28;
    margin-bottom: 1rem;
}

[b-91w7vtwoww] .filter-group {
    margin-bottom: 1rem;
}

[b-91w7vtwoww] .filter-label {
    display: block;
    /* inherited font-sans */
    font-size: 0.85rem;
    font-weight: 500;
    color: #7B5A53;
    margin-bottom: 0.4rem;
}

[b-91w7vtwoww] .filter-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #E8DCC0;
    border-radius: 8px;
    /* inherited font-sans */
    font-size: 0.9rem;
    background: white;
    color: #2C2A28;
}

[b-91w7vtwoww] .filter-actions {
    margin-top: 1.5rem;
    text-align: right;
}

[b-91w7vtwoww] .filter-close-btn {
    background: #7B5A53;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    /* inherited font-sans */
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

[b-91w7vtwoww] .filter-close-btn:hover {
    background: #6B4A43;
}

/* ===========================================
   MASONRY GRID LAYOUT - LEFT COLUMN
   =========================================== */

[b-91w7vtwoww] .vault-masonry {
    column-count: 2;
    column-gap: 2rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

[b-91w7vtwoww] .keepsakes-load-more {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 0.8rem auto 0;
    padding: 1.2rem 0 0.4rem;
    break-inside: avoid;
}

[b-91w7vtwoww] .keepsakes-load-more-status {
    color: #8A7169;
    font-size: 0.86rem;
    line-height: 1.3;
    text-align: center;
}

[b-91w7vtwoww] .keepsakes-load-more-btn {
    min-height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgba(123, 90, 83, 0.18);
    border-radius: 999px;
    background: #7B5A53;
    color: #fff;
    padding: 0.78rem 1.45rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(123, 90, 83, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

[b-91w7vtwoww] .keepsakes-load-more-btn:hover:not(:disabled),
[b-91w7vtwoww] .keepsakes-load-more-btn:focus-visible:not(:disabled) {
    background: #654940;
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(123, 90, 83, 0.22);
}

[b-91w7vtwoww] .keepsakes-load-more-btn:focus-visible {
    outline: 3px solid rgba(246, 217, 198, 0.9);
    outline-offset: 3px;
}

[b-91w7vtwoww] .keepsakes-load-more-btn:disabled {
    cursor: wait;
    opacity: 0.76;
    transform: none;
}

[b-91w7vtwoww] .keepsakes-load-more-arrow {
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-1px);
}

[b-91w7vtwoww] .keepsakes-load-more-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #fff;
    animation: keepsakes-load-spin-b-91w7vtwoww 0.75s linear infinite;
}

@keyframes keepsakes-load-spin-b-91w7vtwoww {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    [b-91w7vtwoww] .vault-masonry {
        column-count: 2;
        column-gap: 1.2rem;
    }

    [b-91w7vtwoww] .keepsakes-load-more {
        padding-top: 1rem;
    }
}

@media (max-width: 640px) {
    [b-91w7vtwoww] .vault-masonry {
        column-count: 1;
        padding: 0 1rem 3rem;
    }

    [b-91w7vtwoww] .keepsakes-load-more {
        padding: 0.5rem 0 0;
    }

    [b-91w7vtwoww] .keepsakes-load-more-btn {
        width: min(100%, 19rem);
        padding-inline: 1rem;
    }
}

/* ===========================================
   VAULT CARDS - ORGANIC MASONRY DESIGN
   =========================================== */

[b-91w7vtwoww] .vault-card {
    break-inside: avoid;
    background: white;
    border: 1px solid #F0E6D2;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 15px rgba(43, 42, 40, 0.08);
    /* Enhanced shadow for button feel */
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    display: inline-block;
    user-select: none;
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    /* Universal clickable cue */
}

[b-91w7vtwoww] .vault-card:hover {
    transform: translateY(-4px);
    /* Elegant lift effect */
    box-shadow: 0 8px 25px rgba(43, 42, 40, 0.12);
    /* Soft, premium shadow */
    border-color: #E8DCC0;
}

[b-91w7vtwoww] .vault-card:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(43, 42, 40, 0.08);
    transition: all 0.1s ease;
}

/* Card Clickable Area */
[b-91w7vtwoww] .vault-card-clickable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.2s ease;
}

[b-91w7vtwoww] .vault-card-clickable:hover {
    background-color: rgba(240, 230, 210, 0.3);
}

[b-91w7vtwoww] .vault-card-clickable:active {
    transform: scale(0.98) translateY(1px);
    background-color: rgba(240, 230, 210, 0.5);
    transition: all 0.1s ease;
}

/* Mobile Chat Hint - Layer 3 Affordance */
[b-91w7vtwoww] .vault-card-chat-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    opacity: 0.6;
    color: #8B7355;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

/* Show hint more prominently on mobile */
@media (max-width: 768px) {
    [b-91w7vtwoww] .vault-card-chat-hint {
        opacity: 0.8;
    }

    [b-91w7vtwoww] .vault-card:hover .vault-card-chat-hint {
        opacity: 1;
        color: #6B5B47;
    }
}

/* Hide hint on desktop hover for clean experience */
@media (min-width: 769px) {
    [b-91w7vtwoww] .vault-card:hover .vault-card-chat-hint {
        opacity: 0.3;
    }
}

/* Card Header */
[b-91w7vtwoww] .vault-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

[b-91w7vtwoww] .vault-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F0E6D2;
    flex-shrink: 0;
}

[b-91w7vtwoww] .vault-card-name {
    /* inherited font-sans */
    font-weight: 500;
    font-size: 0.85rem;
    color: #7B5A53;
    margin-left: 0.5rem;
    flex-grow: 1;
}

/* Three Dots Menu Button */
[b-91w7vtwoww] .three-dots-menu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0.6;
    z-index: 10;
}

[b-91w7vtwoww] .three-dots-menu:hover {
    background-color: rgba(167, 123, 91, 0.1);
    opacity: 1;
    transform: scale(1.1);
}

[b-91w7vtwoww] .three-dots-menu:active {
    transform: scale(0.95);
}

[b-91w7vtwoww] .three-dots-menu svg {
    width: 16px;
    height: 16px;
    fill: #7B5A53;
}

/* Vault Card Dropdown Menu */
[b-91w7vtwoww] .vault-card-dropdown {
    position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    background: white;
    border: 1px solid #E8DCC0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(43, 42, 40, 0.15);
    z-index: 1000;
    min-width: 140px;
    overflow: hidden;
}

[b-91w7vtwoww] .vault-action-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(24, 16, 12, 0.3);
    z-index: 1205;
}

[b-91w7vtwoww] .vault-action-sheet {
    position: fixed;
    left: 50%;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    width: min(92vw, 360px);
    background: #ffffff;
    border-radius: 20px;
    padding: 0.35rem 0;
    box-shadow: 0 16px 36px rgba(83, 51, 43, 0.2);
    transform: translate(-50%, 12px);
    animation: keepsake-sheet-rise-b-91w7vtwoww 0.2s ease-out forwards;
    z-index: 1210;
}

[b-91w7vtwoww] .vault-action-sheet-item {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    color: #4b2e2e;
    /* inherited font-sans */
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

[b-91w7vtwoww] .vault-action-sheet-item:hover,
[b-91w7vtwoww] .vault-action-sheet-item:focus-visible {
    background: #f7f2ee;
}

[b-91w7vtwoww] .vault-action-sheet-item:active {
    background: #efe7e1;
}

[b-91w7vtwoww] .vault-action-sheet-item.danger {
    color: #b24a3a;
}

@keyframes keepsake-sheet-rise-b-91w7vtwoww {
    from {
        opacity: 0;
        transform: translate(-50%, 18px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

[b-91w7vtwoww] .vault-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #7B5A53;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

[b-91w7vtwoww] .vault-dropdown-item:hover {
    background-color: #F5E6D3;
}

[b-91w7vtwoww] .vault-dropdown-item:active {
    background-color: #E8DCC0;
}

[b-91w7vtwoww] .vault-dropdown-item svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.7;
}

[b-91w7vtwoww] .vault-dropdown-item.danger {
    color: #b04747;
}

[b-91w7vtwoww] .vault-dropdown-item.danger:hover {
    background-color: #f7e2e2;
}

[b-91w7vtwoww] .vault-dropdown-item.danger:active {
    background-color: #f1d1d1;
}

[b-91w7vtwoww] .unsave-btn {
    background: none;
    border: none;
    color: #A67B5B;
    /* inherited font-sans */
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateX(10px);
}

[b-91w7vtwoww] .vault-card:hover .unsave-btn {
    opacity: 1;
    transform: translateX(0);
}

[b-91w7vtwoww] .unsave-btn:hover {
    background: #F5E6D3;
    color: #7B5A53;
}

/* Card Message */
[b-91w7vtwoww] .vault-card-message {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: #2C2A28;
    margin-bottom: 1rem;
    font-weight: 300;
}

/* Match LovedOneChat image sizing for inline images in vault messages */
[b-91w7vtwoww] .vault-card-message img {
    max-width: 220px !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 10px;
    object-fit: cover !important;
    display: block;
}

@media (max-width: 768px) {
    [b-91w7vtwoww] .vault-card-message img {
        max-width: 160px !important;
        max-height: 160px !important;
    }
}

/* Card Footer */
[b-91w7vtwoww] .vault-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-91w7vtwoww] .vault-card-context {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[b-91w7vtwoww] .context-icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

[b-91w7vtwoww] .context-text {
    /* inherited font-sans */
    font-size: 0.8rem;
    color: #A67B5B;
    opacity: 0.8;
}

/* ===========================================
   FOOTER STYLES
   =========================================== */

/* Footer Styles */
[b-91w7vtwoww] .main-footer {
    /* Keep footer aligned with content width and sidebar offset */
    width: calc(100% - 280px);
    max-width: min(1200px, calc(100% - 280px));
    margin-left: 280px;
    margin-right: auto;
    background-color: #FAF3E5;
    padding: 60px 0 30px 0;
    margin-top: 80px;
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    box-sizing: border-box;
}

[b-91w7vtwoww] .main-footer.sidebar-hidden {
    /* Match the main container width when sidebar is hidden */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

[b-91w7vtwoww] .footer-container {
    /* Keep the inner footer content aligned with main container padding */
    max-width: 1440px;
    width: 100%;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

[b-91w7vtwoww] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

[b-91w7vtwoww] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-91w7vtwoww] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-91w7vtwoww] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

[b-91w7vtwoww] .footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 40px;
}

[b-91w7vtwoww] .footer-section {
    padding: 0 var(--mobile-page-margin);
}

[b-91w7vtwoww] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-91w7vtwoww] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-91w7vtwoww] .footer-section ul li {
    margin-bottom: 10px;
}

[b-91w7vtwoww] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-91w7vtwoww] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

[b-91w7vtwoww] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    gap: 20px;
}

[b-91w7vtwoww] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-91w7vtwoww] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-91w7vtwoww] .footer-languages a:hover,
[b-91w7vtwoww] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

[b-91w7vtwoww] .footer-legal-origin {
    text-align: right;
}

[b-91w7vtwoww] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
}

[b-91w7vtwoww] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 768px) {
    [b-91w7vtwoww] .vault-header {
        padding: 2rem var(--mobile-page-margin) 1.5rem;
    }

    [b-91w7vtwoww] .vault-header h1 {
        font-size: 2rem;
    }

    [b-91w7vtwoww] .vault-subtitle {
        font-size: 1rem;
    }

    [b-91w7vtwoww] .today-memory-wrapper {
        padding: 0 var(--mobile-page-margin);
    }

    [b-91w7vtwoww] .today-memory-card {
        padding: 1.5rem;
    }

    [b-91w7vtwoww] .vault-filters {
        padding: 0 var(--mobile-page-margin);
    }

    [b-91w7vtwoww] .filter-dropdown {
        width: calc(100vw - 2rem);
        right: 1rem;
    }
}

@media (max-width: 480px) {
    [b-91w7vtwoww] .vault-header h1 {
        font-size: 1.8rem;
    }

    [b-91w7vtwoww] .today-memory-card {
        padding: 1.2rem;
    }

    [b-91w7vtwoww] .vault-card {
        padding: 1.2rem;
    }
}

/* Mobile touch scroll fixes - REMOVED to fix window scrolling */
@media (max-width: 768px) {
    /*
    ::deep .app-layout {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch; 
    }

    ::deep .container-v3,
    ::deep .messages-container {
        overflow-x: hidden;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior: contain;
    }
    */
}

/* Responsive Layout Styles */
@media (max-width: 1024px) {
    [b-91w7vtwoww] .toggle-sidebar {
        display: none;
    }

    [b-91w7vtwoww] .app-layout {
        padding-top: 60px;
    }

    [b-91w7vtwoww] .messages-container {
        margin-left: 0 !important;
        margin-top: 70px;
        padding: var(--mobile-page-margin);
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main-content"
            "sidebar-content";
    }

    [b-91w7vtwoww] .main-content-area {
        padding: 1rem 0;
    }

    [b-91w7vtwoww] .sidebar-content-area {
        padding: 1rem 0 2rem;
    }

    [b-91w7vtwoww] .sidebar-content-area::before {
        display: none;
    }

    [b-91w7vtwoww] .filters-panel {
        display: none;
        position: static;
        margin-bottom: 1.5rem;
    }

    [b-91w7vtwoww] .filters-panel.mobile-open {
        display: block;
        position: fixed;
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
        bottom: calc(1rem + env(safe-area-inset-bottom));
        top: auto;
        z-index: 1300;
        margin: 0;
        max-height: min(78vh, calc(100dvh - 6rem));
        overflow-y: auto;
        padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
    }

    [b-91w7vtwoww] .filters-panel-section {
        margin-bottom: 1.25rem;
    }

    [b-91w7vtwoww] .filter-pill-tray {
        gap: 0.5rem;
    }

    [b-91w7vtwoww] .filter-pill {
        font-size: 0.88rem;
        padding: 0.45rem 1rem;
    }

    [b-91w7vtwoww] .mobile-filters-trigger-row {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 1rem;
    }

    [b-91w7vtwoww] .mobile-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(43, 42, 40, 0.42);
        backdrop-filter: blur(2px);
    }

    [b-91w7vtwoww] .mobile-filters-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    [b-91w7vtwoww] .main-footer {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100%;
    }

    [b-91w7vtwoww] .footer-container {
        margin: 0 auto;
        padding: 0 1rem;
    }

    [b-91w7vtwoww] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-91w7vtwoww] .sidebar.visible {
        transform: translateX(0);
    }

    [b-91w7vtwoww] .sidebar.hidden {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    [b-91w7vtwoww] .messages-container {
        padding: var(--mobile-page-margin);
        margin-top: 60px;
    }

    [b-91w7vtwoww] .filters-panel {
        padding: 1.4rem 1.2rem;
    }

    [b-91w7vtwoww] .filter-pill {
        font-size: 0.85rem;
        padding: 0.4rem 0.9rem;
    }

    [b-91w7vtwoww] .filter-pill-tray {
        gap: 0.45rem;
    }

    [b-91w7vtwoww] .invitation-card {
        padding: 2rem 1.5rem;
    }

    [b-91w7vtwoww] .filters-panel.mobile-open {
        left: max(0.85rem, env(safe-area-inset-left));
        right: max(0.85rem, env(safe-area-inset-right));
        bottom: calc(0.85rem + env(safe-area-inset-bottom));
    }

    [b-91w7vtwoww] .vault-header {
        padding: 1.5rem var(--mobile-page-margin);
    }

    [b-91w7vtwoww] .vault-header h1 {
        font-size: 2rem;
    }

    [b-91w7vtwoww] .today-memory-wrapper {
        padding: 0 var(--mobile-page-margin);
        margin: 1.5rem auto 2rem;
    }

    [b-91w7vtwoww] .vault-filters {
        padding: 0 var(--mobile-page-margin);
    }

    [b-91w7vtwoww] .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    [b-91w7vtwoww] .footer-section {
        text-align: center;
    }

    [b-91w7vtwoww] .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-91w7vtwoww] .footer-legal-origin {
        text-align: center;
    }

    [b-91w7vtwoww] .footer-copyright {
        text-align: center;
    }
}

@media (max-width: 480px) {

    [b-91w7vtwoww] .toggle-sidebar,
    [b-91w7vtwoww] .mobile-top-bar,
    [b-91w7vtwoww] .sidebar-overlay,
    [b-91w7vtwoww] .sidebar {
        display: block;
    }

    [b-91w7vtwoww] .messages-container {
        padding: var(--mobile-page-margin);
    }

    [b-91w7vtwoww] .vault-header h1 {
        font-size: 1.8rem;
    }

    [b-91w7vtwoww] .mobile-top-bar {
        display: flex;
    }
}

/* ===========================================
   SIDEBAR & LAYOUT COMPATIBILITY
   =========================================== */

/* Invitation card styling */
[b-91w7vtwoww] .invitation-card {
    background: linear-gradient(165deg, rgba(255, 245, 237, 0.95), rgba(250, 227, 208, 0.92));
    border: 1px solid rgba(216, 168, 138, 0.45);
    border-radius: 24px;
    padding: 2.4rem 2rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(123, 90, 83, 0.18);
}

[b-91w7vtwoww] .vault-cta-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 auto 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #C27A4A;
    box-shadow: 0 12px 30px rgba(194, 122, 74, 0.25);
}

[b-91w7vtwoww] .vault-cta h2 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 300;
    color: #3F2C2C;
    margin-bottom: 0.85rem;
}

[b-91w7vtwoww] .vault-cta p {
    /* inherited font-sans */
    font-size: 0.98rem;
    color: #6B5B57;
    margin-bottom: 1.8rem;
    line-height: 1.65;
}

[b-91w7vtwoww] .cta-button {
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fffaf6;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    /* inherited font-sans */
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 16px 34px rgba(123, 90, 83, 0.24);
}

[b-91w7vtwoww] .cta-button:hover {
    background: linear-gradient(135deg, #6B4A43, #915847);
    transform: translateY(-2px);
}

/* ===========================================
   UNSAVE CONFIRMATION MODAL STYLES
   =========================================== */

/* Modal Overlay for Centering and Background */
[b-91w7vtwoww] .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

[b-91w7vtwoww] .modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Modal Content for Unsave Confirmation */
[b-91w7vtwoww] .modal-content.layered-modal {
    background-color: rgb(255, 242, 236);
    /* Match page background */
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width: 450px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    padding: 24px;
}

[b-91w7vtwoww] .modal-overlay.visible .modal-content {
    transform: scale(1);
}

/* Modal Header */
[b-91w7vtwoww] .modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 16px 0;
    margin-bottom: 8px;
}

[b-91w7vtwoww] .modal-close-icon-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

[b-91w7vtwoww] .modal-close-icon-button:hover {
    color: #666;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Modal Body */
[b-91w7vtwoww] .modal-body {
    padding: 0 8px 24px 8px;
}

[b-91w7vtwoww] .modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 16px 0;
    text-align: center;
}

[b-91w7vtwoww] .modal-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
    text-align: center;
    line-height: 1.5;
}

/* Message Preview Card */
[b-91w7vtwoww] .message-preview-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    text-align: left;
}

[b-91w7vtwoww] .preview-content {
    position: relative;
}

[b-91w7vtwoww] .preview-text {
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0;
    font-style: italic;
}

/* Modal Actions */
[b-91w7vtwoww] .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f0f0f0;
}

/* Button Styles */
[b-91w7vtwoww] .btn-secondary-action {
    background-color: transparent;
    color: #666;
    border: 1px solid #e5e5e5;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-91w7vtwoww] .btn-secondary-action:hover {
    background-color: #f5f5f5;
    border-color: #d1d1d1;
    color: #555;
}

[b-91w7vtwoww] .btn-danger-action {
    background-color: #e53e3e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-91w7vtwoww] .btn-danger-action:hover {
    background-color: #c53030;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

[b-91w7vtwoww] .btn-danger-action:active {
    transform: translateY(0);
}

/* Mobile Responsiveness for Modal */
@media (max-width: 768px) {
    [b-91w7vtwoww] .modal-content.layered-modal {
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;
    }

    [b-91w7vtwoww] .modal-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    [b-91w7vtwoww] .modal-subtitle {
        font-size: 15px;
        margin-bottom: 20px;
    }

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

    [b-91w7vtwoww] .btn-secondary-action,
    [b-91w7vtwoww] .btn-danger-action {
        width: 100%;
        padding: 14px 24px;
    }
}

/* ===========================================
   KEEPSAKE PERSONA PICKER
   =========================================== */
[b-91w7vtwoww] .persona-cta-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-91w7vtwoww] .persona-cta {
    align-self: flex-start;
    border: none;
    background: linear-gradient(135deg, #f0c2b1 0%, #f7a8bc 100%);
    color: #4b2e2a;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(75, 46, 42, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-91w7vtwoww] .persona-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(75, 46, 42, 0.2);
}

[b-91w7vtwoww] .persona-picker {
    background: #fff9f4;
    border: 1px solid rgba(75, 46, 42, 0.15);
    box-shadow: 0 12px 32px rgba(75, 46, 42, 0.2);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 320px;
}

[b-91w7vtwoww] .persona-picker-title {
    font-size: 0.95rem;
    color: #5b403b;
    font-weight: 600;
    margin: 0;
}

[b-91w7vtwoww] .persona-picker-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-91w7vtwoww] .persona-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: #3f2c28;
    background: rgba(247, 231, 223, 0.6);
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

[b-91w7vtwoww] .persona-option:hover {
    background: rgba(247, 231, 223, 0.9);
}

[b-91w7vtwoww] .persona-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #d98473;
}

[b-91w7vtwoww] .persona-picker-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-91w7vtwoww] .persona-action {
    border: none;
    border-radius: 12px;
    padding: 0.55rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #f7cbbb, #f3a0ba);
    color: #472922;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[b-91w7vtwoww] .persona-action.secondary {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(75, 46, 42, 0.15);
}

[b-91w7vtwoww] .persona-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

[b-91w7vtwoww] .persona-action:not(:disabled):hover {
    transform: translateY(-1px);
}

/* Compact layout on tiny screens */
@media (max-width: 420px) {
    [b-91w7vtwoww] .persona-picker {
        width: 100%;
    }
}

/* ==========================================================
   Keepsake Anthology Card Styling
   ========================================================== */
[b-91w7vtwoww] .keepsake-card {
    margin-bottom: 2.2rem;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    position: relative;
    padding: 1.5rem 1.6rem 1.4rem;
    background: linear-gradient(180deg, #fff9f1 0%, #fff3e4 100%);
    border-radius: 22px;
    border: 1px solid rgba(241, 225, 205, 0.85);
    box-shadow: 0 16px 32px rgba(79, 59, 52, 0.12);
    color: #402f2a;
    overflow: visible;
}

[b-91w7vtwoww] .keepsake-card .three-dots-menu {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
}

[b-91w7vtwoww] .keepsake-card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.45rem;
}

[b-91w7vtwoww] .keepsake-letterhead {
    position: relative;
}

[b-91w7vtwoww] .keepsake-letterhead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.6rem;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(122, 98, 93, 0.35) 0%, rgba(122, 98, 93, 0.05) 100%);
}

[b-91w7vtwoww] .keepsake-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 236, 221, 0.9);
    box-shadow: 0 10px 18px rgba(79, 59, 52, 0.18);
}

[b-91w7vtwoww] .keepsake-card-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-91w7vtwoww] .keepsake-author {
    font-weight: 700;
    font-size: 1.08rem;
    color: #3c2a26;
}

[b-91w7vtwoww] .keepsake-subtitle {
    font-style: italic;
    font-size: 0.95rem;
    color: #7a625d;
}

[b-91w7vtwoww] .keepsake-card-body {
    font-size: 1.05rem;
    font-family: var(--font-serif);
    line-height: 1.8;
    color: #3d2c28;
    min-height: 110px;
}

[b-91w7vtwoww] .keepsake-card-body p {
    margin: 0 0 0.85rem;
}

[b-91w7vtwoww] .keepsake-card-body p:last-child {
    margin-bottom: 0;
}

[b-91w7vtwoww] .keepsake-card-text {
    position: relative;
}

[b-91w7vtwoww] .keepsake-card-body.truncated {
    position: relative;
}

[b-91w7vtwoww] .keepsake-card-body.truncated .keepsake-card-text {
    max-height: 11rem;
    overflow: hidden;
}

[b-91w7vtwoww] .keepsake-card-body.truncated .keepsake-card-text::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.6rem;
    /* Match the card's bottom gradient stop (#fff3e4) so the fade dissolves seamlessly into the paper */
    background: linear-gradient(180deg, rgba(255, 243, 228, 0) 0%, rgba(255, 243, 228, 0.85) 55%, rgba(255, 243, 228, 1) 100%);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

[b-91w7vtwoww] .keepsake-card:hover .keepsake-card-text::after {
    opacity: 0.92;
}

[b-91w7vtwoww] .keepsake-card-hint-btn {
    margin-top: 1rem;
    /* inherited font-sans */
    font-size: 0.86rem;
    font-weight: 500;
    color: #7B5A53;
    letter-spacing: 0.02em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.2s ease;
}

[b-91w7vtwoww] .keepsake-card-hint-btn .keepsake-card-hint-icon {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

[b-91w7vtwoww] .keepsake-card-hint-btn:focus-visible {
    outline: 2px solid rgba(123, 90, 83, 0.45);
    outline-offset: 3px;
}

[b-91w7vtwoww] .keepsake-card-hint-btn[aria-expanded="true"] .keepsake-card-hint-icon {
    transform: rotate(90deg);
}

[b-91w7vtwoww] .keepsake-card:hover .keepsake-card-hint-btn,
[b-91w7vtwoww] .keepsake-card-hint-btn:hover {
    transform: translateY(-1px);
    color: #5f3f38;
}

[b-91w7vtwoww] .filters-panel-link {
    margin-top: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    color: #7B5A53;
    /* inherited font-sans */
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

[b-91w7vtwoww] .filters-panel-link:hover,
[b-91w7vtwoww] .filters-panel-link:focus-visible {
    color: #5f3f38;
}

[b-91w7vtwoww] .filters-panel-link:focus-visible {
    outline: 2px solid rgba(123, 90, 83, 0.35);
    outline-offset: 4px;
}

[b-91w7vtwoww] .keepsake-image {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(79, 59, 52, 0.18);
}

[b-91w7vtwoww] .keepsake-audio {
    width: 100%;
    margin-top: 0.75rem;
}

[b-91w7vtwoww] .keepsake-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.35rem;
    font-size: 0.92rem;
}

[b-91w7vtwoww] .keepsake-footer-meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    color: #6f5a55;
}

[b-91w7vtwoww] .keepsake-footer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 245, 237, 0.9);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(111, 90, 85, 0.12);
}

[b-91w7vtwoww] .keepsake-footer-icon {
    width: 18px;
    height: 18px;
    color: #7a625d;
}

[b-91w7vtwoww] .keepsake-footer-chip svg {
    display: block;
    flex-shrink: 0;
}

[b-91w7vtwoww] .keepsake-shared-chip {
    background: rgba(206, 133, 104, 0.12);
    color: #a85e46;
    box-shadow: inset 0 0 0 1px rgba(168, 94, 70, 0.2);
}

[b-91w7vtwoww] .keepsake-shared-chip svg {
    color: #a85e46;
}

[b-91w7vtwoww] .keepsake-chat {
    border: 1px solid rgba(126, 100, 92, 0.25);
    background: rgba(255, 245, 237, 0.95);
    color: #6f5a55;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(79, 59, 52, 0.16);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-91w7vtwoww] .keepsake-chat:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(79, 59, 52, 0.2);
}

[b-91w7vtwoww] .keepsake-chat-icon {
    width: 20px;
    height: 20px;
}

[b-91w7vtwoww] .keepsake-persona-popover {
    position: absolute;
    right: 1.1rem;
    bottom: 4.6rem;
    z-index: 30;
}

[b-91w7vtwoww] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================
   EMPTY STATE
   =========================================== */

[b-91w7vtwoww] .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 1px dashed #E8DCC0;
}

[b-91w7vtwoww] .empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

[b-91w7vtwoww] .empty-state h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: #5A413A;
    margin-bottom: 0.75rem;
}

[b-91w7vtwoww] .empty-state p {
    /* inherited font-sans */
    font-size: 1rem;
    color: #8B7355;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

[b-91w7vtwoww] .empty-state-action {
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fffaf6;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    /* inherited font-sans */
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-91w7vtwoww] .empty-state-action:hover {
    background: linear-gradient(135deg, #6B4A43, #915847);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    [b-91w7vtwoww] .keepsake-card {
        padding: 1.2rem 1.25rem 1.2rem;
    }

    [b-91w7vtwoww] .keepsake-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-91w7vtwoww] .keepsake-chat {
        align-self: flex-end;
    }

    [b-91w7vtwoww] .keepsake-persona-popover {
        position: static;
        margin-top: 1rem;
    }
}

/* Keepsakes mobile polish - keeps the anthology cards but fixes the page frame. */
@media (max-width: 1024px) {
    [b-91w7vtwoww] .mobile-floating-header {
        z-index: 1200;
        background:
            linear-gradient(180deg, rgba(250, 236, 218, 0.97) 0%, rgba(250, 236, 218, 0.86) 72%, rgba(250, 236, 218, 0) 100%);
    }

    .app-layout[b-91w7vtwoww],
    [b-91w7vtwoww] .app-layout {
        display: block;
        width: 100%;
        max-width: 100vw;
        padding-top: 60px;
        overflow-x: hidden;
        background-color: #FAECDA;
    }

    .messages-container[b-91w7vtwoww],
    [b-91w7vtwoww] .messages-container,
    .messages-container.sidebar-hidden[b-91w7vtwoww],
    [b-91w7vtwoww] .messages-container.sidebar-hidden {
        width: 100%;
        max-width: 720px;
        min-width: 0;
        margin: 0 auto !important;
        padding: 0 0 44px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main-content"
            "sidebar-content";
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .vault-header[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-header {
        width: 100%;
        max-width: 680px;
        padding: 30px 18px 22px;
        box-sizing: border-box;
    }

    .vault-header h1[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-header h1 {
        font-size: clamp(2.05rem, 7vw, 2.7rem);
        line-height: 1.1;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .vault-subtitle[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-subtitle {
        max-width: 36rem;
        font-size: clamp(1.05rem, 2.8vw, 1.25rem);
        line-height: 1.55;
    }

    .main-content-area[b-91w7vtwoww],
    [b-91w7vtwoww] .main-content-area {
        width: 100%;
        padding: 0 18px 2.5rem;
        box-sizing: border-box;
    }

    .mobile-filters-trigger-row[b-91w7vtwoww],
    [b-91w7vtwoww] .mobile-filters-trigger-row {
        margin-bottom: 1rem;
    }

    .vault-masonry[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-masonry {
        width: 100%;
        padding: 0;
        column-gap: 1rem;
    }
}

@media (max-width: 680px) {
    .messages-container[b-91w7vtwoww],
    [b-91w7vtwoww] .messages-container,
    .messages-container.sidebar-hidden[b-91w7vtwoww],
    [b-91w7vtwoww] .messages-container.sidebar-hidden {
        max-width: 680px;
        padding-bottom: 40px;
    }

    .vault-header[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-header {
        padding: 24px var(--mobile-page-margin, 16px) 16px;
    }

    .vault-header h1[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-header h1 {
        font-size: clamp(2.05rem, 9.2vw, 2.35rem);
        line-height: 1.12;
    }

    .vault-subtitle[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-subtitle {
        font-size: clamp(1.02rem, 4.4vw, 1.16rem);
        line-height: 1.55;
    }

    .main-content-area[b-91w7vtwoww],
    [b-91w7vtwoww] .main-content-area {
        padding: 0 var(--mobile-page-margin, 16px) 2.5rem;
    }

    .vault-masonry[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-masonry {
        column-count: 1;
        padding: 0;
    }

    .keepsake-card[b-91w7vtwoww],
    [b-91w7vtwoww] .keepsake-card {
        border-radius: 18px;
        padding: 1.2rem 1.25rem 1.25rem;
        margin-bottom: 1.6rem;
        box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
    }

    .keepsake-card-body[b-91w7vtwoww],
    [b-91w7vtwoww] .keepsake-card-body {
        font-size: clamp(1rem, 4.4vw, 1.12rem);
        line-height: 1.72;
    }
}

@media (max-width: 420px) {
    .vault-header[b-91w7vtwoww],
    [b-91w7vtwoww] .vault-header {
        padding-top: 22px;
    }

    .keepsake-card-head[b-91w7vtwoww],
    [b-91w7vtwoww] .keepsake-card-head {
        gap: 0.75rem;
    }

    .keepsake-avatar[b-91w7vtwoww],
    [b-91w7vtwoww] .keepsake-avatar {
        width: 48px;
        height: 48px;
    }
}
/* /Components/Pages/LovedOnesAll.razor.rz.scp.css */
/* ===========================================
   LOVED ONES ALL PAGE - POLAROID GALLERY
   =========================================== */

/* Sidebar Overlay */
.sidebar-overlay[b-rzeogfwrwt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
}

.sidebar-overlay.hidden[b-rzeogfwrwt] {
    display: none;
}

/* App Layout */
[b-rzeogfwrwt] .app-layout,
.app-layout[b-rzeogfwrwt] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    touch-action: pan-y pinch-zoom;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-rzeogfwrwt] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-rzeogfwrwt] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-rzeogfwrwt] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-rzeogfwrwt] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-rzeogfwrwt] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-rzeogfwrwt] .sidebar a:hover {
    color: #000;
}

[b-rzeogfwrwt] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-rzeogfwrwt] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-rzeogfwrwt] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-rzeogfwrwt] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

/* Toggle Sidebar Button */
[b-rzeogfwrwt] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* ===========================================
   MAIN CONTENT AREA
   =========================================== */

[b-rzeogfwrwt] .messages-container {
    flex: 1;
    margin-left: 280px;
    width: min(100%, calc(100vw - 280px));
    max-width: min(1400px, calc(100vw - 280px));
    padding: 0;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
    
    background: #FAECDA;
}

[b-rzeogfwrwt] .messages-container.sidebar-hidden {
    margin-left: 0;
    width: 100%;
    max-width: min(1400px, 100vw);
}

/* Page Header */
[b-rzeogfwrwt] .vault-header {
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

[b-rzeogfwrwt] .vault-header h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: var(--mobile-hero-heading-weight);
    color: #2C2A28;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

[b-rzeogfwrwt] .vault-subtitle {
    /* inherited font-sans */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6B5B57;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Main Content Area */
[b-rzeogfwrwt] .main-content-area {
    padding: 1.5rem 3rem 3rem 3rem;
    position: relative;
}

/* ===========================================
   AUTHENTICATED MEMORY WALL
   =========================================== */

[b-rzeogfwrwt] .lovedones-wall-hero {
    width: min(100%, 1240px);
    min-height: clamp(560px, 48vw, 680px);
    margin: 0 auto clamp(3rem, 5vw, 5rem);
    display: grid;
    grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.12fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem);
    position: relative;
    isolation: isolate;
}

[b-rzeogfwrwt] .lovedones-wall-hero::before {
    content: "";
    position: absolute;
    inset: 4% 0 auto 0;
    height: 92%;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(255, 219, 206, 0.42) 0%, rgba(255, 247, 237, 0.26) 42%, rgba(255, 247, 237, 0) 80%),
        repeating-linear-gradient(0deg, rgba(103, 76, 58, 0.025) 0, rgba(103, 76, 58, 0.025) 1px, transparent 1px, transparent 5px);
    border: 1px solid rgba(177, 132, 92, 0.13);
    box-shadow: 0 28px 70px rgba(97, 66, 42, 0.08);
    z-index: -1;
}

[b-rzeogfwrwt] .lovedones-wall-copy {
    max-width: 560px;
    position: relative;
    z-index: 3;
}

[b-rzeogfwrwt] .wall-eyebrow,
[b-rzeogfwrwt] .section-kicker {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
    color: rgba(75, 58, 51, 0.72);
}

[b-rzeogfwrwt] .lovedones-wall-copy h1 {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: clamp(3.8rem, 6.4vw, 6.4rem);
    line-height: 0.98;
    font-weight: var(--mobile-hero-heading-weight);
    letter-spacing: 0;
    color: #2C2A28;
}

[b-rzeogfwrwt] .wall-subtitle {
    max-width: 500px;
    margin: 0 0 1.2rem;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.65;
    color: #6B5B57;
}

[b-rzeogfwrwt] .wall-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0 0 1.8rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(168, 124, 83, 0.16);
    color: #7B615A;
    font-size: 0.92rem;
    font-weight: 600;
}

[b-rzeogfwrwt] .wall-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

[b-rzeogfwrwt] .wall-primary-action,
[b-rzeogfwrwt] .wall-secondary-action,
[b-rzeogfwrwt] .section-add-button {
    min-height: 48px;
    border-radius: 999px;
    padding: 0.75rem 1.45rem;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

[b-rzeogfwrwt] .wall-primary-action {
    border: 1px solid rgba(172, 102, 50, 0.18);
    background: linear-gradient(135deg, #F4BC82 0%, #DA8F55 100%);
    color: #2F2520;
    box-shadow: 0 14px 28px rgba(165, 101, 47, 0.18);
}

[b-rzeogfwrwt] .wall-primary-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(165, 101, 47, 0.24);
}

[b-rzeogfwrwt] .wall-secondary-action,
[b-rzeogfwrwt] .section-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgba(120, 88, 60, 0.18);
    background: rgba(255, 255, 255, 0.62);
    color: #5B463D;
}

[b-rzeogfwrwt] .wall-secondary-action:hover,
[b-rzeogfwrwt] .section-add-button:hover {
    transform: translateY(-2px);
    background: rgba(255, 249, 241, 0.9);
    box-shadow: 0 12px 26px rgba(80, 52, 28, 0.12);
}

[b-rzeogfwrwt] .lovedones-portrait-wall {
    position: relative;
    min-height: clamp(430px, 42vw, 620px);
    width: 100%;
    isolation: isolate;
}

[b-rzeogfwrwt] .lovedones-portrait-glow {
    position: absolute;
    width: 76%;
    aspect-ratio: 1;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 211, 175, 0.38);
    filter: blur(44px);
    z-index: 0;
}

[b-rzeogfwrwt] .wall-portrait {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #F8E9D2;
    border: 1px solid rgba(120, 88, 60, 0.08);
    box-shadow: 0 18px 44px rgba(79, 58, 47, 0.16);
}

[b-rzeogfwrwt] .wall-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: sepia(0.11) saturate(0.94) contrast(1.03) brightness(1.02);
}

[b-rzeogfwrwt] .wall-portrait-main {
    width: min(74%, 560px);
    aspect-ratio: 1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border-radius: 14px;
}

[b-rzeogfwrwt] .wall-portrait-main figcaption {
    position: absolute;
    left: 7%;
    bottom: 6%;
    max-width: 84%;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.88);
    color: #5A463F;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(80, 52, 28, 0.12);
}

[b-rzeogfwrwt] .wall-portrait-support {
    z-index: 1;
    opacity: 0.68;
}

[b-rzeogfwrwt] .wall-portrait-one {
    width: 30%;
    aspect-ratio: 1;
    left: 4%;
    top: 6%;
    transform: rotate(-4deg);
}

[b-rzeogfwrwt] .wall-portrait-two {
    width: 28%;
    aspect-ratio: 1;
    right: 8%;
    top: 0;
    transform: rotate(3deg);
}

[b-rzeogfwrwt] .wall-portrait-three {
    width: 34%;
    aspect-ratio: 1;
    left: 8%;
    bottom: 4%;
    transform: rotate(2.5deg);
    opacity: 0.76;
    z-index: 2;
}

[b-rzeogfwrwt] .wall-portrait-four {
    width: 24%;
    aspect-ratio: 1;
    right: 1%;
    bottom: 1%;
    transform: rotate(-3deg);
    opacity: 0.55;
}

[b-rzeogfwrwt] .wall-portrait-placeholder {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: min(58%, 420px);
    aspect-ratio: 1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
    border: 1px dashed rgba(196, 136, 106, 0.36);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C4886A;
    font-size: 4rem;
}

[b-rzeogfwrwt] .lovedones-section {
    width: min(100%, 1180px);
    margin: 0 auto clamp(3rem, 5vw, 5rem);
}

[b-rzeogfwrwt] .lovedones-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    margin-bottom: 1.5rem;
}

[b-rzeogfwrwt] .lovedones-section-header h2,
[b-rzeogfwrwt] .lovedones-add-callout h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.08;
    color: #372A25;
    font-weight: 600;
}

[b-rzeogfwrwt] .section-kicker {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

[b-rzeogfwrwt] .section-add-button {
    min-height: 42px;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
}

[b-rzeogfwrwt] .lovedones-gallery-grid,
[b-rzeogfwrwt] .lovedones-draft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
    justify-content: center;
    align-items: start;
    gap: clamp(1.4rem, 2.4vw, 2rem);
    padding: 0;
    max-width: none;
}

[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card,
[b-rzeogfwrwt] .lovedones-draft-grid > .profile-card {
    margin: 0 !important;
}

[b-rzeogfwrwt] .draft-profile-card {
    opacity: 0.9;
}

[b-rzeogfwrwt] .draft-profile-card .card-header-bg {
    background: linear-gradient(180deg, #FFF1E8 0%, #FFF8F4 100%);
}

[b-rzeogfwrwt] .draft-profile-card .card-name {
    min-height: 3.35rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rzeogfwrwt] .draft-profile-card .card-description {
    min-height: 4.05rem;
    max-height: 4.05rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-rzeogfwrwt] .draft-profile-card .portrait-nudge-button {
    min-height: 5rem;
}

[b-rzeogfwrwt] .lovedones-add-callout {
    width: min(100%, 960px);
    margin: 0 auto 3rem;
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-top: 1px solid rgba(120, 88, 60, 0.14);
    border-bottom: 1px solid rgba(120, 88, 60, 0.1);
}

[b-rzeogfwrwt] .lovedones-add-callout p {
    margin: 0.4rem 0 0;
    color: #7B615A;
    font-size: 1rem;
}

/* ===========================================
   LOADING STATE
   =========================================== */

[b-rzeogfwrwt] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 3rem;
}

[b-rzeogfwrwt] .vault-loader {
    text-align: center;
    padding: 2rem;
}

[b-rzeogfwrwt] .vault-loader-image {
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
    animation: candleGlow-b-rzeogfwrwt 2s ease-in-out infinite alternate;
}

@keyframes candleGlow-b-rzeogfwrwt {
    0% {
        opacity: 0.8;
        filter: brightness(1);
    }
    100% {
        opacity: 1;
        filter: brightness(1.15);
    }
}

[b-rzeogfwrwt] .vault-loader-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: #5A413A;
    margin-bottom: 0.5rem;
}

[b-rzeogfwrwt] .vault-loader-subtitle {
    /* inherited font-sans */
    font-size: 0.95rem;
    color: #8B7355;
    opacity: 0.8;
}

/* ===========================================
   POLAROID GRID - Scattered Collage Layout
   =========================================== */

[b-rzeogfwrwt] .polaroid-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

[b-rzeogfwrwt] .polaroid-grid.lovedones-draft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
    justify-content: center;
    align-items: start;
    gap: clamp(1.4rem, 2.4vw, 2rem);
    padding: 0;
    max-width: none;
}

/* Memorial Indicator */
[b-rzeogfwrwt] .card-memorial-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0.8rem;
}

[b-rzeogfwrwt] .memorial-badge {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #8B7355;
    letter-spacing: 0.03em;
}

[b-rzeogfwrwt] .memorial-review-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #9A6B45;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.35;
}

[b-rzeogfwrwt] .memorial-review-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #C88D55;
    box-shadow: 0 0 0 3px rgba(200, 141, 85, 0.14);
}

/* Draft Badge */
[b-rzeogfwrwt] .card-draft-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(196, 154, 108, 0.15) 0%, rgba(166, 123, 80, 0.15) 100%);
    border: 1px solid rgba(196, 154, 108, 0.35);
    color: #A67B50;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.4rem;
}

[b-rzeogfwrwt] .card-readiness-panel {
    width: 100%;
    margin: 0 0 0.35rem;
    padding: 0.58rem 0.75rem 0.62rem;
    height: 4.7rem;
    border-radius: 12px;
    background: #FFF8F3;
    border: 1px solid rgba(196, 136, 106, 0.22);
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    appearance: none;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

[b-rzeogfwrwt] .card-readiness-panel:hover {
    background: #FFF3EA;
    border-color: rgba(196, 136, 106, 0.36);
    box-shadow: 0 8px 20px rgba(128, 82, 54, 0.08);
}

[b-rzeogfwrwt] .card-readiness-panel:active {
    transform: translateY(1px);
}

[b-rzeogfwrwt] .card-readiness-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    color: #7A563F;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

[b-rzeogfwrwt] .card-readiness-heading-copy {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

[b-rzeogfwrwt] .card-readiness-icon {
    color: #A67B50;
}

[b-rzeogfwrwt] .card-readiness-edit-indicator {
    flex: 0 0 auto;
    color: #A67B50;
    opacity: 0.68;
    transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

[b-rzeogfwrwt] .card-readiness-edit-icon {
    width: 0.88rem;
    height: 0.88rem;
    flex-basis: 0.88rem;
    stroke-width: 1.9;
}

[b-rzeogfwrwt] .card-readiness-panel:hover .card-readiness-edit-indicator {
    color: #7A563F;
    opacity: 1;
    transform: translateX(1px);
}

[b-rzeogfwrwt] .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[b-rzeogfwrwt] .card-readiness-summary {
    margin: 0;
    color: #6A504B;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-rzeogfwrwt] .mark-ready-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.1rem 0 0.75rem;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    color: #9A6B45;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

[b-rzeogfwrwt] .mark-ready-button:hover {
    color: #6A4631;
}

[b-rzeogfwrwt] .mark-ready-button:disabled {
    color: #B99C86;
    cursor: not-allowed;
    text-decoration: none;
}

[b-rzeogfwrwt] .mark-ready-error {
    width: min(100%, 680px);
    margin: 0.25rem auto 0;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: #FFF2EA;
    border: 1px solid rgba(154, 95, 69, 0.24);
    color: #7A3F32;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* Chat Link (secondary action below memorial button) */
[b-rzeogfwrwt] .chat-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #A67B50;
    font-size: 0.8rem;
    font-family: var(--font-sans);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
    cursor: pointer;
}

[b-rzeogfwrwt] .chat-link:hover {
    color: #C49A6C;
    text-decoration: underline;
}

body.night-mode[b-rzeogfwrwt]  .chat-link {
    color: #C49A6C;
}
body.night-mode[b-rzeogfwrwt]  .chat-link:hover {
    color: #D4AA7C;
}

body.night-mode[b-rzeogfwrwt]  .card-readiness-panel {
    background: rgba(255, 248, 243, 0.07);
    border-color: rgba(212, 170, 124, 0.22);
}

body.night-mode[b-rzeogfwrwt]  .card-readiness-panel:hover {
    background: rgba(255, 248, 243, 0.11);
    border-color: rgba(212, 170, 124, 0.36);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body.night-mode[b-rzeogfwrwt]  .card-readiness-heading,
body.night-mode[b-rzeogfwrwt]  .card-readiness-icon,
body.night-mode[b-rzeogfwrwt]  .card-readiness-edit-indicator,
body.night-mode[b-rzeogfwrwt]  .mark-ready-button {
    color: #D4AA7C;
}

body.night-mode[b-rzeogfwrwt]  .card-readiness-panel:hover .card-readiness-edit-indicator {
    color: #F0CDA8;
}

body.night-mode[b-rzeogfwrwt]  .card-readiness-summary {
    color: #E3C4AA;
}

body.night-mode[b-rzeogfwrwt]  .mark-ready-button:hover {
    color: #F0CDA8;
}

body.night-mode[b-rzeogfwrwt]  .mark-ready-button:disabled {
    color: #A3846C;
}

body.night-mode[b-rzeogfwrwt]  .mark-ready-error {
    background: rgba(154, 95, 69, 0.16);
    border-color: rgba(224, 164, 127, 0.28);
    color: #F0CDA8;
}

body.night-mode[b-rzeogfwrwt]  .btn-memorial-secondary {
    background: rgba(255, 248, 243, 0.08);
    color: #D4AA7C;
    border-color: rgba(212, 170, 124, 0.42);
    box-shadow: none;
}

body.night-mode[b-rzeogfwrwt]  .btn-memorial-secondary:hover {
    background: rgba(255, 248, 243, 0.13);
    color: #F0CDA8;
    border-color: rgba(212, 170, 124, 0.65);
}

/* Scattered positions for desktop */
@media (min-width: 769px) {
    [b-rzeogfwrwt] .polaroid-grid {
        gap: 2.5rem;
        padding: 3rem 2rem;
    }

    [b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(1) {
        margin-top: 0;
        margin-left: 0;
    }

    [b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(2) {
        margin-top: -30px;
        margin-left: 20px;
    }

    [b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(3) {
        margin-top: 40px;
        margin-left: -15px;
    }

    [b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(4) {
        margin-top: -20px;
        margin-left: 30px;
    }

    [b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(5) {
        margin-top: 50px;
        margin-left: -10px;
    }

    [b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(6) {
        margin-top: -40px;
        margin-left: 15px;
    }
}

/* ===========================================
   PROFILE CARDS - Warm Profile Design
   =========================================== */

[b-rzeogfwrwt] .profile-card {
    --rotation: 0deg;
    width: 280px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(75, 46, 46, 0.12);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    transform-origin: center center;
    transform: rotate(var(--rotation));
    overflow: hidden;
}

[b-rzeogfwrwt] .profile-card:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.05);
    z-index: 50;
    box-shadow: 0 20px 40px rgba(75, 46, 46, 0.18);
}

/* Edit button in top-right corner */
[b-rzeogfwrwt] .btn-edit-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #8B7355;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(75, 46, 46, 0.15);
}

/* Always visible on mobile (no hover) */
@media (max-width: 768px) {
    [b-rzeogfwrwt] .btn-edit-corner {
        opacity: 1;
    }
}

[b-rzeogfwrwt] .profile-card:hover .btn-edit-corner {
    opacity: 1;
}

[b-rzeogfwrwt] .btn-edit-corner:hover {
    background: #ffffff;
    color: #4B2E2E;
    transform: scale(1.1);
}

/* Card Header - Warm curved background */
[b-rzeogfwrwt] .card-header-bg {
    background: linear-gradient(180deg, #FFE8DC 0%, #FFF5F0 100%);
    height: 140px;
    position: relative;
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Avatar - Overlapping header/body boundary */
[b-rzeogfwrwt] .card-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    overflow: hidden;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF5F0;
    box-shadow: 0 4px 12px rgba(75, 46, 46, 0.1);
}

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

[b-rzeogfwrwt] .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #D4A88A;
    background: linear-gradient(180deg, #FFE8DC 0%, #FFF5F0 100%);
}

/* Card Body */
[b-rzeogfwrwt] .card-body {
    padding: 60px 1.5rem 1.5rem 1.5rem;
    text-align: center;
    background: #ffffff;
}

[b-rzeogfwrwt] .card-relationship {
    /* inherited font-sans */
    font-size: 0.9rem;
    color: #C4886A;
    margin-bottom: 0.25rem;
    text-transform: capitalize;
    font-weight: 500;
}

[b-rzeogfwrwt] .card-name {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: #4B2E2E;
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

[b-rzeogfwrwt] .card-description {
    /* inherited font-sans */
    font-size: 0.9rem;
    color: #6A504B;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

[b-rzeogfwrwt] .portrait-nudge-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.15rem;
    padding: 0.72rem 0.78rem;
    border: 1px dashed rgba(196, 136, 106, 0.45);
    border-radius: 14px;
    background: linear-gradient(180deg, #FFF8F3 0%, #FFF2EA 100%);
    color: #5A3E2B;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

[b-rzeogfwrwt] .portrait-nudge-button:hover,
[b-rzeogfwrwt] .portrait-nudge-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(196, 136, 106, 0.72);
    background: #FFF8F3;
    box-shadow: 0 8px 18px rgba(196, 136, 106, 0.16);
    outline: none;
}

[b-rzeogfwrwt] .portrait-nudge-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 218, 207, 0.72);
    color: #A05D3C;
    font-size: 0.82rem;
}

[b-rzeogfwrwt] .portrait-nudge-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

[b-rzeogfwrwt] .portrait-nudge-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4B2E2E;
    line-height: 1.25;
}

[b-rzeogfwrwt] .portrait-nudge-text {
    font-size: 0.76rem;
    font-weight: 500;
    color: #8B7355;
    line-height: 1.3;
}

/* Card Actions - Memorial button primary, chat link below */
[b-rzeogfwrwt] .card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

[b-rzeogfwrwt] .btn-action {
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.5rem;
    /* inherited font-sans */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.2;
    min-height: 42px;
}

[b-rzeogfwrwt] .card-action-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    display: inline-block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hero Memorial Button - Dark Gold/Orange */
[b-rzeogfwrwt] .btn-hero-action {
    background: linear-gradient(135deg, #D4A574 0%, #C4886A 100%);
    color: #ffffff;
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(196, 136, 106, 0.35);
    text-decoration: none;
    text-align: center;
}

[b-rzeogfwrwt] .btn-hero-action:hover {
    background: linear-gradient(135deg, #C4886A 0%, #B07858 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(196, 136, 106, 0.45);
}

[b-rzeogfwrwt] .btn-memorial-secondary {
    min-width: 150px;
    padding: 0.6rem 1.35rem;
    background: #FFF8F3;
    color: #8A6045;
    border: 1px solid rgba(196, 136, 106, 0.42);
    box-shadow: 0 4px 10px rgba(196, 136, 106, 0.1);
}

[b-rzeogfwrwt] .btn-memorial-secondary:hover {
    background: #FFF2EA;
    color: #6A4631;
    border-color: rgba(196, 136, 106, 0.68);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(196, 136, 106, 0.16);
}

[b-rzeogfwrwt] .btn-action:focus-visible,
[b-rzeogfwrwt] .chat-link:focus-visible,
[b-rzeogfwrwt] .card-readiness-panel:focus-visible,
[b-rzeogfwrwt] .mark-ready-button:focus-visible {
    outline: 3px solid rgba(196, 136, 106, 0.35);
    outline-offset: 4px;
}

[b-rzeogfwrwt] .btn-primary-action {
    background: linear-gradient(135deg, #FFDACF 0%, #FFC4B3 100%);
    color: #4B2E2E;
}

[b-rzeogfwrwt] .btn-primary-action:hover {
    background: linear-gradient(135deg, #FFC4B3 0%, #FFAB99 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 196, 179, 0.4);
}

[b-rzeogfwrwt] .btn-secondary-action {
    background: #FFF5F0;
    color: #6A504B;
    border: 1px solid #F0DAD3;
}

[b-rzeogfwrwt] .btn-secondary-action:hover {
    background: #FFE8DC;
    border-color: #D4A88A;
}

/* ===========================================
   ADD NEW CARD - Clean Clickable Design
   =========================================== */

[b-rzeogfwrwt] .profile-card.add-new-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #FFF5F0 0%, #ffffff 100%);
    border: 2px dashed #D4A88A;
    min-height: 340px;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(75, 46, 46, 0.08);
    transform: rotate(0deg) !important; /* No rotation for Add card */
}

[b-rzeogfwrwt] .profile-card.add-new-card:hover {
    background: linear-gradient(180deg, #FFE8DC 0%, #FFF5F0 100%);
    border-color: #C4886A;
    border-style: dashed;
    box-shadow: 0 12px 32px rgba(75, 46, 46, 0.15);
    transform: translateY(-8px) scale(1.05) !important;
}

[b-rzeogfwrwt] .add-new-content {
    text-align: center;
    padding: 2rem 1.5rem;
}

[b-rzeogfwrwt] .add-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE8DC 0%, #FFDACF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: #C4886A;
    font-size: 1.75rem;
    transition: all 0.2s ease;
}

[b-rzeogfwrwt] .profile-card.add-new-card:hover .add-icon-circle {
    background: linear-gradient(135deg, #FFDACF 0%, #FFC4B3 100%);
    color: #B07858;
    transform: scale(1.1);
}

[b-rzeogfwrwt] .add-new-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: #4B2E2E;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

[b-rzeogfwrwt] .add-new-subtitle {
    /* inherited font-sans */
    font-size: 0.9rem;
    color: #8B7355;
    line-height: 1.4;
    opacity: 0.85;
}

[b-rzeogfwrwt] .btn-add-action {
    background: #FFF5F0;
    color: #6A504B;
    border: 1px solid #F0DAD3;
    border-radius: 50px;
    padding: 0.65rem 1.5rem;
    /* inherited font-sans */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-rzeogfwrwt] .btn-add-action:hover {
    background: #FFE8DC;
    border-color: #D4A88A;
}

/* ===========================================
   EMPTY STATE
   =========================================== */

[b-rzeogfwrwt] .empty-memory-wall {
    width: min(100%, 1240px);
    min-height: min(680px, calc(100vh - 180px));
    margin: 0 auto 3.5rem;
    display: grid;
    grid-template-columns: minmax(320px, 0.88fr) minmax(460px, 1.12fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.75rem);
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 5vw, 5rem);
    position: relative;
}

[b-rzeogfwrwt] .empty-memory-copy {
    position: relative;
    z-index: 3;
    max-width: 510px;
}

[b-rzeogfwrwt] .empty-memory-copy h1 {
    font-family: var(--font-serif);
    font-size: 4.1rem;
    line-height: 1.02;
    font-weight: var(--mobile-hero-heading-weight);
    letter-spacing: 0;
    color: #2C2A28;
    margin: 0 0 1rem;
}

[b-rzeogfwrwt] .empty-memory-subtitle {
    max-width: 460px;
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
    color: #6B5B57;
    font-size: 1.08rem;
    line-height: 1.65;
}

[b-rzeogfwrwt] .empty-memory-copy h2 {
    font-family: var(--font-serif);
    font-size: 3.1rem;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: 0;
    color: #3A2924;
    margin: 0 0 1rem;
}

[b-rzeogfwrwt] .empty-memory-description {
    max-width: 480px;
    margin: 0 0 1.75rem;
    color: #6B5B57;
    font-size: 1.05rem;
    line-height: 1.65;
}

[b-rzeogfwrwt] .empty-memory-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: 999px;
    background: #C9A85A;
    color: #2C2A28;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(136, 95, 20, 0.14);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[b-rzeogfwrwt] .empty-memory-cta:hover {
    background: #B9954D;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(136, 95, 20, 0.18);
}

[b-rzeogfwrwt] .empty-memory-cta:focus-visible {
    outline: 3px solid rgba(216, 178, 47, 0.42);
    outline-offset: 4px;
}

[b-rzeogfwrwt] .empty-portrait-wall {
    position: relative;
    min-height: clamp(430px, 47vw, 650px);
    width: 100%;
    isolation: isolate;
}

[b-rzeogfwrwt] .empty-portrait-glow {
    position: absolute;
    width: 74%;
    aspect-ratio: 1;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 211, 175, 0.42);
    filter: blur(46px);
    z-index: 0;
}

[b-rzeogfwrwt] .empty-portrait {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #F8E9D2;
    box-shadow: 0 18px 44px rgba(79, 58, 47, 0.16);
}

[b-rzeogfwrwt] .empty-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

[b-rzeogfwrwt] .empty-portrait-main {
    width: min(76%, 590px);
    aspect-ratio: 1;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

[b-rzeogfwrwt] .empty-portrait-main img {
    object-position: 50% 46%;
}

[b-rzeogfwrwt] .empty-portrait-one,
[b-rzeogfwrwt] .empty-portrait-two,
[b-rzeogfwrwt] .empty-portrait-three,
[b-rzeogfwrwt] .empty-portrait-four {
    z-index: 1;
    opacity: 0.68;
}

[b-rzeogfwrwt] .empty-portrait-one {
    width: 31%;
    aspect-ratio: 1;
    left: 1%;
    top: 3%;
    transform: rotate(-4deg);
}

[b-rzeogfwrwt] .empty-portrait-one img {
    object-position: 47% 42%;
}

[b-rzeogfwrwt] .empty-portrait-two {
    width: 38%;
    aspect-ratio: 1;
    left: 9%;
    bottom: 3%;
    transform: rotate(3deg);
    opacity: 0.78;
    z-index: 2;
}

[b-rzeogfwrwt] .empty-portrait-two img {
    object-position: 51% 43%;
}

[b-rzeogfwrwt] .empty-portrait-three {
    width: 28%;
    aspect-ratio: 1;
    right: 9%;
    top: 0;
    transform: rotate(2deg);
}

[b-rzeogfwrwt] .empty-portrait-three img {
    object-position: 49% 42%;
}

[b-rzeogfwrwt] .empty-portrait-four {
    width: 24%;
    aspect-ratio: 1;
    right: 2%;
    bottom: 0;
    transform: rotate(-3deg);
    opacity: 0.58;
}

[b-rzeogfwrwt] .empty-portrait-four img {
    object-position: 50% 43%;
}

body.night-mode[b-rzeogfwrwt]  .empty-memory-wall {
    background: transparent;
}

body.night-mode[b-rzeogfwrwt]  .empty-memory-copy h1,
body.night-mode[b-rzeogfwrwt]  .empty-memory-copy h2 {
    color: #F6EDE4;
}

body.night-mode[b-rzeogfwrwt]  .empty-memory-subtitle,
body.night-mode[b-rzeogfwrwt]  .empty-memory-description {
    color: rgba(246, 237, 228, 0.78);
}

body.night-mode[b-rzeogfwrwt]  .empty-portrait {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

/* ===========================================
   MOBILE RESPONSIVENESS
   =========================================== */

@media (max-width: 1024px) {
    [b-rzeogfwrwt] .app-layout,
    .app-layout[b-rzeogfwrwt] {
        padding-top: 60px;
    }

    [b-rzeogfwrwt] .messages-container {
        margin-left: 0 !important;
        margin-top: 70px;
        padding: 1rem;
        width: 100%;
        max-width: 100%;
    }

    [b-rzeogfwrwt] .main-content-area {
        padding: 1rem 0;
    }

    [b-rzeogfwrwt] .lovedones-wall-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 2rem;
        padding: 2rem 0 3rem;
    }

    [b-rzeogfwrwt] .lovedones-wall-hero::before {
        inset: 0;
        height: 100%;
    }

    [b-rzeogfwrwt] .lovedones-wall-copy {
        max-width: 680px;
        padding: 0 var(--mobile-page-margin);
    }

    [b-rzeogfwrwt] .lovedones-wall-copy h1 {
        font-size: clamp(3rem, 10vw, 4.5rem);
    }

    [b-rzeogfwrwt] .lovedones-portrait-wall {
        min-height: min(72vw, 560px);
    }

    [b-rzeogfwrwt] .wall-portrait-main {
        width: min(72%, 500px);
        right: 5%;
    }

    [b-rzeogfwrwt] .wall-portrait-one {
        left: 6%;
        top: 2%;
    }

    [b-rzeogfwrwt] .wall-portrait-three {
        left: 6%;
        bottom: 4%;
    }

    [b-rzeogfwrwt] .lovedones-section {
        margin-bottom: 3rem;
    }

    [b-rzeogfwrwt] .lovedones-section-header,
    [b-rzeogfwrwt] .lovedones-add-callout {
        padding-left: var(--mobile-page-margin);
        padding-right: var(--mobile-page-margin);
    }

    [b-rzeogfwrwt] .empty-memory-wall {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 1.75rem;
        padding: 1.5rem 0 3rem;
    }

    [b-rzeogfwrwt] .empty-memory-copy {
        max-width: 680px;
        padding: 0 var(--mobile-page-margin);
    }

    [b-rzeogfwrwt] .empty-memory-copy h1 {
        font-size: 3.35rem;
    }

    [b-rzeogfwrwt] .empty-memory-copy h2 {
        font-size: 2.55rem;
    }

    [b-rzeogfwrwt] .empty-portrait-wall {
        min-height: min(72vw, 560px);
    }

    [b-rzeogfwrwt] .empty-portrait-main {
        width: min(74%, 520px);
        right: 4%;
    }

    [b-rzeogfwrwt] .empty-portrait-one {
        width: 30%;
        left: 4%;
    }

    [b-rzeogfwrwt] .empty-portrait-two {
        width: 34%;
        left: 7%;
        bottom: 5%;
    }

    [b-rzeogfwrwt] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        z-index: 100;
    }

    [b-rzeogfwrwt] .sidebar.visible {
        transform: translateX(0);
    }

    [b-rzeogfwrwt] .sidebar.hidden {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    [b-rzeogfwrwt] .app-layout,
    .app-layout[b-rzeogfwrwt] {
        padding-top: 60px;
    }

    [b-rzeogfwrwt] .mobile-top-bar {
        display: flex;
    }

    [b-rzeogfwrwt] .messages-container {
        margin-left: 0;
        margin-top: 60px;
        padding: 1rem var(--mobile-page-margin);
    }

    [b-rzeogfwrwt] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        z-index: 100;
    }

    [b-rzeogfwrwt] .sidebar.visible {
        transform: translateX(0);
    }

    [b-rzeogfwrwt] .toggle-sidebar {
        display: none;
    }

    [b-rzeogfwrwt] .vault-header {
        padding: 1.5rem var(--mobile-page-margin);
    }

    [b-rzeogfwrwt] .vault-header h1 {
        font-size: 2rem;
    }

    [b-rzeogfwrwt] .vault-subtitle {
        font-size: 1rem;
    }

    [b-rzeogfwrwt] .main-content-area {
        padding: 1rem;
    }

    [b-rzeogfwrwt] .lovedones-wall-hero {
        margin-bottom: 2.5rem;
        padding: 1.25rem 0 2rem;
    }

    [b-rzeogfwrwt] .lovedones-wall-hero::before {
        border-radius: 18px;
    }

    [b-rzeogfwrwt] .lovedones-wall-copy {
        padding: 0;
    }

    [b-rzeogfwrwt] .wall-eyebrow {
        font-size: 0.98rem;
        margin-bottom: 0.75rem;
    }

    [b-rzeogfwrwt] .lovedones-wall-copy h1 {
        font-size: 3rem;
        margin-bottom: 0.75rem;
    }

    [b-rzeogfwrwt] .wall-subtitle {
        font-size: 1rem;
        margin-bottom: 0.9rem;
    }

    [b-rzeogfwrwt] .wall-status {
        font-size: 0.85rem;
        margin-bottom: 1.2rem;
    }

    [b-rzeogfwrwt] .wall-actions {
        align-items: stretch;
        flex-direction: column;
        max-width: 320px;
    }

    [b-rzeogfwrwt] .wall-primary-action,
    [b-rzeogfwrwt] .wall-secondary-action {
        width: 100%;
    }

    [b-rzeogfwrwt] .lovedones-portrait-wall {
        min-height: min(86vw, 390px);
    }

    [b-rzeogfwrwt] .lovedones-portrait-glow {
        width: 92%;
        right: 0;
        filter: blur(34px);
    }

    [b-rzeogfwrwt] .wall-portrait-main {
        width: 72%;
        right: 0;
        border-radius: 10px;
    }

    [b-rzeogfwrwt] .wall-portrait-main figcaption {
        left: 5%;
        bottom: 5%;
        font-size: 0.82rem;
        padding: 0.45rem 0.75rem;
    }

    [b-rzeogfwrwt] .wall-portrait-one {
        width: 34%;
        left: 0;
        top: 5%;
    }

    [b-rzeogfwrwt] .wall-portrait-two,
    [b-rzeogfwrwt] .wall-portrait-four {
        display: none;
    }

    [b-rzeogfwrwt] .wall-portrait-three {
        width: 38%;
        left: 0;
        bottom: 6%;
        opacity: 0.68;
    }

    [b-rzeogfwrwt] .lovedones-section-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 1.1rem;
        padding: 0;
    }

    [b-rzeogfwrwt] .lovedones-section-header h2,
    [b-rzeogfwrwt] .lovedones-add-callout h2 {
        font-size: 2rem;
    }

    [b-rzeogfwrwt] .section-add-button {
        width: 100%;
        max-width: 260px;
    }

    [b-rzeogfwrwt] .lovedones-gallery-grid,
    [b-rzeogfwrwt] .lovedones-draft-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1.4rem;
    }

    [b-rzeogfwrwt] .lovedones-add-callout {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.25rem 0;
    }

    [b-rzeogfwrwt] .empty-memory-wall {
        gap: 1.25rem;
        padding: 0 0 2rem;
    }

    [b-rzeogfwrwt] .empty-memory-copy {
        padding: 0;
    }

    [b-rzeogfwrwt] .empty-memory-copy h1 {
        font-size: 2.55rem;
        margin-bottom: 0.75rem;
    }

    [b-rzeogfwrwt] .empty-memory-subtitle {
        font-size: 1rem;
        margin-bottom: 1.75rem;
    }

    [b-rzeogfwrwt] .empty-memory-copy h2 {
        font-size: 2rem;
    }

    [b-rzeogfwrwt] .empty-memory-description {
        font-size: 1rem;
        margin-bottom: 1.35rem;
    }

    [b-rzeogfwrwt] .empty-memory-cta {
        width: 100%;
        max-width: 320px;
    }

    [b-rzeogfwrwt] .empty-portrait-wall {
        min-height: min(84vw, 380px);
        margin-top: 0.25rem;
    }

    [b-rzeogfwrwt] .empty-portrait-glow {
        width: 92%;
        right: 2%;
        filter: blur(34px);
    }

    [b-rzeogfwrwt] .empty-portrait-main {
        width: 72%;
        right: 0;
    }

    [b-rzeogfwrwt] .empty-portrait-one {
        display: none;
    }

    [b-rzeogfwrwt] .empty-portrait-two {
        width: 38%;
        left: 0;
        bottom: 7%;
        opacity: 0.74;
    }

    [b-rzeogfwrwt] .empty-portrait-three {
        width: 32%;
        right: 2%;
        top: 2%;
        opacity: 0.48;
    }

    [b-rzeogfwrwt] .empty-portrait-four {
        display: none;
    }

    [b-rzeogfwrwt] .polaroid-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem;
    }

    /* Reset scattered margins on mobile */
    [b-rzeogfwrwt] .polaroid-grid > .profile-card {
        margin: 0 !important;
    }

    /* Disable rotation on mobile - keep cards straight for usability */
    [b-rzeogfwrwt] .profile-card {
        --rotation: 0deg !important;
        transform: rotate(0deg) !important;
        width: 100%;
        max-width: 320px;
    }

    [b-rzeogfwrwt] .profile-card:hover {
        transform: translateY(-4px) scale(1.02) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    [b-rzeogfwrwt] .polaroid-grid {
        max-width: 900px;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    [b-rzeogfwrwt] .profile-card {
        width: 260px;
    }

    [b-rzeogfwrwt] .card-avatar {
        width: 100px;
        height: 100px;
        bottom: -45px;
    }

    [b-rzeogfwrwt] .card-body {
        padding-top: 55px;
    }
}

@media (min-width: 1400px) {
    [b-rzeogfwrwt] .polaroid-grid {
        max-width: 1400px;
        gap: 2.5rem;
    }

    [b-rzeogfwrwt] .profile-card {
        width: 300px;
    }

    [b-rzeogfwrwt] .card-avatar {
        width: 130px;
        height: 130px;
        bottom: -55px;
    }

    [b-rzeogfwrwt] .card-header-bg {
        height: 150px;
    }

    [b-rzeogfwrwt] .card-body {
        padding-top: 65px;
    }
}

/* Button Styles */
[b-rzeogfwrwt] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

[b-rzeogfwrwt] .btn-primary {
    background-color: #C9A85A;
    color: #2C2A28;
}

[b-rzeogfwrwt] .btn-primary:hover {
    background-color: #B9954D;
}

[b-rzeogfwrwt] .btn-login {
    background-color: #FBCFA8;
}

/* Footer alignment to follow sidebar on desktop */
[b-rzeogfwrwt] .main-footer {
    margin-left: 280px;
    width: calc(100% - 280px);
    margin-top: 0;
}

[b-rzeogfwrwt] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

@media (max-width: 992px) {
    [b-rzeogfwrwt] .main-footer {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/Pages/MagicLinkSignIn.razor.rz.scp.css */
.magic-link-page[b-sj2rplmvah] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5rem, 8vw, 7rem) 1.5rem 3rem;
    background:
        linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 239, 214, 0.94) 100%),
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 229, 0.34) 38%, transparent 70%);
    color: #3b2a22;
    overflow: hidden;
}

.magic-link-page[b-sj2rplmvah]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(114, 77, 53, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(114, 77, 53, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.26;
    mask-image: radial-gradient(circle at 50% 44%, black 0%, transparent 72%);
}

.magic-link-page[b-sj2rplmvah]::after {
    content: "";
    position: absolute;
    width: min(54rem, 92vw);
    height: min(54rem, 92vw);
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 248, 238, 0.28) 43%, transparent 72%);
    pointer-events: none;
}

.magic-link-logo[b-sj2rplmvah] {
    position: absolute;
    top: 1.8rem;
    left: 2rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: #5c3f37;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    letter-spacing: 0;
}

.magic-link-logo strong[b-sj2rplmvah] {
    color: #ffaaa3;
    font-weight: 800;
}

.magic-link-shell[b-sj2rplmvah] {
    width: min(100%, 510px);
    position: relative;
    z-index: 1;
}

.magic-link-card[b-sj2rplmvah] {
    position: relative;
    width: 100%;
    padding: clamp(2rem, 5vw, 2.65rem);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
    border: 1px solid rgba(154, 111, 79, 0.2);
    box-shadow:
        0 28px 70px rgba(92, 62, 39, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.82) inset;
    text-align: left;
}

.magic-link-icon[b-sj2rplmvah] {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    color: #8e6346;
    background: rgba(255, 239, 223, 0.86);
    box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.16);
}

.magic-link-icon--error[b-sj2rplmvah] {
    color: #9a4b34;
    background: rgba(255, 235, 226, 0.92);
    box-shadow: inset 0 0 0 1px rgba(166, 76, 52, 0.18);
}

.magic-link-line-icon[b-sj2rplmvah] {
    width: 1.45rem;
    height: 1.45rem;
    display: block;
}

.magic-link-spinner[b-sj2rplmvah],
.magic-link-progress-spinner[b-sj2rplmvah] {
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(142, 99, 70, 0.22);
    border-top-color: #8e6346;
    animation: magicLinkSpin-b-sj2rplmvah 0.9s linear infinite;
}

.magic-link-spinner[b-sj2rplmvah] {
    width: 1.35rem;
    height: 1.35rem;
    border-width: 2px;
}

.magic-link-progress-spinner[b-sj2rplmvah] {
    width: 1.2rem;
    height: 1.2rem;
    border-width: 2px;
    flex: 0 0 auto;
}

.magic-link-eyebrow[b-sj2rplmvah] {
    margin: 0 0 0.45rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a06942;
}

.magic-link-card h1[b-sj2rplmvah] {
    margin: 0;
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: var(--mobile-hero-heading-weight, 700);
    line-height: 1.06;
    color: #3b271f;
}

.magic-link-intro[b-sj2rplmvah] {
    margin: 0.85rem 0 1.5rem;
    max-width: 28rem;
    color: #745a4a;
    font-size: 1.02rem;
    line-height: 1.6;
}

.magic-link-status-region[b-sj2rplmvah] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.magic-link-progress[b-sj2rplmvah] {
    min-height: 3.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #745a4a;
    font-weight: 700;
}

.magic-link-message[b-sj2rplmvah] {
    border-radius: 14px;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.magic-link-message--error[b-sj2rplmvah] {
    color: #7d3325;
    background: rgba(255, 235, 226, 0.92);
    border: 1px solid rgba(166, 76, 52, 0.22);
}

.magic-link-actions[b-sj2rplmvah] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.magic-link-submit[b-sj2rplmvah] {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
    padding: 0.85rem 1.45rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4914f 0%, #bd7338 100%);
    color: #fffaf4;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(175, 99, 46, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.magic-link-submit:hover[b-sj2rplmvah] {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(175, 99, 46, 0.3);
}

.magic-link-secondary-link[b-sj2rplmvah] {
    align-self: center;
    color: #6f4d3e;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.magic-link-secondary-link:hover[b-sj2rplmvah] {
    text-decoration: underline;
}

.magic-link-note[b-sj2rplmvah] {
    margin: 1.35rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(154, 111, 79, 0.14);
    color: #8b735f;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .magic-link-card[b-sj2rplmvah] {
        animation: magicLinkEnter-b-sj2rplmvah 0.42s ease-out both;
    }
}

@keyframes magicLinkEnter-b-sj2rplmvah {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes magicLinkSpin-b-sj2rplmvah {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .magic-link-page[b-sj2rplmvah] {
        align-items: flex-start;
        padding: 5.8rem 1rem 2rem;
    }

    .magic-link-logo[b-sj2rplmvah] {
        top: 1.4rem;
        left: 1.25rem;
        font-size: 1.28rem;
    }

    .magic-link-card[b-sj2rplmvah] {
        border-radius: 16px;
    }

    .magic-link-icon[b-sj2rplmvah] {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 1rem;
    }
}
/* /Components/Pages/MemorialEmailVerified.razor.rz.scp.css */
.email-verified-container[b-4xrabppbwk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 2rem;
}

.email-verified-card[b-4xrabppbwk] {
    max-width: 520px;
    text-align: center;
    background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 32px rgba(139, 115, 85, 0.15);
    border: 1px solid rgba(232, 213, 200, 0.4);
}

.email-verified-icon[b-4xrabppbwk] {
    width: 4rem;
    height: 4rem;
    color: #A67B50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.email-verified-icon svg[b-4xrabppbwk] {
    width: 100%;
    height: 100%;
}

.email-verified-title[b-4xrabppbwk] {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: #3A3228;
    margin: 0 0 1rem;
}

.email-verified-message[b-4xrabppbwk] {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: #5A534C;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.email-verified-submessage[b-4xrabppbwk] {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #8B7355;
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.email-verified-link[b-4xrabppbwk] {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: white;
    text-decoration: none;
    border-radius: 24px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    transition: opacity 0.2s;
}

.email-verified-link:hover[b-4xrabppbwk] {
    opacity: 0.9;
}
/* /Components/Pages/MemorialPage.razor.rz.scp.css */
/* MemorialPage.razor.css - Memorial Room (Minnesrummet) */

/* Loading */
.memorial-loading[b-2pzl15c73n] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #FDF8F0;
}

.loading-spinner[b-2pzl15c73n] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(192, 154, 108, 0.2);
    border-top-color: #C49A6C;
    border-radius: 50%;
    animation: spin-b-2pzl15c73n 0.8s linear infinite;
}

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

/* ========== CLOSED DOOR — Soft 404 / Private Room ========== */

.memorial-closed-door[b-2pzl15c73n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* background: linear-gradient(180deg, #FDF8F0 0%, #FAF3E5 50%, #F5ECD8 100%); */
    padding: 4rem 2rem;
    text-align: center;
}

.closed-door-icon[b-2pzl15c73n] {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 2.5rem;
    filter: grayscale(30%);
}

.closed-door-heading[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    color: #4A3F35;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.closed-door-body[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: #6B5D4D;
    max-width: 560px;
    line-height: 1.8;
    margin: 0 auto 3.5rem;
}

.closed-door-divider[b-2pzl15c73n] {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.4), transparent);
    margin: 0 auto 3rem;
}

.closed-door-product-heading[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.2rem;
    color: #A67B50;
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

.closed-door-product-body[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #7A6B58;
    max-width: 480px;
    line-height: 1.75;
    margin: 0 auto 3rem;
}

.closed-door-cta-link[b-2pzl15c73n] {
    text-decoration: none;
}

.closed-door-granny[b-2pzl15c73n] {
    margin-top: 8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.6;
}

.closed-door-granny-img[b-2pzl15c73n] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 154, 108, 0.25);
    object-fit: cover;
    flex-shrink: 0;
}

.closed-door-granny-text[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.85rem;
    color: #A0927E;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Night mode — Closed Door */
:global(body.night-mode) .memorial-closed-door[b-2pzl15c73n] {
    background: linear-gradient(180deg, #1a1512, #231e18, #1a1512);
}

:global(body.night-mode) .closed-door-heading[b-2pzl15c73n] {
    color: #E8DDD0;
}

:global(body.night-mode) .closed-door-body[b-2pzl15c73n] {
    color: #A89880;
}

:global(body.night-mode) .closed-door-divider[b-2pzl15c73n] {
    background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.3), transparent);
}

:global(body.night-mode) .closed-door-product-heading[b-2pzl15c73n] {
    color: #C4A882;
}

:global(body.night-mode) .closed-door-product-body[b-2pzl15c73n] {
    color: #A89880;
}

:global(body.night-mode) .memorial-closed-door .memorial-cta-button[b-2pzl15c73n] {
    background: linear-gradient(145deg, #3A3020 0%, #4A3D2A 35%, #3E3322 70%, #352B1C 100%);
    color: #D4B882;
    box-shadow: 0 2px 12px rgba(180, 140, 60, 0.2), 0 4px 24px rgba(180, 140, 60, 0.1);
    outline-color: rgba(180, 140, 90, 0.2);
}

:global(body.night-mode) .closed-door-granny-text[b-2pzl15c73n] {
    color: #A89880;
}

/* Responsive — Closed Door */
@media (max-width: 768px) {
    .memorial-closed-door[b-2pzl15c73n] {
        padding: 3rem 1.5rem;
    }

    .closed-door-heading[b-2pzl15c73n] {
        font-size: 2.2rem;
    }

    .closed-door-body[b-2pzl15c73n] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .closed-door-heading[b-2pzl15c73n] {
        font-size: 1.8rem;
    }

    .memorial-closed-door .memorial-cta-button[b-2pzl15c73n] {
        padding: 0.85rem 2rem;
        font-size: 0.95rem;
    }

    .closed-door-granny-img[b-2pzl15c73n] {
        width: 32px;
        height: 32px;
    }

    .closed-door-granny[b-2pzl15c73n] {
        gap: 0.6rem;
    }
}

/* ========== END CLOSED DOOR ========== */

/* Layout */
.app-layout[b-2pzl15c73n] {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: #FAF3E5;
}

/* ========== GUEST LAYOUT — Sidebar-free immersive experience ========== */
.memorial-guest-layout[b-2pzl15c73n] {
    min-height: 100vh;
    width: 100%;
    background: #FAF3E5;
}

.memorial-guest-header[b-2pzl15c73n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    pointer-events: none;
}

.memorial-guest-header > *[b-2pzl15c73n] {
    pointer-events: all;
}

.guest-logo-link[b-2pzl15c73n] {
    display: block;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.guest-logo-link:hover[b-2pzl15c73n] {
    opacity: 1;
}

.guest-logo[b-2pzl15c73n] {
    height: 36px;
    width: auto;
    display: block;
}

.guest-menu-wrapper[b-2pzl15c73n] {
    position: relative;
}

.guest-menu-btn[b-2pzl15c73n] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(164, 123, 80, 0.2);
    background: rgba(253, 248, 240, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}

.guest-menu-btn:hover[b-2pzl15c73n] {
    background: rgba(253, 248, 240, 0.95);
    border-color: rgba(164, 123, 80, 0.4);
    box-shadow: 0 3px 12px rgba(139, 115, 85, 0.14);
}

.guest-menu-dots[b-2pzl15c73n] {
    font-size: 1.4rem;
    color: #6B5B4E;
    letter-spacing: 2px;
    line-height: 1;
}

.guest-menu-backdrop[b-2pzl15c73n] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.guest-menu-dropdown[b-2pzl15c73n] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(253, 248, 240, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(232, 213, 200, 0.5);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14), 0 2px 8px rgba(139, 115, 85, 0.06);
    padding: 0.5rem 0;
    z-index: 70;
    animation: guestMenuFadeIn-b-2pzl15c73n 0.2s ease-out;
}

@keyframes guestMenuFadeIn-b-2pzl15c73n {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.guest-menu-item[b-2pzl15c73n] {
    display: block;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #5C4033;
    text-decoration: none;
    text-align: left;
    transition: background 0.15s ease;
}

.guest-menu-item-button[b-2pzl15c73n] {
    border: none;
    background: transparent;
    cursor: pointer;
}

.guest-menu-item:hover[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.08);
}

/* Guest main: full-width, centered content */
.memorial-guest-main[b-2pzl15c73n] {
    margin-left: 0 !important;
}

/* Guest disclaimer whisper below CTA */
.memorial-guest-disclaimer[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: #A89880;
    margin: 0.5rem 0 0;
    letter-spacing: 0.01em;
}

/* ========== END GUEST LAYOUT ========== */

/* Sidebar */
.sidebar[b-2pzl15c73n] {
    width: 280px;
    min-width: 280px;
    background: #FAF3E5;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-right: 1px solid rgba(232, 213, 200, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: transform 0.3s ease;
}

.sidebar.hidden[b-2pzl15c73n] {
    transform: translateX(-100%);
}

.sidebar-top-content[b-2pzl15c73n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.app-logo-link[b-2pzl15c73n] {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

.sidebar-logo img[b-2pzl15c73n] {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

.memorial-sidebar-back-link[b-2pzl15c73n] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: -0.25rem 0 0.65rem;
    padding: 0.48rem 0.8rem;
    border: 1px solid rgba(164, 123, 80, 0.16);
    border-radius: 999px;
    background: rgba(255, 251, 244, 0.5);
    color: rgba(91, 72, 58, 0.76);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.memorial-sidebar-back-link:hover[b-2pzl15c73n],
.memorial-sidebar-back-link:focus-visible[b-2pzl15c73n] {
    background: rgba(255, 249, 239, 0.92);
    border-color: rgba(164, 123, 80, 0.28);
    color: #5C4033;
    outline: none;
    transform: translateY(-1px);
}

.memorial-sidebar-back-link svg[b-2pzl15c73n] {
    flex: 0 0 auto;
}

/* Sidebar Context */
.memorial-sidebar-context[b-2pzl15c73n] {
    text-align: center;
    padding: 1rem 0;
}

.memorial-sidebar-avatar[b-2pzl15c73n] {
    width: 140px;
    height: 140px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(192, 154, 108, 0.35);
    box-shadow: 0 0 30px rgba(196, 154, 108, 0.2), 0 4px 20px rgba(139, 115, 85, 0.15);
}

.memorial-sidebar-avatar img[b-2pzl15c73n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.memorial-sidebar-name[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #3A3228;
    margin: 0 0 0.3rem;
}

.memorial-sidebar-dates[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #8B7355;
    margin: 0 0 0.5rem;
    letter-spacing: 0.04em;
}

.memorial-sidebar-tagline[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: #6B5B4E;
    margin: 0;
}

.memorial-sidebar-spacer[b-2pzl15c73n] {
    flex: 1;
}

.memorial-sidebar-pending[b-2pzl15c73n] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 0.95rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 248, 236, 0.96);
    border: 1px solid rgba(196, 154, 108, 0.26);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(139, 115, 85, 0.06);
}

.memorial-sidebar-pending-text[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #5C4033;
    line-height: 1.45;
}

.memorial-sidebar-pending-btn[b-2pzl15c73n] {
    align-self: flex-start;
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.memorial-sidebar-pending-btn:hover[b-2pzl15c73n] {
    opacity: 0.92;
}

.memorial-sidebar-owner-tools[b-2pzl15c73n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
}

.memorial-sidebar-owner-tools.has-user-footer[b-2pzl15c73n] {
    padding-bottom: 6.25rem;
}

.memorial-sidebar-owner-btn[b-2pzl15c73n] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    justify-content: flex-start;
    background: rgba(255, 251, 244, 0.8);
    border: 1px solid rgba(164, 123, 80, 0.18);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #5C4033;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(139, 115, 85, 0.05);
}

.memorial-sidebar-owner-btn:hover[b-2pzl15c73n] {
    background: rgba(255, 249, 239, 0.96);
    border-color: rgba(164, 123, 80, 0.35);
    transform: translateY(-1px);
}

.memorial-sidebar-owner-icon[b-2pzl15c73n] {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(139, 90, 43, 0.78);
}

.memorial-sidebar-owner-icon-svg[b-2pzl15c73n] {
    width: 1.18rem;
    height: 1.18rem;
    display: block;
    stroke: currentColor;
    transition: transform 0.35s ease, opacity 0.35s ease, color 0.35s ease;
}

.memorial-sidebar-owner-btn:hover .memorial-sidebar-owner-icon-svg[b-2pzl15c73n],
.memorial-sidebar-owner-btn:focus-visible .memorial-sidebar-owner-icon-svg[b-2pzl15c73n] {
    color: rgba(122, 75, 39, 0.95);
    opacity: 1;
    transform: scale(1.05) rotate(-2deg);
}

/* Toggle Sidebar Button */
.toggle-sidebar[b-2pzl15c73n] {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 110;
    background: #FAF3E5; /* matches sidebar background — blends in when open */
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.toggle-sidebar.sidebar-hidden[b-2pzl15c73n] {
    background: rgba(255, 251, 245, 0.92);
    border: 1px solid rgba(232, 213, 200, 0.4);
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.12);
}

.memorial-collapsed-back-link[b-2pzl15c73n] {
    position: fixed;
    top: 18px;
    left: 72px;
    z-index: 109;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: min(260px, calc(100vw - 96px));
    padding: 0.48rem 0.82rem;
    border: 1px solid rgba(164, 123, 80, 0.18);
    border-radius: 999px;
    background: rgba(255, 251, 245, 0.9);
    color: rgba(91, 72, 58, 0.78);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(139, 115, 85, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.memorial-collapsed-back-link:hover[b-2pzl15c73n],
.memorial-collapsed-back-link:focus-visible[b-2pzl15c73n] {
    background: rgba(255, 249, 239, 0.96);
    border-color: rgba(164, 123, 80, 0.3);
    color: #5C4033;
    outline: none;
    transform: translateY(-1px);
}

.memorial-collapsed-back-link svg[b-2pzl15c73n] {
    flex: 0 0 auto;
}

.memorial-collapsed-back-link span[b-2pzl15c73n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main Content */
.memorial-main[b-2pzl15c73n] {
    flex: 1;
    min-width: 0;
    margin-left: 280px;
    transition: margin-left 0.3s ease;
    overflow-x: hidden;
    background: #FAF3E5;
    padding-bottom: 90px; /* room for fixed footer */
}

.memorial-main.sidebar-hidden[b-2pzl15c73n] {
    margin-left: 0;
}

.memorial-room-stage[b-2pzl15c73n] {
    position: relative;
    min-height: 100%;
}

.memorial-room-canvas[b-2pzl15c73n] {
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transform-origin: center 6rem;
    transition:
        opacity 240ms ease,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.memorial-room-veil[b-2pzl15c73n] {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 72% 48% at 50% 14%, rgba(255, 252, 246, 0.16) 0%, transparent 68%),
        linear-gradient(180deg, rgba(255, 249, 241, 0.04) 0%, rgba(242, 226, 204, 0.16) 48%, rgba(250, 243, 229, 0.07) 100%);
    transition: opacity 220ms ease;
}

.memorial-room-stage--transitioning[b-2pzl15c73n] {
    pointer-events: none;
}

.memorial-room-stage--transition-out .memorial-room-canvas[b-2pzl15c73n] {
    opacity: 0.2;
    transform: scale(0.992);
}

.memorial-room-stage--transition-out .memorial-room-veil[b-2pzl15c73n] {
    opacity: 0.18;
}

.memorial-room-stage--transition-in .memorial-room-canvas[b-2pzl15c73n] {
    opacity: 1;
    transform: scale(1);
}

.memorial-room-stage--transition-in .memorial-room-veil[b-2pzl15c73n] {
    opacity: 0.05;
}

/* Hero Section */
.memorial-hero[b-2pzl15c73n] {
    text-align: center;
    padding: 4rem 4rem 0;
    background: linear-gradient(170deg, #FDF4E7 0%, #FAF0E2 60%, #F5ECD8 100%);
    position: relative;
    overflow: hidden;
}

.memorial-hero[b-2pzl15c73n]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 55% at 50% 20%, rgba(255, 252, 245, 0.45) 0%, transparent 70%);
    pointer-events: none;
}

.memorial-hero-inner[b-2pzl15c73n] {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}

.memorial-hero-tribute[b-2pzl15c73n] {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.2rem;
    color: #8B7355;
    margin-bottom: 0.3rem;
    letter-spacing: 0.02em;
}

.memorial-name[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-size: 4em;
    font-weight: 400;
    color: #2E2318;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.memorial-dates[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #6B5B4E;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
}

.memorial-dates-dash[b-2pzl15c73n] {
    color: #C49A6C;
    font-size: 1.1em;
}

.memorial-portrait-prompt[b-2pzl15c73n] {
    max-width: 680px;
    margin: 0.6rem auto 0;
    padding: 0.9rem 1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    border: 1px dashed rgba(196, 136, 106, 0.42);
    border-radius: 16px;
    background: rgba(255, 248, 243, 0.82);
    color: #5A3E2B;
    box-shadow: 0 10px 24px rgba(107, 72, 48, 0.08);
}

.memorial-portrait-prompt-icon[b-2pzl15c73n] {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 218, 207, 0.76);
    color: #A05D3C;
    font-size: 1rem;
}

.memorial-portrait-prompt-copy[b-2pzl15c73n] {
    text-align: left;
    min-width: 0;
}

.memorial-portrait-prompt-kicker[b-2pzl15c73n] {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B07858;
}

.memorial-portrait-prompt h2[b-2pzl15c73n] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: #4B2E2E;
}

.memorial-portrait-prompt p:last-child[b-2pzl15c73n] {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #7B665B;
}

.memorial-portrait-prompt-action[b-2pzl15c73n] {
    border: none;
    border-radius: 999px;
    padding: 0.68rem 1rem;
    background: linear-gradient(135deg, #D4A574 0%, #C4886A 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(196, 136, 106, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.memorial-portrait-prompt-action:hover[b-2pzl15c73n],
.memorial-portrait-prompt-action:focus-visible[b-2pzl15c73n] {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #C4886A 0%, #B07858 100%);
    box-shadow: 0 9px 20px rgba(196, 136, 106, 0.32);
    outline: none;
}

@media (max-width: 768px) {
    .memorial-portrait-prompt[b-2pzl15c73n] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        text-align: left;
    }

    .memorial-portrait-prompt-action[b-2pzl15c73n] {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Portrait with vignette fade */
.memorial-portrait-container[b-2pzl15c73n] {
    margin: 0.5rem auto 0;
    max-width: 620px;
    width: 100%;
    position: relative;
}

.memorial-portrait[b-2pzl15c73n] {
    width: 100%;
    height: auto;
    display: block;
    -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
    mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
    object-fit: cover;
}

.memorial-tagline[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: #6B5B4E;
    margin: 0.75rem 0 1.15rem;
    letter-spacing: 0.02em;
    position: relative;
}

.memorial-conversation-invite[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 auto 2.5rem;
    padding: 0.9rem 1.8rem;
    border: 1px solid rgba(201, 153, 100, 0.28);
    border-radius: 999px;
    background: linear-gradient(145deg, #FDF3E4 0%, #F4E1C2 50%, #EBCFA5 100%);
    box-shadow:
        0 8px 24px rgba(180, 132, 77, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #5A3E2B;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.memorial-conversation-invite:hover[b-2pzl15c73n] {
    transform: translateY(-1px);
    background: linear-gradient(145deg, #FFF7EC 0%, #F7E6CA 50%, #EFD8B2 100%);
    box-shadow:
        0 12px 28px rgba(180, 132, 77, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.memorial-conversation-invite:hover .memorial-conversation-invite-icon-svg[b-2pzl15c73n],
.memorial-conversation-invite:focus-visible .memorial-conversation-invite-icon-svg[b-2pzl15c73n] {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
}

.memorial-conversation-invite:active[b-2pzl15c73n] {
    transform: translateY(0);
}

.memorial-conversation-invite-icon[b-2pzl15c73n] {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

.memorial-conversation-invite-icon-svg[b-2pzl15c73n] {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
    stroke: currentColor;
    opacity: 0.78;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Owner Action Bar */
.memorial-owner-bar[b-2pzl15c73n] {
    max-width: none;
    margin: 1.5rem 4rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.memorial-owner-actions[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.memorial-pending-banner[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #FFF3E0;
    border: 1px solid rgba(196, 154, 108, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #5C4033;
}

.memorial-review-btn[b-2pzl15c73n] {
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.memorial-review-btn:hover[b-2pzl15c73n] {
    opacity: 0.9;
}

.memorial-settings-btn[b-2pzl15c73n] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 20px;
    padding: 0.5rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #6B5B4E;
    cursor: pointer;
    transition: all 0.2s;
}

.memorial-settings-btn:hover[b-2pzl15c73n] {
    background: rgba(164, 123, 80, 0.08);
    border-color: rgba(164, 123, 80, 0.5);
}

/* Prologue — long-form tribute */
.memorial-tribute-prologue[b-2pzl15c73n] {
    padding: 5rem 2rem 3rem;
    background: #FAF3E5;
}

.memorial-tribute-inner[b-2pzl15c73n] {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.memorial-tribute-actions[b-2pzl15c73n] {
    display: flex;
    justify-content: flex-end;
    max-width: 660px;
    margin: 0 auto 0.85rem;
}

.memorial-section-heading-row[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.memorial-section-heading-row--centered[b-2pzl15c73n] {
    justify-content: center;
    position: relative;
}

.memorial-section-heading-row--centered .memorial-section-edit-link[b-2pzl15c73n] {
    position: absolute;
    right: 0;
}

.memorial-tapestry-section[b-2pzl15c73n] {
    position: relative;
}

.memorial-tapestry-edit-link[b-2pzl15c73n] {
    position: absolute;
    top: 3.25rem;
    right: max(1.5rem, calc((100% - 940px) / 2 + 1.5rem));
    z-index: 5;
}

.memorial-section-edit-link.memorial-tapestry-edit-link--mobile[b-2pzl15c73n] {
    display: none;
}

.memorial-tribute-title[b-2pzl15c73n] {
    margin: 0 auto 1.75rem;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    font-weight: 400;
    color: #33271E;
    letter-spacing: 0;
    line-height: 1.18;
}

.memorial-tribute-text[b-2pzl15c73n] {
    max-width: 660px;
    margin: 0 auto;
    color: #4A3B2E;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    line-height: 1.82;
    text-align: left;
    transition: max-height 0.48s ease;
}

.memorial-tribute-text p[b-2pzl15c73n] {
    margin: 0 0 1.35rem;
}

.memorial-tribute-text p:first-child[b-2pzl15c73n]::first-letter {
    float: left;
    padding: 0.14rem 0.45rem 0 0;
    font-size: 4rem;
    line-height: 0.78;
    color: #9A6D3E;
}

.memorial-tribute-text--collapsed[b-2pzl15c73n] {
    max-height: 320px;
    overflow: hidden;
    position: relative;
}

.memorial-tribute-text--expanded[b-2pzl15c73n] {
    max-height: 12000px;
    overflow: visible;
}

.memorial-tribute-text--collapsed[b-2pzl15c73n]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 112px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(250, 243, 229, 0), #FAF3E5);
}

.memorial-tribute-read-more[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1.25rem auto 0;
    padding: 0.45rem 1.05rem;
    border: 1px solid rgba(176, 127, 78, 0.34);
    border-radius: 999px;
    background: rgba(255, 248, 238, 0.58);
    color: #8A5B32;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    font-style: italic;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(126, 87, 47, 0.08);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.memorial-tribute-read-more:hover[b-2pzl15c73n],
.memorial-tribute-read-more:focus-visible[b-2pzl15c73n] {
    transform: translateY(-1px);
    border-color: rgba(176, 127, 78, 0.58);
    background: rgba(255, 250, 244, 0.78);
    outline: none;
}

.memorial-foyer-divider[b-2pzl15c73n] {
    width: 180px;
    height: 1px;
    margin: 3rem auto 0;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.52), transparent);
    position: relative;
}

.memorial-foyer-divider[b-2pzl15c73n]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background: #B98555;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.78;
}

.memorial-section-edit-link[b-2pzl15c73n],
.memorial-empty-section-button[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid rgba(164, 123, 80, 0.24);
    background: rgba(255, 251, 244, 0.58);
    color: #6B4A34;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.memorial-section-edit-link[b-2pzl15c73n] {
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.84rem;
}

.memorial-empty-section-button[b-2pzl15c73n] {
    border-radius: 999px;
    padding: 0.8rem 1.25rem;
    font-size: 0.94rem;
}

.memorial-section-edit-link:hover[b-2pzl15c73n],
.memorial-empty-section-button:hover[b-2pzl15c73n] {
    background: rgba(255, 249, 239, 0.96);
    border-color: rgba(164, 123, 80, 0.42);
    transform: translateY(-1px);
}

.memorial-section-edit-icon[b-2pzl15c73n],
.memorial-empty-section-icon[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.memorial-section-edit-icon[b-2pzl15c73n] {
    width: 1rem;
    height: 1rem;
}

.memorial-empty-section-icon[b-2pzl15c73n] {
    width: 1.2rem;
    height: 1.2rem;
}

.memorial-section-edit-icon svg[b-2pzl15c73n],
.memorial-empty-section-icon svg[b-2pzl15c73n] {
    width: 100%;
    height: 100%;
    display: block;
}

.memorial-owner-empty-section[b-2pzl15c73n] {
    opacity: 0.92;
}

.memorial-owner-empty-section .memorial-tribute-inner[b-2pzl15c73n],
.memorial-service-empty[b-2pzl15c73n],
.memorial-resting-place-empty[b-2pzl15c73n] {
    padding: 1.4rem 1.5rem;
    border: 1px dashed rgba(164, 123, 80, 0.24);
    border-radius: 18px;
    background: rgba(255, 251, 244, 0.32);
}

/* Memorial service — official farewell chapter */
.memorial-service-section[b-2pzl15c73n] {
    padding: 1rem 4rem 2rem;
    background: #FAF3E5;
}

.memorial-service-card[b-2pzl15c73n] {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 1.04fr) minmax(340px, 0.96fr);
    overflow: hidden;
    border: 1px solid rgba(196, 154, 108, 0.24);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 252, 246, 0.94) 0%, rgba(248, 238, 222, 0.9) 100%);
    box-shadow: 0 18px 46px rgba(139, 115, 85, 0.1);
}

.memorial-service-card--text-only[b-2pzl15c73n] {
    grid-template-columns: 1fr;
    width: min(820px, 100%);
}

.memorial-service-image[b-2pzl15c73n] {
    display: block;
    min-height: 360px;
    border: 0;
    padding: 0;
    background: #E9D9BE;
    cursor: zoom-in;
    overflow: hidden;
}

.memorial-service-image img[b-2pzl15c73n] {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: block;
    object-fit: cover;
}

.memorial-service-content[b-2pzl15c73n] {
    padding: clamp(1.5rem, 3.2vw, 2.45rem);
    color: #3E3026;
}

.memorial-service-content h2[b-2pzl15c73n],
.memorial-service-empty h2[b-2pzl15c73n] {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 4vw, 2.45rem);
    color: #34281F;
    line-height: 1.12;
}

.memorial-service-subtitle[b-2pzl15c73n] {
    margin: 0.35rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-style: italic;
    color: #A06F42;
}

.memorial-service-meta[b-2pzl15c73n] {
    margin: 1.1rem 0 0;
    color: #6D5844;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    line-height: 1.5;
}

.memorial-service-body[b-2pzl15c73n] {
    margin-top: 1rem;
    color: #4F4134;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.72;
}

.memorial-service-body p[b-2pzl15c73n] {
    margin: 0 0 0.9rem;
}

.memorial-service-program[b-2pzl15c73n] {
    margin-top: 1.25rem;
}

.memorial-service-program h3[b-2pzl15c73n] {
    margin: 0 0 0.65rem;
    color: #4B3829;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
}

.memorial-service-program ul[b-2pzl15c73n] {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.memorial-service-program li[b-2pzl15c73n] {
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
    color: #6B5541;
    font-family: var(--font-serif);
    font-size: 0.96rem;
    line-height: 1.45;
}

.memorial-service-program-kind[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.03rem;
    color: #A06F42;
    text-align: center;
    line-height: 1;
}

.memorial-service-program-copy[b-2pzl15c73n] {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.memorial-service-program-title[b-2pzl15c73n] {
    min-width: 0;
}

.memorial-service-program-read[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(160, 111, 66, 0.32);
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: #9A6E45;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.35;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.memorial-service-program-read:hover[b-2pzl15c73n],
.memorial-service-program-read:focus-visible[b-2pzl15c73n] {
    color: #6B4A34;
    border-color: rgba(107, 74, 52, 0.58);
    outline: none;
}

.memorial-service-program-read:focus-visible[b-2pzl15c73n] {
    box-shadow: 0 2px 0 rgba(196, 154, 108, 0.26);
}

.memorial-program-reader-overlay[b-2pzl15c73n] {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(48, 38, 28, 0.38);
    -webkit-backdrop-filter: blur(10px) saturate(0.98);
    backdrop-filter: blur(10px) saturate(0.98);
}

.memorial-program-reader[b-2pzl15c73n] {
    width: min(760px, 100%);
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(196, 154, 108, 0.28);
    border-radius: 20px;
    background:
        radial-gradient(900px 420px at 50% -12%, rgba(255, 255, 255, 0.72), transparent 62%),
        linear-gradient(180deg, #FFF9EF 0%, #F7ECDC 100%);
    box-shadow:
        0 28px 80px rgba(52, 40, 31, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.memorial-program-reader-header[b-2pzl15c73n] {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.3rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.35rem) 1rem;
    border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}

.memorial-program-reader-kicker[b-2pzl15c73n] {
    margin: 0 0 0.4rem;
    color: #A06F42;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    font-style: italic;
}

.memorial-program-reader h2[b-2pzl15c73n] {
    margin: 0;
    color: #34281F;
    font-family: var(--font-serif);
    font-size: clamp(1.85rem, 4vw, 2.7rem);
    font-weight: 400;
    line-height: 1.1;
}

.memorial-program-reader-meta[b-2pzl15c73n] {
    margin: 0.8rem 0 0;
    color: #806D5B;
    font-family: var(--font-sans);
    font-size: 0.88rem;
}

.memorial-program-reader-close[b-2pzl15c73n] {
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    border: 1px solid rgba(164, 123, 80, 0.24);
    border-radius: 50%;
    background: rgba(255, 251, 244, 0.74);
    color: #6B5541;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.memorial-program-reader-close:hover[b-2pzl15c73n],
.memorial-program-reader-close:focus-visible[b-2pzl15c73n] {
    background: rgba(255, 249, 239, 0.96);
    transform: translateY(-1px);
    outline: none;
}

.memorial-program-reader-body[b-2pzl15c73n] {
    overflow-y: auto;
    padding: clamp(1.4rem, 4vw, 2.45rem);
    color: #3E3026;
    font-family: var(--font-serif);
    font-size: clamp(1.04rem, 1.7vw, 1.18rem);
    line-height: 1.78;
}

.memorial-program-reader-body p[b-2pzl15c73n] {
    max-width: 68ch;
    margin: 0 auto 1.15rem;
}

.memorial-program-reader-body p:last-child[b-2pzl15c73n] {
    margin-bottom: 0;
}

.memorial-service-empty[b-2pzl15c73n] {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.memorial-service-empty h2[b-2pzl15c73n] {
    margin-bottom: 1rem;
}

/* Resting place — physical grounding */
.memorial-resting-place-section[b-2pzl15c73n] {
    padding: 1rem 4rem 8rem;
    background: #FAF3E5;
}

.memorial-resting-place-card[b-2pzl15c73n] {
    width: min(920px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(196, 154, 108, 0.22);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 252, 246, 0.9) 0%, rgba(248, 238, 222, 0.88) 100%);
    box-shadow: 0 12px 34px rgba(139, 115, 85, 0.08);
}

.memorial-resting-place-card--with-image[b-2pzl15c73n] {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.memorial-resting-place-content-wrap[b-2pzl15c73n] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.55rem 1.75rem;
}

.memorial-resting-place-icon[b-2pzl15c73n] {
    width: 3.4rem;
    height: 3.4rem;
    color: #8A6549;
    opacity: 0.78;
}

.memorial-resting-place-icon svg[b-2pzl15c73n] {
    width: 100%;
    height: 100%;
}

.memorial-resting-place-content h2[b-2pzl15c73n],
.memorial-resting-place-empty h2[b-2pzl15c73n] {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.45rem, 3vw, 2rem);
    color: #362A20;
    line-height: 1.15;
}

.memorial-resting-place-body[b-2pzl15c73n] {
    margin: 0.9rem 0 0;
    color: #554638;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.7;
}

.memorial-resting-place-details[b-2pzl15c73n] {
    margin: 0.75rem 0 0;
    color: #7D6956;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.memorial-resting-place-note[b-2pzl15c73n] {
    margin: 0.9rem 0 0;
    color: #765C44;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.65;
}

.memorial-resting-place-link[b-2pzl15c73n] {
    display: inline-block;
    margin-top: 1rem;
    color: #8A5B34;
    font-family: var(--font-serif);
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid rgba(138, 91, 52, 0.28);
}

.memorial-resting-place-link:hover[b-2pzl15c73n] {
    border-bottom-color: rgba(138, 91, 52, 0.58);
}

.memorial-resting-place-image[b-2pzl15c73n] {
    display: block;
    border: 0;
    padding: 0;
    min-height: 220px;
    background: #E4D6BD;
    cursor: zoom-in;
    overflow: hidden;
}

.memorial-resting-place-image img[b-2pzl15c73n] {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: block;
    object-fit: cover;
}

.memorial-resting-place-empty[b-2pzl15c73n] {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.memorial-resting-place-empty h2[b-2pzl15c73n] {
    margin-bottom: 1rem;
}

/* Memories Toolbar */
.memorial-toolbar[b-2pzl15c73n] {
    max-width: none;
    margin: 2rem 4rem 1.5rem;
    padding: 0.85rem 1.2rem 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 251, 244, 0.92);
    border: 1px solid rgba(232, 213, 200, 0.6);
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(139, 115, 85, 0.07);
    position: sticky;
    top: 1rem;
    z-index: 10;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.memorial-toolbar-title[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #3A3228;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 500;
}

.memorial-toolbar-candle[b-2pzl15c73n] {
    font-size: 0.95rem;
}

.memorial-toolbar-right[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.memorial-memory-count[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #8B7355;
}

.memorial-toolbar-icon-btn[b-2pzl15c73n] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.2);
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    color: #8B7355;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.memorial-toolbar-icon-btn:hover[b-2pzl15c73n] {
    background: rgba(164, 123, 80, 0.08);
    border-color: rgba(164, 123, 80, 0.4);
    color: #5C4033;
}

.memorial-toolbar-icon-btn--reversed svg[b-2pzl15c73n] {
    transform: rotate(180deg);
}

.memorial-status-filters[b-2pzl15c73n] {
    margin: -0.65rem 4rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.memorial-status-filter[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    border: 1px solid rgba(164, 123, 80, 0.18);
    border-radius: 999px;
    background: rgba(255, 251, 244, 0.78);
    color: #6B5B4E;
    padding: 0.35rem 0.78rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.memorial-status-filter:hover[b-2pzl15c73n],
.memorial-status-filter--active[b-2pzl15c73n] {
    background: rgba(255, 240, 226, 0.96);
    border-color: rgba(172, 111, 73, 0.46);
    color: #5C4033;
}

.memorial-status-filter-count[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: rgba(164, 123, 80, 0.12);
    color: #6A4E3A;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0 0.28rem;
}

/* Masonry Grid */
.memorial-masonry[b-2pzl15c73n] {
    columns: 3;
    column-gap: 1.6rem;
    padding: 0 4rem 4rem;
    max-width: none;
    margin: 0;
}

.memorial-card[b-2pzl15c73n] {
    break-inside: avoid;
    background: #FFFCF6;
    border-radius: 14px;
    padding: 1.2rem 1.3rem 1rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 14px rgba(139, 115, 85, 0.07), 0 1px 3px rgba(139, 115, 85, 0.04);
    border: 1px solid rgba(232, 213, 200, 0.5);
    position: relative;
    transition: all 0.25s ease;
}

.memorial-card:hover[b-2pzl15c73n] {
    box-shadow: 0 6px 24px rgba(139, 115, 85, 0.13);
    transform: translateY(-1px);
}

.memorial-card--owner[b-2pzl15c73n] {
    width: 100%;
    border: 1px solid rgba(232, 213, 200, 0.5);
    background: #FFFCF6;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.memorial-card--owner:focus-visible[b-2pzl15c73n] {
    outline: 2px solid rgba(164, 123, 80, 0.3);
    outline-offset: 3px;
    border-color: rgba(174, 132, 87, 0.58);
    box-shadow: 0 7px 22px rgba(139, 115, 85, 0.16);
}

.memorial-card-owner-affordance[b-2pzl15c73n] {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(106, 78, 58, 0.72);
    background: rgba(255, 250, 242, 0.88);
    border: 1px solid rgba(196, 154, 108, 0.24);
    opacity: 0;
    transform: translateY(-2px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.memorial-card--owner:hover .memorial-card-owner-affordance[b-2pzl15c73n],
.memorial-card--owner:focus-visible .memorial-card-owner-affordance[b-2pzl15c73n],
.memorial-card--owner:focus-within .memorial-card-owner-affordance[b-2pzl15c73n] {
    opacity: 0.98;
    transform: translateY(0) scale(1);
}

@media (hover: hover) {
    .memorial-card--owner:hover[b-2pzl15c73n] {
        border-color: rgba(174, 132, 87, 0.52);
        box-shadow: 0 7px 22px rgba(139, 115, 85, 0.16);
        transform: translateY(-1px);
    }
}

@media (hover: none), (pointer: coarse) {
    .memorial-card-owner-affordance[b-2pzl15c73n] {
        opacity: 0.66;
        transform: translateY(0);
    }
}

.memorial-card-owner-strip[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 2.1rem 0.75rem 0;
}

.memorial-card-status[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    border-radius: 999px;
    padding: 0.24rem 0.58rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.memorial-card-status--pending[b-2pzl15c73n] {
    background: rgba(226, 176, 63, 0.14);
    color: #8A6430;
}

.memorial-card-status--published[b-2pzl15c73n] {
    background: rgba(124, 151, 101, 0.14);
    color: #5B7047;
}

.memorial-card-status--unpublished[b-2pzl15c73n] {
    background: rgba(136, 116, 97, 0.13);
    color: #6D5B4A;
}

.memorial-card-status--rejected[b-2pzl15c73n] {
    background: rgba(153, 93, 64, 0.12);
    color: #87523E;
}

.memorial-card-action[b-2pzl15c73n] {
    border: 1px solid rgba(171, 120, 78, 0.24);
    border-radius: 999px;
    background: rgba(255, 252, 246, 0.9);
    color: #5D4131;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    min-height: 1.8rem;
    padding: 0.25rem 0.62rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.memorial-card-action:hover:not(:disabled)[b-2pzl15c73n],
.memorial-card-action:focus-visible[b-2pzl15c73n] {
    background: #FFF2E7;
    border-color: rgba(171, 120, 78, 0.42);
    outline: none;
}

.memorial-card-action:disabled[b-2pzl15c73n] {
    opacity: 0.62;
    cursor: wait;
}

.memorial-card--status-unpublished[b-2pzl15c73n] {
    border-left: 3px solid rgba(136, 116, 97, 0.34);
}

.memorial-card--status-rejected[b-2pzl15c73n] {
    border-left: 3px solid rgba(153, 93, 64, 0.28);
}

.memorial-card--status-pending[b-2pzl15c73n] {
    border-left: 3px solid rgba(226, 176, 63, 0.34);
}

.memorial-card-candle[b-2pzl15c73n] {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.memorial-card-title[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: #2E2318;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.memorial-card-image-button[b-2pzl15c73n] {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 0.85rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

.memorial-card-image[b-2pzl15c73n] {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(139, 115, 85, 0.12);
}

.memorial-card-content[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.7;
    color: #4A3D35;
    margin: 0 0 0.9rem;
}

.memorial-card-footer[b-2pzl15c73n] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid rgba(232, 213, 200, 0.3);
    padding-top: 0.6rem;
}

.memorial-card-footer-left[b-2pzl15c73n] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.memorial-card-author[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.83rem;
    color: #6B5B4E;
}

.memorial-card-date[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #A89880;
    margin-left: auto;
}

.memorial-card-report[b-2pzl15c73n] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #A89880;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.1rem 0;
}

.memorial-card-report:hover[b-2pzl15c73n] {
    color: #6B5B4E;
}

/* Empty State — Ghost / Skeleton Placeholder Cards */
.memorial-empty-state[b-2pzl15c73n] {
    position: relative;
    padding: 0 4rem 4rem;
}

.memorial-empty-state--quiet[b-2pzl15c73n] {
    min-height: 16rem;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memorial-ghost-grid[b-2pzl15c73n] {
    columns: 3;
    column-gap: 1.4rem;
}

.memorial-ghost-card[b-2pzl15c73n] {
    break-inside: avoid;
    background: rgba(253, 248, 240, 0.7);
    border: 1px solid rgba(196, 154, 108, 0.14);
    border-radius: 14px;
    padding: 1.4rem 1.3rem 1.2rem;
    margin-bottom: 1.4rem;
    pointer-events: none;
    opacity: 0.55;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.memorial-ghost-card--tall[b-2pzl15c73n] {
    /* No extra markup needed — more ghost-line bars supply height */
}

.memorial-ghost-card--lower[b-2pzl15c73n] {
    margin-top: 2rem;
}

/* Generic shimmer bar */
.ghost-bar[b-2pzl15c73n] {
    display: block;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(196, 154, 108, 0.13) 25%,
        rgba(196, 154, 108, 0.26) 50%,
        rgba(196, 154, 108, 0.13) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-2pzl15c73n 2.2s ease-in-out infinite;
}

@keyframes shimmer-b-2pzl15c73n {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Icon placeholder row */
.ghost-icon-row[b-2pzl15c73n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ghost-icon[b-2pzl15c73n] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ghost-title[b-2pzl15c73n] {
    height: 16px;
    width: 60%;
}

.ghost-title--short[b-2pzl15c73n] {
    width: 42%;
}

/* Body lines */
.ghost-line[b-2pzl15c73n] {
    height: 11px;
    width: 100%;
    margin-bottom: 0.4rem;
}

.ghost-line--medium[b-2pzl15c73n] {
    width: 78%;
}

.ghost-line--short[b-2pzl15c73n] {
    width: 52%;
    margin-bottom: 0;
}

/* Footer divider + meta */
.ghost-footer[b-2pzl15c73n] {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(196, 154, 108, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ghost-author[b-2pzl15c73n] {
    height: 10px;
    width: 44%;
}

.ghost-date[b-2pzl15c73n] {
    height: 9px;
    width: 28%;
}

/* Overlay — invite message floats above ghost cards */
.memorial-empty-overlay[b-2pzl15c73n] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        ellipse 60% 45% at 50% 52%,
        rgba(253, 244, 231, 0.93) 30%,
        rgba(253, 244, 231, 0.55) 65%,
        transparent 100%
    );
    pointer-events: none;
}

.memorial-empty-overlay--standalone[b-2pzl15c73n] {
    position: relative;
    inset: auto;
    min-height: 11rem;
    width: min(100%, 28rem);
    background: radial-gradient(
        ellipse 62% 52% at 50% 50%,
        rgba(253, 244, 231, 0.72) 0%,
        rgba(253, 244, 231, 0.34) 56%,
        transparent 100%
    );
}

.memorial-empty-candle[b-2pzl15c73n] {
    font-size: 2.6rem;
    margin: 0 0 0.55rem;
    animation: candleGlow-b-2pzl15c73n 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(196, 154, 108, 0.35));
}

.memorial-empty-invite[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: #7A6652;
    text-align: center;
    max-width: 240px;
    line-height: 1.55;
    margin: 0;
}

@keyframes candleGlow-b-2pzl15c73n {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(196, 154, 108, 0.3)); }
    50%       { filter: drop-shadow(0 0 18px rgba(196, 154, 108, 0.55)); }
}

/* Bottom CTA — fixed frosted footer pinned to bottom of viewport */
.memorial-bottom-cta[b-2pzl15c73n] {
    position: fixed;
    bottom: 0;
    right: 0;
    /* left: driven by Blazor inline style — tracks sidebar open/closed state */
    opacity: 1;
    transform: translateY(0);
    transition:
        left 0.3s ease,
        opacity 220ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1); /* matches sidebar slide animation */
    text-align: center;
    padding: 1rem 1.2rem 1.3rem;
    background: linear-gradient(180deg, transparent 0%, rgba(250, 243, 229, 0.75) 25%, rgba(250, 243, 229, 0.97) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 20;
    pointer-events: none; /* let clicks through the transparent top part */
}

.memorial-bottom-cta .memorial-cta-button[b-2pzl15c73n] {
    pointer-events: all;
}

.memorial-bottom-cta--transitioning[b-2pzl15c73n] {
    pointer-events: none;
}

.memorial-bottom-cta--transitioning .memorial-cta-button[b-2pzl15c73n] {
    pointer-events: none;
}

.memorial-bottom-cta--transition-out[b-2pzl15c73n] {
    opacity: 0.2;
    transform: translateY(6px);
}

.memorial-bottom-cta--transition-in[b-2pzl15c73n] {
    opacity: 1;
    transform: translateY(0);
}

/* The button — warm candlewax hybrid: tactile paper feel + golden glow affordance */
.memorial-cta-button[b-2pzl15c73n] {
    /* Warm candle-wax gradient — like stearin lit from within */
    background: linear-gradient(145deg, #FDF3E4 0%, #F5E4C8 35%, #ECDAB5 70%, #E6CFA5 100%);
    color: #5A3E2B;
    border: none;
    border-radius: 50px;
    padding: 1rem 2.4rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;

    /* Outer glow — soft candlelight halo */
    box-shadow:
        0 2px 12px rgba(210, 160, 90, 0.25),
        0 4px 24px rgba(210, 160, 90, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;

    /* Inner stitched border — tactile parchment feel */
    outline: 1.5px dashed rgba(180, 140, 90, 0.3);
    outline-offset: -6px;

    transition: all 0.35s ease;
}

/* Hover: "the candle lights up" — glow intensifies, button lifts */
.memorial-cta-button:hover[b-2pzl15c73n] {
    background: linear-gradient(145deg, #FFF8EE 0%, #FAE9CC 35%, #F2DEBA 70%, #EBD4A8 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 20px rgba(220, 165, 70, 0.4),
        0 8px 40px rgba(210, 155, 60, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
    outline-color: rgba(180, 140, 90, 0.45);
}

/* Active press — settle into the parchment */
.memorial-cta-button:active[b-2pzl15c73n] {
    transform: translateY(0px);
    box-shadow:
        0 1px 6px rgba(210, 160, 90, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* Inline variant inside empty state overlay */
.memorial-cta-button--inline[b-2pzl15c73n] {
    margin-top: 1.4rem;
    font-size: 1.1rem;
    padding: 1.05rem 2.6rem;
}

/* Candle PNG icon in CTA button */
.cta-candle-icon[b-2pzl15c73n] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    animation: candleFlicker-b-2pzl15c73n 3.2s ease-in-out infinite;
    transform-origin: center bottom;
    filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.4));
}

@keyframes candleFlicker-b-2pzl15c73n {
    0%, 100% { transform: scale(1) rotate(-0.5deg); filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.3)); }
    40%       { transform: scale(1.06) rotate(0.5deg); filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.6)); }
    70%       { transform: scale(0.97) rotate(0deg); filter: drop-shadow(0 0 3px rgba(255, 200, 100, 0.25)); }
}

/* Legacy: keep .cta-flame for other pages if referenced */
.cta-flame[b-2pzl15c73n] {
    display: inline-block;
    animation: candleFlicker-b-2pzl15c73n 3.2s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Sidebar Overlay */
.sidebar-overlay[b-2pzl15c73n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 90;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-2pzl15c73n] {
    opacity: 0;
    pointer-events: none;
}

/* Responsive */
@media (min-width: 1600px) {
    .memorial-hero-inner[b-2pzl15c73n] {
        max-width: 1100px;
    }

    .memorial-portrait-container[b-2pzl15c73n] {
        max-width: 720px;
    }

    .memorial-name[b-2pzl15c73n] {
        font-size: 5em;
    }

    .memorial-masonry[b-2pzl15c73n] {
        columns: 4;
        padding: 0 5rem 4rem;
    }

    .memorial-toolbar[b-2pzl15c73n] {
        margin: 2rem 5rem 1.5rem;
    }

    .memorial-status-filters[b-2pzl15c73n] {
        margin: -0.65rem 5rem 1.35rem;
    }

    .memorial-owner-bar[b-2pzl15c73n] {
        margin: 1.5rem 5rem 0;
    }

    .memorial-resting-place-section[b-2pzl15c73n] {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .memorial-service-section[b-2pzl15c73n] {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (max-width: 1024px) {
    .memorial-masonry[b-2pzl15c73n] {
        columns: 2;
        padding: 0 1.5rem 2rem;
    }

    .memorial-toolbar[b-2pzl15c73n] {
        margin: 1.5rem 1.5rem 1.2rem;
    }

    .memorial-status-filters[b-2pzl15c73n] {
        margin: -0.5rem 1.5rem 1.2rem;
    }

    .memorial-owner-bar[b-2pzl15c73n] {
        margin: 1.2rem 1.5rem 0;
    }

    .memorial-resting-place-section[b-2pzl15c73n] {
        padding: 1rem 1.5rem 7rem;
    }

    .memorial-service-section[b-2pzl15c73n] {
        padding: 1rem 1.5rem 2rem;
    }

    .memorial-service-card[b-2pzl15c73n],
    .memorial-service-card--text-only[b-2pzl15c73n] {
        grid-template-columns: 1fr;
    }

    .memorial-service-image[b-2pzl15c73n],
    .memorial-service-image img[b-2pzl15c73n] {
        min-height: 300px;
    }

    .memorial-resting-place-card--with-image[b-2pzl15c73n] {
        grid-template-columns: 1fr;
    }

    .memorial-hero[b-2pzl15c73n] {
        padding: 3rem 2rem 0;
    }

    .memorial-hero-inner[b-2pzl15c73n] {
        max-width: 720px;
    }

    .memorial-portrait-container[b-2pzl15c73n] {
        max-width: 420px;
    }

    .memorial-name[b-2pzl15c73n] {
        font-size: 2.8em;
    }

    .sidebar[b-2pzl15c73n] {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        z-index: 100;
    }

    .sidebar.visible[b-2pzl15c73n] {
        transform: translateX(0);
    }

    .memorial-main[b-2pzl15c73n] {
        margin-left: 0;
        margin-top: 60px;
    }

    .memorial-bottom-cta[b-2pzl15c73n] {
        left: 0 !important;
    }
}

@media (max-width: 992px) {
    .memorial-sidebar-owner-tools.has-user-footer[b-2pzl15c73n] {
        padding-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .memorial-masonry[b-2pzl15c73n] {
        columns: 1;
        padding: 0 1rem 1.5rem;
    }

    .memorial-name[b-2pzl15c73n] {
        font-size: 2em;
    }

    .memorial-conversation-invite[b-2pzl15c73n] {
        width: min(100%, 320px);
        padding: 0.85rem 1.35rem;
        font-size: 0.96rem;
    }

    .memorial-hero[b-2pzl15c73n] {
        padding: 2rem 1rem 0;
    }

    .memorial-hero-inner[b-2pzl15c73n] {
        max-width: 100%;
    }

    .memorial-portrait-container[b-2pzl15c73n] {
        max-width: 320px;
    }

    .memorial-toolbar[b-2pzl15c73n] {
        margin: 1rem 1rem 1rem;
        border-radius: 16px;
        position: static;
    }

    .memorial-status-filters[b-2pzl15c73n] {
        margin: -0.35rem 1rem 1rem;
    }

    .memorial-card-owner-strip[b-2pzl15c73n] {
        align-items: flex-start;
        flex-direction: column;
        margin-right: 2rem;
    }

    .memorial-owner-bar[b-2pzl15c73n] {
        margin: 0.75rem 1rem 0;
    }

    .memorial-tribute-prologue[b-2pzl15c73n] {
        padding: 3.5rem 1rem 2.25rem;
    }

    .memorial-section-heading-row[b-2pzl15c73n],
    .memorial-section-heading-row--centered[b-2pzl15c73n] {
        flex-direction: column;
        align-items: center;
    }

    .memorial-section-heading-row--centered .memorial-section-edit-link[b-2pzl15c73n] {
        position: static;
    }

    .memorial-tribute-actions[b-2pzl15c73n] {
        justify-content: center;
        margin-bottom: 0.65rem;
    }

    .memorial-tapestry-edit-link[b-2pzl15c73n] {
        position: static;
        margin: 0 auto -1rem;
    }

    .memorial-tapestry-edit-link--desktop[b-2pzl15c73n] {
        display: none;
    }

    .memorial-section-edit-link.memorial-tapestry-edit-link--mobile[b-2pzl15c73n] {
        display: inline-flex;
        margin: 0;
    }

    .memorial-tribute-title[b-2pzl15c73n] {
        margin-bottom: 1rem;
    }

    .memorial-tribute-text[b-2pzl15c73n] {
        font-size: 1.02rem;
        line-height: 1.78;
    }

    .memorial-tribute-text--collapsed[b-2pzl15c73n] {
        max-height: 300px;
    }

    .memorial-service-section[b-2pzl15c73n] {
        padding: 0.5rem 1rem 1.5rem;
    }

    .memorial-service-card[b-2pzl15c73n] {
        border-radius: 16px;
    }

    .memorial-service-content[b-2pzl15c73n] {
        padding: 1.35rem 1.15rem 1.45rem;
    }

    .memorial-service-image[b-2pzl15c73n],
    .memorial-service-image img[b-2pzl15c73n] {
        min-height: 240px;
    }

    .memorial-service-content .memorial-section-heading-row[b-2pzl15c73n] {
        align-items: flex-start;
        text-align: left;
    }

    .memorial-service-program li[b-2pzl15c73n] {
        text-align: left;
    }

    .memorial-service-program-copy[b-2pzl15c73n] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .memorial-program-reader-overlay[b-2pzl15c73n] {
        align-items: stretch;
        padding: 0;
    }

    .memorial-program-reader[b-2pzl15c73n] {
        width: 100%;
        max-height: none;
        min-height: 100dvh;
        border-radius: 0;
    }

    .memorial-program-reader-header[b-2pzl15c73n] {
        padding-top: calc(1.15rem + env(safe-area-inset-top));
    }

    .memorial-resting-place-section[b-2pzl15c73n] {
        padding: 0.5rem 1rem 7rem;
    }

    .memorial-resting-place-card[b-2pzl15c73n] {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0;
    }

    .memorial-resting-place-content-wrap[b-2pzl15c73n] {
        grid-template-columns: 1fr;
        padding: 1.35rem 1.15rem;
    }

    .memorial-resting-place-icon[b-2pzl15c73n] {
        margin: 0 auto;
    }

    .memorial-resting-place-image[b-2pzl15c73n],
    .memorial-resting-place-image img[b-2pzl15c73n] {
        min-height: 210px;
    }

    .memorial-resting-place-body[b-2pzl15c73n] {
        font-size: 0.98rem;
    }

    .memorial-owner-actions[b-2pzl15c73n] {
        flex-direction: column;
        align-items: stretch;
    }

    .toggle-sidebar[b-2pzl15c73n] {
        display: none;
    }

    .memorial-collapsed-back-link[b-2pzl15c73n] {
        display: none;
    }
}

@media (max-width: 480px) {
    .memorial-name[b-2pzl15c73n] {
        font-size: 1.7em;
    }

    .memorial-portrait-container[b-2pzl15c73n] {
        max-width: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .memorial-room-canvas[b-2pzl15c73n],
    .memorial-room-veil[b-2pzl15c73n],
    .memorial-bottom-cta[b-2pzl15c73n] {
        transition-duration: 120ms;
    }

    .memorial-room-stage--transition-out .memorial-room-canvas[b-2pzl15c73n],
    .memorial-room-stage--transition-in .memorial-room-canvas[b-2pzl15c73n],
    .memorial-bottom-cta--transition-out[b-2pzl15c73n],
    .memorial-bottom-cta--transition-in[b-2pzl15c73n] {
        transform: none;
    }

    .memorial-room-stage--transition-out .memorial-room-canvas[b-2pzl15c73n] {
        opacity: 0.45;
    }

    .memorial-room-stage--transition-out .memorial-room-veil[b-2pzl15c73n] {
        opacity: 0.08;
    }

    .memorial-room-stage--transition-in .memorial-room-veil[b-2pzl15c73n] {
        opacity: 0.02;
    }
}


/* Custom Scrollbar */
.memorial-main[b-2pzl15c73n]::-webkit-scrollbar {
    width: 6px;
}

.memorial-main[b-2pzl15c73n]::-webkit-scrollbar-track {
    background: transparent;
}

.memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.3);
    border-radius: 3px;
}

.memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 154, 108, 0.5);
}

/* ================ Night Mode ================ */
body.night-mode .app-layout[b-2pzl15c73n] {
    background: #1A2A32;
}

body.night-mode .memorial-hero[b-2pzl15c73n] {
    background: linear-gradient(180deg, #1A2A32 0%, #223038 100%);
}

body.night-mode .memorial-hero[b-2pzl15c73n]::after {
    background: linear-gradient(180deg, transparent, #1A2A32);
}

body.night-mode .memorial-conversation-invite[b-2pzl15c73n] {
    background: linear-gradient(145deg, rgba(120, 92, 56, 0.82) 0%, rgba(96, 74, 47, 0.92) 100%);
    border-color: rgba(230, 198, 152, 0.24);
    color: #F9E8CC;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.night-mode .memorial-conversation-invite:hover[b-2pzl15c73n] {
    background: linear-gradient(145deg, rgba(132, 101, 61, 0.88) 0%, rgba(104, 80, 52, 0.96) 100%);
}

body.night-mode .memorial-room-veil[b-2pzl15c73n] {
    background:
        radial-gradient(ellipse 72% 48% at 50% 14%, rgba(208, 176, 126, 0.08) 0%, transparent 68%),
        linear-gradient(180deg, rgba(19, 24, 30, 0.04) 0%, rgba(73, 57, 38, 0.18) 48%, rgba(16, 20, 26, 0.07) 100%);
}

body.night-mode .memorial-avatar[b-2pzl15c73n] {
    border-color: rgba(196, 154, 108, 0.25);
    box-shadow: 0 0 40px rgba(196, 154, 108, 0.15), 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Ateljé wrapper */

.memorial-atelier-backdrop[b-2pzl15c73n] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: atelierOverlayIn-b-2pzl15c73n 0.25s ease-out;
}

@keyframes atelierOverlayIn-b-2pzl15c73n {
    from { opacity: 0; }
    to { opacity: 1; }
}

.memorial-atelier-wrapper[b-2pzl15c73n] {
    background: linear-gradient(170deg, #fdfaf5 0%, #faf6f0 40%, #f5efe6 100%);
    border-radius: 20px;
    border: 1px solid rgba(196, 154, 108, 0.15);
    padding: 24px;
    max-width: 480px;
    width: 94%;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: atelierContentIn-b-2pzl15c73n 0.3s ease-out;
}

@keyframes atelierContentIn-b-2pzl15c73n {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.memorial-verified-modal-overlay[b-2pzl15c73n] {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    background: rgba(42, 32, 24, 0.46);
    -webkit-backdrop-filter: blur(10px) saturate(108%);
    backdrop-filter: blur(10px) saturate(108%);
}

.memorial-verified-modal[b-2pzl15c73n] {
    position: relative;
    width: min(92vw, 480px);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 237, 211, 0.72), transparent 52%),
        linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(252, 241, 225, 0.98));
    color: #3A3228;
    padding: clamp(2rem, 5vw, 2.65rem) clamp(1.35rem, 5vw, 2.45rem) clamp(1.55rem, 4vw, 2.15rem);
    text-align: center;
    border: 1px solid rgba(182, 137, 91, 0.2);
    box-shadow: 0 24px 70px rgba(55, 39, 27, 0.24), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    overflow: hidden;
}

.memorial-verified-modal[b-2pzl15c73n]::before {
    content: "";
    position: absolute;
    inset: 0.65rem;
    border: 1px solid rgba(196, 154, 108, 0.14);
    border-radius: 14px;
    pointer-events: none;
}

.memorial-verified-close[b-2pzl15c73n] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(83, 64, 49, 0.68);
    cursor: pointer;
    transition: all 0.3s ease;
}

.memorial-verified-close:hover[b-2pzl15c73n],
.memorial-verified-close:focus-visible[b-2pzl15c73n] {
    background: rgba(164, 123, 80, 0.1);
    color: #5C4033;
    outline: none;
}

.memorial-verified-icon[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    color: #9D744C;
    background: rgba(255, 247, 235, 0.9);
    box-shadow: 0 0 0 1px rgba(196, 154, 108, 0.18), 0 10px 28px rgba(142, 98, 55, 0.12);
}

.memorial-verified-icon svg[b-2pzl15c73n] {
    width: 2.55rem;
    height: 2.55rem;
}

.memorial-verified-modal h2[b-2pzl15c73n] {
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.12;
    color: #33291F;
    margin: 0 0 0.85rem;
}

.memorial-verified-modal p[b-2pzl15c73n] {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.7;
    color: #665445;
    margin: 0 auto 1.5rem;
    max-width: 34ch;
}

.memorial-verified-modal .memorial-verified-invitation[b-2pzl15c73n] {
    font-size: 0.94rem;
    font-style: italic;
    color: #7A6655;
    margin-bottom: 0.8rem;
}

.memorial-verified-cta[b-2pzl15c73n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-top: 0.65rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
    color: #4A3122;
    padding: 0.72rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid rgba(144, 91, 50, 0.18);
    box-shadow: 0 10px 24px rgba(144, 91, 50, 0.16);
    transition: all 0.3s ease;
}

.memorial-verified-cta:hover[b-2pzl15c73n],
.memorial-verified-cta:focus-visible[b-2pzl15c73n] {
    color: #3E291E;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(144, 91, 50, 0.2);
    outline: none;
}

@media (max-width: 540px) {
    .memorial-verified-modal-overlay[b-2pzl15c73n] {
        align-items: flex-end;
        padding: 0.85rem;
    }

    .memorial-verified-modal[b-2pzl15c73n] {
        width: 100%;
        max-height: calc(100vh - 1.7rem);
        overflow-y: auto;
    }

    .memorial-verified-cta[b-2pzl15c73n] {
        width: 100%;
    }
}

body.night-mode .memorial-name[b-2pzl15c73n] {
    color: #E8F4F8;
}

body.night-mode .memorial-dates[b-2pzl15c73n] {
    color: #A0B4BC;
}

body.night-mode .memorial-tagline[b-2pzl15c73n] {
    color: #B0C4CC;
}

body.night-mode .memorial-portrait-prompt[b-2pzl15c73n] {
    border-color: rgba(216, 180, 124, 0.35);
    background: rgba(45, 59, 68, 0.72);
    color: #E8DDD0;
}

body.night-mode .memorial-portrait-prompt-icon[b-2pzl15c73n] {
    background: rgba(216, 180, 124, 0.18);
    color: #F4D6A5;
}

body.night-mode .memorial-portrait-prompt-kicker[b-2pzl15c73n] {
    color: #F0C98F;
}

body.night-mode .memorial-portrait-prompt h2[b-2pzl15c73n] {
    color: #E8DDD0;
}

body.night-mode .memorial-portrait-prompt p:last-child[b-2pzl15c73n] {
    color: #CFC0AF;
}

body.night-mode .memorial-tribute-prologue[b-2pzl15c73n],
body.night-mode .memorial-service-section[b-2pzl15c73n],
body.night-mode .memorial-resting-place-section[b-2pzl15c73n] {
    background: #1A2A32;
}

body.night-mode .memorial-tribute-title[b-2pzl15c73n],
body.night-mode .memorial-service-content h2[b-2pzl15c73n],
body.night-mode .memorial-service-empty h2[b-2pzl15c73n],
body.night-mode .memorial-resting-place-content h2[b-2pzl15c73n],
body.night-mode .memorial-resting-place-empty h2[b-2pzl15c73n] {
    color: #E8DDD0;
}

body.night-mode .memorial-tribute-text[b-2pzl15c73n],
body.night-mode .memorial-service-body[b-2pzl15c73n],
body.night-mode .memorial-resting-place-body[b-2pzl15c73n] {
    color: #CFC0AF;
}

body.night-mode .memorial-tribute-read-more[b-2pzl15c73n] {
    border-color: rgba(216, 180, 124, 0.34);
    background: rgba(72, 50, 32, 0.62);
    color: rgba(246, 221, 185, 0.94);
}

body.night-mode .memorial-tribute-read-more:hover[b-2pzl15c73n],
body.night-mode .memorial-tribute-read-more:focus-visible[b-2pzl15c73n] {
    background: rgba(88, 60, 36, 0.78);
    border-color: rgba(216, 180, 124, 0.56);
}

body.night-mode .memorial-tribute-text--collapsed[b-2pzl15c73n]::after {
    background: linear-gradient(to bottom, rgba(26, 42, 50, 0), #1A2A32);
}

body.night-mode .memorial-resting-place-card[b-2pzl15c73n],
body.night-mode .memorial-service-card[b-2pzl15c73n],
body.night-mode .memorial-owner-empty-section .memorial-tribute-inner[b-2pzl15c73n],
body.night-mode .memorial-service-empty[b-2pzl15c73n],
body.night-mode .memorial-resting-place-empty[b-2pzl15c73n] {
    background: rgba(36, 47, 54, 0.74);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .memorial-section-edit-link[b-2pzl15c73n],
body.night-mode .memorial-empty-section-button[b-2pzl15c73n] {
    background: rgba(40, 48, 52, 0.72);
    border-color: rgba(196, 154, 108, 0.22);
    color: #D7B98A;
}

body.night-mode .memorial-resting-place-details[b-2pzl15c73n],
body.night-mode .memorial-service-meta[b-2pzl15c73n],
body.night-mode .memorial-service-program li[b-2pzl15c73n],
body.night-mode .memorial-resting-place-note[b-2pzl15c73n] {
    color: #B5A18D;
}

body.night-mode .memorial-service-subtitle[b-2pzl15c73n],
body.night-mode .memorial-service-program-kind[b-2pzl15c73n] {
    color: #D7B98A;
}

body.night-mode .memorial-service-program-read[b-2pzl15c73n] {
    color: #D7B98A;
    border-color: rgba(216, 180, 124, 0.32);
}

body.night-mode .memorial-service-program-read:hover[b-2pzl15c73n],
body.night-mode .memorial-service-program-read:focus-visible[b-2pzl15c73n] {
    color: #F9E8CC;
    border-color: rgba(249, 232, 204, 0.56);
}

body.night-mode .memorial-program-reader[b-2pzl15c73n] {
    background:
        radial-gradient(900px 420px at 50% -12%, rgba(230, 198, 152, 0.12), transparent 62%),
        linear-gradient(180deg, #26343C 0%, #1F2C34 100%);
    border-color: rgba(216, 180, 124, 0.24);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.night-mode .memorial-program-reader h2[b-2pzl15c73n],
body.night-mode .memorial-program-reader-body[b-2pzl15c73n] {
    color: #F5E8D8;
}

body.night-mode .memorial-program-reader-kicker[b-2pzl15c73n],
body.night-mode .memorial-program-reader-meta[b-2pzl15c73n] {
    color: #D7B98A;
}

body.night-mode .memorial-program-reader-close[b-2pzl15c73n] {
    background: rgba(34, 46, 53, 0.86);
    color: #F9E8CC;
    border-color: rgba(230, 198, 152, 0.24);
}

body.night-mode .memorial-resting-place-link[b-2pzl15c73n] {
    color: #D7B98A;
}

body.night-mode .memorial-toolbar-title[b-2pzl15c73n] {
    color: #E8F4F8;
}

body.night-mode .memorial-memory-count[b-2pzl15c73n] {
    color: #A0B4BC;
}

body.night-mode .memorial-status-filter[b-2pzl15c73n] {
    background: rgba(40, 48, 52, 0.72);
    border-color: rgba(196, 154, 108, 0.18);
    color: #CFD8DC;
}

body.night-mode .memorial-status-filter:hover[b-2pzl15c73n],
body.night-mode .memorial-status-filter--active[b-2pzl15c73n] {
    background: rgba(72, 50, 32, 0.62);
    border-color: rgba(216, 180, 124, 0.36);
    color: #F9E8CC;
}

body.night-mode .memorial-status-filter-count[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.16);
    color: #F9E8CC;
}

body.night-mode .memorial-card[b-2pzl15c73n] {
    background: #2D3B44;
    border-color: rgba(196, 154, 108, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.night-mode .memorial-card:hover[b-2pzl15c73n] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-left-color: rgba(196, 154, 108, 0.35);
}

body.night-mode .memorial-card--owner:focus-visible[b-2pzl15c73n] {
    outline-color: rgba(196, 154, 108, 0.42);
    border-color: rgba(196, 154, 108, 0.36);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

body.night-mode .memorial-card-owner-affordance[b-2pzl15c73n] {
    color: #DCC8B6;
    background: rgba(47, 59, 66, 0.92);
    border-color: rgba(196, 154, 108, 0.26);
}

body.night-mode .memorial-card-status--pending[b-2pzl15c73n] {
    background: rgba(226, 176, 63, 0.18);
    color: #E7C174;
}

body.night-mode .memorial-card-status--published[b-2pzl15c73n] {
    background: rgba(124, 151, 101, 0.18);
    color: #C3D7B0;
}

body.night-mode .memorial-card-status--unpublished[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.14);
    color: #DCC8B6;
}

body.night-mode .memorial-card-status--rejected[b-2pzl15c73n] {
    background: rgba(153, 93, 64, 0.18);
    color: #F0C2AB;
}

body.night-mode .memorial-card-action[b-2pzl15c73n] {
    background: rgba(34, 46, 53, 0.86);
    color: #F9E8CC;
    border-color: rgba(230, 198, 152, 0.24);
}

body.night-mode .memorial-card-image[b-2pzl15c73n] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

body.night-mode .memorial-card-content[b-2pzl15c73n] {
    color: #E8F4F8;
}

body.night-mode .memorial-card-footer[b-2pzl15c73n] {
    border-top-color: rgba(196, 154, 108, 0.12);
}

body.night-mode .memorial-card-author[b-2pzl15c73n] {
    color: #CFD8DC;
}

body.night-mode .memorial-card-relation[b-2pzl15c73n] {
    color: #A0B4BC;
}

body.night-mode .memorial-card-date[b-2pzl15c73n] {
    color: #7A9AA8;
}

body.night-mode .memorial-cta-button[b-2pzl15c73n] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.night-mode .memorial-bottom-cta[b-2pzl15c73n] {
    background: linear-gradient(180deg, transparent, #1A2A32 40%);
}

/* Sidebar - Night Mode */
body.night-mode .sidebar[b-2pzl15c73n] {
    background: #1E2E36;
    border-right-color: rgba(196, 154, 108, 0.12);
}

body.night-mode .memorial-sidebar-back-link[b-2pzl15c73n] {
    background: rgba(34, 46, 53, 0.56);
    border-color: rgba(230, 198, 152, 0.16);
    color: rgba(249, 232, 204, 0.76);
}

body.night-mode .memorial-sidebar-back-link:hover[b-2pzl15c73n],
body.night-mode .memorial-sidebar-back-link:focus-visible[b-2pzl15c73n] {
    background: rgba(34, 46, 53, 0.9);
    border-color: rgba(230, 198, 152, 0.28);
    color: #F9E8CC;
}

body.night-mode .memorial-sidebar-name[b-2pzl15c73n] {
    color: #E8F4F8;
}

body.night-mode .memorial-sidebar-dates[b-2pzl15c73n] {
    color: #A0B4BC;
}

body.night-mode .memorial-sidebar-tagline[b-2pzl15c73n] {
    color: #B0C4CC;
}

body.night-mode .memorial-sidebar-avatar[b-2pzl15c73n] {
    border-color: rgba(196, 154, 108, 0.2);
    box-shadow: 0 0 30px rgba(196, 154, 108, 0.12), 0 4px 20px rgba(0, 0, 0, 0.25);
}

body.night-mode .memorial-sidebar-owner-btn[b-2pzl15c73n] {
    background: rgba(37, 52, 60, 0.92);
    border-color: rgba(196, 154, 108, 0.18);
    color: #E8F4F8;
}

body.night-mode .memorial-sidebar-owner-btn:hover[b-2pzl15c73n] {
    background: rgba(43, 59, 68, 0.97);
    border-color: rgba(196, 154, 108, 0.32);
}

body.night-mode .memorial-sidebar-pending[b-2pzl15c73n] {
    background: rgba(37, 52, 60, 0.92);
    border-color: rgba(196, 154, 108, 0.18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

body.night-mode .memorial-sidebar-pending-text[b-2pzl15c73n] {
    color: #CFD8DC;
}

body.night-mode .memorial-sidebar-pending-btn[b-2pzl15c73n] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Pending Banner - Night Mode */
body.night-mode .memorial-pending-banner[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.1);
    border-color: rgba(196, 154, 108, 0.2);
    color: #CFD8DC;
}

/* Owner Bar - Night Mode */
body.night-mode .memorial-settings-btn[b-2pzl15c73n] {
    color: #CFD8DC;
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .memorial-settings-btn:hover[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.1);
}

/* Loading & Not Found - Night Mode */
body.night-mode .memorial-loading[b-2pzl15c73n] {
    background: #1A2A32;
}

body.night-mode .loading-spinner[b-2pzl15c73n] {
    border-color: rgba(196, 154, 108, 0.15);
    border-top-color: #C49A6C;
}

body.night-mode .memorial-not-found[b-2pzl15c73n] {
    background: #1A2A32;
}

body.night-mode .not-found-inner h1[b-2pzl15c73n] {
    color: #E8F4F8;
}

body.night-mode .not-found-inner p[b-2pzl15c73n] {
    color: #A0B4BC;
}

body.night-mode .home-link[b-2pzl15c73n] {
    color: #C49A6C;
}

/* Empty State - Night Mode */
body.night-mode .memorial-empty-text[b-2pzl15c73n] {
    filter: drop-shadow(0 0 8px rgba(196, 154, 108, 0.4));
}

/* Toggle Button - Night Mode */
body.night-mode .toggle-sidebar[b-2pzl15c73n] {
    background: rgba(45, 59, 68, 0.9);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .memorial-collapsed-back-link[b-2pzl15c73n] {
    background: rgba(34, 46, 53, 0.76);
    border-color: rgba(230, 198, 152, 0.16);
    color: rgba(249, 232, 204, 0.78);
}

body.night-mode .memorial-collapsed-back-link:hover[b-2pzl15c73n],
body.night-mode .memorial-collapsed-back-link:focus-visible[b-2pzl15c73n] {
    background: rgba(34, 46, 53, 0.92);
    border-color: rgba(230, 198, 152, 0.28);
    color: #F9E8CC;
}

/* Sidebar Overlay - Night Mode */
body.night-mode .sidebar-overlay[b-2pzl15c73n] {
    background: rgba(10, 18, 22, 0.5);
}

/* Scrollbar - Night Mode */
body.night-mode .memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.2);
}

body.night-mode .memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 154, 108, 0.35);
}

/* Guest Layout - Night Mode */
body.night-mode .memorial-guest-layout[b-2pzl15c73n] {
    background: #1A2A32;
}

body.night-mode .guest-menu-btn[b-2pzl15c73n] {
    background: rgba(45, 59, 68, 0.85);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .guest-menu-btn:hover[b-2pzl15c73n] {
    background: rgba(45, 59, 68, 0.95);
    border-color: rgba(196, 154, 108, 0.35);
}

body.night-mode .guest-menu-dots[b-2pzl15c73n] {
    color: #CFD8DC;
}

body.night-mode .guest-menu-dropdown[b-2pzl15c73n] {
    background: rgba(30, 46, 54, 0.97);
    border-color: rgba(196, 154, 108, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.night-mode .guest-menu-item[b-2pzl15c73n] {
    color: #E8F4F8;
}

body.night-mode .guest-menu-item:hover[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.1);
}

/* Atelier - Night Mode */
body.night-mode .memorial-atelier-backdrop[b-2pzl15c73n] {
    background: rgba(0, 0, 0, 0.6);
}

body.night-mode .memorial-atelier-wrapper[b-2pzl15c73n] {
    background: linear-gradient(170deg, #2A3640 0%, #253038 40%, #1E2830 100%);
    border-color: rgba(196, 154, 108, 0.12);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(196, 154, 108, 0.06);
}

/* Memorial Hero - Night Mode: more depth for carousel zone */
body.night-mode .memorial-hero[b-2pzl15c73n]::before {
    background: radial-gradient(ellipse 80% 55% at 50% 20%, rgba(196, 154, 108, 0.06) 0%, transparent 70%);
}

/* Portrait container: tighter tagline spacing below carousel */
body.night-mode .memorial-hero-tribute[b-2pzl15c73n] {
    color: #B0C4CC;
}

/* ============================================
   MOBILE-ONLY OWNER HEADER
   Hidden on desktop, shown only at ≤768px
   ============================================ */
.memorial-owner-header[b-2pzl15c73n] {
    display: none; /* Hidden on desktop — ALWAYS */
}

@media (max-width: 768px) {
    .memorial-owner-header[b-2pzl15c73n] {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        pointer-events: none;
    }

    .memorial-owner-header > *[b-2pzl15c73n] {
        pointer-events: all;
    }

    .memorial-sidebar-back-link[b-2pzl15c73n] {
        display: none;
    }

    .owner-back-link[b-2pzl15c73n] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: #6B5B4E;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        opacity: 0.7;
        transition: opacity 0.3s ease;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        background: rgba(253, 248, 240, 0.75);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .owner-back-link:hover[b-2pzl15c73n] {
        opacity: 1;
    }

    .owner-menu-wrapper[b-2pzl15c73n] {
        position: relative;
    }

    .owner-menu-btn[b-2pzl15c73n] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: rgba(253, 248, 240, 0.75);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }

    .owner-menu-btn:hover[b-2pzl15c73n] {
        opacity: 1;
    }

    .owner-menu-dots[b-2pzl15c73n] {
        font-size: 1.3rem;
        color: #6B5B4E;
        line-height: 1;
    }

    .owner-menu-backdrop[b-2pzl15c73n] {
        position: fixed;
        inset: 0;
        z-index: 99;
    }

    .owner-menu-dropdown[b-2pzl15c73n] {
        position: absolute;
        top: 48px;
        right: 0;
        min-width: 180px;
        background: rgba(253, 248, 240, 0.95);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-radius: 12px;
        border: 1px solid rgba(196, 154, 108, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        padding: 0.5rem 0;
        z-index: 100;
    }

    .owner-menu-item[b-2pzl15c73n] {
        display: block;
        width: 100%;
        padding: 0.7rem 1.2rem;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        color: #5A4A3F;
        text-decoration: none;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .owner-menu-item:hover[b-2pzl15c73n] {
        background: rgba(196, 154, 108, 0.1);
    }

    .owner-menu-separator[b-2pzl15c73n] {
        height: 1px;
        background: rgba(196, 154, 108, 0.15);
        margin: 0.3rem 0;
    }

    .owner-menu-logout[b-2pzl15c73n] {
        color: #A05A3C;
    }
}

/* Night mode for owner header */
body.night-mode .memorial-owner-header .owner-back-link[b-2pzl15c73n] {
    color: #CABFB5;
    background: rgba(40, 35, 30, 0.75);
}

body.night-mode .memorial-owner-header .owner-menu-btn[b-2pzl15c73n] {
    background: rgba(40, 35, 30, 0.75);
}

body.night-mode .memorial-owner-header .owner-menu-dots[b-2pzl15c73n] {
    color: #CABFB5;
}

body.night-mode .memorial-owner-header .owner-menu-dropdown[b-2pzl15c73n] {
    background: rgba(40, 35, 30, 0.95);
    border-color: rgba(196, 154, 108, 0.2);
}

body.night-mode .memorial-owner-header .owner-menu-item[b-2pzl15c73n] {
    color: #CABFB5;
}

body.night-mode .memorial-owner-header .owner-menu-item:hover[b-2pzl15c73n] {
    background: rgba(196, 154, 108, 0.15);
}

body.night-mode .memorial-owner-header .owner-menu-logout[b-2pzl15c73n] {
    color: #D4836B;
}
/* /Components/Pages/MemoriesAll.razor.rz.scp.css */
/* ===========================================
   MEMORIES ALL PAGE - MASONRY LAYOUT
   =========================================== */

/* Sidebar Overlay */
.sidebar-overlay[b-iw1lq54kp8] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
}

.sidebar-overlay.hidden[b-iw1lq54kp8] {
    display: none;
}

/* App Layout */
[b-iw1lq54kp8] .app-layout {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    overflow-x: hidden;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-iw1lq54kp8] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-iw1lq54kp8] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-iw1lq54kp8] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-iw1lq54kp8] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-iw1lq54kp8] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-iw1lq54kp8] .sidebar a:hover {
    color: #000;
}

[b-iw1lq54kp8] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-iw1lq54kp8] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-iw1lq54kp8] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-iw1lq54kp8] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

/* Button Styles */
[b-iw1lq54kp8] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-iw1lq54kp8] .btn:hover {
    background-color: #FADDAA;
}

[b-iw1lq54kp8] .btn-login {
    background-color: #FBCFA8;
}

/* Toggle Sidebar Button */
[b-iw1lq54kp8] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* ===========================================
   MAIN CONTENT - TWO COLUMN LAYOUT
   =========================================== */

[b-iw1lq54kp8] .messages-container {
    flex: 1;
    min-width: 0;
    margin-left: 280px;
    padding: 0;
    max-width: 1200px;
    box-sizing: border-box;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    background: #FAECDA;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "main-content sidebar-content";
    gap: 0;
}

[b-iw1lq54kp8] .messages-container.sidebar-hidden {
    margin-left: 0;
}

/* Page Header */
[b-iw1lq54kp8] .vault-header {
    grid-area: header;
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

[b-iw1lq54kp8] .vault-header h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: var(--mobile-hero-heading-weight);
    color: #2C2A28;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

[b-iw1lq54kp8] .vault-subtitle {
    /* inherited font-sans */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6B5B57;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Main Content Area (left column) */
[b-iw1lq54kp8] .main-content-area {
    grid-area: main-content;
    padding: 0 3rem 3rem 3rem;
    position: relative;
}

/* Sidebar Content Area (right column) */
[b-iw1lq54kp8] .sidebar-content-area {
    grid-area: sidebar-content;
    padding: 0 2rem 3rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: stretch;
}

/* ===========================================
   LOADING STATE - CANDLE ANIMATION
   =========================================== */

[b-iw1lq54kp8] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 3rem;
}

[b-iw1lq54kp8] .vault-loader {
    text-align: center;
    padding: 2rem;
}

[b-iw1lq54kp8] .vault-loader-image {
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
    animation: candleGlow-b-iw1lq54kp8 2s ease-in-out infinite alternate;
}

@keyframes candleGlow-b-iw1lq54kp8 {
    0% {
        opacity: 0.8;
        filter: brightness(1);
    }

    100% {
        opacity: 1;
        filter: brightness(1.15);
    }
}

[b-iw1lq54kp8] .vault-loader-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    color: #5A413A;
    margin-bottom: 0.5rem;
}

[b-iw1lq54kp8] .vault-loader-subtitle {
    /* inherited font-sans */
    font-size: 0.95rem;
    color: #8B7355;
    opacity: 0.8;
}

/* ===========================================
   MASONRY GRID LAYOUT
   =========================================== */

[b-iw1lq54kp8] .vault-masonry {
    column-count: 2;
    column-gap: 2rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

[b-iw1lq54kp8] .memory-section-card {
    column-span: all;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(123, 90, 83, 0.12);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.25rem;
}

[b-iw1lq54kp8] .draft-section-card {
    background: linear-gradient(180deg, rgba(255, 245, 232, 0.95), rgba(255, 250, 244, 0.9));
    border-color: rgba(220, 178, 112, 0.32);
}

[b-iw1lq54kp8] .memory-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #5A413A;
    margin-bottom: 0.25rem;
}

[b-iw1lq54kp8] .memory-section-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #7B5A53;
}

/* ===========================================
   MEMORY CARDS - MASONRY DESIGN
   =========================================== */

[b-iw1lq54kp8] .memory-card {
    break-inside: avoid;
    background: white;
    border: 1px solid #F0E6D2;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 15px rgba(43, 42, 40, 0.08);
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    display: inline-block;
}

[b-iw1lq54kp8] .memory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(43, 42, 40, 0.12);
    border-color: #E8DCC0;
}

/* Archived Card Styling */
[b-iw1lq54kp8] .memory-card.archived {
    opacity: 0.85;
    background: #F9F7F4;
    border-color: #E8E4DC;
}

[b-iw1lq54kp8] .memory-card.draft {
    background: linear-gradient(180deg, #fffefb 0%, #fff6eb 100%);
    border-color: #efd6ae;
    box-shadow: 0 4px 18px rgba(198, 152, 88, 0.12);
}

[b-iw1lq54kp8] .memory-card.archived:hover {
    opacity: 0.90;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(43, 42, 40, 0.08);
}

/* Card Header */
[b-iw1lq54kp8] .memory-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

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

[b-iw1lq54kp8] .memory-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #7B5A53;
}

[b-iw1lq54kp8] .memory-card-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

[b-iw1lq54kp8] .memory-loved-one-name {
    /* inherited font-sans */
    font-weight: 600;
    font-size: 0.9rem;
    color: #5A413A;
}

[b-iw1lq54kp8] .memory-date-badge {
    /* inherited font-sans */
    font-size: 0.8rem;
    color: #A67B5B;
    opacity: 0.8;
}

/* Card Body */
[b-iw1lq54kp8] .memory-card-body {
    margin-bottom: 1rem;
}

[b-iw1lq54kp8] .memory-image-container {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

[b-iw1lq54kp8] .memory-image-container img {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

[b-iw1lq54kp8] .memory-text-content {
    margin: 0.15rem 0 0.25rem;
}

[b-iw1lq54kp8] .memory-excerpt {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.85;
    color: #342A25;
    margin: 0;
}

[b-iw1lq54kp8] .memory-source-attribution {
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(240, 230, 210, 0.85);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

[b-iw1lq54kp8] .memory-source-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #A67B5B;
}

[b-iw1lq54kp8] .memory-source-author {
    font-size: 0.86rem;
    font-weight: 600;
    color: #6E5048;
}

/* Card Footer */
[b-iw1lq54kp8] .memory-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid #F0E6D2;
}

[b-iw1lq54kp8] .memory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[b-iw1lq54kp8] .category-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(251, 207, 168, 0.25);
    border-radius: 999px;
    /* inherited font-sans */
    font-size: 0.75rem;
    color: #7B5A53;
}

[b-iw1lq54kp8] .category-icon {
    font-size: 0.7rem;
}

[b-iw1lq54kp8] .archived-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: rgba(139, 139, 139, 0.15);
    border: 1px solid rgba(139, 139, 139, 0.2);
    border-radius: 999px;
    /* inherited font-sans */
    font-size: 0.7rem;
    color: #6B6B6B;
    font-weight: 500;
}

[b-iw1lq54kp8] .draft-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: rgba(234, 190, 108, 0.18);
    border: 1px solid rgba(198, 152, 88, 0.28);
    border-radius: 999px;
    font-size: 0.72rem;
    color: #8a6033;
    font-weight: 600;
}

[b-iw1lq54kp8] .memory-chat-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A67B5B;
}

[b-iw1lq54kp8] .memory-chat-btn:hover {
    background-color: rgba(167, 123, 91, 0.1);
    color: #7B5A53;
    transform: scale(1.1);
}

[b-iw1lq54kp8] .draft-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

[b-iw1lq54kp8] .draft-action-btn {
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-iw1lq54kp8] .draft-action-btn.approve {
    background: #e6c88d;
    color: #5a413a;
}

[b-iw1lq54kp8] .draft-action-btn.approve:hover {
    background: #dcb270;
}

[b-iw1lq54kp8] .draft-action-btn.dismiss {
    background: rgba(123, 90, 83, 0.08);
    color: #7B5A53;
}

[b-iw1lq54kp8] .draft-action-btn.dismiss:hover {
    background: rgba(123, 90, 83, 0.16);
}

[b-iw1lq54kp8] .draft-expiry {
    margin-top: 0.85rem;
    font-size: 0.76rem;
    color: #9b7856;
}

/* Three Dots Menu */
[b-iw1lq54kp8] .three-dots-menu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px) scale(0.94);
    z-index: 10;
}

[b-iw1lq54kp8] .memory-card:hover .three-dots-menu,
[b-iw1lq54kp8] .memory-card:focus-within .three-dots-menu,
[b-iw1lq54kp8] .memory-card:has(.vault-card-dropdown) .three-dots-menu {
    opacity: 0.72;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

[b-iw1lq54kp8] .three-dots-menu:hover {
    background-color: rgba(167, 123, 91, 0.1);
    opacity: 1;
    transform: scale(1.1);
}

[b-iw1lq54kp8] .three-dots-menu svg {
    width: 16px;
    height: 16px;
    fill: #7B5A53;
}

/* Dropdown Menu */
[b-iw1lq54kp8] .vault-card-dropdown {
    position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    background: white;
    border: 1px solid #E8DCC0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(43, 42, 40, 0.15);
    z-index: 1000;
    min-width: 140px;
    overflow: hidden;
}

[b-iw1lq54kp8] .vault-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #7B5A53;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

[b-iw1lq54kp8] .vault-dropdown-item:hover {
    background-color: #F5E6D3;
}

[b-iw1lq54kp8] .vault-dropdown-item svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.7;
}

.memory-action-sheet-backdrop[b-iw1lq54kp8] {
    position: fixed;
    inset: 0;
    z-index: 1205;
    background: rgba(43, 42, 40, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    touch-action: none;
}

/* Keep the global host button below the temporary page-level sheet. */
:global(.app-container:has(.memory-action-sheet) .floating-host-container)[b-iw1lq54kp8] {
    z-index: 1204;
}

.memory-action-sheet[b-iw1lq54kp8] {
    position: fixed;
    left: 50%;
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    width: min(92vw, 380px);
    z-index: 1210;
    background: #fffaf5;
    border: 1px solid rgba(216, 168, 138, 0.5);
    border-radius: 22px;
    padding: 0.4rem 0;
    box-shadow: 0 28px 58px rgba(43, 42, 40, 0.24);
    transform: translate(-50%, 18px);
    animation: memory-sheet-rise-b-iw1lq54kp8 0.2s ease-out forwards;
    overflow: hidden;
}

.memory-action-sheet-item[b-iw1lq54kp8] {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.2rem;
    color: #4b2e2e;
    font-size: 0.96rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.memory-action-sheet-item:hover[b-iw1lq54kp8],
.memory-action-sheet-item:focus-visible[b-iw1lq54kp8] {
    background: #f7f0ea;
    outline: none;
}

.memory-action-sheet-item:active[b-iw1lq54kp8] {
    background: #efe3da;
}

.memory-action-sheet-item.danger[b-iw1lq54kp8] {
    color: #a94636;
}

.memory-action-sheet-item svg[b-iw1lq54kp8] {
    flex: 0 0 auto;
    color: currentColor;
}

@keyframes memory-sheet-rise-b-iw1lq54kp8 {
    from {
        opacity: 0;
        transform: translate(-50%, 18px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ===========================================
   FILTERS PANEL - STICKY SIDEBAR
   =========================================== */

[b-iw1lq54kp8] .filters-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #E8DCC0;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 28px rgba(124, 90, 83, 0.12);
    margin-bottom: 2rem;
    position: sticky;
    top: 2rem;
}

[b-iw1lq54kp8] .filters-panel-header {
    /* inherited font-sans */
    font-size: 1.05rem;
    font-weight: 600;
    color: #5A413A;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}

[b-iw1lq54kp8] .filters-panel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

[b-iw1lq54kp8] .mobile-filters-trigger-row,
[b-iw1lq54kp8] .mobile-filters-backdrop {
    display: none;
}

[b-iw1lq54kp8] .mobile-filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #D8A88A;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #5A413A;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
}

[b-iw1lq54kp8] .mobile-filters-trigger.has-active {
    background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}

[b-iw1lq54kp8] .mobile-filters-trigger-badge {
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7B5A53;
    color: #fff;
    font-size: 0.8rem;
}

[b-iw1lq54kp8] .mobile-filters-close {
    display: none;
    border: none;
    border-radius: 999px;
    background: rgba(123, 90, 83, 0.1);
    color: #5A413A;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Search Section */
[b-iw1lq54kp8] .search-section {
    margin-bottom: 1.5rem;
}

[b-iw1lq54kp8] .search-input {
    width: 100%;
    padding: 0.82rem 1.05rem;
    border: 1px solid rgba(216, 168, 138, 0.28);
    border-radius: 999px;
    /* inherited font-sans */
    font-size: 0.9rem;
    background: rgba(255, 248, 239, 0.94);
    color: #2C2A28;
    transition: all 0.2s ease;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 4px rgba(123, 90, 83, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.72);
}

[b-iw1lq54kp8] .search-input:focus,
[b-iw1lq54kp8] .search-input:focus-visible {
    outline: none;
    border-color: rgba(216, 168, 138, 0.62);
    background: rgba(255, 251, 246, 0.98);
    box-shadow:
        0 0 0 4px rgba(251, 207, 168, 0.34),
        inset 0 1px 4px rgba(123, 90, 83, 0.06);
}

[b-iw1lq54kp8] .search-input::placeholder {
    color: #A67B5B;
    opacity: 0.7;
}

[b-iw1lq54kp8] .filters-panel-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.75rem;
}

[b-iw1lq54kp8] .filters-panel-section:last-of-type {
    margin-bottom: 0;
}

[b-iw1lq54kp8] .filters-panel-label {
    /* inherited font-sans */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A67B5B;
}

[b-iw1lq54kp8] .filter-pill-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    position: relative;
}

[b-iw1lq54kp8] .filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(216, 168, 138, 0.08);
    background: rgba(255, 248, 240, 0.48);
    /* inherited font-sans */
    font-size: 0.9rem;
    color: #6B5B57;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

[b-iw1lq54kp8] .filter-pill:hover {
    border-color: rgba(216, 168, 138, 0.2);
    background: rgba(255, 246, 237, 0.76);
    box-shadow: 0 4px 12px rgba(124, 90, 83, 0.06);
    transform: translateY(-1px);
}

[b-iw1lq54kp8] .filter-pill:focus-visible {
    outline: 2px solid rgba(123, 90, 83, 0.6);
    outline-offset: 2px;
}

[b-iw1lq54kp8] .filter-pill.active {
    background: linear-gradient(135deg, #FFF4EA, #F6D3BF);
    border-color: #D8A88A;
    color: #4B2E2E;
    box-shadow: 0 8px 18px rgba(123, 90, 83, 0.13);
    font-weight: 600;
}

[b-iw1lq54kp8] .filters-panel-link {
    background: none;
    border: none;
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #7B5A53;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

[b-iw1lq54kp8] .filters-panel-link:hover {
    color: #5A413A;
}

/* Reset Filters */
[b-iw1lq54kp8] .filters-reset-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E8DCC0;
}

[b-iw1lq54kp8] .reset-filters-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fffaf6;
    border: none;
    border-radius: 999px;
    /* inherited font-sans */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(123, 90, 83, 0.2);
}

[b-iw1lq54kp8] .reset-filters-btn:hover {
    background: linear-gradient(135deg, #6B4A43, #915847);
    transform: translateY(-1px);
}

/* ===========================================
   INVITATION CARD
   =========================================== */

[b-iw1lq54kp8] .invitation-card {
    background: linear-gradient(165deg, rgba(255, 245, 237, 0.95), rgba(250, 227, 208, 0.92));
    border: 1px solid rgba(216, 168, 138, 0.45);
    border-radius: 24px;
    padding: 2.4rem 2rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(123, 90, 83, 0.18);
}

[b-iw1lq54kp8] .vault-cta-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 auto 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #C27A4A;
    box-shadow: 0 12px 30px rgba(194, 122, 74, 0.25);
}

[b-iw1lq54kp8] .vault-cta h2 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 300;
    color: #3F2C2C;
    margin-bottom: 0.85rem;
}

[b-iw1lq54kp8] .vault-cta p {
    /* inherited font-sans */
    font-size: 0.98rem;
    color: #6B5B57;
    margin-bottom: 1.8rem;
    line-height: 1.65;
}

[b-iw1lq54kp8] .cta-button {
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fffaf6;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    /* inherited font-sans */
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 16px 34px rgba(123, 90, 83, 0.24);
}

[b-iw1lq54kp8] .cta-button:hover {
    background: linear-gradient(135deg, #6B4A43, #915847);
    transform: translateY(-2px);
}

/* ===========================================
   EMPTY STATE
   =========================================== */

[b-iw1lq54kp8] .empty-state {
    break-inside: avoid;
    column-span: all;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 1px dashed #E8DCC0;
}

[b-iw1lq54kp8] .filtered-empty-state {
    width: min(100%, 620px);
    max-width: 620px;
    margin: 0 auto 1.5rem;
    padding: 3rem 2.4rem;
    background:
        radial-gradient(circle at 12% 10%, rgba(251, 207, 168, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(255, 250, 243, 0.97), rgba(250, 236, 218, 0.95));
    border: 1px solid rgba(216, 168, 138, 0.34);
    box-shadow:
        0 18px 44px rgba(123, 90, 83, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

[b-iw1lq54kp8] .empty-state h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: #5A413A;
    margin-bottom: 0.75rem;
}

[b-iw1lq54kp8] .empty-state p {
    /* inherited font-sans */
    font-size: 1rem;
    color: #8B7355;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

[b-iw1lq54kp8] .filtered-empty-state p {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

[b-iw1lq54kp8] .empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

[b-iw1lq54kp8] .empty-state-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fffaf6;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    /* inherited font-sans */
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-iw1lq54kp8] .empty-state-action:hover {
    background: linear-gradient(135deg, #6B4A43, #915847);
    transform: translateY(-2px);
}

[b-iw1lq54kp8] .empty-state-action.secondary {
    background: rgba(255, 255, 255, 0.42);
    color: #6B4A43;
    border: 1px solid rgba(123, 90, 83, 0.24);
    box-shadow: none;
}

[b-iw1lq54kp8] .empty-state-action.secondary:hover {
    background: rgba(255, 248, 240, 0.82);
    border-color: rgba(123, 90, 83, 0.38);
}

[b-iw1lq54kp8] .empty-state-action:focus-visible {
    outline: 2px solid rgba(123, 90, 83, 0.64);
    outline-offset: 4px;
}

/* ===========================================
   LOAD MORE
   =========================================== */

[b-iw1lq54kp8] .load-more-container {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1rem;
}

[b-iw1lq54kp8] .load-more-btn {
    background: transparent;
    color: #6A453D;
    border: none;
    border-bottom: 1px solid rgba(106, 69, 61, 0.32);
    padding: 0.35rem 0.15rem 0.22rem;
    border-radius: 0;
    font-size: 0.96rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: none;
}

[b-iw1lq54kp8] .load-more-btn:hover:not(:disabled) {
    color: #4B2E2E;
    border-bottom-color: rgba(75, 46, 46, 0.68);
    transform: translateY(-1px);
}

[b-iw1lq54kp8] .load-more-btn:focus-visible {
    outline: 2px solid rgba(216, 168, 138, 0.72);
    outline-offset: 5px;
    border-bottom-color: transparent;
}

[b-iw1lq54kp8] .load-more-btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
    border-bottom-color: rgba(106, 69, 61, 0.18);
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 1024px) {
    [b-iw1lq54kp8] .toggle-sidebar {
        display: none;
    }

    [b-iw1lq54kp8] .app-layout {
        padding-top: 60px;
    }

    [b-iw1lq54kp8] .messages-container {
        margin-left: 0 !important;
        margin-top: 70px;
        padding: 1rem;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main-content"
            "sidebar-content";
    }

    [b-iw1lq54kp8] .main-content-area {
        padding: 1rem 0;
    }

    [b-iw1lq54kp8] .sidebar-content-area {
        padding: 1rem 0 2rem;
    }

    [b-iw1lq54kp8] .filters-panel {
        display: none;
        position: static;
        margin-bottom: 1.5rem;
    }

    [b-iw1lq54kp8] .filters-panel.mobile-open {
        display: block;
        position: fixed;
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
        bottom: calc(1rem + env(safe-area-inset-bottom));
        top: auto;
        z-index: 1300;
        margin: 0;
        max-height: min(78vh, calc(100dvh - 6rem));
        overflow-y: auto;
        padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
    }

    [b-iw1lq54kp8] .three-dots-menu {
        opacity: 0.58;
        pointer-events: auto;
        transform: none;
        background: rgba(255, 248, 240, 0.42);
    }

    [b-iw1lq54kp8] .vault-masonry {
        column-count: 2;
        column-gap: 1.2rem;
    }

    [b-iw1lq54kp8] .mobile-filters-trigger-row {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 1rem;
    }

    [b-iw1lq54kp8] .mobile-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(43, 42, 40, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    [b-iw1lq54kp8] .mobile-filters-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    [b-iw1lq54kp8] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-iw1lq54kp8] .sidebar.visible {
        transform: translateX(0);
    }

    [b-iw1lq54kp8] .sidebar.hidden {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    [b-iw1lq54kp8] .messages-container {
        padding: 1rem var(--mobile-page-margin);
        margin-top: 60px;
    }

    [b-iw1lq54kp8] .vault-header {
        padding: 1.5rem var(--mobile-page-margin);
    }

    [b-iw1lq54kp8] .vault-header h1 {
        font-size: 2rem;
    }

    [b-iw1lq54kp8] .vault-subtitle {
        font-size: 1rem;
    }

    [b-iw1lq54kp8] .filters-panel {
        padding: 1.4rem 1.2rem;
    }

    [b-iw1lq54kp8] .filter-pill {
        font-size: 0.85rem;
        padding: 0.4rem 0.9rem;
    }

    [b-iw1lq54kp8] .filters-panel.mobile-open {
        left: max(0.85rem, env(safe-area-inset-left));
        right: max(0.85rem, env(safe-area-inset-right));
        bottom: calc(0.85rem + env(safe-area-inset-bottom));
    }

    [b-iw1lq54kp8] .invitation-card {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 640px) {
    [b-iw1lq54kp8] .vault-masonry {
        column-count: 1;
        padding: 0 1rem 3rem;
    }

    [b-iw1lq54kp8] .filtered-empty-state {
        width: 100%;
        padding: 2.4rem 1.35rem;
    }

    [b-iw1lq54kp8] .empty-state-actions {
        flex-direction: column;
        align-items: stretch;
    }

    [b-iw1lq54kp8] .empty-state-action {
        width: 100%;
    }
}

@media (max-width: 480px) {
    [b-iw1lq54kp8] .vault-header h1 {
        font-size: 1.8rem;
    }

    [b-iw1lq54kp8] .memory-card {
        padding: 1.2rem;
    }

    [b-iw1lq54kp8] .mobile-top-bar {
        display: flex;
    }
}

/* ===========================================
   QUICK ADD MEMORY CARD
   =========================================== */

[b-iw1lq54kp8] .quick-add-memory-card {
    appearance: none;
    break-inside: avoid;
    background:
        radial-gradient(circle at 18% 12%, rgba(251, 207, 168, 0.28), transparent 34%),
        linear-gradient(165deg, rgba(255, 253, 248, 0.99), rgba(250, 240, 228, 0.96));
    border: 1px solid rgba(232, 220, 192, 0.72);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
    font: inherit;
    text-align: inherit;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    display: inline-block;
    order: -1;
    box-shadow:
        0 10px 26px rgba(123, 90, 83, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

[b-iw1lq54kp8] .quick-add-memory-card:hover {
    background:
        radial-gradient(circle at 18% 12%, rgba(251, 207, 168, 0.36), transparent 36%),
        linear-gradient(165deg, rgba(255, 253, 248, 1), rgba(250, 235, 220, 0.98));
    border-color: rgba(216, 168, 138, 0.42);
    transform: translateY(-3px);
    box-shadow:
        0 14px 30px rgba(123, 90, 83, 0.11),
        0 0 0 4px rgba(251, 207, 168, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[b-iw1lq54kp8] .quick-add-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

[b-iw1lq54kp8] .quick-add-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(123, 90, 83, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7B5A53;
    transition: all 0.3s ease;
}

[b-iw1lq54kp8] .quick-add-memory-card:hover .quick-add-icon {
    background: rgba(123, 90, 83, 0.15);
    transform: scale(1.1);
}

[b-iw1lq54kp8] .quick-add-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #7B5A53;
    font-style: italic;
    opacity: 0.85;
}

[b-iw1lq54kp8] .quick-add-memory-card:hover .quick-add-text {
    opacity: 1;
    color: #5A413A;
}

/* Footer alignment to follow sidebar on desktop */
[b-iw1lq54kp8] .main-footer {
    margin-left: 280px;
    width: calc(100% - 280px);
    margin-top: 0;
}

[b-iw1lq54kp8] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

@media (max-width: 992px) {
    [b-iw1lq54kp8] .main-footer {
        margin-left: 0;
        width: 100%;
    }
}

/* Memories mobile polish - keeps the memory cards but fixes the page frame. */
@media (max-width: 1024px) {
    [b-iw1lq54kp8] .mobile-floating-header {
        z-index: 1200;
        background:
            linear-gradient(180deg, rgba(250, 236, 218, 0.97) 0%, rgba(250, 236, 218, 0.86) 72%, rgba(250, 236, 218, 0) 100%);
    }

    .app-layout[b-iw1lq54kp8],
    [b-iw1lq54kp8] .app-layout {
        display: block;
        width: 100%;
        max-width: 100vw;
        padding-top: 60px;
        overflow-x: hidden;
        background-color: #FAECDA;
    }

    .messages-container[b-iw1lq54kp8],
    [b-iw1lq54kp8] .messages-container,
    .messages-container.sidebar-hidden[b-iw1lq54kp8],
    [b-iw1lq54kp8] .messages-container.sidebar-hidden {
        width: 100%;
        max-width: 720px;
        min-width: 0;
        margin: 0 auto !important;
        padding: 0 0 44px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main-content"
            "sidebar-content";
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .vault-header[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-header {
        width: 100%;
        max-width: 680px;
        padding: 30px 18px 22px;
        box-sizing: border-box;
    }

    .vault-header h1[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-header h1 {
        font-size: clamp(2.05rem, 7vw, 2.7rem);
        line-height: 1.1;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .vault-subtitle[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-subtitle {
        max-width: 36rem;
        font-size: clamp(1.05rem, 2.8vw, 1.25rem);
        line-height: 1.55;
    }

    .main-content-area[b-iw1lq54kp8],
    [b-iw1lq54kp8] .main-content-area,
    .sidebar-content-area[b-iw1lq54kp8],
    [b-iw1lq54kp8] .sidebar-content-area {
        width: 100%;
        padding: 0 18px 2.5rem;
        box-sizing: border-box;
    }

    .mobile-filters-trigger-row[b-iw1lq54kp8],
    [b-iw1lq54kp8] .mobile-filters-trigger-row {
        margin-bottom: 1rem;
    }

    .vault-masonry[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-masonry {
        width: 100%;
        padding: 0;
        column-gap: 1rem;
    }

    .empty-state[b-iw1lq54kp8],
    [b-iw1lq54kp8] .empty-state,
    .filtered-empty-state[b-iw1lq54kp8],
    [b-iw1lq54kp8] .filtered-empty-state,
    .invitation-card[b-iw1lq54kp8],
    [b-iw1lq54kp8] .invitation-card {
        width: 100%;
        max-width: none;
        margin: 0 0 1.6rem;
        box-sizing: border-box;
    }
}

@media (max-width: 680px) {
    .messages-container[b-iw1lq54kp8],
    [b-iw1lq54kp8] .messages-container,
    .messages-container.sidebar-hidden[b-iw1lq54kp8],
    [b-iw1lq54kp8] .messages-container.sidebar-hidden {
        max-width: 680px;
        padding-bottom: 40px;
    }

    .vault-header[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-header {
        padding: 24px var(--mobile-page-margin, 16px) 16px;
    }

    .vault-header h1[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-header h1 {
        font-size: clamp(2.05rem, 9.2vw, 2.35rem);
        line-height: 1.12;
    }

    .vault-subtitle[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-subtitle {
        font-size: clamp(1.02rem, 4.4vw, 1.16rem);
        line-height: 1.55;
    }

    .main-content-area[b-iw1lq54kp8],
    [b-iw1lq54kp8] .main-content-area,
    .sidebar-content-area[b-iw1lq54kp8],
    [b-iw1lq54kp8] .sidebar-content-area {
        padding: 0 var(--mobile-page-margin, 16px) 2.5rem;
    }

    .vault-masonry[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-masonry {
        column-count: 1;
        padding: 0;
    }

    .memory-card[b-iw1lq54kp8],
    [b-iw1lq54kp8] .memory-card,
    .quick-add-memory-card[b-iw1lq54kp8],
    [b-iw1lq54kp8] .quick-add-memory-card {
        border-radius: 18px;
        padding: 1.2rem 1.25rem 1.25rem;
        margin-bottom: 1.6rem;
        box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
    }

    .empty-state[b-iw1lq54kp8],
    [b-iw1lq54kp8] .empty-state {
        border-radius: 18px;
        padding: 3rem 1.35rem;
        box-shadow: 0 14px 34px rgba(79, 59, 52, 0.1);
    }

    .empty-state h3[b-iw1lq54kp8],
    [b-iw1lq54kp8] .empty-state h3 {
        font-size: clamp(1.65rem, 7.5vw, 2rem);
        line-height: 1.14;
    }

    .empty-state p[b-iw1lq54kp8],
    [b-iw1lq54kp8] .empty-state p {
        font-size: clamp(1rem, 4.2vw, 1.12rem);
        line-height: 1.58;
    }

    .memory-excerpt[b-iw1lq54kp8],
    [b-iw1lq54kp8] .memory-excerpt {
        font-size: clamp(1rem, 4.4vw, 1.12rem);
        line-height: 1.72;
    }
}

@media (max-width: 420px) {
    .vault-header[b-iw1lq54kp8],
    [b-iw1lq54kp8] .vault-header {
        padding-top: 22px;
    }

    .memory-card-head[b-iw1lq54kp8],
    [b-iw1lq54kp8] .memory-card-head {
        gap: 0.75rem;
    }

    .memory-avatar[b-iw1lq54kp8],
    [b-iw1lq54kp8] .memory-avatar,
    .memory-avatar-placeholder[b-iw1lq54kp8],
    [b-iw1lq54kp8] .memory-avatar-placeholder {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/OracleChamber.razor.rz.scp.css */
:host[b-l0fyn2snb0] {
    display: block;
    background: #130c0a;
    overflow-x: hidden;
}

[b-l0fyn2snb0] .app-layout {
    display: flex;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #130c0a;
    padding-top: 0;
}

.oracle-chamber-container[b-l0fyn2snb0] {
    flex: 1 1 auto;
    width: calc(100vw - 280px);
    max-width: calc(100vw - 280px);
    margin-left: 280px;
    min-height: 100vh;
    position: relative;
    transition: margin-left 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.oracle-chamber-container.sidebar-hidden[b-l0fyn2snb0] {
    margin-left: 0;
    width: 100vw;
    max-width: 100%;
}

.oracle-chamber-background[b-l0fyn2snb0] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* filter: saturate(1.1) brightness(0.67); */
}

.oracle-chamber-overlay[b-l0fyn2snb0] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(118, 73, 40, 0.15), rgba(11, 6, 4, 0.75));
}

.oracle-chamber-content[b-l0fyn2snb0] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.8rem);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.oracle-loader[b-l0fyn2snb0] {
    width: min(720px, 100%);
    margin: 0 auto;
    min-height: 420px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1d8b8;
    font-family: var(--font-serif);
    font-size: 1.45rem;
    background: rgba(12, 7, 5, 0.55);
    border: 1px solid rgba(220, 179, 132, 0.2);
}

.oracle-message[b-l0fyn2snb0] {
    width: min(720px, 100%);
    margin: 0.85rem auto 0;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    line-height: 1.4;
}

.oracle-message.info[b-l0fyn2snb0] {
    color: #f8e7cf;
    background: rgba(58, 41, 22, 0.72);
    border: 1px solid rgba(224, 178, 127, 0.32);
}

.oracle-message.error[b-l0fyn2snb0] {
    color: #ffe4da;
    background: rgba(96, 30, 30, 0.66);
    border: 1px solid rgba(230, 155, 144, 0.38);
}

[b-l0fyn2snb0] .loved-one-chat-sidebar {
    width: 280px;
    background-color: #fff2ec !important;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

[b-l0fyn2snb0] .loved-one-chat-sidebar.hidden {
    transform: translateX(-100%);
}

[b-l0fyn2snb0] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

[b-l0fyn2snb0] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-l0fyn2snb0] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

.loved-one-chat-sidebar .avatar[b-l0fyn2snb0] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #f3c4af;
    margin-bottom: 0.9rem;
}

.loved-one-chat-sidebar h2[b-l0fyn2snb0] {
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
    text-align: center;
    color: #4b2e2e;
    font-family: var(--font-serif);
}

.loved-one-chat-sidebar p[b-l0fyn2snb0] {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #6a504b;
    text-align: center;
    line-height: 1.45;
}

.pen-pal-sidebar-block[b-l0fyn2snb0] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.85rem 0 1rem;
}

.loved-one-chat-sidebar .pen-pal-invite-btn[b-l0fyn2snb0] {
    width: 100%;
    background: transparent !important;
    border: 1px solid rgba(206, 160, 128, 0.7);
    border-radius: 16px;
    padding: 0.7rem 0.9rem;
    color: #4b2e2e;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 6px 14px rgba(122, 92, 70, 0.12);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.loved-one-chat-sidebar .pen-pal-invite-btn:hover[b-l0fyn2snb0] {
    background: rgba(255, 228, 210, 0.6) !important;
    border-color: rgba(186, 130, 95, 0.75);
    transform: translateY(-1px);
}

.pen-pal-icon[b-l0fyn2snb0] {
    font-size: 1.1rem;
}

[b-l0fyn2snb0] .sidebar-bottom.pinned {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    flex-shrink: 0;
    z-index: auto !important;
}

[b-l0fyn2snb0] .loved-one-chat-toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

.sidebar-overlay[b-l0fyn2snb0] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 9;
}

.sidebar-overlay.hidden[b-l0fyn2snb0] {
    display: none;
}

@media (max-width: 1024px) {
    [b-l0fyn2snb0] .loved-one-chat-toggle {
        display: none !important;
    }

    .oracle-chamber-container[b-l0fyn2snb0] {
        margin-left: 0;
        width: 100%;
        min-height: calc(100vh - 60px);
    }

    .oracle-chamber-content[b-l0fyn2snb0] {
        padding-top: 1rem;
    }

}

@media (max-width: 768px) {
    .oracle-chamber-content[b-l0fyn2snb0] {
        padding: 0.8rem 0.65rem 1.2rem;
    }
}
/* /Components/Pages/Oracles.razor.rz.scp.css */
:host[b-5g2zqcp57o] {
    display: block;
    background: #fdf5f0;
}

[b-5g2zqcp57o] .app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
}

/* ─── Main Container ─── */

.oracles-container[b-5g2zqcp57o] {
    flex: 1;
    max-width: 1120px;
    margin: 0 auto;
    margin-left: 280px;
    min-width: 0;
    padding: 3rem 2rem 2rem;
    box-sizing: border-box;
    transition: margin-left 0.3s ease;
}

.oracles-container.sidebar-hidden[b-5g2zqcp57o] {
    margin-left: 0;
    max-width: 1120px;
}

/* ─── Hero ─── */

.oracles-hero[b-5g2zqcp57o] {
    text-align: center;
    margin: 0 auto 64px;
    max-width: 880px;
}

.oracles-hero h1[b-5g2zqcp57o] {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    font-weight: var(--mobile-hero-heading-weight);
    color: #2C2A28;
    margin: 0 0 1rem 0;
}

.oracles-hero p[b-5g2zqcp57o] {
    /* inherited font-sans */
    font-size: 1.15rem;
    line-height: 1.6;
    color: #6B5B57;
    margin: 0 auto;
    max-width: 600px;
    letter-spacing: 0.01em;
}

/* ─── Oracle Flow Steps ─── */

.oracle-flow[b-5g2zqcp57o] {
    margin: 34px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 22px;
    background: #fff9f5;
    border: 1px solid #efddd0;
    box-shadow: 0 8px 24px rgba(95, 63, 48, 0.07);
    padding: 20px 32px;
}

.flow-step[b-5g2zqcp57o] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.flow-icon-wrapper[b-5g2zqcp57o] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f6e2d6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flow-icon-wrapper svg[b-5g2zqcp57o] {
    width: 28px;
    height: 28px;
    color: #8d6756;
}

.flow-text[b-5g2zqcp57o] {
    text-align: left;
}

.flow-text strong[b-5g2zqcp57o] {
    display: block;
    color: #4f3328;
    font-size: 1.35rem;
    line-height: 1.15;
    /* inherited font-sans */
    font-weight: 700;
}

.flow-text small[b-5g2zqcp57o] {
    display: block;
    color: #8f6f62;
    font-size: 0.95rem;
    margin-top: 3px;
}

.flow-arrow[b-5g2zqcp57o] {
    color: #d1ab95;
    font-size: 1.8rem;
    line-height: 1;
    margin: 0 24px;
}

/* ─── Section Layout ─── */

.oracle-section[b-5g2zqcp57o] {
    margin: 0 auto 72px;
    max-width: 1020px;
}

/* Featured section: centered heading + filters stacked below */
.section-header-centered[b-5g2zqcp57o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

/* All oracles: left-aligned heading + filters stacked below */
.section-header-stacked[b-5g2zqcp57o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
}

.oracle-section h2[b-5g2zqcp57o] {
    margin: 0;
    font-family: var(--font-serif);
    color: #4b2f24;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    font-weight: 500;
}

/* ─── Filter Pills ─── */

.oracle-filters[b-5g2zqcp57o] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: center;
}

.section-header-stacked .oracle-filters[b-5g2zqcp57o] {
    justify-content: flex-start;
}

.oracle-filter[b-5g2zqcp57o] {
    border: 1px solid #e5cdb8;
    border-radius: 999px;
    padding: 10px 18px;
    background: #fff8f3;
    color: #734f40;
    font-size: 0.98rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(95, 63, 48, 0.04);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* inherited font-sans */
}

.oracle-filter:hover[b-5g2zqcp57o] {
    background: #f8e5d7;
    border-color: #ddc0ac;
}

.oracle-filter.active[b-5g2zqcp57o] {
    background: #efd4bf;
    border-color: #d6b299;
    color: #4a2f24;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(95, 63, 48, 0.08);
}

/* ─── Card Role Chips ─── */

.card-role-chips[b-5g2zqcp57o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 10px;
}

.card-role-chip[b-5g2zqcp57o] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f8ece3, #f3dfd2);
    border: 1px solid #e8d0c0;
    color: #6f4e3d;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}

.featured-card .card-role-chips[b-5g2zqcp57o] {
    margin-top: 12px;
}

.featured-card .card-role-chip[b-5g2zqcp57o] {
    padding: 5px 14px;
    font-size: 0.85rem;
}

/* ─── Featured Grid ─── */

.featured-grid[b-5g2zqcp57o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.featured-card[b-5g2zqcp57o] {
    background: #fff9f4;
    border: 1px solid #eedfd3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(91, 59, 45, 0.07);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.featured-card:hover[b-5g2zqcp57o] {
    box-shadow: 0 10px 36px rgba(91, 59, 45, 0.12);
    transform: translateY(-2px);
}

.card-image-wrapper[b-5g2zqcp57o] {
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.card-image-wrapper img[b-5g2zqcp57o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.featured-card:hover .card-image-wrapper img[b-5g2zqcp57o] {
    transform: scale(1.03);
}

.card-content[b-5g2zqcp57o] {
    padding: 26px 28px 28px;
}

.featured-card h3[b-5g2zqcp57o] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1.08;
    color: #4b2f24;
    font-weight: 500;
}

.featured-card .role[b-5g2zqcp57o] {
    margin: 8px 0 0;
    color: #8a6d60;
    font-size: 1.1rem;
    font-style: italic;
}

.featured-card .description[b-5g2zqcp57o] {
    margin: 13px 0 0;
    color: #5f463b;
    font-size: 0.97rem;
    line-height: 1.55;
}

/* ─── Card Buttons ─── */

.card-actions[b-5g2zqcp57o] {
    margin-top: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-primary[b-5g2zqcp57o],
.btn-secondary[b-5g2zqcp57o],
.btn-outline[b-5g2zqcp57o] {
    text-decoration: none;
    border-radius: 999px;
    font-size: 1rem;
    padding: 12px 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    cursor: pointer;
    /* inherited font-sans */
}

.btn-primary[b-5g2zqcp57o] {
    border: 1px solid #c9a08a;
    background: #3d2b22;
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover[b-5g2zqcp57o] {
    background: #4f3a2f;
}

.btn-secondary[b-5g2zqcp57o] {
    border: 1px solid #d8c0b0;
    background: #fffaf7;
    color: #6a4a3d;
}

.btn-secondary:hover[b-5g2zqcp57o] {
    background: #f5e8de;
}

.coming-soon-badge[b-5g2zqcp57o],
.badge[b-5g2zqcp57o] {
    margin-top: 20px;
    display: inline-flex;
    border-radius: 999px;
    border: 1px solid #e5c6b5;
    background: #f3ddd1;
    color: #835f50;
    font-size: 1rem;
    padding: 10px 24px;
}

.lifecycle-badge[b-5g2zqcp57o] {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #e5c6b5;
    background: #f3ddd1;
    color: #835f50;
    font-size: 1rem;
    line-height: 1;
    padding: 10px 24px;
}

.lifecycle-badge--sunsetting[b-5g2zqcp57o] {
    border-color: #d6b67d;
    background: #f5ead1;
    color: #745a23;
}

.lifecycle-badge--retired[b-5g2zqcp57o],
.lifecycle-badge--draft[b-5g2zqcp57o] {
    border-color: #d4ccc6;
    background: #eee8e3;
    color: #6f625c;
}

.card-actions .coming-soon-badge[b-5g2zqcp57o],
.card-actions .lifecycle-badge[b-5g2zqcp57o] {
    margin-top: 0;
}

/* ─── All Oracles Grid ─── */

.oracle-masonry-grid[b-5g2zqcp57o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.oracle-card[b-5g2zqcp57o] {
    border: 1px solid #eddfd4;
    background: #fff9f4;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(91, 59, 45, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.oracle-card:hover[b-5g2zqcp57o] {
    box-shadow: 0 8px 30px rgba(91, 59, 45, 0.11);
    transform: translateY(-2px);
}

.oracle-card .card-image-wrapper[b-5g2zqcp57o] {
    height: 210px;
    border-radius: 20px 20px 0 0;
}

.oracle-card:hover .card-image-wrapper img[b-5g2zqcp57o] {
    transform: scale(1.03);
}

.oracle-card .card-content[b-5g2zqcp57o] {
    padding: 20px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.oracle-card h3[b-5g2zqcp57o] {
    margin: 0;
    color: #4b2f24;
    font-family: var(--font-serif);
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 500;
}

.oracle-card .role[b-5g2zqcp57o] {
    margin: 6px 0 0;
    color: #8a6d60;
    font-size: 1.02rem;
    font-style: italic;
}

.oracle-card .description.small[b-5g2zqcp57o] {
    margin: 12px 0 0;
    color: #6b5348;
    font-size: 0.92rem;
    line-height: 1.55;
}

.btn-outline[b-5g2zqcp57o] {
    margin-top: auto;
    padding-top: 16px;
    border: 1px solid #ddc5b5;
    color: #6f4e41;
    background: #fff;
    font-size: 0.95rem;
    padding: 10px 22px;
    align-self: flex-start;
}

.oracle-card .btn-outline[b-5g2zqcp57o],
.oracle-card .lifecycle-badge[b-5g2zqcp57o] {
    margin-top: auto;
    align-self: flex-start;
    box-sizing: border-box;
    min-width: 132px;
    min-height: 42px;
    padding: 10px 22px;
    font-size: 0.95rem;
}

.oracle-card .lifecycle-badge[b-5g2zqcp57o] {
    width: auto;
}

.btn-outline:hover[b-5g2zqcp57o] {
    background: #f5e8de;
    border-color: #c9a999;
}

/* ─── Sidebar ─── */

[b-5g2zqcp57o] .sidebar {
    width: 280px;
    background: #FAECDA;
    border-right: 1px solid #d8b8ad;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

[b-5g2zqcp57o] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-5g2zqcp57o] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-5g2zqcp57o] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

[b-5g2zqcp57o] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-5g2zqcp57o] .sidebar-logo {
    text-align: center;
}

[b-5g2zqcp57o] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

[b-5g2zqcp57o] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: .9rem;
    cursor: pointer;
    z-index: 100;
    transition: left .3s ease;
}

/* --- New Footer Styles (Matching FrontPage) --- */

[b-5g2zqcp57o] .main-footer {
    /* This creates the full-width "floor" for the page */
    margin-left: 280px;
    /* Start where main content starts */
    background-color: #FAF3E5;
    /* Match the warm card background color */
    padding: 60px 0 30px 0;
    margin-top: 80px;
    /* Space above the footer */
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    /* Remove grid-area, as the footer is no longer part of the content grid */
}

[b-5g2zqcp57o] .main-footer.sidebar-hidden {
    margin-left: 0;
    /* Remove left margin when sidebar is hidden */
    width: 100%;
}

/* A container to keep the footer content aligned with the main page content */
[b-5g2zqcp57o] .footer-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
}

/* When sidebar is hidden, use full width container */
[b-5g2zqcp57o] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
    /* Center when sidebar is hidden */
}

/* 1. Brand Section */
[b-5g2zqcp57o] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-5g2zqcp57o] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-5g2zqcp57o] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* 2. Navigation Links Section */
[b-5g2zqcp57o] .footer-nav-links {
    /* Use Flexbox to group and center the items */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Allows wrapping on smaller screens */
    /* The 'gap' now controls the space BETWEEN the columns */
    gap: 80px;
    /* Adjust this value to your liking (e.g., 60px, 100px) */
    margin-bottom: 40px;
}

[b-5g2zqcp57o] .footer-section {
    padding: 0 15px;
    /* Adds some space for smaller screens */
}

[b-5g2zqcp57o] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-5g2zqcp57o] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-5g2zqcp57o] .footer-section ul li {
    margin-bottom: 10px;
}

[b-5g2zqcp57o] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-5g2zqcp57o] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

/* 3. Bottom Bar (Utilities & Legal) */
[b-5g2zqcp57o] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 20px;
}

[b-5g2zqcp57o] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-5g2zqcp57o] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-5g2zqcp57o] .footer-languages a:hover,
[b-5g2zqcp57o] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

/* NEW: Wrapper for the right-aligned text */
[b-5g2zqcp57o] .footer-legal-origin {
    text-align: right;
}

/* NEW: Style for the "Made by" line */
[b-5g2zqcp57o] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
    /* Add a little space below it */
}

[b-5g2zqcp57o] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

.sidebar-overlay[b-5g2zqcp57o] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 9;
}

.sidebar-overlay.hidden[b-5g2zqcp57o] {
    display: none;
}

/* ─── Responsive ─── */

@media (max-width: 1200px) {
    .card-image-wrapper[b-5g2zqcp57o] {
        height: 280px;
    }

    .featured-card h3[b-5g2zqcp57o] {
        font-size: 2.1rem;
    }

    .oracle-card h3[b-5g2zqcp57o] {
        font-size: 1.55rem;
    }
}

@media (max-width: 1024px) {
    [b-5g2zqcp57o] .mobile-floating-header {
        z-index: 1200;
        background:
            linear-gradient(180deg, rgba(250, 236, 218, 0.96) 0%, rgba(250, 236, 218, 0.84) 70%, rgba(250, 236, 218, 0) 100%);
    }

    [b-5g2zqcp57o] .toggle-sidebar {
        display: none !important;
    }

    /* Sidebar starts below the floating mobile header */
    [b-5g2zqcp57o] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [b-5g2zqcp57o] .sidebar.visible {
        transform: translateX(0);
    }

    [b-5g2zqcp57o] .sidebar.hidden {
        transform: translateX(-100%);
    }

    /* Adjust app layout for mobile top bar */
    .app-layout[b-5g2zqcp57o],
    [b-5g2zqcp57o] .app-layout {
        display: block;
        padding-top: 60px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        background-color: #FAECDA;
    }

    .oracles-container[b-5g2zqcp57o],
    .oracles-container.sidebar-hidden[b-5g2zqcp57o] {
        flex: none;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        max-width: 720px;
        padding: 26px 18px 24px;
    }

    [b-5g2zqcp57o] .main-footer {
        margin-left: 0 !important;
    }

    .featured-grid[b-5g2zqcp57o] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .oracle-masonry-grid[b-5g2zqcp57o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oracles-hero p[b-5g2zqcp57o] {
        font-size: 1.1rem;
    }
}

/* ≤768px: Reinforce sidebar positioning for phones */
@media (max-width: 768px) {
    .app-layout[b-5g2zqcp57o],
    [b-5g2zqcp57o] .app-layout {
        padding-top: 60px;
        overflow-x: hidden;
    }

    [b-5g2zqcp57o] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-5g2zqcp57o] .sidebar.visible {
        transform: translateX(0);
    }

    [b-5g2zqcp57o] .sidebar.hidden {
        transform: translateX(-100%);
    }
}

@media (max-width: 680px) {
    .oracles-container[b-5g2zqcp57o],
    .oracles-container.sidebar-hidden[b-5g2zqcp57o] {
        width: 100%;
        max-width: 680px;
        padding: 22px var(--mobile-page-margin, 16px) 36px;
    }

    .oracles-hero[b-5g2zqcp57o] {
        margin-bottom: 30px;
        max-width: none;
    }

    .oracles-hero h1[b-5g2zqcp57o] {
        font-size: clamp(2.05rem, 9vw, 2.45rem);
        line-height: 1.08;
        margin-bottom: 0.75rem;
    }

    .oracles-hero p[b-5g2zqcp57o] {
        font-size: 1rem;
        line-height: 1.45;
        max-width: 23rem;
    }

    /* Stack the flow vertically on mobile */
    .oracle-flow[b-5g2zqcp57o] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
        margin-top: 24px;
        padding: 20px 18px;
        gap: 16px;
        background: #fff9f5;
        overflow: visible;
    }

    .flow-step[b-5g2zqcp57o] {
        width: 100%;
        justify-content: flex-start;
        gap: 14px;
        min-width: 0;
    }

    .flow-icon-wrapper[b-5g2zqcp57o] {
        width: 46px;
        height: 46px;
    }

    .flow-icon-wrapper svg[b-5g2zqcp57o] {
        width: 24px;
        height: 24px;
    }

    .flow-text[b-5g2zqcp57o] {
        min-width: 0;
    }

    .flow-text strong[b-5g2zqcp57o] {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .flow-text small[b-5g2zqcp57o] {
        font-size: 0.95rem; /* Smaller subtitle */
    }

    .flow-arrow[b-5g2zqcp57o] {
        display: none;
    }

    /* Ensure hierarchy in headers on mobile */
    .oracle-section h2[b-5g2zqcp57o] {
        font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    }

    .oracle-section[b-5g2zqcp57o] {
        margin-bottom: 46px;
        max-width: none;
    }

    .section-header-centered[b-5g2zqcp57o] {
        margin-bottom: 22px;
    }

    .section-header-stacked[b-5g2zqcp57o] {
        align-items: stretch;
        margin-bottom: 20px;
    }
    
    .oracle-filters[b-5g2zqcp57o] {
        width: 100%;
        overflow-x: visible;
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .oracle-filter[b-5g2zqcp57o] {
        padding: 10px 18px;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .oracle-masonry-grid[b-5g2zqcp57o] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-image-wrapper[b-5g2zqcp57o] {
        height: 252px;
    }

    .featured-card[b-5g2zqcp57o],
    .oracle-card[b-5g2zqcp57o] {
        border-radius: 16px;
    }

    .card-image-wrapper[b-5g2zqcp57o],
    .oracle-card .card-image-wrapper[b-5g2zqcp57o] {
        border-radius: 16px 16px 0 0;
    }

    .card-content[b-5g2zqcp57o],
    .oracle-card .card-content[b-5g2zqcp57o] {
        padding: 20px;
    }

    .featured-card h3[b-5g2zqcp57o] {
        font-size: 1.75rem;
    }

    .oracle-card h3[b-5g2zqcp57o] {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .oracles-hero h1[b-5g2zqcp57o] {
        font-size: clamp(1.95rem, 8.6vw, 2.22rem);
    }

    .oracle-section h2[b-5g2zqcp57o] {
        font-size: 1.55rem;
    }

    .featured-card h3[b-5g2zqcp57o] {
        font-size: 1.7rem;
    }

    .oracles-container[b-5g2zqcp57o],
    .oracles-container.sidebar-hidden[b-5g2zqcp57o] {
        padding-inline: var(--mobile-page-margin, 16px);
    }

    .oracle-flow[b-5g2zqcp57o] {
        border-radius: 14px;
        padding: 18px;
    }

    .card-image-wrapper[b-5g2zqcp57o] {
        height: 238px;
    }

    .featured-card .card-role-chip[b-5g2zqcp57o] {
        font-size: 0.78rem;
    }

    .btn-primary[b-5g2zqcp57o],
    .btn-secondary[b-5g2zqcp57o],
    .btn-outline[b-5g2zqcp57o] {
        width: 100%;
        min-height: 48px;
    }
}

/* ===== SUBSCRIPTION STATUS INDICATOR ===== */

.subscription-status[b-5g2zqcp57o] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(180, 140, 80, 0.15);
    font-size: 0.78rem;
    color: #8B7355;
    font-style: italic;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

.subscription-status:hover[b-5g2zqcp57o] {
    color: #6b4520;
}

.subscription-status-icon[b-5g2zqcp57o] {
    font-size: 0.85rem;
    line-height: 1;
}
/* /Components/Pages/PenPals.razor.rz.scp.css */
/* PenPals page styles */

/* Global overflow prevention */
/* :global(html) {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

:global(body) {
    overflow-x: hidden;
    overscroll-behavior: none;
} */

/* App Layout */
.app-layout[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 100vh;
    background-color: #FAECDA;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
}

[b-q26ymkgqmn] .app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    overflow-x: hidden;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
    width: 100%;
}

/* Sidebar Overlay */
.sidebar-overlay[b-q26ymkgqmn] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
}

.sidebar-overlay.hidden[b-q26ymkgqmn] {
    display: none;
}

/* Sidebar */
[b-q26ymkgqmn] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-q26ymkgqmn] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-q26ymkgqmn] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-q26ymkgqmn] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-q26ymkgqmn] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-q26ymkgqmn] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

/* Toggle Sidebar Button */
[b-q26ymkgqmn] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-q26ymkgqmn] .toggle-sidebar {
        display: none !important;
    }

    /* Sidebar starts below the floating mobile header */
    [b-q26ymkgqmn] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [b-q26ymkgqmn] .sidebar.visible {
        transform: translateX(0);
    }

    [b-q26ymkgqmn] .sidebar.hidden {
        transform: translateX(-100%);
    }

    /* Adjust app layout for mobile top bar */
    .app-layout[b-q26ymkgqmn] {
        padding-top: 60px;
    }

    [b-q26ymkgqmn] .app-layout {
        padding-top: 60px;
    }
}

.penpals-main[b-q26ymkgqmn] {
    --penpals-cream: #f8efe6;
    --penpals-paper: #fdf7f1;
    --penpals-peach: #f7c9b9;
    --penpals-gold: #c9a27a;
    --penpals-ink: #5a3f3a;
    --penpals-muted: #7c6a60;
    --penpals-bg: #FAECDA;
    flex: 1;
    margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
    padding: 48px 48px 96px;
    /* background: radial-gradient(circle at top, #f9efe4 0%, #f4e2d3 45%, #f1d8c7 100%); */
    width: min(1200px, calc(100% - 280px));
    max-width: min(1200px, calc(100% - 280px)); /* Constrain width to the content area beside the sidebar. */
    /* margin-right: auto; -- Removed to Left Align like Terms/MemoriesAll */
    min-height: 100vh;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.penpals-main.sidebar-hidden[b-q26ymkgqmn] {
    margin-left: max(0px, calc((100% - 1200px) / 2));
    width: min(1200px, 100%);
    max-width: min(1200px, 100%);
}

/* Footer Styles Overlay to Ensure Alignment */
[b-q26ymkgqmn] .main-footer {
    margin-left: 280px;
    width: calc(100% - 280px);
    margin-top: 0;
}

[b-q26ymkgqmn] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

[b-q26ymkgqmn] .footer-container {
    max-width: 1200px;
    width: 100%;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

.penpals-hero[b-q26ymkgqmn] {
    text-align: center;
    margin-bottom: 40px;
}

.penpals-title[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: var(--mobile-hero-heading-weight);
    color: #2C2A28;
    margin-bottom: 1rem;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.penpals-subtitle[b-q26ymkgqmn] {
    /* inherited font-sans */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6B5B57;
    max-width: 600px;
    margin: 0 auto;
    overflow-wrap: anywhere;
}

.penpals-avatars[b-q26ymkgqmn] {
    margin-top: 28px;
    margin-bottom: 24px;
    min-width: 0;
    max-width: 100%;
}

.penpals-avatars-header[b-q26ymkgqmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.penpals-section-title[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--penpals-ink);
    margin: 0;
}

.penpals-avatars-action[b-q26ymkgqmn] {
    border: 1px solid rgba(124, 90, 75, 0.2);
    background: rgba(255, 255, 255, 0.48);
    color: rgba(90, 63, 58, 0.82);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.penpals-avatars-action:hover[b-q26ymkgqmn],
.penpals-avatars-action:focus-visible[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.52);
    border-color: rgba(201, 162, 122, 0.58);
    transform: translateY(-1px);
}

.penpals-filters[b-q26ymkgqmn] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(680px, 100%);
}

/* Mobile filter trigger — hidden on desktop */
.penpals-mobile-filters-trigger-row[b-q26ymkgqmn] {
    display: none;
}

.penpals-mobile-filters-backdrop[b-q26ymkgqmn] {
    display: none;
}

.penpals-filters-header-row[b-q26ymkgqmn] {
    display: none;
}

.penpals-mobile-filters-close[b-q26ymkgqmn] {
    display: none;
}

.penpals-filters-pill-tray[b-q26ymkgqmn] {
    display: contents;
}

.penpals-mobile-filters-trigger[b-q26ymkgqmn] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #D8A88A;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #5A413A;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
    transition: all 0.3s ease;
}

.penpals-mobile-filters-trigger.has-active[b-q26ymkgqmn] {
    background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}

.penpals-mobile-filters-badge[b-q26ymkgqmn] {
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7B5A53;
    color: #fff;
    font-size: 0.8rem;
}

.penpals-filter[b-q26ymkgqmn] {
    border: 1px solid rgba(124, 90, 75, 0.25);
    background: rgba(255, 255, 255, 0.55);
    color: var(--penpals-ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.penpals-filter.active[b-q26ymkgqmn],
.penpals-filter:hover[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.6);
    border-color: rgba(201, 162, 122, 0.6);
}

.penpals-avatars-row[b-q26ymkgqmn] {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    min-width: 0;
    padding: 4px 2px 8px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;
}

.penpals-avatars-row[b-q26ymkgqmn]::-webkit-scrollbar {
    display: none;
}

.penpals-carousel-wrap[b-q26ymkgqmn] {
    position: relative;
    max-width: 100%;
    min-width: 0;
}

.penpals-carousel-wrap[b-q26ymkgqmn]::before,
.penpals-carousel-wrap[b-q26ymkgqmn]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 46px;
    width: 28px;
    pointer-events: none;
    z-index: 2;
}

.penpals-carousel-wrap[b-q26ymkgqmn]::before {
    left: 0;
    background: linear-gradient(to right, var(--penpals-bg), rgba(255, 255, 255, 0));
}

.penpals-carousel-wrap[b-q26ymkgqmn]::after {
    right: 0;
    background: linear-gradient(to left, var(--penpals-bg), rgba(255, 255, 255, 0));
}

.penpals-avatar[b-q26ymkgqmn] {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(124, 90, 75, 0.14);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--penpals-ink);
    flex: 0 0 148px;
    min-width: 148px;
    max-width: 148px;
    min-height: 158px;
    padding: 12px 10px 10px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-shadow: 0 12px 26px rgba(90, 63, 58, 0.08);
    transition: all 0.3s ease;
}

.penpals-avatar:hover[b-q26ymkgqmn],
.penpals-avatar:focus-visible[b-q26ymkgqmn] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(201, 162, 122, 0.46);
    box-shadow: 0 18px 34px rgba(90, 63, 58, 0.14);
}

.penpals-avatar:focus-visible[b-q26ymkgqmn] {
    outline: 3px solid rgba(247, 201, 185, 0.56);
    outline-offset: 2px;
}

.penpals-avatar.highlighted[b-q26ymkgqmn] {
    background: rgba(255, 245, 239, 0.96);
    border-color: rgba(247, 201, 185, 0.82);
}

.penpals-avatar.highlighted .penpals-avatar-image[b-q26ymkgqmn] {
    border-color: rgba(247, 201, 185, 0.9);
    box-shadow: 0 0 0 6px rgba(247, 201, 185, 0.35), 0 16px 30px rgba(90, 63, 58, 0.22);
    animation: penpalPulse-b-q26ymkgqmn 1.6s ease-in-out infinite;
}

.penpals-avatar-image[b-q26ymkgqmn] {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    background: var(--penpals-paper);
    box-shadow: 0 10px 22px rgba(90, 63, 58, 0.16);
    border: 1px solid rgba(201, 162, 122, 0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.penpals-avatar img[b-q26ymkgqmn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.penpals-status-dot[b-q26ymkgqmn] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.penpals-status-dot.active[b-q26ymkgqmn] {
    background: #4d9f63;
    box-shadow: 0 0 0 4px rgba(77, 159, 99, 0.2);
}

.penpals-status-dot.paused[b-q26ymkgqmn] {
    background: #9c8c80;
    box-shadow: 0 0 0 4px rgba(90, 63, 58, 0.12);
}

.penpals-avatar-name[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 650;
    text-align: center;
    max-width: 126px;
    line-height: 1.2;
    min-height: 2.3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.penpals-avatar-next[b-q26ymkgqmn] {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 450;
    color: rgba(90, 63, 58, 0.58);
    min-height: 1.1rem;
    line-height: 1.35;
    text-align: center;
}

.penpals-avatar.add[b-q26ymkgqmn] {
    background: rgba(255, 255, 255, 0.44);
    border-style: dashed;
}

.penpals-avatar.add .penpals-avatar-image[b-q26ymkgqmn] {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.5);
}

.penpals-avatar-add[b-q26ymkgqmn] {
    font-size: 1.8rem;
    color: var(--penpals-gold);
}

.penpals-carousel-controls[b-q26ymkgqmn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.penpals-carousel-nav[b-q26ymkgqmn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(75, 46, 46, 0.15);
    background: rgba(255, 255, 255, 0.95);
    color: var(--penpals-ink);
    font-family: var(--font-sans);
    font-size: 1.12rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(90, 63, 58, 0.11);
    transition: all 0.3s ease;
}

.penpals-carousel-nav:hover[b-q26ymkgqmn],
.penpals-carousel-nav:focus-visible[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.5);
    border-color: rgba(201, 162, 122, 0.62);
    transform: scale(1.08);
}

.penpals-carousel-nav:focus-visible[b-q26ymkgqmn] {
    outline: 3px solid rgba(247, 201, 185, 0.56);
    outline-offset: 2px;
}

/* Credit skip nudge banner */
.penpals-credit-nudge[b-q26ymkgqmn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FFF8F0, #FFF0E0);
    border: 1px solid #F0DCC8;
    border-radius: 14px;
    color: #5A4A3A;
    font-size: 0.95rem;
    line-height: 1.5;
}

.penpals-credit-nudge-icon[b-q26ymkgqmn] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.penpals-credit-nudge-text[b-q26ymkgqmn] {
    flex: 1;
}

.penpals-credit-nudge-text p[b-q26ymkgqmn] {
    margin: 0 0 4px;
}

.penpals-credit-nudge-link[b-q26ymkgqmn] {
    color: #B08D6E;
    font-style: italic;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.penpals-credit-nudge-link:hover[b-q26ymkgqmn] {
    color: #8B7355;
    text-decoration: underline;
}

.penpals-credit-nudge-dismiss[b-q26ymkgqmn] {
    background: none;
    border: none;
    color: #B0A090;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}

.penpals-credit-nudge-dismiss:hover[b-q26ymkgqmn] {
    color: #8B7355;
}

@media (max-width: 540px) {
    .penpals-credit-nudge[b-q26ymkgqmn] {
        margin: 0 12px 20px;
        padding: 14px 16px;
        font-size: 0.9rem;
    }
}

.penpals-letters[b-q26ymkgqmn] {
    margin-top: 22px;
    min-width: 0;
    max-width: 100%;
}

.penpals-letters-header[b-q26ymkgqmn] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.penpals-letter-list[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    max-width: 100%;
}

.penpal-letter-card[b-q26ymkgqmn] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: left;
    border: 1px solid rgba(201, 162, 122, 0.3);
    background: linear-gradient(145deg, #fdf7f1 0%, #f8ede2 100%);
    border-radius: 20px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    color: var(--penpals-ink);
    box-shadow: 0 16px 34px rgba(100, 70, 60, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    text-decoration: none;
    overflow: hidden;
}

.penpal-letter-card:focus-visible[b-q26ymkgqmn] {
    outline: 3px solid rgba(201, 162, 122, 0.5);
    outline-offset: 4px;
}

.penpal-letter-card:visited[b-q26ymkgqmn] {
    color: var(--penpals-ink);
}

.penpal-letter-card:hover[b-q26ymkgqmn] {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(100, 70, 60, 0.2);
}

.penpal-letter-card.unread[b-q26ymkgqmn] {
    border-color: rgba(201, 162, 122, 0.7);
}

/* Answered stamp styling - vintage ink stamp effect */
/* Desktop: Large stamp inline within actions area */
.penpal-letter-stamp[b-q26ymkgqmn] {
    width: 72px;
    height: 72px;
    transform: rotate(-20deg);
    opacity: 0.8;
    mix-blend-mode: multiply;
    pointer-events: none;
    flex-shrink: 0;
    margin-right: 8px;
}

.penpal-letter-stamp .stamp-svg[b-q26ymkgqmn] {
    width: 100%;
    height: 100%;
    color: #8b6347;
}

.penpal-letter-stamp .stamp-border-outer[b-q26ymkgqmn] {
    fill: none;
    stroke: #8b6347;
    stroke-width: 2;
    stroke-dasharray: 3 2;
}

.penpal-letter-stamp .stamp-border-mid[b-q26ymkgqmn] {
    fill: none;
    stroke: #8b6347;
    stroke-width: 1;
}

.penpal-letter-stamp .stamp-border-inner[b-q26ymkgqmn] {
    fill: none;
    stroke: #8b6347;
    stroke-width: 1.5;
    stroke-dasharray: 8 4;
}

.penpal-letter-stamp .stamp-icon-group[b-q26ymkgqmn] {
    color: #8b6347;
}

.penpal-letter-stamp .stamp-detail[b-q26ymkgqmn] {
    opacity: 0.7;
}

.penpal-letter-stamp .stamp-text-curved[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    fill: #8b6347;
    text-transform: uppercase;
}

.penpal-letter-stamp .stamp-date[b-q26ymkgqmn] {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: #8b6347;
}

.penpal-letter-stamp .stamp-dot[b-q26ymkgqmn] {
    fill: #8b6347;
}

.penpal-letter-avatar[b-q26ymkgqmn] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(247, 201, 185, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(214, 168, 135, 0.7);
    box-shadow: 0 8px 18px rgba(100, 70, 60, 0.18);
    flex-shrink: 0;
}

.penpal-letter-body[b-q26ymkgqmn] {
    min-width: 0;
    overflow: hidden;
}

.penpal-letter-avatar img[b-q26ymkgqmn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.penpal-letter-subject[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 6px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.penpal-letter-meta[b-q26ymkgqmn] {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--penpals-muted);
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.penpal-letter-preview[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--penpals-ink);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.penpal-letter-actions[b-q26ymkgqmn] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 120px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.penpal-letter-badge[b-q26ymkgqmn] {
    background: rgba(201, 162, 122, 0.2);
    color: var(--penpals-ink);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.penpal-letter-cta[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.9);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--penpals-ink);
    white-space: nowrap;
}

@keyframes penpalPulse-b-q26ymkgqmn {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

.penpals-empty[b-q26ymkgqmn] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(201, 162, 122, 0.3);
    border-radius: 20px;
    padding: 36px 40px;
    text-align: center;
    box-shadow: 0 14px 30px rgba(100, 70, 60, 0.12);
}

.penpals-empty-icon[b-q26ymkgqmn] {
    font-size: 5rem;
    margin-bottom: 12px;
}

.penpals-empty h3[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    color: var(--penpals-ink);
    margin-bottom: 8px;
}

.penpals-empty p[b-q26ymkgqmn] {
    color: var(--penpals-muted);
    max-width: 520px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

.penpals-empty-cta[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.9);
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--penpals-ink);
    cursor: pointer;
}

.penpal-picker-backdrop[b-q26ymkgqmn] {
    position: fixed;
    inset: 0;
    background: rgba(39, 24, 19, 0.35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 1.5rem;
}

.penpal-picker-modal[b-q26ymkgqmn] {
    width: min(720px, 95vw);
    background: rgba(253, 248, 243, 0.98);
    border: 1px solid rgba(218, 184, 155, 0.6);
    border-radius: 24px;
    padding: 2rem 2rem 1.6rem;
    box-shadow: 0 20px 50px rgba(75, 46, 46, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    max-height: 86vh;
    animation: penPalLift-b-q26ymkgqmn 0.25s ease-out;
}

.penpal-picker-close[b-q26ymkgqmn] {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    background: rgba(235, 216, 206, 0.8);
    color: #6a504b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
}

.penpal-picker-title[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--penpals-ink);
    margin: 0.2rem 0 0;
}

.penpal-picker-subtitle[b-q26ymkgqmn] {
    color: var(--penpals-muted);
    margin: 0 0 0.4rem;
}

.penpal-picker-search[b-q26ymkgqmn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(218, 184, 155, 0.6);
}

.penpal-picker-search-icon[b-q26ymkgqmn] {
    width: 20px;
    height: 20px;
    color: rgba(90, 63, 58, 0.6);
}

.penpal-picker-search-input[b-q26ymkgqmn] {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--penpals-ink);
    outline: none;
}

.penpal-picker-tabs[b-q26ymkgqmn] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.penpal-picker-tab[b-q26ymkgqmn] {
    border: 1px solid rgba(124, 90, 75, 0.25);
    background: rgba(255, 255, 255, 0.6);
    color: var(--penpals-ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.penpal-picker-tab.active[b-q26ymkgqmn],
.penpal-picker-tab:hover[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.65);
    border-color: rgba(201, 162, 122, 0.6);
}

.penpal-picker-list[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 0.2rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 90, 43, 0.2) transparent;
}

.penpal-picker-list[b-q26ymkgqmn]::-webkit-scrollbar {
    width: 7px;
}

.penpal-picker-list[b-q26ymkgqmn]::-webkit-scrollbar-track {
    background: transparent;
}

.penpal-picker-list[b-q26ymkgqmn]::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.2);
    border-radius: 999px;
}

.penpal-picker-list:hover[b-q26ymkgqmn] {
    scrollbar-color: rgba(139, 90, 43, 0.28) transparent;
}

.penpal-picker-list:hover[b-q26ymkgqmn]::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.28);
}

.penpal-picker-card[b-q26ymkgqmn] {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(201, 162, 122, 0.35);
    border-radius: 20px;
    padding: 12px 16px;
    box-shadow: 0 12px 28px rgba(100, 70, 60, 0.12);
    cursor: pointer;
    transition: all 0.3s ease;
}

.penpal-picker-card:hover[b-q26ymkgqmn],
.penpal-picker-card:focus-within[b-q26ymkgqmn] {
    background: rgba(255, 250, 246, 0.86);
    border-color: rgba(201, 162, 122, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(100, 70, 60, 0.16);
}

.penpal-picker-card.unavailable[b-q26ymkgqmn] {
    opacity: 0.5;
    filter: grayscale(0.2);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.penpal-picker-card.unavailable .penpal-picker-avatar[b-q26ymkgqmn] {
    filter: grayscale(0.4);
}

.penpal-picker-card.unavailable .penpal-picker-action[b-q26ymkgqmn] {
    background: rgba(231, 214, 202, 0.7);
    border-color: rgba(201, 162, 122, 0.2);
    color: rgba(90, 63, 58, 0.7);
    opacity: 0.8;
    box-shadow: none;
    cursor: not-allowed;
}

.penpal-picker-avatar[b-q26ymkgqmn] {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(214, 168, 135, 0.8);
}

.penpal-picker-info[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.penpal-picker-name[b-q26ymkgqmn] {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--penpals-ink);
}

.penpal-picker-line[b-q26ymkgqmn] {
    color: var(--penpals-muted);
    font-size: 0.95rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.penpal-picker-action[b-q26ymkgqmn] {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(139, 90, 43, 0.2);
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: rgba(75, 46, 46, 0.74);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.78;
    box-shadow: 0 4px 12px rgba(179, 119, 84, 0.08);
    transition: all 0.3s ease;
}

.penpal-picker-card:not(.unavailable):hover .penpal-picker-action:not(:disabled)[b-q26ymkgqmn],
.penpal-picker-card:not(.unavailable):focus-within .penpal-picker-action:not(:disabled)[b-q26ymkgqmn],
.penpal-picker-action:not(:disabled):hover[b-q26ymkgqmn],
.penpal-picker-action:not(:disabled):focus-visible[b-q26ymkgqmn] {
    background: rgba(247, 201, 185, 0.9);
    border-color: rgba(201, 162, 122, 0.62);
    color: var(--penpals-ink);
    opacity: 1;
    box-shadow: 0 8px 18px rgba(179, 119, 84, 0.2);
    transform: translateY(-1px);
}

.penpal-picker-action:focus-visible[b-q26ymkgqmn] {
    outline: 2px solid rgba(139, 90, 43, 0.42);
    outline-offset: 3px;
}

.penpal-picker-empty[b-q26ymkgqmn] {
    text-align: center;
    color: var(--penpals-muted);
    padding: 12px;
}

.penpals-letter-more[b-q26ymkgqmn] {
    display: flex;
    justify-content: center;
    margin-top: 0.9rem;
}

.penpal-picker-more[b-q26ymkgqmn] {
    align-self: center;
    border: 1px solid rgba(201, 162, 122, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: rgba(75, 46, 46, 0.78);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.72rem 1.15rem;
    cursor: pointer;
    margin-top: 0.3rem;
    box-shadow: 0 8px 18px rgba(90, 63, 58, 0.08);
    transition: all 0.3s ease;
}

.penpal-picker-more:hover[b-q26ymkgqmn],
.penpal-picker-more:focus-visible[b-q26ymkgqmn] {
    background: rgba(253, 248, 243, 0.92);
    border-color: rgba(201, 162, 122, 0.58);
    color: var(--penpals-ink);
    transform: translateY(-1px);
}

.penpal-picker-more:focus-visible[b-q26ymkgqmn] {
    outline: 3px solid rgba(247, 201, 185, 0.5);
    outline-offset: 3px;
}

.pen-pal-modal-backdrop[b-q26ymkgqmn] {
    position: fixed;
    inset: 0;
    background: rgba(39, 24, 19, 0.35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 1.5rem;
}

.pen-pal-modal[b-q26ymkgqmn] {
    width: min(420px, 92vw);
    background: rgba(253, 248, 243, 0.98);
    border: 1px solid rgba(218, 184, 155, 0.6);
    border-radius: 22px;
    padding: 1.3rem 1.4rem 1.4rem;
    box-shadow: 0 18px 40px rgba(75, 46, 46, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: penPalLift-b-q26ymkgqmn 0.25s ease-out;
}

.pen-pal-modal-header[b-q26ymkgqmn] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pen-pal-modal-avatar[b-q26ymkgqmn] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(214, 168, 135, 0.8);
    box-shadow: 0 6px 16px rgba(122, 92, 70, 0.2);
}

.pen-pal-modal-title[b-q26ymkgqmn] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #4b2e2e;
}

.pen-pal-modal-body[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.95rem;
    color: rgba(75, 46, 46, 0.85);
}

.pen-pal-modal-body p[b-q26ymkgqmn] {
    line-height: 1.5;
}

.pen-pal-choice[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pen-pal-choice-label[b-q26ymkgqmn] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(75, 46, 46, 0.55);
}

.pen-pal-segmented[b-q26ymkgqmn] {
    display: flex;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(214, 168, 135, 0.45);
    border-radius: 999px;
    padding: 0.3rem;
}

.pen-pal-segment[b-q26ymkgqmn] {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(75, 46, 46, 0.8);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pen-pal-segment.active[b-q26ymkgqmn] {
    background: linear-gradient(135deg, #ffd6c5, #f4bf9b);
    color: #4b2e2e;
    box-shadow: 0 4px 10px rgba(171, 112, 80, 0.25);
}

.pen-pal-toggle[b-q26ymkgqmn] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(214, 168, 135, 0.45);
}

.pen-pal-toggle.locked[b-q26ymkgqmn] {
    opacity: 0.7;
    cursor: not-allowed;
}

.pen-pal-toggle input[b-q26ymkgqmn] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pen-pal-toggle-track[b-q26ymkgqmn] {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(231, 214, 202, 0.9);
    border: 1px solid rgba(171, 124, 96, 0.45);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.pen-pal-toggle-thumb[b-q26ymkgqmn] {
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    box-shadow: 0 2px 6px rgba(75, 46, 46, 0.18);
    transition: transform 0.2s ease;
}

.pen-pal-toggle input:checked + .pen-pal-toggle-track[b-q26ymkgqmn] {
    background: linear-gradient(135deg, #ffd6c5, #f4bf9b);
    border-color: rgba(173, 112, 80, 0.6);
}

.pen-pal-toggle input:checked + .pen-pal-toggle-track .pen-pal-toggle-thumb[b-q26ymkgqmn] {
    transform: translateX(18px);
}

.pen-pal-toggle-text[b-q26ymkgqmn] {
    font-size: 0.9rem;
    color: rgba(75, 46, 46, 0.8);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.pen-pal-premium-chip[b-q26ymkgqmn] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    background: rgba(123, 90, 83, 0.1);
    color: rgba(91, 58, 47, 0.82);
    border: 1px solid rgba(123, 90, 83, 0.16);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.pen-pal-toggle-note[b-q26ymkgqmn] {
    margin-top: 0.35rem;
    color: rgba(88, 65, 58, 0.68);
    font-size: 0.82rem;
    line-height: 1.35;
}

.pen-pal-modal-footer[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pen-pal-primary[b-q26ymkgqmn] {
    background: linear-gradient(135deg, #ffc7b6, #f2b08e);
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-weight: 700;
    color: #4b2e2e;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(179, 119, 84, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pen-pal-primary:hover[b-q26ymkgqmn] {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(179, 119, 84, 0.28);
}

.pen-pal-secondary[b-q26ymkgqmn] {
    background: transparent;
    border: 1px solid rgba(206, 160, 128, 0.7);
    border-radius: 999px;
    padding: 0.6rem 1rem;
    color: #6a504b;
    font-weight: 600;
    cursor: pointer;
}

.pen-pal-secondary:hover[b-q26ymkgqmn] {
    background: rgba(255, 228, 210, 0.55);
}

@keyframes penPalLift-b-q26ymkgqmn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .penpals-main[b-q26ymkgqmn] {
        margin-left: 0;
        padding: 32px var(--mobile-page-margin) 64px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .penpals-main.sidebar-hidden[b-q26ymkgqmn] {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    .penpal-letter-card[b-q26ymkgqmn] {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .penpal-letter-actions[b-q26ymkgqmn] {
        grid-column: 1 / -1;
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    [b-q26ymkgqmn] .main-footer {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    .penpals-avatars-header[b-q26ymkgqmn],
    .penpals-letters-header[b-q26ymkgqmn] {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    /* Mobile filter trigger & bottom sheet */
    .penpals-mobile-filters-trigger-row[b-q26ymkgqmn] {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .penpals-mobile-filters-backdrop[b-q26ymkgqmn] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(43, 42, 40, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    .penpals-filters[b-q26ymkgqmn] {
        display: none;
    }

    .penpals-filters.mobile-open[b-q26ymkgqmn] {
        display: block;
        position: fixed;
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
        bottom: calc(1rem + env(safe-area-inset-bottom));
        top: auto;
        z-index: 1300;
        margin: 0;
        max-height: min(78vh, calc(100dvh - 6rem));
        overflow-y: auto;
        padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
        border-radius: 24px;
        background: #FDF8F0;
        box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
    }

    .penpals-filters-header-row[b-q26ymkgqmn] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .penpals-filters-header[b-q26ymkgqmn] {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 600;
        color: #3A3228;
    }

    .penpals-mobile-filters-close[b-q26ymkgqmn] {
        display: inline-flex;
        align-items: center;
        border: none;
        border-radius: 999px;
        background: rgba(123, 90, 83, 0.1);
        color: #5A413A;
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    .penpals-filters-pill-tray[b-q26ymkgqmn] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .penpals-avatars-row[b-q26ymkgqmn] {
        gap: 16px;
        padding-bottom: 12px;
    }

    .penpals-carousel-wrap[b-q26ymkgqmn]::before,
    .penpals-carousel-wrap[b-q26ymkgqmn]::after,
    .penpals-carousel-controls[b-q26ymkgqmn] {
        display: none;
    }

    .penpals-avatar[b-q26ymkgqmn] {
        flex-basis: 124px;
        min-width: 124px;
        max-width: 124px;
        min-height: 146px;
        padding: 10px 8px;
    }

    .penpals-avatar-name[b-q26ymkgqmn] {
        font-size: 0.82rem;
        max-width: 110px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.35;
    }

    .penpals-avatar-next[b-q26ymkgqmn] {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    [b-q26ymkgqmn] .app-layout {
        padding-top: 60px;
        overflow-x: hidden;
    }

    [b-q26ymkgqmn] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-q26ymkgqmn] .sidebar.visible {
        transform: translateX(0);
    }

    [b-q26ymkgqmn] .sidebar.hidden {
        transform: translateX(-100%);
    }

    .penpals-main.sidebar-hidden[b-q26ymkgqmn] {
        margin-top: 0;
    }

    .penpals-title[b-q26ymkgqmn] {
        font-size: 2.1rem;
    }

    .penpals-subtitle[b-q26ymkgqmn] {
        font-size: 1rem;
    }

    .penpal-letter-card[b-q26ymkgqmn] {
        grid-template-columns: minmax(0, 1fr);
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }

    /* Mobile: smaller stamp inline next to CTA button (clean "action bar" layout) */
    .penpal-letter-stamp[b-q26ymkgqmn] {
        width: 44px;
        height: 44px;
        margin-right: 4px;
    }

    .penpal-letter-stamp .stamp-text-curved[b-q26ymkgqmn] {
        font-size: 8px;
    }

    .penpal-letter-stamp .stamp-date[b-q26ymkgqmn] {
        font-size: 7px;
    }

    .penpal-letter-actions[b-q26ymkgqmn] {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .penpal-picker-modal[b-q26ymkgqmn] {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        padding: 1.6rem 1.2rem 1.2rem;
    }

    .penpal-picker-card[b-q26ymkgqmn] {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .penpal-picker-avatar[b-q26ymkgqmn] {
        width: 100%;
        height: 160px;
        border-radius: 18px;
    }

    .penpal-picker-action[b-q26ymkgqmn] {
        width: 100%;
        justify-self: stretch;
    }

    .penpal-picker-backdrop[b-q26ymkgqmn] {
        padding: 0;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .penpals-avatar[b-q26ymkgqmn] {
        min-width: 112px;
        max-width: 112px;
        flex-basis: 112px;
    }

    .penpals-avatar-image[b-q26ymkgqmn] {
        width: 58px;
        height: 58px;
    }

    .penpals-avatar-name[b-q26ymkgqmn] {
        font-size: 0.78rem;
        max-width: 100px;
    }

}

/* Guest Mode Hero */
.penpals-hero.guest-mode[b-q26ymkgqmn] {
    padding-bottom: 2rem;
}

.guest-actions[b-q26ymkgqmn] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

.cta-button[b-q26ymkgqmn] {
    background: var(--accent-gold, #D4AF37);
    color: #fff;
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover[b-q26ymkgqmn] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}

/* How It Works Strip */
.how-it-works[b-q26ymkgqmn] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.how-step[b-q26ymkgqmn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 120px;
    text-align: center;
}

.how-icon[b-q26ymkgqmn] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold, #D4AF37);
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
}

.how-text[b-q26ymkgqmn] {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    font-weight: 500;
}

.how-arrow[b-q26ymkgqmn] {
    color: var(--text-muted, #ccc);
    font-size: 1.2rem;
}

/* Sample Badge */
.penpal-letter-badge.sample[b-q26ymkgqmn] {
    background-color: #64748b; /* Slate 500 */
    color: white;
}

.penpal-letter-card.sample[b-q26ymkgqmn] {
    border-color: rgba(100, 116, 139, 0.2);
}

.penpal-letter-card.sample:hover[b-q26ymkgqmn] {
    border-color: #64748b;
    background-color: rgba(100, 116, 139, 0.02);
}

@media (max-width: 600px) {
    .how-it-works[b-q26ymkgqmn] {
        gap: 0.8rem;
    }
    .how-arrow[b-q26ymkgqmn] {
        display: none;
    }
    .how-step[b-q26ymkgqmn] {
        flex: 1;
        min-width: 80px;
    }
}

/* Mobile polish: keep Penpals content inside the same calm page frame as the other feature pages. */
@media (max-width: 1024px) {
    [b-q26ymkgqmn] .mobile-floating-header {
        z-index: 1200;
        background: linear-gradient(180deg, rgba(250, 236, 218, 0.98) 0%, rgba(250, 236, 218, 0.9) 78%, rgba(250, 236, 218, 0) 100%);
    }

    .app-layout[b-q26ymkgqmn],
    [b-q26ymkgqmn] .app-layout {
        display: block;
        width: 100%;
        max-width: 100vw;
        padding-top: 60px;
        overflow-x: hidden;
        background-color: #FAECDA;
    }

    .penpals-main[b-q26ymkgqmn],
    .penpals-main.sidebar-hidden[b-q26ymkgqmn] {
        width: 100%;
        max-width: 720px;
        min-width: 0;
        margin: 0 auto !important;
        padding: 0 18px 44px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .penpals-hero[b-q26ymkgqmn] {
        width: 100%;
        max-width: 680px;
        margin: 0 auto 34px;
        padding: 30px 0 0;
        box-sizing: border-box;
    }

    .penpals-title[b-q26ymkgqmn] {
        font-size: clamp(2.05rem, 7vw, 2.7rem);
        line-height: 1.1;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .penpals-subtitle[b-q26ymkgqmn] {
        max-width: 36rem;
        font-size: clamp(1.05rem, 2.8vw, 1.25rem);
        line-height: 1.55;
    }

    .guest-actions[b-q26ymkgqmn] {
        margin-top: 1.5rem;
    }

    .how-it-works[b-q26ymkgqmn] {
        width: 100%;
        margin: 2.4rem auto 0;
        padding: 1.8rem 0 0;
        gap: 1rem;
    }

    .penpals-avatars[b-q26ymkgqmn],
    .penpals-letters[b-q26ymkgqmn],
    .penpals-credit-nudge[b-q26ymkgqmn] {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .penpals-avatars-header[b-q26ymkgqmn],
    .penpals-letters-header[b-q26ymkgqmn] {
        width: 100%;
        align-items: flex-start;
        padding: 0;
    }

    .penpals-section-title[b-q26ymkgqmn] {
        font-size: clamp(1.8rem, 5vw, 2.3rem);
        line-height: 1.12;
    }

    .penpals-carousel-wrap[b-q26ymkgqmn],
    .penpals-avatars-row[b-q26ymkgqmn],
    .penpals-letter-list[b-q26ymkgqmn] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .penpals-avatars-row[b-q26ymkgqmn] {
        padding: 4px 0 12px;
        scroll-padding-left: 0;
    }

    .penpal-letter-card[b-q26ymkgqmn],
    .penpals-empty[b-q26ymkgqmn] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 680px) {
    .penpals-main[b-q26ymkgqmn],
    .penpals-main.sidebar-hidden[b-q26ymkgqmn] {
        max-width: 680px;
        width: calc(100% - var(--mobile-page-margin, 16px));
        max-width: calc(100% - var(--mobile-page-margin, 16px));
        padding: 0 var(--mobile-page-margin, 16px) 40px;
    }

    .penpals-hero[b-q26ymkgqmn] {
        padding-top: 24px;
        margin-bottom: 30px;
    }

    .penpals-title[b-q26ymkgqmn] {
        font-size: clamp(2.05rem, 9.2vw, 2.35rem);
        line-height: 1.12;
    }

    .penpals-subtitle[b-q26ymkgqmn] {
        font-size: clamp(1.02rem, 4.4vw, 1.16rem);
        line-height: 1.55;
    }

    .cta-button[b-q26ymkgqmn] {
        width: min(100%, 320px);
        padding: 0.95rem 1.4rem;
        font-size: 1rem;
    }

    .how-it-works[b-q26ymkgqmn] {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.7rem;
    }

    .how-step[b-q26ymkgqmn] {
        flex: 1 1 0;
        min-width: 0;
    }

    .how-icon[b-q26ymkgqmn] {
        width: 46px;
        height: 46px;
    }

    .how-text[b-q26ymkgqmn] {
        font-size: 0.86rem;
        line-height: 1.15;
    }

    .penpals-avatars[b-q26ymkgqmn] {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .penpals-avatars-header[b-q26ymkgqmn],
    .penpals-letters-header[b-q26ymkgqmn] {
        margin-bottom: 16px;
    }

    .penpals-avatar[b-q26ymkgqmn] {
        border-radius: 18px;
        box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
    }

    .penpals-avatar:first-child[b-q26ymkgqmn] {
        margin-left: 0;
    }

    .penpals-letter-list[b-q26ymkgqmn] {
        gap: 20px;
    }

    .penpal-letter-card[b-q26ymkgqmn] {
        border-radius: 18px;
        padding: 1.25rem 1.3rem;
        box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
    }

    .penpal-letter-subject[b-q26ymkgqmn] {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
        line-height: 1.2;
    }

    .penpal-letter-meta[b-q26ymkgqmn] {
        font-size: clamp(0.98rem, 4vw, 1.08rem);
    }

    .penpal-letter-preview[b-q26ymkgqmn] {
        font-size: clamp(1.05rem, 4.6vw, 1.18rem);
        line-height: 1.65;
    }
}

@media (max-width: 420px) {
    .penpals-hero[b-q26ymkgqmn] {
        padding-top: 22px;
    }

    .penpals-section-title[b-q26ymkgqmn] {
        font-size: clamp(1.75rem, 8vw, 2.05rem);
    }

    .penpals-avatar[b-q26ymkgqmn] {
        flex-basis: 112px;
        min-width: 112px;
        max-width: 112px;
    }

    .penpal-letter-card[b-q26ymkgqmn] {
        padding: 1.2rem 1.25rem;
    }

    .penpal-letter-actions[b-q26ymkgqmn] {
        gap: 0.7rem;
    }
}

/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Privacy page styles - copied from Contact.razor.css */

/* Base styles */
[b-2yhuqoxl3p] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

/* Global body/html overflow prevention - REMOVED */

/* App Layout */
[b-2yhuqoxl3p] .app-layout {
    display: flex;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px; /* Account for fixed logo */
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-2yhuqoxl3p] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-2yhuqoxl3p] .sidebar {
    width: 280px;
    /* background: #fff2ec; */
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-2yhuqoxl3p] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-2yhuqoxl3p] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-2yhuqoxl3p] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-2yhuqoxl3p] .sidebar a:hover {
    color: #000;
}

[b-2yhuqoxl3p] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-2yhuqoxl3p] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-2yhuqoxl3p] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-2yhuqoxl3p] .sidebar-logo {
    text-align: center;
}

[b-2yhuqoxl3p] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

/* Sidebar Bottom User Section */
[b-2yhuqoxl3p] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-2yhuqoxl3p] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-2yhuqoxl3p] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
}

[b-2yhuqoxl3p] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, 0.5);
}

[b-2yhuqoxl3p] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text, #4F4A45);
}

[b-2yhuqoxl3p] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

/* User Dropdown */
[b-2yhuqoxl3p] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-2yhuqoxl3p] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
    animation: fadeIn-b-2yhuqoxl3p 0.2s ease-in-out;
}

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

[b-2yhuqoxl3p] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

[b-2yhuqoxl3p] .dropdown-item:hover {
    background-color: #f0dad3;
}



/* Toggle Button */
[b-2yhuqoxl3p] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Button Styles */
[b-2yhuqoxl3p] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-2yhuqoxl3p] .btn:hover {
    background-color: #FADDAA;
}

[b-2yhuqoxl3p] .btn-login {
    background-color: #FBCFA8;
}

[b-2yhuqoxl3p] .btn-primary {
    padding: 12px 25px;
    margin-top: 10px;
    background-color: #FBCFA8;
}

[b-2yhuqoxl3p] .btn-secondary {
    padding: 8px 18px;
    margin-top: 10px;
}

/* Main Container */
[b-2yhuqoxl3p] .container-v3 {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    margin-left: 280px;
    padding: 0;
    transition: margin-left 0.3s ease;
    /* Explicitly clamp to viewport minus sidebar and include padding in width */
    width: calc(100% - 280px);
    max-width: min(1200px, calc(100% - 280px));
    box-sizing: border-box;
    overflow-x: hidden;
}

[b-2yhuqoxl3p] .container-v3.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

/* Privacy specific content styles */
/* Let container-v3 control width/margins to match Terms/FrontPage; keep typography/padding */
.privacy-container[b-2yhuqoxl3p] {
    width: 100%; /* explicit neutralizer so content spans full container-v3 width */
    max-width: 100%;
    padding: 0;
    line-height: 1.6;
    box-sizing: border-box; /* include padding in width to avoid overflow */
    overflow-x: hidden;     /* prevent horizontal scrollbar from inner elements */
}

.legal-header[b-2yhuqoxl3p] {
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.legal-body[b-2yhuqoxl3p] {
    padding: 0 2rem 3rem;
    box-sizing: border-box;
}

.privacy-container h1[b-2yhuqoxl3p] {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: #4F4A45;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: var(--mobile-hero-heading-weight);
}

.privacy-container h2[b-2yhuqoxl3p] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: #4F4A45;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: var(--mobile-section-heading-weight);
}

.privacy-container p[b-2yhuqoxl3p] {
    color: #666;
    margin-bottom: 1rem;
    font-size: 1rem;
    /* Stronger text wrapping to prevent long URLs/emails/tokens creating overflow */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.privacy-container ul[b-2yhuqoxl3p] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.privacy-container li[b-2yhuqoxl3p] {
    color: #666;
    margin-bottom: 0.5rem;
    /* Stronger text wrapping to prevent long list items/URLs creating overflow */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.privacy-container a[b-2yhuqoxl3p] {
    color: #FBCFA8;
    text-decoration: none;
    /* Clamp anchor display so long href text can wrap within the line box */
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
    display: inline;
}

.privacy-container a:hover[b-2yhuqoxl3p] {
    text-decoration: underline;
}

/* Media and inline code/tokens should never overflow its container */
.privacy-container img[b-2yhuqoxl3p],
.privacy-container svg[b-2yhuqoxl3p] {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.privacy-container code[b-2yhuqoxl3p],
.privacy-container pre[b-2yhuqoxl3p],
.privacy-container .nowrap[b-2yhuqoxl3p],
.privacy-container .token[b-2yhuqoxl3p] {
    max-width: 100%;
    white-space: normal;      /* allow wrapping; override any inherited nowrap */
    word-break: break-all;    /* aggressive for long tokens */
    overflow-wrap: anywhere;
}

.last-updated[b-2yhuqoxl3p] {
    font-style: italic;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Bottom CTA section (FrontPage-style) */
.bottom-cta-section[b-2yhuqoxl3p] {
    background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
    padding: 50px 20px;
    margin: 50px 0 30px 0;
    border-radius: 16px;
}

.cta-content[b-2yhuqoxl3p] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-quote-icon[b-2yhuqoxl3p] {
    font-size: 3em;
    margin-bottom: 20px;
    opacity: 0.7;
}

.cta-quote[b-2yhuqoxl3p] {
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

.cta-quote p[b-2yhuqoxl3p] {
    font-family: var(--font-serif);
    font-size: 1.4em;
    font-style: italic;
    color: #4F4A45;
    line-height: 1.6;
    margin: 0;
}

.cta-signature[b-2yhuqoxl3p] {
    font-family: var(--font-serif);
    font-size: 1.1em;
    color: #666;
    font-weight: 600;
}

@media (max-width: 768px) {
    .bottom-cta-section[b-2yhuqoxl3p] {
        padding: 40px var(--mobile-page-margin);
        margin: 40px 0 20px;
    }

    .cta-quote-icon[b-2yhuqoxl3p] {
        font-size: 2.5em;
    }

    .cta-quote p[b-2yhuqoxl3p] {
        font-size: 1.2em;
    }

    .cta-signature[b-2yhuqoxl3p] {
        font-size: 1em;
    }
}

/* Headings */
[b-2yhuqoxl3p] h2, [b-2yhuqoxl3p] h3, [b-2yhuqoxl3p] h4, [b-2yhuqoxl3p] h5 {
    font-family: var(--font-serif) !important;
    font-weight: var(--mobile-section-heading-weight);
    color: #4F4A45;
    margin-top: 0;
}

[b-2yhuqoxl3p] h4,
[b-2yhuqoxl3p] h5 {
    font-family: var(--font-sans) !important;
    font-weight: 600;
}

[b-2yhuqoxl3p] h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
}

[b-2yhuqoxl3p] h3 {
    font-size: 1.7em;
    margin-bottom: 10px;
}

[b-2yhuqoxl3p] h4 {
    font-size: 1.2em;
    margin-bottom: 8px;
}

[b-2yhuqoxl3p] h5 {
    font-size: 1.1em;
    font-weight: 400;
    color: #555;
    margin-bottom: 5px;
}

[b-2yhuqoxl3p] p {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.95em;
}

/* Sidebar Overlay */
.sidebar-overlay[b-2yhuqoxl3p] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-2yhuqoxl3p] {
    display: none;
}

/* Footer Styles */
/* Align footer with Terms layout */
[b-2yhuqoxl3p] .main-footer {
    width: calc(100% - 280px);
    max-width: min(1200px, calc(100% - 280px));
    margin-left: 280px;
    margin-right: auto;
    background-color: #FAF3E5;
    padding: 60px 0 30px 0;
    margin-top: 80px;
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    box-sizing: border-box;
}

[b-2yhuqoxl3p] .main-footer.sidebar-hidden {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Match FrontPage pattern: center the inner container and cap its width, padding aligns with container-v3 */
[b-2yhuqoxl3p] .footer-container {
    max-width: 1200px;
    width: 100%;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

[b-2yhuqoxl3p] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

[b-2yhuqoxl3p] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-2yhuqoxl3p] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-2yhuqoxl3p] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

[b-2yhuqoxl3p] .footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 40px;
}

[b-2yhuqoxl3p] .footer-section {
    padding: 0 var(--mobile-page-margin);
}

[b-2yhuqoxl3p] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-2yhuqoxl3p] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-2yhuqoxl3p] .footer-section ul li {
    margin-bottom: 10px;
}

[b-2yhuqoxl3p] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-2yhuqoxl3p] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

[b-2yhuqoxl3p] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    gap: 20px;
}

[b-2yhuqoxl3p] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-2yhuqoxl3p] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-2yhuqoxl3p] .footer-languages a:hover,
[b-2yhuqoxl3p] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

[b-2yhuqoxl3p] .footer-legal-origin {
    text-align: right;
}

[b-2yhuqoxl3p] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
}

[b-2yhuqoxl3p] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

/* Page-wide guardrail to eliminate horizontal scroll on Privacy */
[b-2yhuqoxl3p] .app-layout {
    overflow-x: hidden; /* prevent page-level horizontal scrollbar */
}

/* Ensure the main content never exceeds the available width */
[b-2yhuqoxl3p] .container-v3 {
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box; /* include padding in width calc */
}

/* Footer should also never exceed page width */
[b-2yhuqoxl3p] .main-footer,
[b-2yhuqoxl3p] .footer-container {
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    [b-2yhuqoxl3p] .toggle-sidebar {
        display: none;
    }

    [b-2yhuqoxl3p] .app-layout {
        padding-top: 60px;
    }

    [b-2yhuqoxl3p] .container-v3 {
        margin-left: 0 !important;
        margin-top: 70px;
        padding: 0 var(--mobile-page-margin);
        width: 100%;
        max-width: 100%;
    }

    [b-2yhuqoxl3p] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
    }

    [b-2yhuqoxl3p] .main-footer {
        margin-left: 0 !important;
    }

    [b-2yhuqoxl3p] .sidebar {
        transform: translateX(-100%);
    }

    [b-2yhuqoxl3p] .sidebar.visible {
        transform: translateX(0);
    }

    [b-2yhuqoxl3p] .sidebar.hidden {
        transform: translateX(-100%);
    }

    [b-2yhuqoxl3p] .toggle-sidebar {
        left: 1rem;
        z-index: 200;
    }
}

@media (max-width: 768px) {
    [b-2yhuqoxl3p] .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    [b-2yhuqoxl3p] .footer-section {
        text-align: center;
    }

    [b-2yhuqoxl3p] .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-2yhuqoxl3p] .footer-legal-origin {
        text-align: center;
    }

    [b-2yhuqoxl3p] .footer-copyright {
        text-align: center;
    }

    [b-2yhuqoxl3p] .container-v3 {
        margin-top: 60px;
        padding: 0 var(--mobile-page-margin);
    }

    .legal-header[b-2yhuqoxl3p] {
        padding: 1.5rem 0;
    }

    .legal-body[b-2yhuqoxl3p] {
        padding: 0 0 2rem;
    }

    .privacy-container h1[b-2yhuqoxl3p] {
        font-size: 2rem;
    }

    /* Mobile touch scroll fixes - REMOVED */
    [b-2yhuqoxl3p] .app-layout {
        /*
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch; 
        */
    }

    [b-2yhuqoxl3p] .container-v3 {
        /*
        overflow-x: hidden;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior: contain;
        */
    }
}

@media (max-width: 480px) {
    .privacy-container h1[b-2yhuqoxl3p] {
        font-size: 1.8rem;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.reset-password-page[b-eyu4y1t2px] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5rem, 8vw, 7rem) 1.5rem 3rem;
    background:
        linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 239, 214, 0.94) 100%),
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 229, 0.34) 38%, transparent 70%);
    color: #3b2a22;
    overflow: hidden;
}

.reset-password-page[b-eyu4y1t2px]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(114, 77, 53, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(114, 77, 53, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.26;
    mask-image: radial-gradient(circle at 50% 44%, black 0%, transparent 72%);
}

.reset-password-page[b-eyu4y1t2px]::after {
    content: "";
    position: absolute;
    width: min(54rem, 92vw);
    height: min(54rem, 92vw);
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 248, 238, 0.28) 43%, transparent 72%);
    pointer-events: none;
}

.reset-password-logo[b-eyu4y1t2px] {
    position: absolute;
    top: 1.8rem;
    left: 2rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: #5c3f37;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    letter-spacing: 0;
}

.reset-password-logo strong[b-eyu4y1t2px] {
    color: #ffaaa3;
    font-weight: 800;
}

.reset-password-shell[b-eyu4y1t2px] {
    width: min(100%, 510px);
    position: relative;
    z-index: 1;
}

.reset-password-card[b-eyu4y1t2px] {
    position: relative;
    width: 100%;
    padding: clamp(2rem, 5vw, 2.65rem);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
    border: 1px solid rgba(154, 111, 79, 0.2);
    box-shadow:
        0 28px 70px rgba(92, 62, 39, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.82) inset;
    text-align: left;
}

.reset-password-icon[b-eyu4y1t2px] {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    color: #8e6346;
    background: rgba(255, 239, 223, 0.86);
    box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.16);
}

.reset-password-line-icon[b-eyu4y1t2px] {
    width: 1.45rem;
    height: 1.45rem;
    display: block;
}

.reset-password-eyebrow[b-eyu4y1t2px] {
    margin: 0 0 0.45rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a06942;
}

.reset-password-card h1[b-eyu4y1t2px] {
    margin: 0;
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: var(--mobile-hero-heading-weight, 700);
    line-height: 1.06;
    color: #3b271f;
}

.reset-password-intro[b-eyu4y1t2px] {
    margin: 0.85rem 0 1.7rem;
    max-width: 28rem;
    color: #745a4a;
    font-size: 1.02rem;
    line-height: 1.6;
}

.reset-password-status-region[b-eyu4y1t2px] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reset-password-form[b-eyu4y1t2px] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reset-password-field[b-eyu4y1t2px] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.reset-password-field label[b-eyu4y1t2px] {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: #4d3427;
}

.reset-password-input[b-eyu4y1t2px] {
    width: 100%;
    min-height: 54px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(142, 113, 82, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #2f241d;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.reset-password-input:focus[b-eyu4y1t2px] {
    outline: none;
    border-color: rgba(195, 122, 63, 0.58);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(216, 145, 81, 0.14);
}

.reset-password-hint[b-eyu4y1t2px],
.reset-password-note[b-eyu4y1t2px] {
    margin: 0;
    color: #8b735f;
    font-size: 0.88rem;
    line-height: 1.5;
}

.reset-password-submit[b-eyu4y1t2px] {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
    padding: 0.85rem 1.45rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4914f 0%, #bd7338 100%);
    color: #fffaf4;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(175, 99, 46, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.reset-password-submit:hover:not(:disabled)[b-eyu4y1t2px] {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(175, 99, 46, 0.3);
}

.reset-password-submit:disabled[b-eyu4y1t2px] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.reset-password-submit--link[b-eyu4y1t2px] {
    margin-top: 0.25rem;
}

.reset-password-secondary-link[b-eyu4y1t2px] {
    align-self: center;
    color: #6f4d3e;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.reset-password-secondary-link:hover[b-eyu4y1t2px] {
    text-decoration: underline;
}

.reset-password-note[b-eyu4y1t2px] {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(154, 111, 79, 0.14);
    text-align: center;
}

.reset-password-message[b-eyu4y1t2px] {
    border-radius: 14px;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.reset-password-message--error[b-eyu4y1t2px] {
    color: #7d3325;
    background: rgba(255, 235, 226, 0.92);
    border: 1px solid rgba(166, 76, 52, 0.22);
}

.reset-password-message--success[b-eyu4y1t2px] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: #425235;
    background: rgba(240, 248, 231, 0.92);
    border: 1px solid rgba(104, 132, 76, 0.22);
}

.reset-password-loading[b-eyu4y1t2px] {
    min-height: 7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #745a4a;
    font-weight: 700;
}

.reset-password-spinner[b-eyu4y1t2px] {
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid rgba(142, 99, 70, 0.22);
    border-top-color: #8e6346;
    border-radius: 50%;
    animation: resetPasswordSpin-b-eyu4y1t2px 0.9s linear infinite;
}

@keyframes resetPasswordSpin-b-eyu4y1t2px {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .reset-password-page[b-eyu4y1t2px] {
        align-items: flex-start;
        padding: 5.8rem 1rem 2rem;
    }

    .reset-password-logo[b-eyu4y1t2px] {
        top: 1.4rem;
        left: 1.25rem;
        font-size: 1.28rem;
    }

    .reset-password-card[b-eyu4y1t2px] {
        border-radius: 16px;
    }

    .reset-password-icon[b-eyu4y1t2px] {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 1rem;
    }
}
/* /Components/Pages/SharedStory.razor.rz.scp.css */
/* SharedStory - Public full-bleed page with standard sidebar */

/* ================ Loading & Not Found ================ */
.shared-story-loading[b-kydlmryx4n] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #faecda;
}

.loading-spinner[b-kydlmryx4n] {
    width: 40px;
    height: 40px;
    border: 3px solid #f0e4d6;
    border-top-color: #c4755d;
    border-radius: 50%;
    animation: spin-b-kydlmryx4n 0.8s linear infinite;
}

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

.shared-story-not-found[b-kydlmryx4n],
.story-closed-door[b-kydlmryx4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(180deg, #FDF8F0 0%, #FAF3E5 50%, #F5ECD8 100%);
    box-sizing: border-box;
}

.closed-door-icon[b-kydlmryx4n] {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 2.5rem;
    filter: grayscale(30%);
}

.closed-door-heading[b-kydlmryx4n] {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 2.6rem;
    color: #4A3F35;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.closed-door-body[b-kydlmryx4n] {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: #6B5D4D;
    max-width: 540px;
    line-height: 1.8;
    margin: 0 auto 3.5rem;
}

.closed-door-divider[b-kydlmryx4n] {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.4), transparent);
    margin: 0 auto 3rem;
}

.closed-door-product-heading[b-kydlmryx4n] {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    color: #A67B50;
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

.closed-door-product-body[b-kydlmryx4n] {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #7A6B58;
    max-width: 480px;
    line-height: 1.75;
    margin: 0 auto 3rem;
}

/* Parchment CTA button — matches Memorial pattern */
.story-cta-button[b-kydlmryx4n] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2.5rem;
    background: linear-gradient(145deg, #F5ECD8 0%, #EDE1C9 35%, #E8D9BE 70%, #DFD0B2 100%);
    color: #5A4A3A;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 12px;
    text-decoration: none;
    outline: 2px dashed rgba(180, 150, 100, 0.25);
    outline-offset: 4px;
    box-shadow:
        0 2px 8px rgba(160, 120, 60, 0.12),
        0 4px 20px rgba(160, 120, 60, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.story-cta-button:hover[b-kydlmryx4n] {
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(160, 120, 60, 0.2),
        0 8px 32px rgba(160, 120, 60, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cta-candle-icon[b-kydlmryx4n] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    animation: candleFlicker-b-kydlmryx4n 3s ease-in-out infinite;
}

@keyframes candleFlicker-b-kydlmryx4n {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.04); }
}

.closed-door-cta-link[b-kydlmryx4n] {
    text-decoration: none;
}

.closed-door-granny[b-kydlmryx4n] {
    margin-top: 8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.6;
}

.closed-door-granny-img[b-kydlmryx4n] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 154, 108, 0.25);
    object-fit: cover;
    flex-shrink: 0;
}

.closed-door-granny-text[b-kydlmryx4n] {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.85rem;
    color: #A0927E;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Night mode — Closed Door */
:global(body.night-mode) .story-closed-door[b-kydlmryx4n] {
    background: linear-gradient(180deg, #1a1512, #231e18, #1a1512);
}

:global(body.night-mode) .closed-door-heading[b-kydlmryx4n] {
    color: #E8DDD0;
}

:global(body.night-mode) .closed-door-body[b-kydlmryx4n] {
    color: #A89880;
}

:global(body.night-mode) .closed-door-divider[b-kydlmryx4n] {
    background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.3), transparent);
}

:global(body.night-mode) .closed-door-product-heading[b-kydlmryx4n] {
    color: #C4A882;
}

:global(body.night-mode) .closed-door-product-body[b-kydlmryx4n] {
    color: #A89880;
}

:global(body.night-mode) .story-cta-button[b-kydlmryx4n] {
    background: linear-gradient(145deg, #3A3020 0%, #4A3D2A 35%, #3E3322 70%, #352B1C 100%);
    color: #D4B882;
    box-shadow: 0 2px 12px rgba(180, 140, 60, 0.2), 0 4px 24px rgba(180, 140, 60, 0.1);
    outline-color: rgba(180, 140, 90, 0.2);
}

:global(body.night-mode) .closed-door-granny-text[b-kydlmryx4n] {
    color: #A89880;
}

/* Responsive — Closed Door */
@media (max-width: 768px) {
    .story-closed-door[b-kydlmryx4n] {
        padding: 3rem 1.5rem;
    }

    .closed-door-heading[b-kydlmryx4n] {
        font-size: 2rem;
    }

    .closed-door-body[b-kydlmryx4n] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .closed-door-heading[b-kydlmryx4n] {
        font-size: 1.7rem;
    }

    .story-cta-button[b-kydlmryx4n] {
        padding: 0.85rem 2rem;
        font-size: 0.95rem;
    }

    .closed-door-granny-img[b-kydlmryx4n] {
        width: 32px;
        height: 32px;
    }

    .closed-door-granny[b-kydlmryx4n] {
        gap: 0.6rem;
        margin-top: 5rem;
    }
}

/* ================ App Layout ================ */
/* MainLayout wraps @Body in `.layout-content { display:flex; justify-content:center }`,
   which would otherwise shrink-wrap our flex container to its content's natural width
   and then center it (causing cream gutters on either side of the hero).
   Force full-width so .story-main can correctly fill the space past the fixed sidebar. */
.app-layout[b-kydlmryx4n] {
    display: flex;
    width: 100%;
    align-items: stretch;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #faecda;
}

/* ================ Sidebar (unchanged) ================ */
[b-kydlmryx4n] .sidebar {
    width: 280px;
    background: #faecda;
    padding: 1.5rem;
    border-right: 1px solid #d8b8ad;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-kydlmryx4n] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-kydlmryx4n] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

[b-kydlmryx4n] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-kydlmryx4n] .app-logo-link:hover,
[b-kydlmryx4n] .app-logo-link:focus {
    outline: none;
    border: none;
    background: none;
}

[b-kydlmryx4n] .sidebar-logo {
    text-align: center;
}

[b-kydlmryx4n] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

/* ================ Sidebar Context (Story) ================ */
.story-sidebar-context[b-kydlmryx4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0.5rem 0;
    gap: 4px;
}

.story-sidebar-avatar[b-kydlmryx4n] {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(196, 117, 93, 0.25);
    box-shadow: 0 4px 18px rgba(90, 50, 20, 0.14);
    margin-bottom: 6px;
    flex-shrink: 0;
}

.story-sidebar-avatar img[b-kydlmryx4n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-sidebar-title[b-kydlmryx4n] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: #4a2f21;
    line-height: 1.12;
    max-width: 220px;
}

.story-sidebar-lifespan[b-kydlmryx4n] {
    margin: 6px 0 16px;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: rgba(92, 64, 51, 0.72);
    line-height: 1.2;
}

.story-sidebar-description[b-kydlmryx4n] {
    margin: 0 0 18px;
    max-width: 218px;
    font-family: var(--font-serif);
    font-size: 1.03rem;
    font-style: italic;
    color: rgba(74, 47, 33, 0.72);
    line-height: 1.58;
}

.story-sidebar-shared-by[b-kydlmryx4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    padding: 12px 20px;
    background: rgba(250, 237, 222, 0.65);
    border-radius: 12px;
}

.shared-by-label[b-kydlmryx4n] {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a08060;
    font-weight: 600;
}

.shared-by-name[b-kydlmryx4n] {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 600;
    color: #5b3b2a;
}

.story-sidebar-spacer[b-kydlmryx4n] {
    flex: 1;
}

.story-sidebar-cta[b-kydlmryx4n] {
    text-align: center;
    padding: 0 1rem 1.5rem;
}

.story-sidebar-cta-text[b-kydlmryx4n] {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
    color: rgba(90, 60, 40, 0.68);
    line-height: 1.5;
}

.story-sidebar-cta-link[b-kydlmryx4n] {
    display: inline-block;
    padding: 10px 22px;
    color: #7f4e35;
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 600;
    border: 1.5px solid rgba(127, 78, 53, 0.3);
    border-radius: 999px;
    transition: all 0.3s ease;
}

.story-sidebar-cta-link:hover[b-kydlmryx4n] {
    background: rgba(127, 78, 53, 0.06);
    border-color: rgba(127, 78, 53, 0.5);
    transform: translateY(-1px);
}

/* ================ Toggle Button ================ */
[b-kydlmryx4n] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

[b-kydlmryx4n] .toggle-sidebar:hover {
    background: rgba(255, 228, 210, 0.95);
}

@media (max-width: 1024px) {
    [b-kydlmryx4n] .toggle-sidebar {
        display: none !important;
    }
}

/* Hide CTA on mobile top bar — this is a gift, not a funnel */
[b-kydlmryx4n] .mobile-create-btn {
    display: none !important;
}

/* ================ Sidebar Overlay (mobile) ================ */
.sidebar-overlay[b-kydlmryx4n] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
}

.sidebar-overlay.hidden[b-kydlmryx4n] {
    display: none;
}

/* ================ Main Content (Fade-to-Cream) ================ */
.story-main[b-kydlmryx4n] {
    /* fill the remaining flex space past the fixed sidebar */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 280px;
    margin-top: 0;
    padding-top: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    /* ThemeExperience-style cream foundation under the atmosphere layer */
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 244, 227, 0.9) 0%, rgba(253, 248, 240, 0.36) 42%, rgba(253, 248, 240, 0) 76%),
        linear-gradient(180deg, #fbf6ef 0%, #fdf8f0 100%);
    transition: margin-left 0.3s ease;
}

.story-main.sidebar-hidden[b-kydlmryx4n] {
    margin-left: 0;
}

/* Atmospheric image layer — mirrors ThemeExperienceAtmosphere:
    absolute image + cream fade, so content starts inside the atmosphere instead of below it. */
.shared-keepsake-hero[b-kydlmryx4n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    margin: 0;
    height: clamp(560px, 82vh, 760px);
    background-color: var(--cream-50, #FBF7F0);
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shared-keepsake-hero[b-kydlmryx4n]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    transform: scale(1.04);
    filter: saturate(0.95) contrast(0.96) brightness(0.94);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Cream wash keeps the title readable while the image still spans the full canvas. */
.shared-keepsake-hero[b-kydlmryx4n]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(253, 248, 240, 0.92) 0%, rgba(253, 248, 240, 0.72) 24%, rgba(253, 248, 240, 0.38) 46%, rgba(253, 248, 240, 0) 68%),
        linear-gradient(
            180deg,
            rgba(253, 248, 240, 0.1) 0%,
            rgba(253, 248, 240, 0.24) 18%,
            rgba(253, 248, 240, 0.52) 34%,
            rgba(253, 248, 240, 0.84) 50%,
            rgba(253, 248, 240, 0.98) 66%,
            rgba(253, 248, 240, 1) 78%
        );
    pointer-events: none;
}

.story-main[b-kydlmryx4n]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 241, 220, 0.4) 0%, transparent 32%),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.2) 0%, transparent 20%);
}

/* Reading column — body text directly on cream, like a printed page.
   Position relative so the wax seal can absolutely position off-center against it. */
.story-reading-column[b-kydlmryx4n] {
    position: relative;
    z-index: 1;
    max-width: 660px;
    margin: 0 auto;
    padding: clamp(44px, 6vh, 72px) 1.5rem 96px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Whisper strip — quiet header, no border */
.story-whisper-strip[b-kydlmryx4n] {
    text-align: center;
    margin: 0 0 32px;
    padding: 0;
    border: none;
}

.story-whisper-text[b-kydlmryx4n] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-style: italic;
    color: rgba(75, 46, 46, 0.62);
    letter-spacing: 0.01em;
}

.story-body[b-kydlmryx4n] {
    padding: 0;
    background: transparent;
    border: none;
}

.story-type-badge[b-kydlmryx4n] {
    text-align: center;
    margin: 0 0 14px;
    color: #aa7c57;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
}

.story-title[b-kydlmryx4n] {
    margin: 0 0 32px;
    text-align: center;
    color: #2f1d12;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.story-theme-card[b-kydlmryx4n] {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 36px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255, 250, 244, 0.55);
    border: 1px solid rgba(190, 158, 130, 0.28);
    box-shadow: 0 6px 22px rgba(86, 53, 29, 0.10);
    text-align: center;
}

.story-theme-image[b-kydlmryx4n] {
    display: block;
    width: 400px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.story-theme-caption[b-kydlmryx4n] {
    display: block;
    margin-top: 10px;
    padding: 0 8px 6px;
    color: #5b3b2a;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    font-style: italic;
}

/* Personal note — attribution flanked by copper hairlines */
.story-dedication[b-kydlmryx4n] {
    margin: 30px 0 26px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    text-align: center;
}

.dedication-attribution[b-kydlmryx4n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 14px;
    font-family: var(--font-handwriting);
    font-size: 1.55rem;
    font-weight: 400;
    font-style: normal;
    color: #875f44;
    line-height: 1.2;
}

.dedication-attribution[b-kydlmryx4n]::before,
.dedication-attribution[b-kydlmryx4n]::after {
    content: '';
    flex: 1;
    max-width: 170px;
    height: 1px;
    background: rgba(184, 131, 95, 0.42);
}

.dedication-attribution span[b-kydlmryx4n] {
    flex: 0 1 auto;
}

.dedication-text[b-kydlmryx4n] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-style: italic;
    color: #4b2e2e;
    line-height: 1.7;
}

/* Reading column — body text directly on cream */
.story-content[b-kydlmryx4n] {
    color: #3e2b1f;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.8;
}

.story-content[b-kydlmryx4n]  p {
    margin: 0 0 1.25em;
}

.story-content[b-kydlmryx4n]  p:last-child {
    margin-bottom: 0;
}

.story-content[b-kydlmryx4n]  em {
    color: #4b3022;
}

.story-content[b-kydlmryx4n]  strong {
    color: #4a2f21;
    font-weight: 600;
}

.story-content[b-kydlmryx4n]  blockquote {
    margin: 1.4em 0;
    padding-left: 18px;
    border-left: 2px solid rgba(167, 129, 95, 0.45);
    color: #644532;
    font-style: italic;
}

.story-content[b-kydlmryx4n]  h2,
.story-content[b-kydlmryx4n]  h3 {
    font-family: var(--font-serif);
    color: #3a2218;
    font-weight: 500;
    line-height: 1.2;
    margin: 1.6em 0 0.6em;
}

.story-content[b-kydlmryx4n]  h2 {
    font-size: 1.55rem;
}

.story-content[b-kydlmryx4n]  h3 {
    font-size: 1.3rem;
}

.story-footer[b-kydlmryx4n] {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(169, 139, 110, 0.22);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.story-cta-link[b-kydlmryx4n] {
    color: #7f4e35;
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.story-cta-link:hover[b-kydlmryx4n] {
    text-decoration: underline;
    color: #5e3a27;
}

.story-cta-divider[b-kydlmryx4n] {
    color: #b79a7f;
}

.story-microcopy[b-kydlmryx4n] {
    margin: 10px 0 0;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: rgba(92, 60, 44, 0.68);
    font-style: italic;
}

.story-sigill-wrap[b-kydlmryx4n] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 42px auto 0;
}

/* Sigill — centered closing stamp above the final CTA, matching the shared-letter seal. */
[b-kydlmryx4n] .story-sigill {
    display: block;
    width: 118px;
    height: auto;
    position: relative;
    left: auto;
    bottom: auto;
    margin: 0;
    z-index: 4;
    filter:
        drop-shadow(0 2px 4px rgba(60, 30, 8, 0.32))
        drop-shadow(0 8px 16px rgba(80, 40, 10, 0.18))
        drop-shadow(0 0 22px rgba(193, 140, 70, 0.10));
    transition: transform 0.4s ease, filter 0.4s ease;
    cursor: default;
    pointer-events: auto;
}

[b-kydlmryx4n] .story-sigill:hover {
    transform: rotate(-6deg) translateY(-2px) scale(1.01);
    filter:
        drop-shadow(0 3px 5px rgba(60, 30, 8, 0.36))
        drop-shadow(0 10px 20px rgba(80, 40, 10, 0.22))
        drop-shadow(0 0 28px rgba(193, 140, 70, 0.16));
}

/* Desktop shared-letter composition: compact, centered, and fully readable in one ceremonial view. */
@media (min-width: 1025px) {
    .story-reading-column[b-kydlmryx4n] {
        max-width: 620px;
        padding: clamp(32px, 4.6vh, 52px) 1.5rem 38px;
    }

    .story-whisper-strip[b-kydlmryx4n] {
        margin-bottom: 20px;
    }

    .story-whisper-text[b-kydlmryx4n] {
        font-size: 1.02rem;
    }

    .story-type-badge[b-kydlmryx4n] {
        margin-bottom: 10px;
        font-size: 0.62rem;
        letter-spacing: 0.24em;
    }

    .story-title[b-kydlmryx4n] {
        max-width: 11.5em;
        margin: 0 auto 16px;
        font-size: clamp(2rem, 2.7vw, 2.55rem);
        line-height: 1.06;
    }

    .story-theme-card[b-kydlmryx4n] {
        margin-bottom: 24px;
        padding: 6px;
        border-radius: 10px;
        box-shadow: 0 5px 18px rgba(86, 53, 29, 0.09);
    }

    .story-theme-image[b-kydlmryx4n] {
        width: 400px;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
    }

    .story-theme-caption[b-kydlmryx4n] {
        margin-top: 7px;
        padding: 0 6px 4px;
        font-size: 0.82rem;
    }

    .story-dedication[b-kydlmryx4n] {
        margin: 24px 0 18px;
    }

    .dedication-attribution[b-kydlmryx4n] {
        gap: 16px;
        margin-bottom: 6px;
        font-size: 1.2rem;
    }

    .dedication-attribution[b-kydlmryx4n]::before,
    .dedication-attribution[b-kydlmryx4n]::after {
        max-width: 128px;
    }

    .dedication-text[b-kydlmryx4n] {
        font-size: 0.98rem;
        line-height: 1.42;
    }

    .story-content[b-kydlmryx4n] {
        max-width: 620px;
        margin: 0 auto;
        font-size: 1.2rem;
        line-height: 1.62;
    }

    .story-content[b-kydlmryx4n]  p {
        margin-bottom: 1.05em;
    }

    .story-sigill-wrap[b-kydlmryx4n] {
        margin-top: 24px;
    }

    [b-kydlmryx4n] .story-sigill {
        width: 88px;
    }

    .story-footer[b-kydlmryx4n] {
        max-width: 560px;
        margin: 10px auto 0;
        padding-top: 12px;
        gap: 12px;
    }

    .story-cta-link[b-kydlmryx4n] {
        font-size: 0.88rem;
    }

    .story-microcopy[b-kydlmryx4n] {
        margin-top: 6px;
        font-size: 0.76rem;
    }
}

/* ================ Bottom Brand (mobile) ================ */
.story-bottom-brand[b-kydlmryx4n] {
    display: none;
}

.story-bottom-brand a[b-kydlmryx4n] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #8b7355;
}

.story-bottom-brand .brand-logo[b-kydlmryx4n] {
    height: 28px;
    width: auto;
    opacity: 0.7;
}

.story-bottom-brand .brand-tagline[b-kydlmryx4n] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a8575;
}

/* ================ Floating Guest Header (mobile only) ================ */
.story-guest-header[b-kydlmryx4n] {
    display: none; /* desktop: sidebar has the logo */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.25rem;
    pointer-events: none;
}

.story-guest-header > *[b-kydlmryx4n] {
    pointer-events: all;
}

.story-guest-logo-link[b-kydlmryx4n] {
    display: block;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.story-guest-logo-link:hover[b-kydlmryx4n] { opacity: 1; }

.story-guest-logo[b-kydlmryx4n] {
    height: 34px;
    width: auto;
    display: block;
}

.story-guest-menu-wrapper[b-kydlmryx4n] { position: relative; }

.story-guest-menu-btn[b-kydlmryx4n] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(164, 123, 80, 0.2);
    background: rgba(253, 248, 240, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}

.story-guest-menu-btn:hover[b-kydlmryx4n] {
    background: rgba(253, 248, 240, 0.95);
    border-color: rgba(164, 123, 80, 0.4);
}

.story-guest-menu-dots[b-kydlmryx4n] {
    font-size: 1.4rem;
    color: #6B5B4E;
    letter-spacing: 2px;
    line-height: 1;
}

.story-guest-menu-backdrop[b-kydlmryx4n] {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.story-guest-menu-dropdown[b-kydlmryx4n] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: rgba(253, 248, 240, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(232, 213, 200, 0.5);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14);
    padding: 0.5rem 0;
    z-index: 70;
    animation: storyGuestMenuFadeIn-b-kydlmryx4n 0.2s ease-out;
}

@keyframes storyGuestMenuFadeIn-b-kydlmryx4n {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.story-guest-menu-item[b-kydlmryx4n] {
    display: block;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #5C4033;
    text-decoration: none;
    transition: background 0.15s ease;
}

.story-guest-menu-item:hover[b-kydlmryx4n] {
    background: rgba(196, 117, 93, 0.06);
}

/* ================ Responsive: Tablet <=1024px ================ */
@media (max-width: 1024px) {
    .app-layout[b-kydlmryx4n] {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .story-guest-header[b-kydlmryx4n] {
        display: flex; /* show floating header, MobileTopBar is gone */
    }

    .story-main[b-kydlmryx4n] {
        width: 100%;
        flex: 1 1 auto;
        margin-left: 0 !important;
        min-height: 100vh;
    }

    [b-kydlmryx4n] .sidebar {
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
    }

    [b-kydlmryx4n] .sidebar.visible {
        transform: translateX(0);
    }

    [b-kydlmryx4n] .sidebar.hidden {
        transform: translateX(-100%);
    }

    .shared-keepsake-hero[b-kydlmryx4n] {
        height: clamp(360px, 48vh, 460px);
    }

    .story-reading-column[b-kydlmryx4n] {
        padding: clamp(78px, 10vh, 96px) 1.5rem 84px;
    }
}

/* ================ Responsive: Mobile <=768px ================ */
@media (max-width: 768px) {
    /* Mobile uses the clean cream top from the reference image; no atmospheric image behind the header/title. */
    .shared-keepsake-hero[b-kydlmryx4n] {
        display: none;
    }

    .story-main[b-kydlmryx4n]::before {
        display: none;
    }

    .story-reading-column[b-kydlmryx4n] {
        padding: 92px 1.5rem 72px;
    }

    .story-whisper-text[b-kydlmryx4n] {
        font-size: 1.18rem;
    }

    .story-title[b-kydlmryx4n] {
        font-size: clamp(1.85rem, 7vw, 2.4rem);
        margin-bottom: 26px;
    }

    .story-theme-image[b-kydlmryx4n] {
        width: min(82vw, 400px);
    }

    .story-theme-caption[b-kydlmryx4n] {
        font-size: 1rem;
    }

    .story-dedication[b-kydlmryx4n] {
        margin: 28px 0 30px;
    }

    .dedication-attribution[b-kydlmryx4n] {
        font-size: 1.4rem;
    }

    .dedication-text[b-kydlmryx4n] {
        font-size: 1.08rem;
    }

    .story-content[b-kydlmryx4n] {
        font-size: 1.08rem;
        line-height: 1.78;
    }

    .story-footer[b-kydlmryx4n] {
        margin-top: 18px;
    }

    [b-kydlmryx4n] .story-sigill {
        width: 102px;
    }

    .story-sigill-wrap[b-kydlmryx4n] {
        margin-top: 34px;
    }
}

/* ================ Responsive: Small Mobile <=480px ================ */
@media (max-width: 480px) {
    .shared-keepsake-hero[b-kydlmryx4n] {
        display: none;
    }

    .story-reading-column[b-kydlmryx4n] {
        padding: 92px 1.25rem 64px;
    }

    .story-whisper-strip[b-kydlmryx4n] {
        margin-bottom: 24px;
    }

    .story-whisper-text[b-kydlmryx4n] {
        font-size: 1.08rem;
    }

    .story-title[b-kydlmryx4n] {
        font-size: clamp(1.7rem, 8vw, 2.05rem);
    }

    .story-content[b-kydlmryx4n] {
        font-size: 1.04rem;
    }

    .story-footer[b-kydlmryx4n] {
        gap: 8px;
    }

    [b-kydlmryx4n] .story-sigill {
        width: 92px;
    }
}
/* /Components/Pages/Subscription.razor.rz.scp.css */
/* Subscription.razor.css - Subscription Page Styles */

/* Base styles inherited from FrontPage but with warmer tones */
[b-di6eaw51zi] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

/* App Layout */
[b-di6eaw51zi] .app-layout,
.app-layout[b-di6eaw51zi] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* inherited font-sans */
    background: linear-gradient(135deg, #FFF9F0 0%, #FFEFD5 50%, #FFF4E4 100%);
    padding-top: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-di6eaw51zi] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-di6eaw51zi] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

    [b-di6eaw51zi] .sidebar.hidden {
        transform: translateX(-100%);
    }

[b-di6eaw51zi] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1.0rem;
}

[b-di6eaw51zi] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-di6eaw51zi] .sidebar-logo img {
    max-width: 180px;
    width: auto;
    height: 50px;
}

[b-di6eaw51zi] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-di6eaw51zi] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
}

[b-di6eaw51zi] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-di6eaw51zi] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-di6eaw51zi] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

    [b-di6eaw51zi] .sidebar-user:hover {
        background-color: rgba(255, 228, 210, 0.5);
    }

[b-di6eaw51zi] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #4F4A45;
}

[b-di6eaw51zi] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

[b-di6eaw51zi] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-di6eaw51zi] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
}

[b-di6eaw51zi] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

    [b-di6eaw51zi] .dropdown-item:hover {
        background-color: #f0dad3;
    }



/* Toggle Sidebar Button */
[b-di6eaw51zi] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Main Container */
[b-di6eaw51zi] .container-v3 {
    flex: 1;
    width: min(1200px, calc(100vw - 280px));
    max-width: min(1200px, calc(100vw - 280px));
    margin: 30px 0;
    margin-left: calc(280px + max(0px, (100vw - 280px - 1200px) / 2));
    padding: 0 20px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

    [b-di6eaw51zi] .container-v3.sidebar-hidden {
        margin-left: max(0px, calc((100vw - 1200px) / 2));
        width: min(1200px, 100%);
        max-width: min(1200px, 100vw);
    }

/* Granny Hero Section */
[b-di6eaw51zi] .granny-hero-section {
    /* background: linear-gradient(135deg, rgba(255, 249, 240, 0.95) 0%, rgba(255, 244, 228, 0.95) 100%);
    border-radius: 25px;
    padding: 50px 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3; */
    position: relative;
    overflow: hidden;
}

    [b-di6eaw51zi] .granny-hero-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(251, 207, 168, 0.18) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: candleFlicker-b-di6eaw51zi 4s ease-in-out infinite;
    }

    [b-di6eaw51zi] .granny-hero-section::after {
        content: '';
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -12px;
        height: 22px;
        background: radial-gradient(circle, rgba(84, 52, 33, 0.05) 0%, rgba(84, 52, 33, 0) 70%);
        filter: blur(2px);
        pointer-events: none;
    }

[b-di6eaw51zi] .granny-hero-content {
    display: flex;
    align-items: center;
    /* gap: 40px; */
    position: relative;
    z-index: 1;
}

[b-di6eaw51zi] .granny-illustration-wrapper {
    flex-shrink: 0;
   /* transform: translateY(-20px);*/
}

[b-di6eaw51zi] .granny-illustration {
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}

@keyframes candleFlicker-b-di6eaw51zi {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.015);
    }
    70% {
        opacity: 0.96;
        transform: scale(1.01);
    }
}

[b-di6eaw51zi] .granny-welcome-text {
    flex: 1;
}

[b-di6eaw51zi] .granny-title {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.5em;
    font-weight: var(--mobile-hero-heading-weight);
    color: #4F4A45;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

[b-di6eaw51zi] .granny-subtitle {
    font-size: 1.2em;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Granny Section Base */
[b-di6eaw51zi] .granny-section {
    /* background: rgba(255, 255, 255, 0.7); */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* border-radius: 20px; */
    padding: 40px;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(245, 229, 211, 0.6); */
}

[b-di6eaw51zi] .granny-section-header {
    text-align: center;
    margin-bottom: 35px;
}

[b-di6eaw51zi] .granny-section-title {
    /* inherited font-sans */
    font-size: 2em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 10px 0;
}

[b-di6eaw51zi] .granny-section-subtitle {
    font-size: 1.1em;
    color: #666;
    margin: 0;
    font-style: italic;
}

/* Cards Grid */
[b-di6eaw51zi] .granny-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

[b-di6eaw51zi] .granny-card {
    background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0dad3;
    transition: all 0.3s ease;
}

    [b-di6eaw51zi] .granny-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

[b-di6eaw51zi] .granny-card-highlight {
    background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    border: 2px solid #E8B076;
}

[b-di6eaw51zi] .granny-card-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-align: center;
}

[b-di6eaw51zi] .granny-card-title {
    /* inherited font-sans */
    font-size: 1.3em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 10px 0;
}

[b-di6eaw51zi] .granny-card-text {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Progress Cards */
[b-di6eaw51zi] .granny-progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

[b-di6eaw51zi] .granny-progress-card {
    background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3;
    transition: all 0.3s ease;
}

    [b-di6eaw51zi] .granny-progress-card:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

[b-di6eaw51zi] .progress-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

[b-di6eaw51zi] .progress-number {
    font-size: 3em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 10px;
}

[b-di6eaw51zi] .progress-label {
    font-size: 1em;
    color: #666;
    font-weight: 600;
}

/* Featured Theme */
[b-di6eaw51zi] .granny-featured-theme {
    display: flex;
    background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #f5e5d3;
    transition: all 0.3s ease;
}

    [b-di6eaw51zi] .granny-featured-theme:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

[b-di6eaw51zi] .theme-image {
    width: 40%;
    object-fit: cover;
    border-radius: 20px;
    margin: 1em;
}

[b-di6eaw51zi] .theme-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[b-di6eaw51zi] .theme-title {
    /* inherited font-sans */
    font-size: 1.8em;
    font-weight: 700;
    color: #4F4A45;
    margin: 0 0 15px 0;
}

[b-di6eaw51zi] .theme-description {
    font-size: 1.1em;
    color: #666;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

[b-di6eaw51zi] .btn-theme {
    align-self: flex-start;
    padding: 12px 30px;
    background-color: #FBCFA8;
    color: #4F4A45;
    border: 2px solid #F0C07A;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

    [b-di6eaw51zi] .btn-theme:hover {
        background-color: #F0C07A;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(251, 207, 168, 0.4);
    }

/* Wisdom Section */
[b-di6eaw51zi] .granny-wisdom {
    background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
}

[b-di6eaw51zi] .granny-wisdom-card {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

[b-di6eaw51zi] .granny-quote-icon {
    font-size: 3em;
    margin-bottom: 20px;
    opacity: 0.7;
}

[b-di6eaw51zi] .granny-quote {
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

    [b-di6eaw51zi] .granny-quote p {
        font-size: 1.4em;
        font-style: italic;
        color: #4F4A45;
        line-height: 1.6;
        margin: 0;
    }

[b-di6eaw51zi] .granny-signature {
    font-size: 1.1em;
    color: #666;
    font-weight: 600;
}

/* Quick Actions */
[b-di6eaw51zi] .granny-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

[b-di6eaw51zi] .granny-action-btn {
    background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
    border: 2px solid #f5e5d3;
    border-radius: 15px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* inherited font-sans */
}

    [b-di6eaw51zi] .granny-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
    }

[b-di6eaw51zi] .action-icon {
    font-size: 2.5em;
}

[b-di6eaw51zi] .action-label {
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
}

/* Sidebar Overlay */
.sidebar-overlay[b-di6eaw51zi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-di6eaw51zi] {
    display: none;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    [b-di6eaw51zi] .mobile-top-bar {
        display: flex !important;
    }

    [b-di6eaw51zi] .toggle-sidebar {
        display: none !important;
    }

    [b-di6eaw51zi] .app-layout,
    .app-layout[b-di6eaw51zi] {
        display: block;
        padding-top: 60px;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        overflow-x: clip;
    }

    [b-di6eaw51zi] .container-v3 {
        margin-left: 0 !important;
        margin-top: 70px;
        width: 100%;
        max-width: 100%;
    }

    [b-di6eaw51zi] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

        [b-di6eaw51zi] .sidebar.visible {
            transform: translateX(0);
        }

    [b-di6eaw51zi] .granny-hero-content {
        flex-direction: column;
        text-align: center;
    }

    [b-di6eaw51zi] .granny-illustration-wrapper {
        transform: none;
    }

    [b-di6eaw51zi] .granny-illustration {
        width: 300px;
    }

    [b-di6eaw51zi] .granny-featured-theme {
        flex-direction: column;
    }

    [b-di6eaw51zi] .theme-image {
        width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
    }
}

@media (max-width: 768px) {
    [b-di6eaw51zi] .container-v3 {
        padding: 0 var(--mobile-page-margin);
        margin-top: 20px;
        gap: 30px;
    }

    [b-di6eaw51zi] .granny-hero-section {
        padding: 30px 20px;
    }

    [b-di6eaw51zi] .granny-title {
        font-size: 2em;
    }

    [b-di6eaw51zi] .granny-subtitle {
        font-size: 1.1em;
    }

    [b-di6eaw51zi] .granny-section {
        padding: 30px 20px;
    }

    [b-di6eaw51zi] .granny-section-title {
        font-size: 1.6em;
    }

    [b-di6eaw51zi] .granny-cards-grid {
        grid-template-columns: 1fr;
    }

    [b-di6eaw51zi] .granny-progress-cards {
        grid-template-columns: 1fr;
    }

    [b-di6eaw51zi] .theme-content {
        padding: 25px;
    }

    [b-di6eaw51zi] .theme-title {
        font-size: 1.5em;
    }

    [b-di6eaw51zi] .granny-quote p {
        font-size: 1.2em;
    }

    [b-di6eaw51zi] .granny-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    [b-di6eaw51zi] .granny-illustration {
        width: 300px;
    }

    [b-di6eaw51zi] .granny-title {
        font-size: 1.8em;
    }

    [b-di6eaw51zi] .granny-subtitle {
        font-size: 1em;
    }

    [b-di6eaw51zi] .granny-section-title {
        font-size: 1.4em;
    }

    [b-di6eaw51zi] .granny-card {
        padding: 20px;
    }

    [b-di6eaw51zi] .granny-progress-card {
        padding: 20px;
    }

    [b-di6eaw51zi] .progress-number {
        font-size: 2.5em;
    }
}

/* Subscription specific styling */
[b-di6eaw51zi] .subscription-hero {
    position: relative;
    /*padding: 4rem 3rem;*/
}

[b-di6eaw51zi] .subscription-welcome-text {
    max-width: 540px;
    /*background: rgba(255, 250, 242, 0.85);*/
    padding: 2rem 2.25rem;
    /*border-radius: 28px;*/
    /*box-shadow: 0 18px 40px rgba(148, 117, 89, 0.18);*/
    /*border: 1px solid rgba(245, 214, 187, 0.6);*/
}

[b-di6eaw51zi] .subscription-title {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.5em;
    font-weight: var(--mobile-hero-heading-weight);
    color: #4F4A45;
    margin: 0 0 20px 0;
    line-height: 1.2;
    margin-bottom: 1rem;
}

[b-di6eaw51zi] .subscription-subtitle {
    font-size: 1.2em;
    color: #666;
    line-height: 1.6;
    margin: 0;

}

[b-di6eaw51zi] .subscription-offers-section {
    width: 100%;
    max-width: 1120px;
    margin: 1rem auto 0;
    padding: 0 1rem 0;
}

[b-di6eaw51zi] .subscription-offers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.65rem;
    margin-bottom: 1.85rem;
    align-items: stretch;
}

/* ── Card base ───────────────────────────────── */
[b-di6eaw51zi] .subscription-offer-card {
    background: rgba(255, 253, 249, 0.94);
    border-radius: 14px;
    padding: 2.45rem 2rem 2.05rem;
    box-shadow:
        0 14px 34px rgba(92, 62, 39, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.78) inset;
    border: 1px solid rgba(189, 151, 113, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    position: relative;
    height: 100%;
}

    [b-di6eaw51zi] .subscription-offer-card:hover {
        transform: translateY(-3px);
        border-color: rgba(179, 124, 77, 0.38);
        box-shadow:
            0 18px 42px rgba(92, 62, 39, 0.1),
            0 1px 0 rgba(255, 255, 255, 0.78) inset;
    }

/* Tier-specific: Free & Standard stay white/neutral */
[b-di6eaw51zi] .subscription-offer-card--starter {
    background: rgba(255, 255, 255, 0.95);
}

[b-di6eaw51zi] .subscription-offer-card--growth {
    background:
        linear-gradient(180deg, rgba(255, 251, 246, 0.98) 0%, rgba(255, 244, 232, 0.96) 100%);
    border-color: rgba(191, 127, 62, 0.58);
    border-width: 1.5px;
    box-shadow:
        0 20px 46px rgba(157, 99, 49, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* Premium stays elevated, but quieter than the recommended path. */
[b-di6eaw51zi] .subscription-offer-card--premium {
    background:
        linear-gradient(180deg, rgba(255, 250, 244, 0.97) 0%, rgba(255, 241, 225, 0.94) 100%);
    border-color: rgba(173, 126, 82, 0.38);
}

/* ── "Most popular" badge ────────────────────── */
[b-di6eaw51zi] .subscription-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #F3D7AD 0%, #E7BE82 100%);
    color: #5B4028;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0.5rem 1.45rem;
    border-radius: 999px;
    border: 1px solid rgba(184, 128, 66, 0.28);
    box-shadow: 0 10px 24px rgba(145, 93, 43, 0.18);
    white-space: nowrap;
    z-index: 2;
    min-width: 148px;
    text-align: center;
}

/* ── Headline (confident, not storybook) ─────── */
[b-di6eaw51zi] .subscription-offer-heading {
    margin: 0 0 1.35rem 0;
    min-height: 2.7em;
}

[b-di6eaw51zi] .subscription-plan-name {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 1.72rem;
    font-weight: var(--mobile-hero-heading-weight);
    font-style: normal;
    line-height: 1.2;
    color: #2C2419;
    margin: 0 0 0.3rem 0;
}

[b-di6eaw51zi] .subscription-plan-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.96rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    color: #8B7355;
    margin: 0;
}

/* ── Price block (hero-sized) ────────────────── */
[b-di6eaw51zi] .subscription-offer-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 1.35rem;
}

[b-di6eaw51zi] .subscription-offer-price-amount {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.45rem;
    font-weight: 700;
    color: #2C2419;
    line-height: 1;
}

[b-di6eaw51zi] .subscription-offer-price-period {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.92rem;
    font-weight: 400;
    color: #8B7355;
}

/* ── Feature list ────────────────────────────── */
[b-di6eaw51zi] .subscription-offer-list {
    list-style: none;
    padding: 1.05rem 0 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    color: #4A3F35;
    font-size: 0.95rem;
    line-height: 1.45;
    flex: 1;
    border-top: 1px solid rgba(166, 125, 86, 0.16);
}

    [b-di6eaw51zi] .subscription-offer-list li {
        display: grid;
        grid-template-columns: 1.35rem minmax(0, 1fr);
        align-items: flex-start;
        gap: 0.72rem;
        padding: 0.58rem 0;
        border-bottom: 1px solid rgba(166, 125, 86, 0.08);
    }

    [b-di6eaw51zi] .subscription-offer-list li:last-child {
        border-bottom: none;
    }

[b-di6eaw51zi] .subscription-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.02rem;
    border-radius: 999px;
    background: rgba(208, 140, 83, 0.12);
    color: #9A623C;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* ── CTA buttons (decisive) ──────────────────── */
[b-di6eaw51zi] .subscription-offer-button {
    align-self: stretch;
    width: 100%;
    min-height: 54px;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    border: none;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-weight: var(--mobile-button-font-weight);
    font-size: var(--mobile-button-font-size);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: auto;
    letter-spacing: 0;
}

    [b-di6eaw51zi] .subscription-offer-button:hover {
        transform: translateY(-2px);
    }

/* Free: outline, understated */
[b-di6eaw51zi] .subscription-offer-button--free {
    background: #ffffff;
    color: #5A4A3A;
    border: 1px solid rgba(142, 113, 82, 0.42);
    box-shadow: none;
}

    [b-di6eaw51zi] .subscription-offer-button--free:hover {
        background: #FBF6F0;
        border-color: #B8A48A;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

/* Standard: warm golden filled — the recommended plan */
[b-di6eaw51zi] .subscription-offer-button--talk {
    background: linear-gradient(135deg, #D4914F 0%, #C07A3A 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(200, 130, 60, 0.30);
    font-size: var(--mobile-button-font-size);
}

    [b-di6eaw51zi] .subscription-offer-button--talk:hover {
        background: linear-gradient(135deg, #C88545 0%, #B47035 100%);
        box-shadow: 0 8px 24px rgba(200, 130, 60, 0.35);
    }

/* Premium: muted copper — present but not overpowering */
[b-di6eaw51zi] .subscription-offer-button--premium {
    background: rgba(255, 253, 250, 0.96);
    color: #8B6040;
    border: 1px solid rgba(166, 118, 76, 0.46);
    box-shadow: 0 2px 10px rgba(160, 90, 50, 0.10);
}

    [b-di6eaw51zi] .subscription-offer-button--premium:hover {
        background: #FFF6EE;
        border-color: #A8845A;
        box-shadow: 0 4px 16px rgba(160, 90, 50, 0.18);
    }

/* ── Current plan badge ──────────────────────── */
[b-di6eaw51zi] .subscription-current-plan {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #4d3a2c;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(77, 58, 44, 0.08);
    margin-top: auto;
}

[b-di6eaw51zi] .subscription-current-plan--inactive {
    background: rgba(255, 240, 226, 0.9);
}

    [b-di6eaw51zi] .subscription-current-plan span {
        font-size: 1.1rem;
        line-height: 1;
    }

[b-di6eaw51zi] .subscription-offer-card--growth .subscription-current-plan {
    background: rgba(255, 240, 226, 0.9);
    color: #4b2f22;
}

[b-di6eaw51zi] .subscription-offer-card--premium .subscription-current-plan {
    background: rgba(255, 236, 226, 0.95);
    color: #4b2921;
}

/* ── Trust row ────────────────────────────────── */
[b-di6eaw51zi] .subscription-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.35rem, 4vw, 3rem);
    flex-wrap: wrap;
    max-width: 960px;
    margin: 2.05rem auto 1.15rem;
    padding: 1.15rem 1rem 0;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-image: linear-gradient(to right, transparent, rgba(169, 127, 86, 0.18), transparent) 1;
    background: transparent;
}

[b-di6eaw51zi] .subscription-trust-item {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.9rem;
    color: #6F604F;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    line-height: 1.35;
    text-align: left;
}

[b-di6eaw51zi] .subscription-trust-item + .subscription-trust-item {
    border-left: none;
}

[b-di6eaw51zi] .subscription-line-icon {
    width: 1em;
    height: 1em;
    display: block;
    flex: 0 0 auto;
}

[b-di6eaw51zi] .subscription-trust-icon {
    width: 1.16rem;
    height: 1.16rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #966947;
    flex: 0 0 1.16rem;
}

[b-di6eaw51zi] .subscription-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    vertical-align: -0.15em;
}

[b-di6eaw51zi] .subscription-reassurance {
    text-align: center;
    font-family: var(--font-handwriting, 'Caveat', cursive);
    font-size: 1.18rem;
    color: #6e5447;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 1.65rem;
    line-height: 1.8;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-image: linear-gradient(to right, transparent, rgba(180, 155, 125, 0.28), transparent) 1;
}

/* ── Minnesvän / Founding Patron ─────────────── */
[b-di6eaw51zi] .patron-section {
    width: 100%;
    margin: 4.25rem 0 3.5rem;
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

[b-di6eaw51zi] .patron-inner {
    width: 100%;
    max-width: 1120px;
    background:
        linear-gradient(135deg, rgba(255, 252, 247, 0.96) 0%, rgba(249, 237, 222, 0.94) 48%, rgba(240, 211, 180, 0.86) 100%);
    border-radius: 20px;
    padding: 3.25rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 24px 58px rgba(118, 76, 45, 0.12),
        0 2px 10px rgba(155, 105, 62, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(198, 151, 103, 0.34);
}

[b-di6eaw51zi] .patron-inner--owned {
    border-color: rgba(143, 99, 55, 0.48);
    box-shadow:
        0 24px 58px rgba(118, 76, 45, 0.13),
        0 0 0 1px rgba(215, 146, 77, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

[b-di6eaw51zi] .patron-owned-badge {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.92);
    border: 1px solid rgba(170, 112, 59, 0.24);
    color: #70482f;
    font-size: 0.82rem;
    font-weight: 700;
}

[b-di6eaw51zi] .patron-owned-mark {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #d7924d;
    box-shadow: 0 0 0 3px rgba(215, 146, 77, 0.16);
}

[b-di6eaw51zi] .patron-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        radial-gradient(circle at 84% 6%, rgba(255, 250, 244, 0.78) 0%, rgba(255, 250, 244, 0.26) 30%, rgba(255, 250, 244, 0) 58%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 251, 246, 0.12) 42%, rgba(211, 151, 88, 0.08) 100%);
    pointer-events: none;
}

[b-di6eaw51zi] .patron-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3.25rem;
    align-items: center;
}

[b-di6eaw51zi] .patron-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

[b-di6eaw51zi] .patron-kicker {
    display: inline-flex;
    align-items: center;
    color: #8A5B3F;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0.9rem;
}

[b-di6eaw51zi] .patron-heading {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 2.75rem;
    font-weight: 600;
    font-style: normal;
    color: #5D3A29;
    margin: 0 0 0.75rem;
    letter-spacing: 0;
    line-height: 1.08;
    position: relative;
}

[b-di6eaw51zi] .patron-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1.08rem;
    color: #6C4936;
    line-height: 1.55;
    max-width: 430px;
    margin: 0 0 2rem;
    position: relative;
}

[b-di6eaw51zi] .patron-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 1.6rem;
    position: relative;
}

[b-di6eaw51zi] .patron-price {
    font-family: var(--font-serif, 'Fraunces', serif);
    font-size: 3.35rem;
    font-weight: 700;
    color: #5D3A29;
    letter-spacing: 0;
    line-height: 1.1;
}

[b-di6eaw51zi] .patron-price-label {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    color: #805A46;
    text-transform: lowercase;
}

[b-di6eaw51zi] .patron-detail {
    border-left: 1px solid rgba(132, 91, 63, 0.18);
    padding-left: 3.25rem;
}

[b-di6eaw51zi] .patron-body {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    color: #5A3E31;
    line-height: 1.75;
    max-width: 610px;
    margin: 0 0 1.75rem;
    position: relative;
}

[b-di6eaw51zi] .patron-features {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 620px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    text-align: left;
    position: relative;
}

[b-di6eaw51zi] .patron-features li {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.98rem;
    color: #5A3E31;
    line-height: 1.5;
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.7rem;
}

[b-di6eaw51zi] .patron-feature-text {
    display: block;
    min-width: 0;
}

[b-di6eaw51zi] .patron-features li strong {
    color: #4A3326;
    font-weight: 600;
}

[b-di6eaw51zi] .patron-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
    color: #CE894F;
    font-weight: 700;
    flex-shrink: 0;
}

[b-di6eaw51zi] .patron-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: #CD8D51;
    color: #FFF9F2;
    min-height: 56px;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--mobile-button-font-size);
    font-weight: var(--mobile-button-font-weight);
    padding: 1rem 2.9rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 6px 16px rgba(205, 141, 81, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    letter-spacing: 0;
}

[b-di6eaw51zi] .patron-cta:not(:disabled):hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 20px rgba(205, 141, 81, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: #D4955B;
}

[b-di6eaw51zi] .patron-cta:not(:disabled):active {
    transform: translateY(0) scale(0.99);
}

[b-di6eaw51zi] .patron-cta:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
    box-shadow: none;
}

[b-di6eaw51zi] .patron-inner--owned .patron-cta:disabled {
    cursor: default;
    opacity: 0.78;
}

[b-di6eaw51zi] .patron-limited-note {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-style: italic;
    color: #846551;
    margin: 1rem 0 0;
    position: relative;
}

@media (max-width: 1200px) {
    [b-di6eaw51zi] .subscription-offers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [b-di6eaw51zi] .subscription-offer-heading {
        min-height: 0;
    }
}

@media (max-width: 992px) {
    [b-di6eaw51zi] .subscription-welcome-text {
        margin-top: 1.5rem;
    }

    [b-di6eaw51zi] .subscription-offers-section {
        margin-top: 0;
        padding: 0 1rem 0;
    }

    [b-di6eaw51zi] .subscription-offers-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        gap: 2.5rem;
    }

    [b-di6eaw51zi] .subscription-offer-card--growth {
        order: 1;
        padding-top: 3.6rem;
    }

    [b-di6eaw51zi] .subscription-offer-card--starter {
        order: 2;
    }

    [b-di6eaw51zi] .subscription-offer-card--premium {
        order: 3;
    }

    [b-di6eaw51zi] .subscription-badge {
        top: -0.95rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 0;
        max-width: calc(100% - 2rem);
        width: max-content;
        padding: 0.52rem 1.25rem;
        white-space: normal;
    }

    [b-di6eaw51zi] .subscription-offer-heading {
        min-height: 0;
    }

    [b-di6eaw51zi] .subscription-trust-row {
        max-width: 440px;
        gap: 0.8rem 1.2rem;
        padding-top: 1rem;
    }

    [b-di6eaw51zi] .subscription-trust-item {
        justify-content: center;
        text-align: center;
    }

    [b-di6eaw51zi] .subscription-trust-item + .subscription-trust-item {
        border-top: none;
    }

    [b-di6eaw51zi] .patron-inner {
        padding: 2.8rem 2.1rem 2rem;
    }

    [b-di6eaw51zi] .patron-content {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        align-items: start;
    }

    [b-di6eaw51zi] .patron-detail {
        border-left: none;
        border-top: 1px solid rgba(132, 91, 63, 0.16);
        padding-left: 0;
        padding-top: 2rem;
    }

    [b-di6eaw51zi] .patron-heading {
        font-size: 2.15rem;
    }

    [b-di6eaw51zi] .patron-price {
        font-size: 2.6rem;
    }

    [b-di6eaw51zi] .patron-features {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

@media (max-width: 600px) {
    [b-di6eaw51zi] .subscription-title {
        font-size: 1.8rem;
    }

    [b-di6eaw51zi] .subscription-offer-card {
        padding: 2.15rem 1.55rem 1.8rem;
        border-radius: 12px;
    }

    [b-di6eaw51zi] .subscription-plan-name {
        font-size: 1.5rem;
    }

    [b-di6eaw51zi] .subscription-plan-subtitle {
        font-size: 0.95rem;
    }

    [b-di6eaw51zi] .subscription-offer-heading {
        min-height: 0;
    }

    [b-di6eaw51zi] .subscription-offer-price-amount {
        font-size: 2.1rem;
    }

    [b-di6eaw51zi] .subscription-offer-list {
        gap: 0.7rem;
        margin-bottom: 1.7rem;
    }

    [b-di6eaw51zi] .subscription-offer-button {
        width: 100%;
        min-height: 54px;
        text-align: center;
        justify-content: center;
    }

    [b-di6eaw51zi] .subscription-badge {
        top: -16px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        font-size: 0.82rem;
        padding: 0.46rem 1.2rem;
        min-width: 150px;
        border-radius: 999px;
    }

    [b-di6eaw51zi] .subscription-trust-row {
        margin-top: 1.75rem;
        margin-bottom: 1rem;
    }

    [b-di6eaw51zi] .subscription-trust-item {
        font-size: 0.86rem;
        white-space: normal;
    }

    [b-di6eaw51zi] .patron-section {
        margin: 2.5rem 0 2.75rem;
        padding: 0;
    }

    [b-di6eaw51zi] .patron-inner {
        padding: 2.4rem 1.35rem 1.75rem;
        border-radius: 18px;
    }

    [b-di6eaw51zi] .patron-content {
        gap: 1.75rem;
    }

    [b-di6eaw51zi] .patron-main {
        align-items: stretch;
    }

    [b-di6eaw51zi] .patron-kicker,
    [b-di6eaw51zi] .patron-heading,
    [b-di6eaw51zi] .patron-subtitle,
    [b-di6eaw51zi] .patron-price-block,
    [b-di6eaw51zi] .patron-limited-note {
        text-align: center;
        align-items: center;
    }

    [b-di6eaw51zi] .patron-heading {
        font-size: 1.9rem;
    }

    [b-di6eaw51zi] .patron-subtitle {
        font-size: 0.92rem;
        margin-bottom: 1.5rem;
    }

    [b-di6eaw51zi] .patron-price {
        font-size: 2.2rem;
    }

    [b-di6eaw51zi] .patron-detail {
        padding-top: 1.55rem;
    }

    [b-di6eaw51zi] .patron-body {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    [b-di6eaw51zi] .patron-features {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    [b-di6eaw51zi] .patron-features li {
        font-size: 0.9rem;
    }

    [b-di6eaw51zi] .patron-cta {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1.05rem;
    }
}

/* Footer alignment to follow sidebar on desktop (mirrors ThemesAll layout) */
[b-di6eaw51zi] .main-footer {
    margin-left: 280px;
    width: calc(100% - 280px);
    margin-top: 80px;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    box-sizing: border-box;
    background: transparent;
    color: #4F4A45;
    border-top: 0;
    transition: margin-left 0.3s ease;
}

    [b-di6eaw51zi] .main-footer.sidebar-hidden {
        margin-left: 0;
        width: 100%;
    }

[b-di6eaw51zi] .footer-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 60px clamp(1rem, 2vw, 1.5rem) 30px;
    box-sizing: border-box;
    background-color: #FAF3E5;
    border-top: 1px solid #f0dad3;
}

@media (max-width: 992px) {
    [b-di6eaw51zi] .main-footer {
        margin-left: 0 !important;
        width: 100%;
        padding: 0 var(--mobile-page-margin);
    }
}

/* Modal overlay and panel - centered modal on desktop and mobile.
   Keeps a dimmed backdrop, centers content, supports tall content via scrolling. */
.subscription-plan-modal-overlay[b-di6eaw51zi] {
    --subscription-modal-top-pad: max(1.5rem, env(safe-area-inset-top, 0px));
    --subscription-modal-right-pad: max(1.5rem, env(safe-area-inset-right, 0px));
    --subscription-modal-bottom-pad: max(1.5rem, env(safe-area-inset-bottom, 0px));
    --subscription-modal-left-pad: max(1.5rem, env(safe-area-inset-left, 0px));
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    background: rgba(42, 29, 23, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /* breathing room around the modal */
    padding-top: var(--subscription-modal-top-pad);
    padding-right: var(--subscription-modal-right-pad);
    padding-bottom: var(--subscription-modal-bottom-pad);
    padding-left: var(--subscription-modal-left-pad);
    z-index: 2000;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.subscription-plan-modal[b-di6eaw51zi] {
    position: relative;
    background: linear-gradient(180deg, #FFF7ED 0%, #FFE9D2 100%);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0 40px 80px rgba(82, 52, 38, 0.28);
    max-width: 900px;
    width: min(100%, 900px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #4c3526;
    margin: 0 auto;
    box-sizing: border-box;
    max-height: calc(100vh - var(--subscription-modal-top-pad) - var(--subscription-modal-bottom-pad));
    max-height: calc(100svh - var(--subscription-modal-top-pad) - var(--subscription-modal-bottom-pad));
    max-height: calc(100dvh - var(--subscription-modal-top-pad) - var(--subscription-modal-bottom-pad));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.subscription-plan-modal__close[b-di6eaw51zi] {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #6f4d3e;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(111, 77, 62, 0.18);
}

.subscription-plan-modal__close:hover[b-di6eaw51zi] {
    background: #fff;
}

/* Header section with illustration and title side-by-side */
.subscription-plan-modal__header-top[b-di6eaw51zi] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.subscription-plan-modal__illustration[b-di6eaw51zi] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 200px;
    height: auto;
}

.subscription-plan-modal__illustration img[b-di6eaw51zi] {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.subscription-plan-modal__content[b-di6eaw51zi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subscription-plan-modal__content h2[b-di6eaw51zi] {
    font-size: 1.8rem;
    margin: 0;
    color: #4d3427;
    font-weight: 700;
    line-height: 1.3;
}

.subscription-plan-modal__intro[b-di6eaw51zi] {
    font-size: 1rem;
    line-height: 1.6;
    color: #5a3f2f;
    margin: 0;
    font-weight: 400;
}

.subscription-plan-card[b-di6eaw51zi] {
    background: #fff7ec;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(210, 164, 122, 0.35);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.subscription-plan-card__header[b-di6eaw51zi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.subscription-plan-card__plan[b-di6eaw51zi] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.subscription-plan-card__label[b-di6eaw51zi] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: #6f4d3e;
}

.subscription-plan-card__price[b-di6eaw51zi] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #a3643c;
}

.subscription-plan-card__payment[b-di6eaw51zi] {
    display: none;
}

.subscription-plan-card__features[b-di6eaw51zi] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.8rem;
    color: #5f4031;
}

.subscription-plan-card__features li[b-di6eaw51zi] {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-height: 52px;
    padding: 0.78rem 0.88rem;
    border: 1px solid rgba(208, 140, 83, 0.18);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 246, 235, 0.5));
    color: #5a3c2d;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 8px 18px rgba(121, 73, 42, 0.045);
}

.subscription-plan-card__features li[b-di6eaw51zi]::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(208, 140, 83, 0.14);
    color: #9a5f35;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.subscription-plan-card__fine-print[b-di6eaw51zi] {
    font-size: 0.8rem;
    color: #999;
    margin: 0.5rem 0 0 1.2rem;
    line-height: 1.4;
}

.subscription-plan-card__agreement[b-di6eaw51zi] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #7a5a49;
}

.subscription-plan-card__agreement input[b-di6eaw51zi] {
    accent-color: #d49463;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.subscription-plan-card__actions[b-di6eaw51zi] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
}

.subscription-plan-card__action[b-di6eaw51zi] {
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.subscription-plan-card__action:disabled[b-di6eaw51zi] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.subscription-plan-card__action:disabled:hover[b-di6eaw51zi] {
    transform: none;
}

.subscription-plan-card__action--primary[b-di6eaw51zi] {
    background: linear-gradient(90deg, #d88652 0%, #e19c63 100%);
    color: #fffaf4;
    box-shadow: 0 12px 24px rgba(216, 134, 82, 0.3);
}

.subscription-plan-card__action--secondary[b-di6eaw51zi] {
    background: #fff2e3;
    color: #7f4f36;
    box-shadow: 0 8px 16px rgba(127, 79, 54, 0.12);
}

.subscription-plan-card__action:hover[b-di6eaw51zi] {
    transform: translateY(-1px);
}

.subscription-plan-card__error[b-di6eaw51zi] {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #9b4521;
    text-align: center;
}

.subscription-plan-modal__cancel[b-di6eaw51zi] {
    background: none;
    border: none;
    font-weight: 600;
    color: #83533a;
    margin-top: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.95rem;
}

.subscription-plan-modal__reassurance[b-di6eaw51zi] {
    font-size: 0.85rem;
    color: #6d4b38;
    margin-top: 0.8rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 900px) {
    .subscription-plan-modal-overlay[b-di6eaw51zi] {
        --subscription-modal-top-pad: max(1rem, env(safe-area-inset-top, 0px));
        --subscription-modal-right-pad: max(1rem, env(safe-area-inset-right, 0px));
        --subscription-modal-bottom-pad: max(1rem, env(safe-area-inset-bottom, 0px));
        --subscription-modal-left-pad: max(1rem, env(safe-area-inset-left, 0px));
        padding: 1rem;
        padding-top: var(--subscription-modal-top-pad);
        padding-right: var(--subscription-modal-right-pad);
        padding-bottom: var(--subscription-modal-bottom-pad);
        padding-left: var(--subscription-modal-left-pad);
        align-items: center;
    }

    .subscription-plan-modal[b-di6eaw51zi] {
        flex-direction: column;
        padding: 1.5rem;
        margin: 0 auto;
    }

    .subscription-plan-modal__header-top[b-di6eaw51zi] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .subscription-plan-modal__illustration[b-di6eaw51zi] {
        width: 100%;
        max-width: 180px;
        margin: 0 auto;
    }

    .subscription-plan-modal__content h2[b-di6eaw51zi] {
        font-size: 1.4rem;
    }
}

/* Safe-area-aware modal sheet on mobile */
@media (max-width: 540px) {
    .subscription-plan-modal-overlay[b-di6eaw51zi] {
        --subscription-modal-top-pad: calc(0.75rem + env(safe-area-inset-top, 0px));
        --subscription-modal-right-pad: calc(0.75rem + env(safe-area-inset-right, 0px));
        --subscription-modal-bottom-pad: calc(1rem + env(safe-area-inset-bottom, 0px));
        --subscription-modal-left-pad: calc(0.75rem + env(safe-area-inset-left, 0px));
        padding: var(--subscription-modal-top-pad) var(--subscription-modal-right-pad) var(--subscription-modal-bottom-pad) var(--subscription-modal-left-pad);
        align-items: center;
        justify-content: center;
    }

    .subscription-plan-modal[b-di6eaw51zi] {
        width: 100%;
        max-width: 32rem;
        min-height: auto;
        border-radius: 22px;
        padding: 1rem;
        padding-top: 1.25rem;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        gap: 1rem;
        margin: 0 auto;
    }

    .subscription-plan-modal__close[b-di6eaw51zi] {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
    }

    .subscription-plan-modal__header-top[b-di6eaw51zi] {
        gap: 0.75rem;
        padding-top: 0.5rem;
    }

    .subscription-plan-modal__illustration[b-di6eaw51zi] {
        max-width: 120px;
    }

    .subscription-plan-modal__content h2[b-di6eaw51zi] {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .subscription-plan-modal__intro[b-di6eaw51zi] {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .subscription-plan-card[b-di6eaw51zi] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .subscription-plan-card__features[b-di6eaw51zi] {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .subscription-plan-card__actions[b-di6eaw51zi] {
        grid-template-columns: 1fr;
    }

    .subscription-plan-modal__cancel[b-di6eaw51zi] {
        padding: 0.6rem 1.5rem;
        font-size: 0.95rem;
    }

    .subscription-plan-modal__reassurance[b-di6eaw51zi] {
        font-size: 0.8rem;
        margin-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .billing-toggle-tabs[b-di6eaw51zi] {
        gap: 0.5rem;
        padding: 0.35rem;
    }

    .tab-btn[b-di6eaw51zi] {
        padding: 0.6rem 0.5rem;
    }

    .tab-title[b-di6eaw51zi] {
        font-size: 0.9rem;
    }

    .tab-subtitle[b-di6eaw51zi] {
        font-size: 0.7rem;
    }
}

/* Extra small screens - phones in portrait */
@media (max-width: 380px) {
    .subscription-plan-modal-overlay[b-di6eaw51zi] {
        --subscription-modal-top-pad: calc(0.5rem + env(safe-area-inset-top, 0px));
        --subscription-modal-right-pad: calc(0.5rem + env(safe-area-inset-right, 0px));
        --subscription-modal-bottom-pad: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        --subscription-modal-left-pad: calc(0.5rem + env(safe-area-inset-left, 0px));
        padding: var(--subscription-modal-top-pad) var(--subscription-modal-right-pad) var(--subscription-modal-bottom-pad) var(--subscription-modal-left-pad);
    }

    .subscription-plan-modal[b-di6eaw51zi] {
        padding: 0.75rem;
        padding-top: 1.25rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        gap: 0.75rem;
        border-radius: 20px;
    }

    .subscription-plan-modal__close[b-di6eaw51zi] {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
        top: 0.5rem;
        right: 0.5rem;
    }

    .subscription-plan-modal__illustration[b-di6eaw51zi] {
        max-width: 90px;
    }

    .subscription-plan-modal__content h2[b-di6eaw51zi] {
        font-size: 1.05rem;
    }

    .subscription-plan-modal__intro[b-di6eaw51zi] {
        font-size: 0.85rem;
    }

    .subscription-plan-card[b-di6eaw51zi] {
        padding: 0.75rem;
    }

    .subscription-plan-card__label[b-di6eaw51zi] {
        font-size: 0.85rem;
    }

    .subscription-plan-card__price[b-di6eaw51zi] {
        font-size: 1.15rem;
    }

    .subscription-plan-card__features[b-di6eaw51zi] {
        gap: 0.45rem;
    }

    .subscription-plan-card__features li[b-di6eaw51zi] {
        min-height: auto;
        padding: 0.62rem 0.7rem;
        font-size: 0.84rem;
        border-radius: 12px;
    }

    .subscription-plan-card__features li[b-di6eaw51zi]::before {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.75rem;
    }

    .subscription-plan-card__fine-print[b-di6eaw51zi] {
        font-size: 0.75rem;
    }

    .subscription-plan-card__agreement[b-di6eaw51zi] {
        font-size: 0.8rem;
    }

    .subscription-plan-card__action[b-di6eaw51zi] {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .billing-toggle-container[b-di6eaw51zi] {
        margin: 0.5rem 0;
    }

    .tab-title[b-di6eaw51zi] {
        font-size: 0.85rem;
    }

    .tab-subtitle[b-di6eaw51zi] {
        font-size: 0.65rem;
    }
}

/* Billing Toggle Tabs */
.billing-toggle-container[b-di6eaw51zi] {
    margin: 1rem 0;
}

.billing-toggle-tabs[b-di6eaw51zi] {
    display: flex;
    gap: 1rem;
    background: #fff2e3;
    padding: 0.5rem;
    border-radius: 16px;
}

.tab-btn[b-di6eaw51zi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #7f4f36;
}

.tab-btn.active[b-di6eaw51zi] {
    background: #fff;
    box-shadow: 0 4px 12px rgba(127, 79, 54, 0.1);
    color: #d88652;
}

.tab-title[b-di6eaw51zi] {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.tab-subtitle[b-di6eaw51zi] {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Time Pass Grid */
.timepass-options-grid[b-di6eaw51zi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.timepass-card[b-di6eaw51zi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border: 2px solid #e6d0c0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timepass-card:hover[b-di6eaw51zi] {
    border-color: #d88652;
    transform: translateY(-2px);
}

.timepass-card.selected[b-di6eaw51zi] {
    background: #fffaf4;
    border-color: #d88652;
    box-shadow: 0 4px 12px rgba(216, 134, 82, 0.15);
}

.timepass-duration[b-di6eaw51zi] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #4d3427;
    margin-bottom: 0.4rem;
}

.timepass-price[b-di6eaw51zi] {
    font-weight: 600;
    color: #d88652;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.timepass-monthly[b-di6eaw51zi] {
    font-size: 0.75rem;
    color: #886a5a;
}

/* Reassurance Badge */
.reassurance-badge[b-di6eaw51zi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 0.6rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.check-icon[b-di6eaw51zi] {
    font-size: 1.1rem;
}

/* Swish Button - Brand Compliant */
.swish-btn[b-di6eaw51zi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.subscription-plan-card__action--swish[b-di6eaw51zi] {
    background: #ffffff;
    color: #7f4f36;
    border: 2px solid #d88652;
    box-shadow: 0 8px 16px rgba(127, 79, 54, 0.12);
}

.subscription-plan-card__action--swish:hover[b-di6eaw51zi] {
    background: #fffaf4;
    border-color: #e19c63;
}

.swish-logo-img[b-di6eaw51zi] {
    height: 32px;
    width: auto;
    object-fit: contain;
}


/* Best Value Badge */
.timepass-card[b-di6eaw51zi] {
    position: relative; /* Ensure badge positioning context */
    overflow: visible; /* Allow badge to overlap edge if needed */
}

/* .timepass-card.best-value {
    border-color: #d88652;
    background: #fffaf4;
} */

.best-value-badge[b-di6eaw51zi] {
    position: absolute;
    top: -10px;
    right: -5px;
    background: #d88652;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Swish Payment Modal Styles */
.swish-payment-overlay[b-di6eaw51zi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-di6eaw51zi 0.3s ease-in;
}

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

.swish-payment-modal[b-di6eaw51zi] {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-di6eaw51zi 0.3s ease-out;
}

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

.swish-payment-modal__close[b-di6eaw51zi] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.swish-payment-modal__close:hover[b-di6eaw51zi] {
    color: #333;
}

.swish-payment-modal__content[b-di6eaw51zi] {
    text-align: center;
}

.swish-payment-modal__title[b-di6eaw51zi] {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px 0;
}

.swish-payment-modal__instruction[b-di6eaw51zi] {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.swish-payment-modal__spinner[b-di6eaw51zi] {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1b7bbf;
    border-radius: 50%;
    animation: spin-b-di6eaw51zi 1s linear infinite;
}

@keyframes spin-b-di6eaw51zi {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.swish-qr-container[b-di6eaw51zi] {
    background: white;
    padding: 20px;
    border-radius: 15px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}

.swish-qr-code[b-di6eaw51zi] {
    width: 250px;
    height: 250px;
    display: block;
}

.swish-payment-modal__timer[b-di6eaw51zi] {
    margin: 20px 0;
    font-size: 20px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.swish-timer-icon[b-di6eaw51zi] {
    width: 1.5rem;
    height: 1.5rem;
}

.swish-timer-text[b-di6eaw51zi] {
    font-weight: 700;
    font-family: 'Monaco', 'Courier New', monospace;
}

.swish-payment-modal__amount[b-di6eaw51zi] {
    font-size: 18px;
    color: #666;
    margin-top: 15px;
    font-weight: 600;
}

.swish-payment-modal__retry[b-di6eaw51zi] {
    background: #1b7bbf;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.2s;
}

.swish-payment-modal__retry:hover[b-di6eaw51zi] {
    background: #155a8a;
}

.swish-payment-success[b-di6eaw51zi] {
    padding: 30px 0;
}

.swish-success-icon[b-di6eaw51zi] {
    color: #6D8B5B;
    display: inline-flex;
    margin-bottom: 20px;
}

.swish-payment-success h3[b-di6eaw51zi] {
    font-size: 24px;
    color: #333;
    margin: 0 0 10px 0;
}

.swish-payment-success p[b-di6eaw51zi] {
    font-size: 16px;
    color: #666;
}

.swish-payment-error[b-di6eaw51zi] {
    padding: 30px 0;
}

.swish-error-icon[b-di6eaw51zi] {
    color: #A05E45;
    display: inline-flex;
    margin-bottom: 20px;
}

.swish-payment-error h3[b-di6eaw51zi] {
    font-size: 24px;
    color: #333;
    margin: 0 0 10px 0;
}

.swish-payment-error p[b-di6eaw51zi] {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.swish-payment-expired[b-di6eaw51zi] {
    padding: 30px 0;
}

.swish-expired-icon[b-di6eaw51zi] {
    color: #B98247;
    display: inline-flex;
    margin-bottom: 20px;
}

.swish-status-icon[b-di6eaw51zi] {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #8A6248;
}

.swish-payment-modal__timer .swish-status-icon[b-di6eaw51zi] {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0;
    color: #8A6248;
}

.swish-status-icon--success[b-di6eaw51zi] {
    color: #6D8B5B;
}

.swish-status-icon--error[b-di6eaw51zi] {
    color: #A05E45;
}

.swish-status-icon--timer[b-di6eaw51zi] {
    color: #B98247;
}

.swish-payment-expired h3[b-di6eaw51zi] {
    font-size: 24px;
    color: #333;
    margin: 0 0 10px 0;
}

.swish-payment-expired p[b-di6eaw51zi] {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .swish-payment-modal[b-di6eaw51zi] {
        padding: 30px 20px;
        width: 95%;
    }
    
    .swish-qr-code[b-di6eaw51zi] {
        width: 200px;
        height: 200px;
    }
    
    .swish-payment-modal__title[b-di6eaw51zi] {
        font-size: 20px;
    }
}

/* ================================
   Credit Balance Section
   ================================ */

.credit-balance-section[b-di6eaw51zi] {
    width: 100%;
    max-width: 860px;
    margin: 4.5rem auto 2.75rem;
    padding: 0 1rem;
}

.credit-balance-card[b-di6eaw51zi] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(180px, auto);
    grid-template-areas:
        "title balance action"
        "info balance action";
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    row-gap: 0.75rem;
    background:
        linear-gradient(135deg, rgba(255, 253, 249, 0.96) 0%, rgba(255, 246, 236, 0.94) 58%, rgba(255, 234, 211, 0.72) 100%);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    box-shadow:
        0 18px 42px rgba(84, 58, 43, 0.09),
        0 1px 0 rgba(255, 255, 255, 0.78) inset;
    border: 1px solid rgba(154, 111, 79, 0.2);
    text-align: left;
    overflow: hidden;
}

.credit-balance-header[b-di6eaw51zi] {
    grid-area: title;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    margin: 0;
}

.credit-balance-icon[b-di6eaw51zi] {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8E6346;
    flex: 0 0 2.1rem;
    border-radius: 999px;
    background: rgba(255, 246, 236, 0.86);
    box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.14);
}

.credit-balance-header h3[b-di6eaw51zi] {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    line-height: 1.15;
    color: #6F4538;
    margin: 0;
}

.credit-balance-content[b-di6eaw51zi] {
    grid-area: balance;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    min-width: 150px;
    padding: 0 1.8rem;
    border-left: 1px solid rgba(154, 111, 79, 0.16);
    border-right: 1px solid rgba(154, 111, 79, 0.16);
    margin: 0;
}

.credit-loading[b-di6eaw51zi] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: pulse-b-di6eaw51zi 1.5s ease-in-out infinite;
}

.credit-loading__mark[b-di6eaw51zi] {
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid rgba(142, 99, 70, 0.28);
    border-top-color: #8E6346;
    border-radius: 50%;
    animation: spin-b-di6eaw51zi 1s linear infinite;
}

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

.credit-count[b-di6eaw51zi] {
    font-family: var(--font-serif);
    font-size: 3.7rem;
    font-weight: 700;
    color: #5B4035;
    line-height: 1;
}

.credit-label[b-di6eaw51zi] {
    max-width: 9rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #7B5A53;
}

.credit-info[b-di6eaw51zi] {
    grid-area: info;
    max-width: 360px;
    font-size: 0.95rem;
    color: #8B7355;
    margin: 0;
    line-height: 1.5;
}

.credit-topup-link[b-di6eaw51zi] {
    grid-area: action;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 172px;
    min-height: 52px;
    padding: 0.85rem 1.45rem;
    background: linear-gradient(145deg, #7B5A53 0%, #5A3E36 100%);
    color: #FFF7ED;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 22px rgba(90, 62, 54, 0.2);
}

.credit-topup-link:hover[b-di6eaw51zi] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(90, 62, 54, 0.35);
    color: #FFF7ED;
}

@media (max-width: 768px) {
    .credit-balance-section[b-di6eaw51zi] {
        margin-top: 3.2rem;
        margin-bottom: 2.25rem;
    }

    .credit-balance-card[b-di6eaw51zi] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "balance"
            "info"
            "action";
        justify-items: center;
        text-align: center;
        padding: 1.65rem;
        margin: 0 1rem;
        row-gap: 1.1rem;
    }

    .credit-balance-header[b-di6eaw51zi] {
        justify-content: center;
    }

    .credit-balance-header h3[b-di6eaw51zi] {
        font-size: 1.35rem;
    }

    .credit-balance-content[b-di6eaw51zi] {
        width: 100%;
        padding: 1.05rem 0;
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(154, 111, 79, 0.14);
        border-bottom: 1px solid rgba(154, 111, 79, 0.14);
    }

    .credit-info[b-di6eaw51zi] {
        max-width: 24rem;
    }

    .credit-count[b-di6eaw51zi] {
        font-size: 3rem;
    }

    .credit-topup-link[b-di6eaw51zi] {
        justify-self: center;
        width: 100%;
        max-width: 240px;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/* Terms page styles - copied from Privacy.razor.css */

/* Base styles */
[b-654y8kq39f] .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    /* inherited font-sans */
}

/* Global body/html overflow prevention - REMOVED */

/* App Layout */
[b-654y8kq39f] .app-layout {
    display: flex;
    min-height: 100vh;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px; /* Account for fixed logo */
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-654y8kq39f] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-654y8kq39f] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-654y8kq39f] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-654y8kq39f] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-654y8kq39f] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-654y8kq39f] .sidebar a:hover {
    color: #000;
}

[b-654y8kq39f] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-654y8kq39f] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-654y8kq39f] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-654y8kq39f] .sidebar-logo {
    text-align: center;
}

[b-654y8kq39f] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

/* Sidebar Bottom User Section */
[b-654y8kq39f] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-654y8kq39f] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-654y8kq39f] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
}

[b-654y8kq39f] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, 0.5);
}

[b-654y8kq39f] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text, #4F4A45);
}

[b-654y8kq39f] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

/* User Dropdown */
[b-654y8kq39f] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-654y8kq39f] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
    animation: fadeIn-b-654y8kq39f 0.2s ease-in-out;
}

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

[b-654y8kq39f] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

[b-654y8kq39f] .dropdown-item:hover {
    background-color: #f0dad3;
}

[b-654y8kq39f] .menu-icon {
    margin-right: 0.6rem;
}

/* Toggle Button */
[b-654y8kq39f] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Button Styles */
[b-654y8kq39f] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-654y8kq39f] .btn:hover {
    background-color: #FADDAA;
}

[b-654y8kq39f] .btn-login {
    background-color: #FBCFA8;
}

[b-654y8kq39f] .btn-primary {
    padding: 12px 25px;
    margin-top: 10px;
    background-color: #FBCFA8;
}

[b-654y8kq39f] .btn-secondary {
    padding: 8px 18px;
    margin-top: 10px;
}

/* Main Container */
[b-654y8kq39f] .container-v3 {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    margin-left: 280px;
    padding: 0;
    transition: margin-left 0.3s ease;
}

[b-654y8kq39f] .container-v3.sidebar-hidden {
    margin-left: 0;
}

/* Terms specific content styles */
/* Inherit width from container-v3 to match FrontPage; keep Terms-specific typography/padding tweaks */
.terms-container[b-654y8kq39f] {
    /* Remove conflicting width constraints so container-v3 controls layout */
    /* flex: 1; */
    /* max-width: 800px; */
    /* margin: 30px auto; */
    /* margin-left: 280px; */
    padding: 0;
    line-height: 1.6;
    /* margin-left handled by container-v3 + .sidebar-hidden */
}

.legal-header[b-654y8kq39f] {
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.legal-body[b-654y8kq39f] {
    padding: 0 2rem 3rem;
    box-sizing: border-box;
}

.terms-container h1[b-654y8kq39f] {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: #4F4A45;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: var(--mobile-hero-heading-weight);
}

.terms-container h2[b-654y8kq39f] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: #4F4A45;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: var(--mobile-section-heading-weight);
}

.terms-container p[b-654y8kq39f] {
    color: #666;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.terms-container ul[b-654y8kq39f] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.terms-container li[b-654y8kq39f] {
    color: #666;
    margin-bottom: 0.5rem;
}

.terms-container a[b-654y8kq39f] {
    color: #FBCFA8;
    text-decoration: none;
}

.terms-container a:hover[b-654y8kq39f] {
    text-decoration: underline;
}

.last-updated[b-654y8kq39f] {
    font-style: italic;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    text-align: center;
}

.closing[b-654y8kq39f] {
    font-style: italic;
    color: #4F4A45;
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(251, 207, 168, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(251, 207, 168, 0.3);
}

/* Headings */
[b-654y8kq39f] h2, [b-654y8kq39f] h3, [b-654y8kq39f] h4, [b-654y8kq39f] h5 {
    font-family: var(--font-serif) !important;
    font-weight: var(--mobile-section-heading-weight);
    color: #4F4A45;
    margin-top: 0;
}

[b-654y8kq39f] h4,
[b-654y8kq39f] h5 {
    font-family: var(--font-sans) !important;
    font-weight: 600;
}

[b-654y8kq39f] h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
}

[b-654y8kq39f] h3 {
    font-size: 1.7em;
    margin-bottom: 10px;
}

[b-654y8kq39f] h4 {
    font-size: 1.2em;
    margin-bottom: 8px;
}

[b-654y8kq39f] h5 {
    font-size: 1.1em;
    font-weight: 400;
    color: #555;
    margin-bottom: 5px;
}

[b-654y8kq39f] p {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.95em;
}

/* Sidebar Overlay */
.sidebar-overlay[b-654y8kq39f] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-654y8kq39f] {
    display: none;
}

/* Footer Styles */
[b-654y8kq39f] .main-footer {
    /* Keep footer aligned with content width and sidebar offset */
    width: calc(100% - 280px);
    max-width: min(1200px, calc(100% - 280px));
    margin-left: 280px;
    margin-right: auto;
    background-color: #FAF3E5;
    padding: 60px 0 30px 0;
    margin-top: 80px;
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    box-sizing: border-box;
}

[b-654y8kq39f] .main-footer.sidebar-hidden {
    /* Match the main container width when sidebar is hidden */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

[b-654y8kq39f] .footer-container {
    /* Keep the inner footer content aligned with main container padding */
    max-width: 1200px;
    width: 100%;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

[b-654y8kq39f] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

[b-654y8kq39f] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-654y8kq39f] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-654y8kq39f] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

[b-654y8kq39f] .footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 40px;
}

[b-654y8kq39f] .footer-section {
    padding: 0 var(--mobile-page-margin);
}

[b-654y8kq39f] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-654y8kq39f] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-654y8kq39f] .footer-section ul li {
    margin-bottom: 10px;
}

[b-654y8kq39f] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-654y8kq39f] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

[b-654y8kq39f] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    gap: 20px;
}

[b-654y8kq39f] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-654y8kq39f] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-654y8kq39f] .footer-languages a:hover,
[b-654y8kq39f] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

[b-654y8kq39f] .footer-legal-origin {
    text-align: right;
}

[b-654y8kq39f] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
}

[b-654y8kq39f] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    [b-654y8kq39f] .toggle-sidebar {
        display: none;
    }

    [b-654y8kq39f] .app-layout {
        padding-top: 60px;
    }

    [b-654y8kq39f] .container-v3 {
        margin-left: 0 !important;
        margin-top: 70px;
        padding: 0 var(--mobile-page-margin);
        width: 100%;
        max-width: 100%;
    }

    [b-654y8kq39f] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
    }

    [b-654y8kq39f] .main-footer {
        margin-left: 0 !important;
    }

    [b-654y8kq39f] .sidebar {
        transform: translateX(-100%);
    }

    [b-654y8kq39f] .sidebar.visible {
        transform: translateX(0);
    }

    [b-654y8kq39f] .sidebar.hidden {
        transform: translateX(-100%);
    }

    [b-654y8kq39f] .toggle-sidebar {
        left: 1rem;
        z-index: 200;
    }
}

@media (max-width: 768px) {
    [b-654y8kq39f] .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    [b-654y8kq39f] .footer-section {
        text-align: center;
    }

    [b-654y8kq39f] .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-654y8kq39f] .footer-legal-origin {
        text-align: center;
    }

    [b-654y8kq39f] .footer-copyright {
        text-align: center;
    }

    [b-654y8kq39f] .container-v3 {
        margin-top: 60px;
        padding: 0 var(--mobile-page-margin);
    }

    .legal-header[b-654y8kq39f] {
        padding: 1.5rem 0;
    }

    .legal-body[b-654y8kq39f] {
        padding: 0 0 2rem;
    }

    .terms-container h1[b-654y8kq39f] {
        font-size: 2rem;
    }

    .terms-container h2[b-654y8kq39f] {
        font-size: 1.3rem;
    }

    /* Mobile touch scroll fixes - REMOVED */
    [b-654y8kq39f] .app-layout {
        /*
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch; 
        */
    }

    [b-654y8kq39f] .container-v3 {
        /*
        overflow-x: hidden;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior: contain;
        */
    }


}

@media (max-width: 480px) {
    .terms-container h1[b-654y8kq39f] {
        font-size: 1.8rem;
    }
}
/* /Components/Pages/ThemeChat.razor.rz.scp.css */
:root[b-irzzk8vpt8] {
    --bg: #fff9f6;
    /* Lighter background */
    --chat-bg: #fefefe;
    /* Keep chat area light */
    --ai-bubble: #f4efeb;
    /* Original HTML value */
    --user-bubble: #ffe4d2;
    /* Original HTML value */
    --sidebar-bg: #fff2ec;
    /* Original HTML value */
    --peach: #ffdacf;
    /* Original HTML value */
    --accent: #ffc4b3;
    --text: #4b2e2e;
    --soft-border: #f0dad3;
}

*[b-irzzk8vpt8] {
    box-sizing: border-box;
    /* Reset margin/padding locally if needed, but site.css already does */
    margin: 0;
    padding: 0;
}

/* Sidebar Overlay */
.sidebar-overlay[b-irzzk8vpt8] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.hidden[b-irzzk8vpt8] {
    display: none;
}

/* Apply theme background and base layout styles to the main container */
/* This needs high specificity to override site.css body styles */
.theme-chat-container[b-irzzk8vpt8] {
    background: var(--bg) !important;
    /* Force override site.css body background */
    color: var(--text);
    min-height: 100vh;
    height: 100vh;
    /* Ensure container fills viewport height */
    width: 100%;
    /* Ensure it takes full width */
    overflow: hidden;
    /* Prevent body scroll */
    position: relative;
    font-family: var(--font-serif) !important;
    /* Force override site.css font */
    display: flex;
    /* Use flex for overall layout */
    /* Override site.css body alignment */
    justify-content: flex-start !important;
    align-items: stretch !important;

}


/* Override body background image when theme-chat-container is present */

.theme-chat-container .loved-one-chat-wrapper[b-irzzk8vpt8],
.theme-chat-container .loved-one-chat-bubble[b-irzzk8vpt8],
.theme-chat-container .loved-one-chat-message[b-irzzk8vpt8],
.theme-chat-container .loved-one-chat-message-content[b-irzzk8vpt8] {
    font-family: var(--font-serif) !important;
}



.animated-bg[b-irzzk8vpt8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind content */
    background-size: cover;
    background-position: center;
    pointer-events: none;
    /* Don't interfere with clicks */
}

.baking-with-grandma .animated-bg[b-irzzk8vpt8] {
    /*background-size: 100%;*/
    /* This zooms it out */
    /*background-position: center center;
    background-repeat: no-repeat;*/
    animation: sunShift-b-irzzk8vpt8 60s infinite ease-in-out;
}

.bedtime-with-grandma .animated-bg[b-irzzk8vpt8] {
    /*background-size: 100%;*/
    /* This zooms it out */
    /*background-position: center center;
    background-repeat: no-repeat;*/
    animation: moonlightGlow-b-irzzk8vpt8 60s infinite ease-in-out;
}

.loved-one-chat-sidebar[b-irzzk8vpt8],
.loved-one-chat-wrapper[b-irzzk8vpt8] {
    /* Target the wrapper */
    position: relative;
    /* Ensure z-index works */
    z-index: 1;
    /* Above background */
}

@keyframes sunShift-b-irzzk8vpt8 {
    0% {
        filter: brightness(0.8);
    }

    50% {
        filter: brightness(1.05);
    }

    100% {
        filter: brightness(0.8);
    }
}

@keyframes moonlightGlow-b-irzzk8vpt8 {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(0.95);
    }
}

/* Button Styles - Make specific to this component */
/* General button style within the chat page */
.theme-chat-container button[b-irzzk8vpt8],
.theme-chat-container .btn[b-irzzk8vpt8] {
    /* Apply to button elements and .btn class */
    padding: 6px 10px;
    border: none;
    /* border-radius: 10px; */
    cursor: pointer;
    /* font-weight: 700; */
    /* font-size: 0.9rem; */
    transition: background-color 0.3s ease, transform 0.1s ease;
    /*background-color: rgb(255, 196, 179) !important;*/
    /* background-color: var(--peach); Use theme color */
    color: var(--text);
    /* Use theme text color */
    /* border: 1px solid #EADDC0; */
    font-family: var(--font-sans);
}

.theme-chat-container .btn:hover[b-irzzk8vpt8] {
    background-color: #FADDAA;
}

.theme-chat-container .btn:active[b-irzzk8vpt8] {
    transform: scale(0.98);
    /* Slight press effect */
}

/* Specific button like Login */
.theme-chat-container .btn-login[b-irzzk8vpt8] {
    background-color: var(--accent);
    /* Use theme accent */
}

/* Sidebar Styles */
.loved-one-chat-sidebar[b-irzzk8vpt8] {
    width: 280px;
    /* background: var(--sidebar-bg) !important; */
    /* Revert variable */
    background-color: #fff2ec !important;
    /* Try direct color property with !important */
    padding: 1.5rem;
    border-right: 1px solid var(--soft-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: width 0.3s ease, padding 0.3s ease, border 0.3s ease;
    height: 100vh;
    /* Full viewport height */
    position: fixed;
    /* Fixed position */
    left: 0;
    top: 0;
    z-index: 10;
    /* Above background, below toggle */
    overflow-x: hidden;
    /* Hide content when shrinking */
    overflow-y: hidden;
    /* Prevent sidebar scrolling, let conversation-section handle it */
}

.loved-one-chat-sidebar.hidden[b-irzzk8vpt8] {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: none;
}

/* Prevent content flash when hiding */
.loved-one-chat-sidebar.hidden>*[b-irzzk8vpt8] {
    display: none;
}

/* Re-enable display for the transition */
.loved-one-chat-sidebar>*[b-irzzk8vpt8] {
    display: flex;
    /* Or block, depending on element */
    flex-direction: column;
    /* Ensure vertical layout */
    align-items: center;
    /* Center items */
    width: 100%;
    /* Take full width */
    flex-shrink: 0;
    /* Prevent shrinking unless specifically handled */
}

/* Ensure sidebar-bottom is pushed to the bottom */
.loved-one-chat-sidebar>.sidebar-bottom[b-irzzk8vpt8] {
    margin-top: auto !important;
}

/* Conversation section should grow to fill available space and be scrollable */
.loved-one-chat-sidebar .conversation-section[b-irzzk8vpt8] {
    flex: 1 1 auto;
    /* Grow to fill available space */
    min-height: 0;
    /* Allow flex child to be smaller than content */
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    /* Hide overflow at section level */
}

/* Conversation history section is scrollable */
.loved-one-chat-sidebar .conversation-history-section[b-irzzk8vpt8] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 0.25rem;
    /* Small padding for scrollbar */
}

/* Ensure conversation header and other static sections don't shrink */
.loved-one-chat-sidebar .conversation-header[b-irzzk8vpt8] {
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 1rem;
}

/* Conversation history header should not shrink */
.loved-one-chat-sidebar .conversation-history-header[b-irzzk8vpt8] {
    flex-shrink: 0;
    width: 100%;
}

.pen-pal-sidebar-block[b-irzzk8vpt8] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.85rem 0 1rem;
}

.loved-one-chat-sidebar .pen-pal-invite-btn[b-irzzk8vpt8] {
    width: 100%;
    background: transparent !important;
    border: 1px solid rgba(206, 160, 128, 0.7);
    border-radius: 16px;
    padding: 0.7rem 0.9rem;
    color: #4b2e2e;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    box-shadow: 0 6px 14px rgba(122, 92, 70, 0.12);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.loved-one-chat-sidebar .pen-pal-invite-btn:hover[b-irzzk8vpt8] {
    background: rgba(255, 228, 210, 0.6) !important;
    border-color: rgba(186, 130, 95, 0.75);
    transform: translateY(-1px);
}

.pen-pal-icon[b-irzzk8vpt8] {
    font-size: 1.1rem;
}

.pen-pal-status-card[b-irzzk8vpt8] {
    width: 100%;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(208, 170, 140, 0.35);
    border-radius: 16px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: 0 8px 18px rgba(112, 78, 60, 0.12);
}

.pen-pal-status-card.paused[b-irzzk8vpt8] {
    opacity: 0.65;
    filter: grayscale(0.4);
}

.pen-pal-status-row[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.pen-pal-status-title[b-irzzk8vpt8] {
    font-size: 0.95rem;
    color: #4b2e2e;
}

.pen-pal-status-sub[b-irzzk8vpt8] {
    font-size: 0.8rem;
    color: rgba(75, 46, 46, 0.7);
}

.pen-pal-status-actions[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.loved-one-chat-sidebar .pen-pal-status-card .pen-pal-link[b-irzzk8vpt8] {
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none;
    color: #7a5648;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
}

.loved-one-chat-sidebar .pen-pal-status-card .pen-pal-link:hover[b-irzzk8vpt8] {
    color: #5a3f34;
}

.pen-pal-divider[b-irzzk8vpt8] {
    color: rgba(75, 46, 46, 0.5);
}

.pen-pal-modal-backdrop[b-irzzk8vpt8] {
    position: fixed;
    inset: 0;
    background: rgba(11, 6, 4, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 1.5rem;
}

.pen-pal-modal[b-irzzk8vpt8] {
    width: min(620px, 94vw);
    background: radial-gradient(ellipse at 50% 30%, #fdf5ec 0%, #f0e1cc 55%, #e4d3b8 100%);
    border: 3px double #c4956a;
    border-radius: 18px;
    padding: 0;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 80px rgba(139, 69, 19, 0.08),
        0 0 40px rgba(193, 154, 107, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: visible;
    max-height: 92vh;
    animation: penPalLift-b-irzzk8vpt8 0.3s ease-out;
}

/* Decorative inner frame */
.pen-pal-modal[b-irzzk8vpt8]::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(196, 149, 106, 0.35);
    border-radius: 10px;
    pointer-events: none;
    z-index: 0;
}

/* Close button */
.pen-pal-modal-close[b-irzzk8vpt8] {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.15rem;
    color: #8b6b50;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 2;
}

.pen-pal-modal-close:hover[b-irzzk8vpt8] {
    color: #4a3325;
    background-color: rgba(160, 120, 70, 0.12);
}

.pen-pal-modal-header[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    padding: 38px 44px 12px;
    position: relative;
    z-index: 1;
}

.pen-pal-modal-avatar[b-irzzk8vpt8] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(196, 149, 106, 0.55);
    box-shadow:
        0 0 0 1.5px rgba(220, 185, 130, 0.3),
        0 4px 18px rgba(139, 69, 19, 0.2),
        0 0 30px rgba(193, 154, 107, 0.12);
}

.pen-pal-modal-title[b-irzzk8vpt8] {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 600;
    color: #3d2b1f;
    margin-top: 4px;
}

.pen-pal-modal-body[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 8px 44px 12px;
    position: relative;
    z-index: 1;
}

.pen-pal-modal-body p[b-irzzk8vpt8] {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: #5e4030;
    line-height: 1.7;
    text-align: center;
    margin: 0;
}

.pen-pal-choice[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pen-pal-choice-label[b-irzzk8vpt8] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9a7e65;
}

.pen-pal-segmented[b-irzzk8vpt8] {
    display: flex;
    gap: 0.4rem;
    background: rgba(255, 252, 245, 0.6);
    border: 1px solid rgba(196, 149, 106, 0.4);
    border-radius: 999px;
    padding: 0.3rem;
}

.pen-pal-segment[b-irzzk8vpt8] {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #5e4030;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pen-pal-segment.active[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #c9923a 0%, #a87530 60%, #8a5a20 100%);
    color: #fff5d6;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 220, 140, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pen-pal-toggle[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 252, 245, 0.6);
    border: 1px solid rgba(196, 149, 106, 0.4);
}

.pen-pal-toggle input[b-irzzk8vpt8] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pen-pal-toggle-track[b-irzzk8vpt8] {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(231, 214, 202, 0.9);
    border: 1px solid rgba(171, 124, 96, 0.45);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.pen-pal-toggle-thumb[b-irzzk8vpt8] {
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    box-shadow: 0 2px 6px rgba(75, 46, 46, 0.18);
    transition: transform 0.2s ease;
}

.pen-pal-toggle input:checked+.pen-pal-toggle-track[b-irzzk8vpt8] {
    background: linear-gradient(135deg, #c49a6c, #a87540);
    border-color: rgba(160, 117, 64, 0.7);
}

.pen-pal-toggle input:checked+.pen-pal-toggle-track .pen-pal-toggle-thumb[b-irzzk8vpt8] {
    transform: translateX(18px);
}

.pen-pal-toggle-text[b-irzzk8vpt8] {
    font-size: 0.92rem;
    color: #4a3325;
}

.pen-pal-modal-footer[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 20px 44px 40px;
    position: relative;
    z-index: 1;
}

.pen-pal-primary[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
    border: 1px solid #d4a84b;
    border-radius: 999px;
    padding: 14px 1rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff5d6;
    cursor: pointer;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 220, 140, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, transform 0.1s ease;
}

.pen-pal-primary:hover[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #d4a04a 0%, #a87530 40%, #8a5a20 100%);
    transform: translateY(-1px);
}

.pen-pal-primary:active[b-irzzk8vpt8] {
    transform: translateY(1px);
}

.pen-pal-secondary[b-irzzk8vpt8] {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    color: #8b6b50;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pen-pal-secondary:hover[b-irzzk8vpt8] {
    color: #4a3325;
}

/* ─── Manage mode: active badge ─── */
.pen-pal-modal-active-badge[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(196, 149, 106, 0.15);
    border: 1px solid rgba(196, 149, 106, 0.35);
    border-radius: 999px;
    padding: 0.3rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8b6b50;
    margin-bottom: 0.15rem;
}

.pen-pal-modal-active-icon[b-irzzk8vpt8] {
    font-size: 0.85rem;
}

/* ─── Manage mode: pause/resume links ─── */
.pen-pal-pause-link[b-irzzk8vpt8],
.pen-pal-resume-link[b-irzzk8vpt8] {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-style: italic;
    cursor: pointer;
    transition: color 0.15s ease;
    text-align: center;
}

.pen-pal-pause-link[b-irzzk8vpt8] {
    color: #a67b50;
}

.pen-pal-pause-link:hover[b-irzzk8vpt8] {
    color: #7a5535;
}

.pen-pal-resume-link[b-irzzk8vpt8] {
    color: #6b8f6b;
}

.pen-pal-resume-link:hover[b-irzzk8vpt8] {
    color: #4a6e4a;
}

/* ─── Wax seal placement (desktop: absolute corner) ─── */
[b-irzzk8vpt8] .pen-pal-modal-seal {
    position: absolute;
    bottom: -32px;
    right: -22px;
    width: 118px;
    height: 118px;
    z-index: 3;
    filter:
        drop-shadow(0 2px 3px rgba(60, 30, 8, 0.38))
        drop-shadow(0 5px 12px rgba(80, 40, 10, 0.24))
        drop-shadow(0 0 18px rgba(193, 140, 70, 0.12));
}

@keyframes penPalLift-b-irzzk8vpt8 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── PenPal Modal: Mobile full-viewport ─── */
@media (max-width: 600px) {
    .pen-pal-modal-backdrop[b-irzzk8vpt8] {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .pen-pal-modal[b-irzzk8vpt8] {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: inset 0 0 80px rgba(139, 69, 19, 0.08);
    }

    .pen-pal-modal[b-irzzk8vpt8]::before {
        inset: 10px;
        border-radius: 12px;
    }

    .pen-pal-modal-close[b-irzzk8vpt8] {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        background: rgba(255, 248, 235, 0.5);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .pen-pal-modal-header[b-irzzk8vpt8] {
        padding: 48px 28px 16px;
        margin-top: auto;
    }

    .pen-pal-modal-avatar[b-irzzk8vpt8] {
        width: 110px;
        height: 110px;
    }

    .pen-pal-modal-title[b-irzzk8vpt8] {
        font-size: 1.5rem;
    }

    .pen-pal-modal-body[b-irzzk8vpt8] {
        padding: 8px 28px 12px;
    }

    .pen-pal-modal-body p[b-irzzk8vpt8] {
        font-size: 1rem;
        line-height: 1.75;
    }

    .pen-pal-modal-footer[b-irzzk8vpt8] {
        padding: 16px 28px 24px;
        margin-bottom: auto;
    }

    .pen-pal-primary[b-irzzk8vpt8] {
        width: 100%;
        padding: 14px 28px;
        font-size: 1.05rem;
    }

    /* Seal as centered colophon */
    [b-irzzk8vpt8] .pen-pal-modal-seal {
        position: static;
        display: block;
        margin: 24px auto 28px;
        width: 80px;
        height: 80px;
        opacity: 0.8;
    }
}

@media (max-width: 375px) {
    .pen-pal-modal-header[b-irzzk8vpt8] {
        padding: 44px 22px 12px;
    }

    .pen-pal-modal-title[b-irzzk8vpt8] {
        font-size: 1.35rem;
    }

    .pen-pal-modal-body[b-irzzk8vpt8] {
        padding: 6px 22px 10px;
    }

    .pen-pal-modal-body p[b-irzzk8vpt8] {
        font-size: 0.93rem;
    }

    .pen-pal-modal-footer[b-irzzk8vpt8] {
        padding: 14px 22px 20px;
    }

    [b-irzzk8vpt8] .pen-pal-modal-seal {
        width: 68px;
        height: 68px;
        margin-bottom: 22px;
    }
}

.pen-pal-nudge-card[b-irzzk8vpt8] {
    width: min(92%, 640px);
    margin: 0.6rem auto 0;
    padding: 0.9rem 1rem;
    background: rgba(255, 251, 246, 0.95);
    border: 1px solid rgba(214, 168, 135, 0.55);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(112, 78, 60, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #4b2e2e;
    font-size: 0.95rem;
}

.pen-pal-nudge-title[b-irzzk8vpt8] {
    font-weight: 700;
}

.pen-pal-nudge-text[b-irzzk8vpt8] {
    font-style: italic;
    color: rgba(75, 46, 46, 0.8);
    line-height: 1.4;
}

.pen-pal-nudge-actions[b-irzzk8vpt8] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pen-pal-nudge-accept[b-irzzk8vpt8] {
    background: linear-gradient(135deg, #ffc7b6, #f2b08e);
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-weight: 700;
    color: #4b2e2e;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(179, 119, 84, 0.2);
}

.pen-pal-nudge-dismiss[b-irzzk8vpt8] {
    background: transparent;
    border: 1px solid rgba(206, 160, 128, 0.7);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    color: #6a504b;
    cursor: pointer;
}

.pen-pal-nudge-accept:hover[b-irzzk8vpt8],
.pen-pal-nudge-dismiss:hover[b-irzzk8vpt8] {
    transform: translateY(-1px);
}

/* Pin SidebarBottom and CTA widgets to bottom */
.loved-one-chat-sidebar>.sidebar-top-content[b-irzzk8vpt8] {
    flex-shrink: 0;
}

.loved-one-chat-sidebar>div:last-child[b-irzzk8vpt8] {
    flex-shrink: 0;
    margin-top: auto;
}

/* Avatar image specific styling - only for .avatar class */
.loved-one-chat-sidebar .avatar[b-irzzk8vpt8] {
    display: block;
    /* Img specific */
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--accent);
    margin-bottom: 1rem;
    flex-shrink: 0;
    /* Prevent image shrinking */
}

.loved-one-chat-sidebar h2[b-irzzk8vpt8] {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    text-align: center;
}

.loved-one-chat-sidebar p[b-irzzk8vpt8] {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    color: #6a504b;
    text-align: center;
}

/* Ensure sidebar buttons inherit the base button style but can be overridden */
.loved-one-chat-sidebar button[b-irzzk8vpt8],
.loved-one-chat-sidebar .btn[b-irzzk8vpt8] {
    width: 100%;
    padding: 0.7rem;
    margin-bottom: 0.8rem;
    /* background: var(--peach);  Use original variable */
    background-color: rgb(255, 196, 179) !important;
    border: none;
    border-radius: 12px;
    /* Original HTML value */
    cursor: pointer;
    /* Ensure base styles are kept or overridden */
    font-weight: 600;
    text-align: center;
    font-family: var(--font-sans);
    /* Ensure font */
    flex-shrink: 0;
    /* Prevent button shrinking */
}

.loved-one-chat-sidebar a[b-irzzk8vpt8] {
    display: block;
    text-align: center;
    margin-bottom: 0.8rem;
    font-weight: 700;
    color: #4F4A45;
    display: block;
    text-align: center;
    margin-bottom: 0.8rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    width: 100%;
    flex-shrink: 0;
    /* Prevent link shrinking */
}

.loved-one-chat-sidebar button:hover[b-irzzk8vpt8] {
    background: var(--accent);
    /* Original HTML hover */
    /* Keep other inherited styles like color, font */
}

/* Disabled sidebar button (e.g., in letter mode) */
.loved-one-chat-sidebar button:disabled[b-irzzk8vpt8],
.loved-one-chat-sidebar button.disabled[b-irzzk8vpt8] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #e0d8d5 !important;
}

.loved-one-chat-sidebar button:disabled:hover[b-irzzk8vpt8],
.loved-one-chat-sidebar button.disabled:hover[b-irzzk8vpt8] {
    background-color: #e0d8d5 !important;
}

/* Sidebar Logo Styles */
.sidebar-top-content[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

.app-logo-link[b-irzzk8vpt8] {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
    margin-left: 4em;
}

.sidebar-logo[b-irzzk8vpt8] {
    text-align: center;
}

.sidebar-logo img[b-irzzk8vpt8] {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    /* Remove any border */
    border-radius: 0 !important;
    /* Remove any border radius */
    box-shadow: none !important;
    /* Remove any box shadow */
    margin: 0;
    /* Remove any margin from general img rules */
}

/* Adjust the loved one chat sidebar avatar to have some spacing after the logo */
.loved-one-chat-sidebar>.avatar[b-irzzk8vpt8] {
    margin-top: 1rem;
}

/* Avatar Wrapper with Favorite Heart Button */
.avatar-wrapper[b-irzzk8vpt8] {
    position: relative;
    display: inline-flex;
    align-self: center;
    margin-bottom: 0.75rem;
}

.avatar-wrapper .avatar[b-irzzk8vpt8] {
    margin-bottom: 0;
}

.loved-one-chat-sidebar .favorite-heart-btn[b-irzzk8vpt8] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 2px solid #f1c8b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
    z-index: 2;
}

.loved-one-chat-sidebar .favorite-heart-btn:hover[b-irzzk8vpt8] {
    transform: translateY(-1px) scale(1.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background: #fff !important;
}

.favorite-heart-btn.toggling[b-irzzk8vpt8] {
    opacity: 0.6;
    pointer-events: none;
}

.favorite-heart-btn .heart-icon[b-irzzk8vpt8] {
    width: 18px;
    height: 18px;
    color: #999;
    transition: all 0.3s ease;
}

.favorite-heart-btn:hover .heart-icon[b-irzzk8vpt8] {
    color: #CE8568;
}

.favorite-heart-btn.favorited .heart-icon.filled[b-irzzk8vpt8] {
    color: #CE8568;
    animation: heartPulse-b-irzzk8vpt8 0.4s ease;
}

@keyframes heartPulse-b-irzzk8vpt8 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* Quick-Switch Row: "Mina Älskade" */
.quick-switch-row[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 244, 236, 0.85);
    border-radius: 24px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(206, 133, 104, 0.2);
}

.quick-switch-label[b-irzzk8vpt8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8B7355;
    white-space: nowrap;
    /* inherited font-sans */
    letter-spacing: 0.02em;
}

.quick-switch-avatars[b-irzzk8vpt8] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quick-switch-avatars[b-irzzk8vpt8]::-webkit-scrollbar {
    display: none;
}

.quick-switch-avatar[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: fit-content;
    width: auto !important;
    margin: 0 !important;
}

.quick-switch-avatar:hover[b-irzzk8vpt8] {
    background: rgba(206, 133, 104, 0.1);
    transform: translateY(-2px);
}

.quick-switch-avatar img[b-irzzk8vpt8] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(206, 133, 104, 0.4);
    transition: all 0.2s ease;
}

.quick-switch-avatar:hover img[b-irzzk8vpt8] {
    border-color: #CE8568;
    box-shadow: 0 2px 8px rgba(206, 133, 104, 0.3);
}

.quick-switch-name[b-irzzk8vpt8] {
    font-size: 0.65rem;
    color: #6a5a4a;
    font-weight: 500;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* inherited font-sans */
}

/* Mobile adjustments for quick-switch */
@media (max-width: 768px) {
    .quick-switch-row[b-irzzk8vpt8] {
        padding: 0.4rem 0.6rem;
        gap: 0.5rem;
    }

    .quick-switch-label[b-irzzk8vpt8] {
        font-size: 0.7rem;
    }

    .quick-switch-avatar img[b-irzzk8vpt8] {
        width: 32px;
        height: 32px;
    }

    .quick-switch-name[b-irzzk8vpt8] {
        font-size: 0.6rem;
        max-width: 40px;
    }
}

/* Chat Area Wrapper (Handles sidebar offset) */
.loved-one-chat-wrapper[b-irzzk8vpt8] {
    flex: 1;
    /* Take remaining space */
    margin-left: 280px;
    /* Initial offset for sidebar */
    transition: margin-left 0.3s ease;
    display: flex;
    /* Use flex for centering chat-container */
    justify-content: center;
    /* Center chat-container horizontally */
    /* min-height: 100vh; */
    /* Removed */
    height: 100vh;
    /* Give wrapper explicit viewport height */
    position: relative;
    /* Needed for z-index */
    z-index: 1;
    /* Above background */
}

.loved-one-chat-wrapper.sidebar-hidden[b-irzzk8vpt8] {
    margin-left: 0;
    /* No offset when sidebar is hidden */
}

/* Chat Container (The main chat box area) */
.loved-one-chat-box[b-irzzk8vpt8] {
    width: 100%;
    /* Take full width of wrapper */
    max-width: 800px;
    /* Set max width for readability */
    display: flex;
    flex-direction: column;
    padding: 0;
    /* Remove all padding to eliminate gap */
    box-sizing: border-box;
    height: 100%;
    /* Ensure it fills parent height */
}

/* Added rule for chat-wrapper based on Blazor structure and chatta.html layout */
.chat-wrapper[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Fill chat-container height */
    position: relative;
    /* For absolute positioned floating input */
}

.chat-header[b-irzzk8vpt8] {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    /* Reduced margin */
    /* padding-top: 1rem;*/
    flex-shrink: 0;
    /* Prevent header from shrinking */
}

/* Messages Area */
.loved-one-chat-messages[b-irzzk8vpt8] {
    --chat-input-overlay: 160px;
    --chat-fade-height: 90px;
    flex: 1;
    /* Take available vertical space */
    overflow-y: auto;
    /* Enable scrolling for messages */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Reduced gap */
    padding-bottom: var(--chat-input-overlay);
    /* Space for floating input overlay */
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* background: rgba(255, 255, 255, 0.7); */
    /* border-radius: 10px; */
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) calc(100% - var(--chat-fade-height)),
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) calc(100% - var(--chat-fade-height)),
            rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.loved-one-chat-messages.keepsake-overlay-open[b-irzzk8vpt8] {
    -webkit-mask-image: none;
    mask-image: none;
}

.chat-system-event[b-irzzk8vpt8] {
    align-self: center;
    text-align: center;
    font-style: italic;
    font-size: 0.85rem;
    color: #8c7f79;
    padding: 0.1rem 0.6rem;
}



.loved-one-chat-message[b-irzzk8vpt8] {
    max-width: 80%;
    /* padding: 1rem 1.2rem;  Original HTML padding */
    border-radius: 20px;
    /* More rounded corners */
    font-size: 1rem;
    /* Original HTML font size */
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    /* Match chatta.html */
    word-wrap: break-word;
}





/*.intro-message {
    font-family: var(--font-sans);
}*/

.loved-one-chat-bubble[b-irzzk8vpt8] {
    /*background-color: var(--ai-bubble);
    
    padding: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    */
    /*border-radius: 15px;
    /* inherited font-sans */
    color: var(--text-dark);
    line-height: 1.6;
    */
    /*max-width: 70%;*/
    font-family: var(--font-sans) !important;
    font-size: 1.0em !important;
    line-height: 1.5;
    padding: 1rem;
    border-radius: 20px !important;
    /* Custom radius to mimic a chat bubble */
    transition: background 0.3s ease;
    word-break: break-word;
    /* Ensures long words wrap properly */
    /* white-space: pre-wrap;  Allows line breaks and preserves formatting */
    overflow-wrap: break-word;
    /* Additional wrapping support */
    overflow: hidden;
    /* Prevents image from overflowing */
    /*display: flex;*/
    /* Ensures image is properly placed inside */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 0.5rem 0;
    white-space: pre-line;
    /* for \n support */
}

.loved-one-chat-bubble .chat-bubble-body[b-irzzk8vpt8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.loved-one-chat-bubble .chat-bubble-markdown[b-irzzk8vpt8] {
    position: relative;
    z-index: 1;
}

.chat-bubble-overlay[b-irzzk8vpt8] {
    position: absolute;
    left: 0;
    right: 0;
    height: 4rem;
    bottom: 3.4rem;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, rgba(244, 239, 235, 0) 0%, rgba(244, 239, 235, 0.92) 65%, rgba(244, 239, 235, 1) 100%);
}

.loved-one-chat-message.user .chat-bubble-overlay[b-irzzk8vpt8] {
    background: linear-gradient(180deg, rgba(255, 228, 210, 0) 0%, rgba(255, 228, 210, 0.9) 65%, rgba(255, 228, 210, 1) 100%);
}

/* Bracketed action text - italic and gray */
.loved-one-chat-bubble .action-text[b-irzzk8vpt8],
.chat-bubble-markdown .action-text[b-irzzk8vpt8],
.action-text[b-irzzk8vpt8] {
    font-style: italic;
    color: #8b7355;
    opacity: 0.85;
}

.chat-gated-footer[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    position: relative;
    z-index: 2;
    margin-top: 0.5rem;
}

.chat-gated-line[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #7B5A53;
}

.chat-gated-cta[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fff8f3;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    /* inherited font-sans */
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.chat-gated-cta:hover[b-irzzk8vpt8],
.chat-gated-cta:focus-visible[b-irzzk8vpt8] {
    background: linear-gradient(135deg, #6B4A43, #8F5B4A);
    transform: translateY(-1px);
}

.chat-gated-cta:focus-visible[b-irzzk8vpt8] {
    outline: 2px solid rgba(123, 90, 83, 0.35);
    outline-offset: 3px;
}

.chat-gated-icon[b-irzzk8vpt8] {
    font-size: 1rem;
}


/* Paragraph spacing */
.loved-one-chat-bubble p[b-irzzk8vpt8] {
    margin: 0 0 0.8em 0;
}

/* Links inside message */
.loved-one-chat-bubble a[b-irzzk8vpt8] {
    color: #d17a5c;
    /* peachy accent */
    text-decoration: underline;
    font-weight: 500;
}

/* Lists inside message (::deep needed because markdown HTML is injected via MarkupString and lacks Blazor scoping attribute) */
.loved-one-chat-bubble[b-irzzk8vpt8]  ul,
.loved-one-chat-bubble[b-irzzk8vpt8]  ol {
    margin: 0.6em 0;
    padding-left: 1.6em;
    list-style-position: outside;
}

.loved-one-chat-bubble[b-irzzk8vpt8]  ul {
    list-style-type: disc;
}

.loved-one-chat-bubble[b-irzzk8vpt8]  ol {
    list-style-type: decimal;
}

.loved-one-chat-bubble[b-irzzk8vpt8]  li {
    margin-bottom: 1em;
    line-height: 1.6;
}


.loved-one-chat-messages .loved-one-chat-message .loved-one-chat-message-content[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timestamp[b-irzzk8vpt8] {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    opacity: 1;
    color: #aa8d80;
}

.loved-one-chat-message.ai[b-irzzk8vpt8] {
    /* background-color: #f4efeb;  var(--ai-bubble); */
    align-self: flex-start;
    /* Original HTML alignment */
    margin-right: auto;
}

.loved-one-chat-message.ai .loved-one-chat-bubble[b-irzzk8vpt8] {
    background-color: #f4efeb;
    /* var(--ai-bubble); */
    border-radius: 15px 15px 15px 1px;
}

.loved-one-chat-message.user[b-irzzk8vpt8] {
    /* Use original variable */
    /*background: #ffe4d2;*/
    /*var(--user-bubble);*/
    align-self: flex-end;
    /* Original HTML alignment */
    margin-left: auto;
}

.loved-one-chat-message.user .loved-one-chat-message-content[b-irzzk8vpt8] {
    align-items: flex-end;
}

.loved-one-chat-message.user .loved-one-chat-bubble[b-irzzk8vpt8] {
    background-color: #ffe4d2;
    /* var(--ai-bubble); */
    border-radius: 15px 15px 1px 15px;
}


.loved-one-chat-bubble.keepsake-enabled[b-irzzk8vpt8] {
    padding-right: 3.2rem;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.loved-one-chat-bubble.keepsake-selected[b-irzzk8vpt8] {
    transform: scale(0.97);
    background-color: #ede0d9;
    box-shadow: 0 14px 34px rgba(75, 46, 46, 0.18);
}

.loved-one-chat-bubble.keepsake-saving[b-irzzk8vpt8] {
    opacity: 0.85;
}

.keepsake-icon-container[b-irzzk8vpt8] {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(83, 51, 43, 0.2);
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 6;
}

.loved-one-chat-message.ai .loved-one-chat-message-content:hover .keepsake-icon-container[b-irzzk8vpt8],
.loved-one-chat-message.ai .loved-one-chat-message-content:focus-within .keepsake-icon-container[b-irzzk8vpt8],
.keepsake-icon-container.visible[b-irzzk8vpt8] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.keepsake-icon-container.saved[b-irzzk8vpt8] {
    background: rgba(255, 247, 240, 0.96);
}

.keepsake-icon-button[b-irzzk8vpt8] {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.keepsake-icon-button:hover[b-irzzk8vpt8] {
    background-color: rgba(255, 255, 255, 0.35);
}

.keepsake-icon-button:active[b-irzzk8vpt8] {
    transform: scale(0.95);
}

.keepsake-icon-button:focus-visible[b-irzzk8vpt8] {
    outline: 2px solid rgba(200, 140, 110, 0.45);
    outline-offset: 2px;
}

.keepsake-icon-container .keepsake-icon[b-irzzk8vpt8] {
    font-size: 1.15rem;
    color: #c88c6e;
    transition: color 0.2s ease;
}

.keepsake-icon-button.unsaved .keepsake-icon[b-irzzk8vpt8] {
    color: #c9a08e;
}

.keepsake-icon-button.saved .keepsake-icon[b-irzzk8vpt8] {
    color: #e0a15a;
}

.keepsake-icon-container.pulse[b-irzzk8vpt8] {
    animation: keepsake-pulse-b-irzzk8vpt8 1.3s ease-out;
}

@keyframes keepsake-pulse-b-irzzk8vpt8 {
    0% {
        box-shadow: 0 0 0 0 rgba(200, 140, 110, 0.55);
        transform: scale(1);
    }

    60% {
        box-shadow: 0 0 0 22px rgba(200, 140, 110, 0);
        transform: scale(1.12);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(200, 140, 110, 0);
        transform: scale(1);
    }
}

.keepsake-tooltip[b-irzzk8vpt8] {
    position: absolute;
    top: -1.9rem;
    right: 0.15rem;
    background: rgba(255, 255, 255, 0.95);
    color: #4b2e2e;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(83, 51, 43, 0.18);
    animation: keepsake-tooltip-fade-b-irzzk8vpt8 0.25s ease-out;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}

@keyframes keepsake-tooltip-fade-b-irzzk8vpt8 {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.keepsake-menu-backdrop[b-irzzk8vpt8] {
    position: fixed;
    inset: 0;
    background: rgba(36, 24, 20, 0.18);
    z-index: 1205;
}

.keepsake-menu[b-irzzk8vpt8] {
    position: absolute;
    top: 2.8rem;
    right: 0.45rem;
    min-width: 200px;
    background: #ffffff;
    border-radius: 16px;
    padding: 0.35rem 0;
    box-shadow: 0 16px 36px rgba(83, 51, 43, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1210;
}

.keepsake-menu.open[b-irzzk8vpt8] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.keepsake-menu-item[b-irzzk8vpt8] {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    color: #4b2e2e;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.keepsake-menu-item:hover[b-irzzk8vpt8],
.keepsake-menu-item:focus-visible[b-irzzk8vpt8] {
    background: #f7f2ee;
}

.keepsake-menu-item:active[b-irzzk8vpt8] {
    background: #efe7e1;
}

.keepsake-menu-item.danger[b-irzzk8vpt8] {
    color: #b24a3a;
}

.keepsake-menu-icon[b-irzzk8vpt8] {
    font-size: 1.05rem;
}

@media (max-width: 768px) {
    .keepsake-menu-backdrop[b-irzzk8vpt8] {
        background: rgba(24, 16, 12, 0.3);
    }

    .keepsake-menu[b-irzzk8vpt8] {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 1.2rem;
        top: auto;
        width: min(92vw, 360px);
        border-radius: 20px;
        transform: translate(-50%, 12px);
    }

    .keepsake-menu.open[b-irzzk8vpt8] {
        transform: translate(-50%, 0);
    }
}

.keepsake-magical-reveal[b-irzzk8vpt8] {
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translate(-50%, -100%);
    background: rgba(255, 244, 240, 0.95);
    border-radius: 18px;
    padding: 0.95rem 1.15rem;
    box-shadow: 0 20px 48px rgba(83, 51, 43, 0.24);
    text-align: center;
    width: min(280px, 82vw);
    pointer-events: none;
    z-index: 6;
    animation: keepsake-reveal-rise-b-irzzk8vpt8 0.28s ease-out;
}

.keepsake-magical-reveal[b-irzzk8vpt8]::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(255, 244, 240, 0.95);
    box-shadow: 0 12px 32px rgba(83, 51, 43, 0.18);
}

.keepsake-magical-reveal-type[b-irzzk8vpt8] {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c88c6e;
    margin-bottom: 0.25rem;
}

.keepsake-magical-reveal-title[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #4b2e2e;
    margin-bottom: 0.55rem;
}

.keepsake-magical-reveal-cta[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #f8d7c4 0%, #fddabd 100%);
    color: #4b2e2e;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 28px rgba(248, 188, 160, 0.35);
}

@keyframes keepsake-reveal-rise-b-irzzk8vpt8 {
    0% {
        opacity: 0;
        transform: translate(-50%, -88%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -100%);
    }
}

@media (max-width: 600px) {
    .keepsake-magical-reveal[b-irzzk8vpt8] {
        padding: 0.8rem 0.9rem;
        width: min(240px, 90vw);
    }

    .keepsake-tooltip[b-irzzk8vpt8] {
        top: -1.7rem;
        right: -0.1rem;
    }
}

/* Chat Input Area */
.loved-one-chat-input[b-irzzk8vpt8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 0 1.25rem;
    flex-shrink: 0;
}

.chat-input-capsule[b-irzzk8vpt8] {
    width: min(800px, 100%);
    background: rgba(255, 253, 249, 0.98);
    border: 1px solid rgba(75, 46, 46, 0.08);
    border-radius: 26px;
    box-shadow: 0 12px 30px -18px rgba(75, 46, 46, 0.35), 0 4px 10px rgba(75, 46, 46, 0.08);
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
}

.keepsake-trigger-chip-container[b-irzzk8vpt8] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.4rem 0.2rem;
    width: min(820px, 94%);
    margin: 0 auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.keepsake-trigger-chip-container[b-irzzk8vpt8]::-webkit-scrollbar {
    display: none;
}

.keepsake-trigger-chip[b-irzzk8vpt8] {
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
    border: 1.5px solid #e8d5c8;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #4b2e2e;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.1);
    white-space: nowrap;
}

.keepsake-trigger-chip:hover[b-irzzk8vpt8] {
    background: linear-gradient(135deg, #ffe3d1 0%, #ffd0c0 100%);
    border-color: #ffd0c0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 51, 43, 0.14);
}

.keepsake-trigger-chip:active[b-irzzk8vpt8] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(83, 51, 43, 0.12);
}

.chat-input-wrapper[b-irzzk8vpt8] {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100%;
}

.rotating-warning.chat-input-disclaimer[b-irzzk8vpt8] {
    width: min(720px, 90%);
    text-align: center;
    margin-top: 0.2rem;
}

/* Input row - invisible on desktop, becomes container on mobile */
.input-row[b-irzzk8vpt8] {
    display: contents;
    /* Makes wrapper invisible, children behave as if unwrapped */
}

.scroll-to-latest-btn[b-irzzk8vpt8] {
    position: absolute;
    top: -2.3rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 28px rgba(75, 46, 46, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    z-index: 5;
}

.scroll-to-latest-btn:hover[b-irzzk8vpt8] {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 16px 32px rgba(75, 46, 46, 0.22);
}

.scroll-to-latest-btn:focus-visible[b-irzzk8vpt8] {
    outline: 2px solid #f4a58a;
    outline-offset: 2px;
}

.scroll-to-latest-icon[b-irzzk8vpt8] {
    font-size: 1.15rem;
    color: #4b2e2e;
    line-height: 1;
}

@media (max-width: 600px) {
    .scroll-to-latest-btn[b-irzzk8vpt8] {
        top: -2rem;
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* ChatGPT-Style Scroll to Bottom Button */
.scroll-to-bottom-btn[b-irzzk8vpt8] {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #4b2e2e;
    animation: slideUp-b-irzzk8vpt8 0.2s ease-out;
}

@keyframes slideUp-b-irzzk8vpt8 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.scroll-to-bottom-btn:hover[b-irzzk8vpt8] {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) scale(1.05);
}

.scroll-to-bottom-btn:active[b-irzzk8vpt8] {
    transform: translateX(-50%) scale(0.95);
}

.scroll-to-bottom-btn svg[b-irzzk8vpt8] {
    width: 20px;
    height: 20px;
}

@media (max-width: 600px) {
    .scroll-to-bottom-btn[b-irzzk8vpt8] {
        width: 36px;
        height: 36px;
        bottom: calc(100% + 8px);
    }

    .scroll-to-bottom-btn svg[b-irzzk8vpt8] {
        width: 18px;
        height: 18px;
    }
}

.send-btn-overlay[b-irzzk8vpt8] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background-color: #f7d9b8;
    border-radius: 50%;
    font-size: 16px;
    color: #7d4e2d;
    cursor: pointer;
    padding: 6px;
    box-sizing: content-box;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.send-btn-overlay:hover[b-irzzk8vpt8] {
    background-color: #f0cba2;
    transform: translateY(-50%) scale(1.05);
}

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

/* Style input specifically within chat area */
.loved-one-chat-input input[type="text"][b-irzzk8vpt8] {
    flex: 1;
    padding: 0.9rem;
    /* Original HTML padding */
    border-radius: 20px;
    /* More rounded */
    border: 1px solid #ccc;
    /* Original HTML border */
    font-size: 1rem;
    /* Original HTML font size */
    background-color: #fff;
    /* Ensure white background */
}

/* Style button specifically within chat area - REMOVED as using overlay button now */
/* No hover defined in original HTML, remove for now */

/* Sidebar Toggle Button */
.loved-one-chat-toggle[b-irzzk8vpt8] {
    position: fixed;
    top: 1rem;
    left: 1rem;
    /* Position relative to sidebar */
    background: var(--sidebar-bg);
    /* Match sidebar */
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 1.2rem;
    /* Make icon slightly larger */
    line-height: 1;
    /* Ensure icon fits */
    cursor: pointer;
    z-index: 1000;
    /* Above everything */
    transition: left 0.3s ease;
}

.loved-one-chat-toggle.sidebar-hidden[b-irzzk8vpt8] {
    left: 1rem;
    /* Position near edge when sidebar is hidden */
}


/* Floating animation */
@keyframes gentleFloat-b-irzzk8vpt8 {

    0%,
    100% {
        transform: translateY(20px);
    }

    50% {
        transform: translateY(25px);
    }
}

.loved-one-intro-card[b-irzzk8vpt8] {
    background: #fff7f2;
    border: 1px solid #f3d9c6;
    border-radius: 20px;
    padding: 1.2rem;
    max-width: 360px;
    margin: 2rem auto 1.5rem;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    font-family: var(--font-sans);
    animation: fadeInMemory-b-irzzk8vpt8 1.6s ease-out;
}

.loved-one-intro-card .card-header[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: bold;
    color: #4b2e2e;
    margin-bottom: 0.8rem;
}

.loved-one-intro-card img[b-irzzk8vpt8] {
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 0.9rem;
}

.loved-one-intro-card .caption[b-irzzk8vpt8] {
    font-size: 1rem;
    color: #4b2e2e;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.keepsake-context-card[b-irzzk8vpt8] {
    background: #fffaf4;
    border: 1px dashed #e6cdbd;
    border-radius: 16px;
    padding: 0.9rem 1.1rem;
    max-width: 520px;
    margin: 0 auto 1.4rem;
    box-shadow: 0 2px 8px rgba(75, 46, 46, 0.08);
    font-family: var(--font-sans);
}

.keepsake-context-header[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    color: #4b2e2e;
    font-size: 0.95rem;
    font-weight: 600;
}

.keepsake-context-icon[b-irzzk8vpt8] {
    font-size: 1rem;
}

.keepsake-context-title[b-irzzk8vpt8] {
    flex: 1;
}

.keepsake-context-toggle[b-irzzk8vpt8] {
    border: none;
    background: transparent;
    color: #7a5950;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
}

.keepsake-context-toggle:hover[b-irzzk8vpt8] {
    color: #4b2e2e;
}

.keepsake-context-body[b-irzzk8vpt8] {
    margin-top: 0.5rem;
    color: #4b2e2e;
    font-size: 0.95rem;
    line-height: 1.5;
}

.keepsake-context-body p[b-irzzk8vpt8] {
    margin: 0;
}

.keepsake-context-loading[b-irzzk8vpt8] {
    font-style: italic;
    color: #8c7f79;
}

/* Keepsake Quote Card - Unified Design (matches letter card) */
.keepsake-context-card.keepsake-quote[b-irzzk8vpt8] {
    background: linear-gradient(to bottom, #fffcf8, #fffaf4);
    border: none;
    border-radius: 20px;
    padding: 1.2rem 1.4rem 1.4rem;
    max-width: 800px;
    box-shadow: 0 4px 16px rgba(75, 46, 46, 0.12);
}

.keepsake-quote-paper-content[b-irzzk8vpt8] {
    padding-bottom: 0.8rem;
}

.keepsake-quote-badge[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    --keepsake-badge-bg: #fff0e8;
    --keepsake-badge-border: #f3d9c6;
    --keepsake-badge-text: #c4755d;
    background: var(--keepsake-badge-bg);
    border: 1px solid var(--keepsake-badge-border);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--keepsake-badge-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
}

.keepsake-quote-meta[b-irzzk8vpt8] {
    font-size: 0.9rem;
    color: #4b2e2e;
    margin-bottom: 0.3rem;
}

.keepsake-quote-meta .source[b-irzzk8vpt8] {
    font-weight: 600;
}

.keepsake-quote-meta .separator[b-irzzk8vpt8] {
    color: #9a7a70;
    margin: 0 0.4rem;
}

.keepsake-quote-meta .date[b-irzzk8vpt8] {
    color: #7a5950;
}

.keepsake-quote-title[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: #3d2424;
    margin: 0.2rem 0 0.6rem;
    line-height: 1.35;
}

.keepsake-quote-preview[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(75, 46, 46, 0.9);
    margin-bottom: 0.5rem;
}

.keepsake-quote-preview .show-more[b-irzzk8vpt8] {
    color: #c4755d;
    cursor: pointer;
    font-weight: 500;
    margin-left: 0.3rem;
}

.keepsake-quote-preview .show-more:hover[b-irzzk8vpt8] {
    text-decoration: underline;
}

.keepsake-quote-full-content[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4b2e2e;
    margin-bottom: 0.5rem;
}

.keepsake-quote-full-content p[b-irzzk8vpt8] {
    margin: 0 0 0.8rem;
}

.keepsake-quote-toggle[b-irzzk8vpt8] {
    text-align: right;
    margin-top: 0.5rem;
}

.keepsake-quote-toggle .show-less[b-irzzk8vpt8] {
    color: #c4755d;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}

.keepsake-quote-toggle .show-less:hover[b-irzzk8vpt8] {
    text-decoration: underline;
}

.keepsake-quote-action-flap[b-irzzk8vpt8] {
    border-top: 1px solid #f0e4dc;
    padding-top: 1rem;
    margin-top: 0.8rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.keepsake-quote-action-wrapper[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.keepsake-quote-action-helper[b-irzzk8vpt8] {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #8B7355;
    font-style: italic;
    font-family: var(--font-sans);
}

.keepsake-quote-action-chip[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem !important;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
    color: #ffffff !important;
    border: 1px solid #A85E46;
    box-shadow:
        0 4px 10px rgba(168, 94, 70, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.keepsake-quote-action-chip span[b-irzzk8vpt8] {
    color: #ffffff !important;
}

.keepsake-quote-action-chip:hover[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #d6927a 0%, #b56b53 100%);
    transform: translateY(-1px);
    box-shadow:
        0 6px 14px rgba(168, 94, 70, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.keepsake-quote-action-chip:active[b-irzzk8vpt8] {
    transform: translateY(0);
}

/* Pen Pal Letter Card - Enhanced Design */
.keepsake-context-card.pen-pal-letter[b-irzzk8vpt8] {
    position: relative;
    background: linear-gradient(to bottom, #fffcf8, #fffaf4);
    border: none;
    border-radius: 20px;
    padding: 1.2rem 1.4rem 1.4rem;
    max-width: 800px;
    box-shadow: 0 4px 16px rgba(75, 46, 46, 0.12);
}

.pen-pal-letter-badge[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    --penpal-badge-bg: #fff0e8;
    --penpal-badge-border: #f3d9c6;
    --penpal-badge-text: #c4755d;
    background: var(--penpal-badge-bg);
    border: 1px solid var(--penpal-badge-border);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--penpal-badge-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
}

.pen-pal-letter-badge.badge-new[b-irzzk8vpt8] {
    --penpal-badge-bg: #fff0e8;
    --penpal-badge-border: #f3d9c6;
    --penpal-badge-text: #c4755d;
}

.pen-pal-letter-badge.badge-replied[b-irzzk8vpt8] {
    --penpal-badge-bg: #edf4ea;
    --penpal-badge-border: #d5e2cf;
    --penpal-badge-text: #6e7f6b;
}

.pen-pal-letter-badge.badge-saved[b-irzzk8vpt8] {
    --penpal-badge-bg: #f3eadf;
    --penpal-badge-border: #e1d0bf;
    --penpal-badge-text: #8b6e5a;
}

/* Vintage "Answered" Ink Stamp */
.pen-pal-answered-stamp[b-irzzk8vpt8] {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 110px;
    height: 110px;
    transform: rotate(-12deg);
    opacity: 0.75;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: multiply;
    /* Helps it look like ink on paper */
}

.pen-pal-answered-stamp .stamp-svg[b-irzzk8vpt8] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pen-pal-answered-stamp .stamp-border-outer[b-irzzk8vpt8] {
    fill: none;
    stroke: #8b6347;
    stroke-width: 1.5;
    stroke-dasharray: 120 4 20 2;
    /* Broken line effect */
}

.pen-pal-answered-stamp .stamp-border-mid[b-irzzk8vpt8] {
    fill: none;
    stroke: #8b6347;
    stroke-width: 0.8;
}

.pen-pal-answered-stamp .stamp-border-inner[b-irzzk8vpt8] {
    fill: none;
    stroke: #8b6347;
    stroke-width: 0.5;
    stroke-dasharray: 4 2;
    /* Dotted line */
    opacity: 0.7;
}

.pen-pal-answered-stamp .stamp-icon-group[b-irzzk8vpt8] {
    stroke: #8b6347;
}

.pen-pal-answered-stamp .stamp-detail[b-irzzk8vpt8] {
    opacity: 0.6;
}

.pen-pal-answered-stamp .stamp-text-curved[b-irzzk8vpt8] {
    font-family: 'Courier New', Courier, monospace;
    /* Typewriter style */
    font-size: 14px;
    font-weight: 700;
    fill: #8b6347;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}

.pen-pal-answered-stamp .stamp-date[b-irzzk8vpt8] {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 600;
    fill: #8b6347;
    letter-spacing: 1px;
}

.pen-pal-answered-stamp .stamp-dot[b-irzzk8vpt8] {
    fill: #8b6347;
    opacity: 0.8;
}

.pen-pal-letter-meta[b-irzzk8vpt8] {
    font-size: 0.9rem;
    color: #4b2e2e;
    margin-bottom: 0.3rem;
}

.pen-pal-letter-meta .sender[b-irzzk8vpt8] {
    font-weight: 600;
}

.pen-pal-letter-meta .separator[b-irzzk8vpt8] {
    color: #9a7a70;
    margin: 0 0.4rem;
}

.pen-pal-letter-meta .date[b-irzzk8vpt8] {
    color: #7a5950;
}

.pen-pal-letter-subject[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    color: #3d2424;
    margin: 0.2rem 0 0.6rem;
    line-height: 1.35;
}

.pen-pal-letter-preview[b-irzzk8vpt8] {
    /* color: #b85c4b; */
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(75, 46, 46, 0.9);
    margin-bottom: 0.5rem;
}

.pen-pal-letter-preview .show-more[b-irzzk8vpt8] {
    color: #c4755d;
    cursor: pointer;
    font-weight: 500;
}

.pen-pal-letter-preview .show-more:hover[b-irzzk8vpt8] {
    text-decoration: underline;
}

.pen-pal-letter-toggle[b-irzzk8vpt8] {
    text-align: right;
    margin-top: 0.5rem;
}

.pen-pal-letter-toggle .show-less[b-irzzk8vpt8] {
    color: #c4755d;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}

.pen-pal-letter-toggle .show-less:hover[b-irzzk8vpt8] {
    text-decoration: underline;
}

.pen-pal-letter-email-note[b-irzzk8vpt8] {
    font-size: 0.85rem;
    color: #7a5950;
    margin-bottom: 1rem;
}

.pen-pal-letter-divider[b-irzzk8vpt8] {
    text-align: center;
    padding: 0.5rem 0 0.3rem;
    border-top: 1px solid #f0e4dc;
    margin-top: 0.8rem;
}

.pen-pal-letter-divider-title[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    color: #4b2e2e;
    margin-bottom: 0.3rem;
}

.pen-pal-letter-divider-subtitle[b-irzzk8vpt8] {
    font-size: 0.9rem;
    color: #7a5950;
}

.pen-pal-letter-flap-header[b-irzzk8vpt8] {
    text-align: center;
    margin-bottom: 2rem;

}

.pen-pal-letter-flap-header[b-irzzk8vpt8]::before {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background: #EBD9CE;
    margin: 0 auto 2rem;
}

.pen-pal-letter-flap-title[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 800;
    color: #3C2621;
    margin: 0 0 0.6rem;
}

.pen-pal-letter-flap-subtitle[b-irzzk8vpt8] {
    font-size: 1rem;
    color: #7A5950;
    font-family: var(--font-sans);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

.pen-pal-letter-actions[b-irzzk8vpt8] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pen-pal-letter-action[b-irzzk8vpt8] {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pen-pal-letter-action button[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pen-pal-letter-action.primary button[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
    color: #fff;
    border: 1px solid #A85E46;
    /* Subtle border match */
    box-shadow:
        0 4px 10px rgba(168, 94, 70, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pen-pal-letter-action.primary button:hover[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #d6927a 0%, #b56b53 100%);
    transform: translateY(-1px);
    box-shadow:
        0 6px 14px rgba(168, 94, 70, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pen-pal-letter-action.secondary button[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F1EB 100%);
    color: #5A3F34;
    border: 1px solid #CBA08E;
    box-shadow: 0 4px 10px rgba(90, 63, 52, 0.08);
}

.pen-pal-letter-action.secondary button:hover[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #fffaf6 0%, #fdf5ef 100%);
    background-color: transparent;
    /* Override existing hover */
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(90, 63, 52, 0.12);
}

/* Active state - user is currently chatting about the letter */
.pen-pal-letter-action.secondary.active button[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #e8ddd5 0%, #d9cec5 100%);
    color: #7a6b60;
    border: 1px solid #b8a89c;
    cursor: default;
    transform: none;
}

.pen-pal-letter-action.secondary.active button:hover[b-irzzk8vpt8] {
    transform: none;
    box-shadow: 0 4px 10px rgba(90, 63, 52, 0.08);
}

.pen-pal-letter-action.secondary.active .pen-pal-letter-action-helper[b-irzzk8vpt8] {
    color: #9a8a7d;
    font-style: italic;
}

.pen-pal-letter-action-helper[b-irzzk8vpt8] {
    font-size: 0.8rem;
    color: #7a5950;
    margin-top: 0.4rem;
    line-height: 1.3;
}

/* Full letter content when expanded */
.pen-pal-letter-full-content[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4b2e2e;
    margin: 0.5rem 0 1rem;
}

.pen-pal-letter-full-content p[b-irzzk8vpt8] {
    margin: 0 0 0.8rem;
}

/* Pen Pal Reply Modal */
.pen-pal-reply-overlay[b-irzzk8vpt8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(35, 25, 18, 0.72);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    z-index: 2100;
}

.pen-pal-reply-overlay.visible[b-irzzk8vpt8] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.pen-pal-reply-overlay.closing[b-irzzk8vpt8] {
    opacity: 0;
    visibility: hidden;
}

.pen-pal-reply-modal[b-irzzk8vpt8] {
    width: min(860px, 92vw);
    max-height: 88vh;
    background: linear-gradient(180deg, #fbf2e9 0%, #f4e8dd 100%);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(0.985);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.pen-pal-reply-modal.closing[b-irzzk8vpt8] {
    transform: translateY(-16px) scale(0.94);
    opacity: 0;
}

.pen-pal-reply-modal.mobile[b-irzzk8vpt8] {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

.pen-pal-reply-header[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2.2rem 1.2rem;
    font-family: var(--font-sans);
    color: #4b2e2e;
    position: relative;
}

.pen-pal-reply-title[b-irzzk8vpt8] {
    font-size: 1.35rem;
    font-weight: 700;
}

.pen-pal-reply-title strong[b-irzzk8vpt8] {
    margin-left: 0.25rem;
}

.pen-pal-reply-meta[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.88rem;
    color: #7a5950;
}

.pen-pal-reply-saved[b-irzzk8vpt8] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b5a4e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pen-pal-reply-close[b-irzzk8vpt8] {
    position: absolute;
    right: 1.4rem;
    top: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(120, 90, 80, 0.3);
    background: rgba(255, 255, 255, 0.78);
    color: #5a3f34;
    font-size: 1.3rem;
    cursor: pointer;
}

.pen-pal-reply-body[b-irzzk8vpt8] {
    padding: 0 2.2rem 1.8rem;
    overflow-y: auto;
}

.pen-pal-reply-toggle[b-irzzk8vpt8] {
    background: transparent;
    border: none;
    color: #b15f48;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 1rem;
}

.pen-pal-reply-original-letter[b-irzzk8vpt8] {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.4rem;
    color: #4b2e2e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.pen-pal-reply-original-subject[b-irzzk8vpt8] {
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.pen-pal-reply-original-content[b-irzzk8vpt8] {
    font-size: 0.95rem;
    line-height: 1.5;
}

.pen-pal-reply-label[b-irzzk8vpt8] {
    display: block;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #6a4d3f;
    margin: 0.9rem 0 0.5rem;
}

.pen-pal-reply-input[b-irzzk8vpt8],
.pen-pal-reply-textarea[b-irzzk8vpt8] {
    width: 100%;
    border: 1px solid rgba(180, 150, 130, 0.4);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    font-family: var(--font-sans);
    background: rgba(255, 255, 255, 0.75);
    color: #4b2e2e;
    outline: none;
}

.pen-pal-reply-textarea[b-irzzk8vpt8] {
    min-height: 240px;
    resize: vertical;
    line-height: 1.7;
    background-image: repeating-linear-gradient(to bottom,
            transparent,
            transparent 26px,
            rgba(180, 150, 130, 0.2) 27px);
    background-attachment: local;
}

.pen-pal-reply-footer[b-irzzk8vpt8] {
    padding: 1.3rem 2.2rem 1.8rem;
    border-top: 1px solid rgba(200, 170, 150, 0.35);
    background: rgba(255, 255, 255, 0.45);
}

.pen-pal-reply-footer-note[b-irzzk8vpt8] {
    font-size: 0.9rem;
    color: #7a5950;
    margin-bottom: 1rem;
}

.pen-pal-reply-actions[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pen-pal-reply-cancel[b-irzzk8vpt8] {
    background: transparent;
    border: none;
    color: #8b6e5a;
    font-size: 1rem;
    cursor: pointer;
}

.pen-pal-reply-send[b-irzzk8vpt8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, #d38468 0%, #a85e46 100%);
    color: #fff;
    border: 1px solid #a85e46;
    border-radius: 999px;
    padding: 0.9rem 2.8rem;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(168, 94, 70, 0.3);
}

.pen-pal-reply-send:disabled[b-irzzk8vpt8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pen-pal-reply-toast[b-irzzk8vpt8] {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    background: rgba(41, 30, 24, 0.92);
    color: #f9f0e6;
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 2200;
}

.pen-pal-reply-card[b-irzzk8vpt8] {
    background: linear-gradient(180deg, #fff9f2 0%, #f8efe6 100%);
    border-radius: 18px;
    padding: 1rem 1.2rem;
    max-width: 520px;
    margin: 0.6rem auto 1.1rem;
    box-shadow: 0 6px 18px rgba(75, 46, 46, 0.12);
    font-family: var(--font-sans);
    color: #4b2e2e;
}

.pen-pal-reply-card-header[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #8b6e5a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.pen-pal-reply-card-subject[b-irzzk8vpt8] {
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.pen-pal-reply-card-preview[b-irzzk8vpt8] {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Cinematic Subtitle for Acknowledgement */
.pen-pal-ack[b-irzzk8vpt8] {
    background: rgba(20, 10, 5, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 252, 245, 0.95);
    padding: 12px 18px;
    border-radius: 16px;
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.5;
    text-align: center;
    max-width: 820px;
    margin: 14px auto 10px auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    animation: fadeInAcknowledgement-b-irzzk8vpt8 0.8s ease-out;
}

.pen-pal-ack .icon[b-irzzk8vpt8] {
    margin-right: 8px;
    opacity: 0.9;
    font-style: normal;
}

@keyframes fadeInAcknowledgement-b-irzzk8vpt8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pen-pal-letter-badge.badge-draft[b-irzzk8vpt8] {
    --penpal-badge-bg: #f7f0e6;
    --penpal-badge-border: #e8d9c8;
    --penpal-badge-text: #8b6e5a;
}

@media (max-width: 768px) {

    .pen-pal-reply-header[b-irzzk8vpt8],
    .pen-pal-reply-body[b-irzzk8vpt8],
    .pen-pal-reply-footer[b-irzzk8vpt8] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .pen-pal-reply-actions[b-irzzk8vpt8] {
        flex-direction: column;
        align-items: stretch;
    }

    .pen-pal-reply-send[b-irzzk8vpt8] {
        width: 100%;
        justify-content: center;
    }
}

.story-intro-card[b-irzzk8vpt8] {
    background: #fff7f2;
    border: 1px solid #f3d9c6;
    border-radius: 20px;
    padding: 1.2rem;
    max-width: 360px;
    margin: 2rem auto 1.5rem;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    font-family: var(--font-sans);

}

.story-intro-card .card-header[b-irzzk8vpt8] {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: bold;
    color: #4b2e2e;
    margin-bottom: 0.8rem;
}

.story-intro-card img[b-irzzk8vpt8] {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 0.9rem;
}

.story-intro-card .caption[b-irzzk8vpt8] {
    font-size: 1rem;
    color: #4b2e2e;
    margin-bottom: 0.6rem;
}

.story-intro-card .card-timestamp[b-irzzk8vpt8] {
    font-size: 0.75rem;
    color: #aa8d80;
}

@keyframes fadeInMemory-b-irzzk8vpt8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.story-intro-card[b-irzzk8vpt8] {
    animation: fadeInMemory-b-irzzk8vpt8 1.6s ease-out;
    /*animation: gentleFloat 3s ease-in-out infinite;*/
}

.rotating-warning[b-irzzk8vpt8] {
    color: #694f3f;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 0.5rem;
    opacity: 1;
}

/* Hide disclaimer text on mobile and tablet - only show on desktop */
@media (max-width: 768px) {
    .rotating-warning[b-irzzk8vpt8] {
        display: none;
    }
}

/* Mobile Top Bar (ChatGPT-style) */
.mobile-top-bar[b-irzzk8vpt8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--soft-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 150;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Hide on scroll down, show on scroll up - smooth animation */
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

.mobile-hamburger[b-irzzk8vpt8] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-hamburger:hover[b-irzzk8vpt8] {
    background-color: rgba(240, 218, 211, 0.5);
}

.mobile-logo[b-irzzk8vpt8] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-logo img[b-irzzk8vpt8] {
    height: 32px;
    width: auto;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

.mobile-action-btn[b-irzzk8vpt8] {
    background-color: var(--accent);
    color: var(--text);
    border: 1px solid var(--peach);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: var(--font-sans);
}

.mobile-action-btn:hover[b-irzzk8vpt8] {
    background-color: var(--peach);
    transform: translateY(-1px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    /* Adjust theme chat container for mobile */
    .theme-chat-container[b-irzzk8vpt8] {
        padding-top: 0 !important;
        height: 100vh !important;
    }



    /* Adjust sidebar for mobile - full height since no top bar */
    .loved-one-chat-sidebar[b-irzzk8vpt8] {
        top: 0;
        height: 100vh;
    }

    /* Adjust chat wrapper for mobile - full height positioning */
    .loved-one-chat-wrapper[b-irzzk8vpt8] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    /* Ensure chat box fills available space properly */
    .loved-one-chat-box[b-irzzk8vpt8] {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* Ensure chat-wrapper flex column fills height */
    .chat-wrapper[b-irzzk8vpt8] {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        /* For absolute positioned floating input */
    }

    /* Messages area should scroll, input floats over it */
    .loved-one-chat-messages[b-irzzk8vpt8] {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        /* Critical for flex children to scroll */
        --chat-input-overlay: 140px;
        --chat-fade-height: 70px;
    }

    /* Hide the desktop toggle button on mobile */
    .loved-one-chat-toggle[b-irzzk8vpt8] {
        display: none;
    }

    .sidebar[b-irzzk8vpt8] {
        /* Sidebar is already fixed, so it overlays content */
        /* Ensure it's hidden by default on small screens if desired */
        width: 0;
        padding-left: 0;
        padding-right: 0;
        border-right: none;
    }

    .sidebar.visible[b-irzzk8vpt8] {
        /* Explicit class to show on mobile */
        width: 280px;
        /* Or maybe a smaller width like 240px */
        padding: 1.5rem;
        border-right: 1px solid var(--soft-border);
    }

    /* Re-enable display for visible state */
    .sidebar.visible>*[b-irzzk8vpt8] {
        display: flex;
        /* Or block */
    }

    .chat-container-wrapper[b-irzzk8vpt8] {
        margin-left: 0;
        /* No margin initially on small screens */
    }

    /* No margin change needed when sidebar is visible because it overlays */
    /* .chat-container-wrapper.sidebar-visible { } */

    .chat-container[b-irzzk8vpt8] {
        padding: 1rem 1rem 0 1rem;
        /* Adjust padding */
    }

    .toggle-sidebar[b-irzzk8vpt8] {
        left: 1rem;
        /* Always start at left edge */
    }

    /* No change needed for toggle position when sidebar visible on mobile */
    /* .toggle-sidebar.sidebar-visible { } */

    .messages[b-irzzk8vpt8] {
        padding: 0.5rem 0.2rem;
    }

    .message[b-irzzk8vpt8] {
        max-width: 90%;
    }

    .theme-chat .bubble[b-irzzk8vpt8] {
        font-size: 1.1em;
    }

    .chat-input-area[b-irzzk8vpt8] {
        padding: 0.8rem 0.2rem;
    }

    /* Mobile chip styles - wrap to 2 columns instead of horizontal scroll */
    .keepsake-trigger-chip-container[b-irzzk8vpt8] {
        flex-wrap: wrap;
        gap: 0.4rem;
        overflow-x: visible;
        padding: 0.5rem;
        background: linear-gradient(180deg, rgba(255, 243, 235, 0.95) 0%, rgba(255, 230, 215, 0.85) 100%);
        backdrop-filter: blur(8px);
        border-radius: 12px;
        margin: 0 -0.2rem;
    }

    .keepsake-trigger-chip[b-irzzk8vpt8] {
        flex: 0 1 calc(50% - 0.25rem);
        min-width: 0;
        padding: 0.45rem 0.8rem;
        font-size: 0.82rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        box-shadow: 0 1px 4px rgba(83, 51, 43, 0.12);
    }

    .keepsake-trigger-chip:hover[b-irzzk8vpt8] {
        transform: none;
    }

    .keepsake-trigger-chip:active[b-irzzk8vpt8] {
        transform: scale(0.97);
        box-shadow: 0 1px 3px rgba(83, 51, 43, 0.15);
    }

    /* Hide desktop chips on mobile */
    .desktop-only[b-irzzk8vpt8] {
        display: none !important;
    }
}

/* =====================================================
   SPARKLE MENU - Clean, integrated suggestion menu
   Like a context menu from the sparkle icon
   ===================================================== */

/* Hide sparkle button on desktop */
.sparkle-input-btn[b-irzzk8vpt8] {
    display: none;
}

/* Hide sparkle menu on desktop */
.sparkle-menu[b-irzzk8vpt8] {
    display: none;
}

/* Hide backdrop on desktop */
.sparkle-backdrop[b-irzzk8vpt8] {
    display: none;
}

/* Mobile styles */
@media (max-width: 768px) {

    /* Chat input wrapper - keep normal layout */
    .chat-input-wrapper[b-irzzk8vpt8] {
        position: relative;
        /* For menu positioning */
    }

    .chat-input-capsule[b-irzzk8vpt8] {
        width: min(96%, 600px);
        border-radius: 22px;
        padding: 0.2rem 0.4rem;
        box-shadow: 0 10px 24px -16px rgba(75, 46, 46, 0.35), 0 3px 8px rgba(75, 46, 46, 0.08);
    }

    .keepsake-trigger-chip-container[b-irzzk8vpt8] {
        width: min(96%, 600px);
    }

    .rotating-warning.chat-input-disclaimer[b-irzzk8vpt8] {
        width: 90%;
        font-size: 0.78rem;
    }

    .read-only-banner[b-irzzk8vpt8] {
        width: min(96%, 600px);
    }

    .auto-growing-textarea[b-irzzk8vpt8] {
        padding: 0.85rem 3.25rem 0.85rem 1rem;
        font-size: 1rem;
    }

    /* Sparkle button - positioned inside the input field */
    .sparkle-input-btn[b-irzzk8vpt8] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border: none;
        background-color: transparent;
        border-radius: 50%;
        font-size: 18px;
        color: #8b5a3c;
        cursor: pointer;
        padding: 0;
        transition: background-color 0.25s ease, transform 0.25s ease;
        z-index: 2;
    }

    .sparkle-input-btn:hover[b-irzzk8vpt8] {
        background-color: #f7d9b8;
        transform: translateY(-50%) scale(1.05);
    }

    .sparkle-input-btn:active[b-irzzk8vpt8] {
        transform: translateY(-50%) scale(0.95);
    }

    .sparkle-input-btn.active[b-irzzk8vpt8] {
        background-color: #ffe4d2;
    }

    /* Add left padding to textarea when sparkle button is present */
    .auto-growing-textarea.has-sparkle-btn[b-irzzk8vpt8] {
        padding-left: 3.1rem;
    }

    /* Backdrop for click-outside-to-close */
    .sparkle-backdrop[b-irzzk8vpt8] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: transparent;
    }

    /* Sparkle menu - floating popup like ChatGPT */
    .sparkle-menu[b-irzzk8vpt8] {
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: calc(100% - 10px);
        /* Position above input with small gap */
        left: 0;
        width: auto;
        min-width: 220px;
        background: #ffffff;
        border: none;
        border-radius: 16px;
        padding: 8px 0;
        z-index: 100;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .sparkle-menu.open[b-irzzk8vpt8] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Clean menu items - like ChatGPT */
    .sparkle-chip[b-irzzk8vpt8] {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 18px;
        font-size: 1rem;
        font-weight: 400;
        color: #2d2d2d;
        background: transparent;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: background-color 0.15s ease;
        text-align: left;
        white-space: nowrap;
    }

    .sparkle-chip:hover[b-irzzk8vpt8] {
        background: #f7f7f7;
    }

    .sparkle-chip:active[b-irzzk8vpt8] {
        background: #efefef;
    }

    /* Input row - contains sparkle btn, textarea, and send button */
    .input-row[b-irzzk8vpt8] {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
}

/* Styles for the auto-growing textarea */
.auto-growing-textarea[b-irzzk8vpt8] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0.9rem 3.5rem 0.9rem 1.25rem;
    font-size: 1.05rem;
    resize: none;
    width: 100%;
    overflow: hidden;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    min-height: 44px;
    box-sizing: border-box;
    display: block;
    color: inherit;
}

/* Optional: Style when disabled */
.auto-growing-textarea:disabled[b-irzzk8vpt8] {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.7;
}

.user-avatar-container[b-irzzk8vpt8] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
}

.avatar-button[b-irzzk8vpt8] {
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    height: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-color: #ffe4d2;
    transition: transform 0.2s ease;
}

.avatar-button:hover[b-irzzk8vpt8] {
    transform: scale(1.05);
}

.avatar-button img[b-irzzk8vpt8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-dropdown[b-irzzk8vpt8] {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: #fff7f2;
    border: 1px solid #f3d9c6;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 160px;
    font-family: var(--font-sans);
    animation: fadeInMemory-b-irzzk8vpt8 0.4s ease-out;
}

.user-menu-dropdown a[b-irzzk8vpt8],
.user-menu-dropdown button[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-menu-dropdown a:hover[b-irzzk8vpt8],
.user-menu-dropdown button:hover[b-irzzk8vpt8] {
    background: #ffe4d2;
}



.user-profile[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff7f2;
    border: 1px solid var(--soft-border);
    border-radius: 16px;
    padding: 0.8rem;
    width: 100%;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
}

.avatar[b-irzzk8vpt8] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff9a8b, #ff6a88);
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.username[b-irzzk8vpt8] {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}

.dropdown-arrow[b-irzzk8vpt8] {
    color: var(--text);
}

/* Override SidebarBottom.pinned fixed positioning in ThemeChat context */
[b-irzzk8vpt8] .sidebar-bottom.pinned {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    flex-shrink: 0;
    z-index: auto !important;
}

/* Desktop override - SidebarBottom.razor.css sets position:fixed at 993px+ */
@media (min-width: 993px) {
    [b-irzzk8vpt8] .sidebar-bottom.pinned {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        flex-shrink: 0;
        z-index: auto !important;
    }
}

.sidebar-bottom[b-irzzk8vpt8] {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-divider[b-irzzk8vpt8] {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

.sidebar-user[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    /* Indicate interactivity */
    transition: background-color 0.2s ease;
    /* Smooth transition for hover effect */
    padding: 0.5rem;
    /* Add some padding for hover area */
    border-radius: 8px;
    /* Match dropdown border radius */
    transition: background-color 0.3s ease-in-out;
    /* Smooth transition for hover effect */
}

.sidebar-user:hover[b-irzzk8vpt8] {
    background-color: rgba(255, 228, 210, 0.5);
    /* Lighter tint on hover */
}

.user-avatar-circle[b-irzzk8vpt8] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text);
}

.user-name[b-irzzk8vpt8] {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}



.user-dropdown-container[b-irzzk8vpt8] {
    position: relative;
    /* Needed for absolute positioning of the dropdown */
    display: inline-block;
    /* Or block, depending on desired layout */
}

.user-dropdown-menu[b-irzzk8vpt8] {
    position: absolute;
    bottom: 100%;
    /* Position above the avatar */
    left: 50%;
    /* Center horizontally relative to the container */
    transform: translateX(-40%);
    /* Adjust to truly center */
    background-color: white;
    /* Or a theme-appropriate color */
    border: 1px solid #ccc;
    /* Or a theme-appropriate border */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    z-index: 100;
    /* Ensure it appears above other content */
    min-width: 150px;
    /* Minimum width for the dropdown */
    padding: 8px 0;
    /* Vertical padding */
    animation: fadeIn-b-irzzk8vpt8 0.2s ease-in-out;
    /* Fade-in animation */
}

@keyframes fadeIn-b-irzzk8vpt8 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dropdown-item[b-irzzk8vpt8] {
    padding: 10px 15px;
    /* Padding for each item */
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
    /* Use theme text color */
    transition: background-color 0.2s ease;
}

.dropdown-item:hover[b-irzzk8vpt8] {
    background-color: var(--soft-border);
    /* Highlight on hover */
}

@media (max-width: 768px) {
    .user-dropdown-menu[b-irzzk8vpt8] {
        /* Adjust positioning for smaller screens */
        bottom: 100%;
        /* Position above the avatar */
        top: auto;
        /* Remove top positioning */
        left: 50%;
        /* Center horizontally relative to the container */
        transform: translateX(-50%);
        /* Adjust to truly center */
        width: auto;
        /* Allow width to be determined by content */
        min-width: 150px;
        /* Maintain minimum width */
        border-radius: 8px;
        /* Revert border radius */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /* Keep shadow */
    }

    .user-dropdown-container[b-irzzk8vpt8] {
        /* Ensure container takes full width on small screens if needed */
        display: inline-block;
        /* Revert to inline-block */
        width: auto;
        /* Revert to auto width */
        text-align: center;
        /* Keep centering */
    }

    .sidebar-user[b-irzzk8vpt8] {
        /* Adjust avatar alignment if necessary */
        justify-content: center;
        /* Keep centering content within sidebar-user */
    }
}

/* Typing indicator dots (match LovedOneChat styling) */
.typing-dot[b-irzzk8vpt8] {
    width: 6px;
    height: 6px;
    background-color: #7a6860;
    border-radius: 50%;
    display: inline-block;
    animation: typingDot-b-irzzk8vpt8 1.2s ease-in-out infinite;
    opacity: 0.75;
}

.typing-dot.delay-1[b-irzzk8vpt8] {
    animation-delay: 0.15s;
}

.typing-dot.delay-2[b-irzzk8vpt8] {
    animation-delay: 0.3s;
}

@keyframes typingDot-b-irzzk8vpt8 {

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

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

@media (max-width: 1024px) {
    .loved-one-chat-toggle[b-irzzk8vpt8] {
        display: none;
    }

    /* Adjust theme chat container for mobile top bar (tablet range 769-1024px) */
    .theme-chat-container[b-irzzk8vpt8] {
        padding-top: 0 !important;
        height: 100vh !important;
    }

    /* Adjust sidebar for mobile/tablet - full height since no top bar */
    .loved-one-chat-sidebar[b-irzzk8vpt8] {
        top: 0;
        height: 100vh;
    }

    /* Adjust chat wrapper for mobile/tablet - full height positioning */
    .loved-one-chat-wrapper[b-irzzk8vpt8] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    /* Ensure chat box fills available space properly */
    .loved-one-chat-box[b-irzzk8vpt8] {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ensure chat-wrapper flex column fills height */
    .chat-wrapper[b-irzzk8vpt8] {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        /* For absolute positioned floating input */
    }

    /* Messages area should scroll, input floats over it */
    .loved-one-chat-messages[b-irzzk8vpt8] {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        /* Critical for flex children to scroll */
        --chat-input-overlay: 150px;
        --chat-fade-height: 80px;
    }
}


.conversation-list[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.conversation-item-button[b-irzzk8vpt8] {
    position: relative;
    width: 100%;
    text-align: left;
    background: rgba(253, 251, 247, 0.65);
    border: 1px solid rgba(150, 110, 80, 0.18);
    border-radius: 16px;
    padding: 0.85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--text);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.conversation-item-button:hover[b-irzzk8vpt8] {
    transform: translateX(4px);
    box-shadow: 0 8px 18px rgba(112, 78, 60, 0.12);
}

.conversation-item-button.active[b-irzzk8vpt8] {
    background: #fdfbf7;
    border: 2px solid #5a4033;
    box-shadow: 0 14px 26px rgba(75, 46, 46, 0.16);
}

.conversation-item-button.active[b-irzzk8vpt8]::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f7b977, #f5a45b);
}

.conversation-title-row[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.conversation-title[b-irzzk8vpt8] {
    font-weight: 700;
    font-size: 0.95rem;
}

.conversation-date[b-irzzk8vpt8] {
    font-size: 0.8rem;
    color: rgba(75, 46, 46, 0.65);
}

.conversation-meta-row[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.conversation-meta-row .conversation-role-badge[b-irzzk8vpt8] {
    margin-left: auto;
}

.conversation-role-badge[b-irzzk8vpt8] {
    background: rgba(124, 94, 70, 0.12);
    color: rgba(75, 46, 46, 0.85);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.conversation-item-button.locked[b-irzzk8vpt8] {
    opacity: 0.45;
    filter: grayscale(0.4) saturate(0.45);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.conversation-item-button.locked[b-irzzk8vpt8]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(130deg, rgba(111, 78, 55, 0.18), rgba(255, 204, 162, 0.2));
    opacity: 0.85;
    z-index: 0;
}

.conversation-item-button.locked>*[b-irzzk8vpt8] {
    position: relative;
    z-index: 1;
}

.conversation-item-button.locked:hover[b-irzzk8vpt8] {
    opacity: 0.72;
    filter: grayscale(0.2) saturate(0.55);
}

.conversation-lock-badge[b-irzzk8vpt8] {
    position: absolute;
    top: -0.25rem;
    right: -0.2rem;
    font-size: 1.4rem;
    line-height: 1;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.conversation-lock-overlay[b-irzzk8vpt8] {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: rgba(75, 46, 46, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.conversation-item-button.locked:hover .conversation-lock-overlay[b-irzzk8vpt8] {
    opacity: 1;
}

.conversation-item-wrapper[b-irzzk8vpt8] {
    position: relative;
    transition: opacity 0.25s ease, height 0.25s ease, margin 0.25s ease;
}

.conversation-item-wrapper.deleting[b-irzzk8vpt8] {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.conversation-actions[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.loved-one-chat-sidebar .conversation-menu-btn[b-irzzk8vpt8] {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: rgba(90, 64, 51, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}

.loved-one-chat-sidebar .conversation-menu-btn.open[b-irzzk8vpt8] {
    color: rgba(90, 64, 51, 1);
}

.kebab-icon[b-irzzk8vpt8] {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.conversation-menu[b-irzzk8vpt8] {
    position: absolute;
    right: 8px;
    top: 52px;
    background: #fdfbf7;
    border: 1px solid #e5d0b1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(90, 64, 51, 0.15);
    z-index: 20;
    min-width: 160px;
    padding: 0.25rem 0;
}

.conversation-menu button[b-irzzk8vpt8] {
    background: transparent !important;
    border: none;
    box-shadow: none;
}

.conversation-menu-item[b-irzzk8vpt8] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0px;
    color: #5a4033;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    border-radius: 0;
}

.conversation-menu-item:hover[b-irzzk8vpt8] {
    background: #fff0f0;
    color: #c04040;
}

.menu-icon[b-irzzk8vpt8] {
    font-size: 16px;
    line-height: 1;
}

.conversation-confirm[b-irzzk8vpt8] {
    background: #faf0f0;
    border-radius: 10px;
    padding: 10px 12px;
    /* Increased padding for stacked layout */
    border: 1px solid #d99a9a;
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    align-items: flex-start;
    /* Align left */
    justify-content: center;
    gap: 8px;
    /* Space between text and buttons */
    width: 100%;
    min-height: 0;
    /* Reset min-height */
}

.confirm-text[b-irzzk8vpt8] {
    font-weight: 700;
    color: #5a4033;
    font-size: 0.9rem;
    white-space: normal;
    /* Allow wrapping */
    width: 100%;
    text-align: center;
}

.confirm-actions[b-irzzk8vpt8] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Align buttons to right */
    gap: 8px;
    /* Space between buttons */
    width: 100%;
}

/* Override sidebar button styles with higher specificity */
.loved-one-chat-sidebar .confirm-cancel[b-irzzk8vpt8],
.loved-one-chat-sidebar .confirm-delete[b-irzzk8vpt8] {
    width: auto;
    /* Override 100% width */
    margin-bottom: 0;
    /* Override margin */
    border-radius: 12px;
    padding: 4px 8px;
    /* Compact padding */
    font-weight: 600;
    cursor: pointer;
    font-size: 0.8rem;
    min-width: auto;
    transition: all 0.2s ease;
}

.loved-one-chat-sidebar .confirm-cancel[b-irzzk8vpt8] {
    background: transparent !important;
    /* Override !important from sidebar */
    color: #5a4033;
    border: 1px solid #5a4033;
}

.loved-one-chat-sidebar .confirm-delete[b-irzzk8vpt8] {
    background: #c04040 !important;
    /* Override !important from sidebar */
    border: none;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(192, 64, 64, 0.2);
    padding: 4px 10px;
}

.loved-one-chat-sidebar .confirm-cancel:hover[b-irzzk8vpt8] {
    background: rgba(90, 64, 51, 0.05) !important;
}

.loved-one-chat-sidebar .confirm-delete:hover[b-irzzk8vpt8] {
    background: #a03030 !important;
    box-shadow: 0 3px 6px rgba(192, 64, 64, 0.3);
    transform: translateY(-1px);
}

.locked-conversations-cta[b-irzzk8vpt8] {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, rgba(255, 244, 232, 0.95), rgba(243, 219, 197, 0.9));
    border-radius: 16px;
    border: 1px solid rgba(150, 110, 80, 0.18);
    color: var(--text);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.locked-conversations-intro[b-irzzk8vpt8] {
    font-style: italic;
}

.locked-conversations-cta-text[b-irzzk8vpt8] {
    font-weight: 700;
}

.read-only-banner[b-irzzk8vpt8] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 244, 232, 0.95);
    border: 1px solid rgba(150, 110, 80, 0.18);
    border-radius: 14px;
    width: min(820px, 94%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text);
}

.read-only-banner-text[b-irzzk8vpt8] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.read-only-banner-cta[b-irzzk8vpt8] {
    font-weight: 700;
}

.read-only-upgrade-btn[b-irzzk8vpt8] {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, rgba(239, 166, 118, 0.98), rgba(219, 122, 73, 0.98));
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(219, 122, 73, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.read-only-upgrade-btn:hover[b-irzzk8vpt8] {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(219, 122, 73, 0.28);
}

/* Slide-up animation for chat input */
.chat-input-container.slide-up[b-irzzk8vpt8] {
    animation: slideUpInput-b-irzzk8vpt8 0.4s ease-out forwards;
}

@keyframes slideUpInput-b-irzzk8vpt8 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* /Components/Pages/ThemeExperience.razor.rz.scp.css */
/* ============================================================
   ThemeExperience — main canvas
   One continuous manuscript that grows downward.
   ============================================================ */

.experience-shell[b-mpbzjym3yo] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 244, 227, 0.9) 0%, rgba(253, 248, 240, 0.36) 42%, rgba(253, 248, 240, 0) 76%),
        linear-gradient(180deg, #fbf6ef 0%, #fdf8f0 100%);
}

.experience-shell[b-mpbzjym3yo]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 82% 90%, rgba(232, 212, 186, 0.12) 0%, transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 14%);
}

.experience-main[b-mpbzjym3yo] {
    --thread-scroll-progress: 0;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 280px;
    height: 100%;
    overflow: hidden;
    transition: margin-left 0.3s ease;
}

.sidebar-hidden .experience-main[b-mpbzjym3yo] {
    margin-left: 0;
}

.sidebar-hidden .experience-surface[b-mpbzjym3yo] {
    max-width: none;
}

.experience-sidebar-toggle[b-mpbzjym3yo] {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 110;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 6px 10px;
    border: none;
    border-radius: 10px;
    background: #FAF3E5;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.experience-sidebar-toggle:hover[b-mpbzjym3yo] {
    background: #faf3e5;
    transform: translateY(-1px);
}

.experience-sidebar-toggle.sidebar-hidden[b-mpbzjym3yo] {
    background: rgba(255, 251, 245, 0.92);
    border: 1px solid rgba(232, 213, 200, 0.4);
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.12);
}

.experience-sidebar-toggle.hidden[b-mpbzjym3yo] {
    display: none;
}

.experience-sidebar-toggle svg[b-mpbzjym3yo] {
    display: block;
}

.experience-surface[b-mpbzjym3yo] {
    width: 100%;
    max-width: 1640px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    padding: 0 clamp(1.25rem, 2.2vw, 2.25rem);
}

.experience-thread[b-mpbzjym3yo] {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    scroll-padding-top: 2rem;
    scroll-padding-bottom: 8rem;
    display: flex;
    justify-content: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.experience-thread[b-mpbzjym3yo]::-webkit-scrollbar {
    display: none;
}

.experience-stage[b-mpbzjym3yo] {
    width: min(100%, 1280px);
    display: flex;
    flex-direction: column;
    gap: clamp(1.9rem, 3.8vh, 3rem);
    padding: clamp(3rem, 7.5vh, 5rem) clamp(1rem, 1.8vw, 1.5rem) 3rem;
}

.experience-prelude[b-mpbzjym3yo] {
    width: min(100%, 68ch);
    margin: 0 auto;
}

.experience-messages[b-mpbzjym3yo] {
    width: min(100%, 68ch);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2.3rem, 4.8vh, 3.8rem);
    padding-bottom: 1rem;
}

/* When a keepsake quote card is shown as the surface overlay, mute prior
   conversation messages so the keepsake is the sole point of focus.
   Mirrors the dim/disable intent of ThemeChat's .keepsake-overlay-open class. */
.experience-messages.keepsake-overlay-open[b-mpbzjym3yo] {
    opacity: 0.4;
    pointer-events: none;
    filter: saturate(0.85);
    transition: opacity 200ms ease, filter 200ms ease;
}

.experience-composer-zone[b-mpbzjym3yo] {
    width: min(100%, 1080px);
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 clamp(1rem, 1.6vw, 1.5rem) calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.95rem;
}

.experience-composer-rail[b-mpbzjym3yo] {
    width: min(100%, 840px);
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.85rem, 2vw, 1.35rem);
}

.experience-composer-rail-line[b-mpbzjym3yo] {
    flex: 1 1 auto;
    max-width: 320px;
    height: 1px;
    background: linear-gradient(90deg, rgba(188, 152, 109, 0.05), rgba(188, 152, 109, 0.30), rgba(188, 152, 109, 0.05));
}

.experience-unavailable-message[b-mpbzjym3yo] {
    width: min(100%, 720px);
    box-sizing: border-box;
    border: 1px solid rgba(191, 151, 117, 0.32);
    border-radius: 14px;
    background: rgba(255, 249, 243, 0.92);
    color: #68463a;
    font-size: 0.98rem;
    line-height: 1.45;
    text-align: center;
    padding: 0.95rem 1.1rem;
    box-shadow: 0 8px 24px rgba(85, 56, 38, 0.08);
}

.experience-suggestion-chips[b-mpbzjym3yo] {
    width: min(100%, 860px);
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.95rem 1rem;
    padding: 0 0.5rem;
}

.experience-suggestion-chip[b-mpbzjym3yo] {
    border: 1px solid rgba(163, 127, 96, 0.28);
    border-radius: 999px;
    background: rgba(248, 240, 229, 0.18);
    color: rgba(90, 67, 48, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    padding: 0.88rem 1.65rem;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.1;
    box-shadow: none;
    transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.experience-suggestion-chip:hover:not(:disabled)[b-mpbzjym3yo] {
    background: rgba(248, 240, 229, 0.32);
    border-color: rgba(163, 127, 96, 0.46);
    transform: translateY(-1px);
}

.experience-suggestion-chip:focus-visible[b-mpbzjym3yo] {
    outline: 2px solid rgba(123, 90, 61, 0.22);
    outline-offset: 3px;
}

.experience-suggestion-chip:disabled[b-mpbzjym3yo] {
    opacity: 0.6;
}

.experience-suggestion-chip-adornment[b-mpbzjym3yo] {
    font-size: 1.02em;
    opacity: 0.8;
    filter: sepia(0.18);
}

.experience-suggestion-chip-text[b-mpbzjym3yo] {
    white-space: nowrap;
}

.experience-scroll-to-latest[b-mpbzjym3yo] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(196, 165, 132, 0.22);
    background: rgba(255, 250, 243, 0.96);
    color: #7b5a3d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 12px 24px rgba(109, 81, 52, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.experience-scroll-to-latest svg[b-mpbzjym3yo] {
    width: 24px;
    height: 24px;
}

.experience-main[data-thread-away-from-bottom="true"] .experience-scroll-to-latest[b-mpbzjym3yo] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.experience-scroll-to-latest:hover[b-mpbzjym3yo] {
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 16px 28px rgba(109, 81, 52, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.experience-scroll-to-latest:active[b-mpbzjym3yo] {
    transform: translateY(2px) scale(0.96);
}

.experience-scroll-to-latest:focus-visible[b-mpbzjym3yo] {
    outline: 2px solid rgba(123, 90, 61, 0.28);
    outline-offset: 3px;
}

.experience-reader-overlay[b-mpbzjym3yo] {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 245, 229, 0.24) 0%, rgba(255, 245, 229, 0.08) 32%, rgba(255, 245, 229, 0) 62%),
        rgba(54, 40, 28, 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(0.92);
    backdrop-filter: blur(14px) saturate(0.92);
    outline: none;
}

.experience-reader-panel[b-mpbzjym3yo] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 46rem);
    max-height: min(86dvh, 48rem);
    overflow: auto;
    padding: clamp(1.7rem, 3vw, 2.45rem);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 244, 224, 0.48) 0%, rgba(255, 244, 224, 0) 32%),
        linear-gradient(180deg, rgba(255, 251, 245, 0.96) 0%, rgba(248, 239, 227, 0.94) 100%);
    border: 1px solid rgba(196, 157, 118, 0.28);
    box-shadow:
        0 34px 92px rgba(62, 43, 27, 0.22),
        0 12px 28px rgba(112, 80, 52, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    color: #34281f;
    scrollbar-width: thin;
    scrollbar-color: rgba(166, 128, 91, 0.38) transparent;
}

.experience-reader-close[b-mpbzjym3yo] {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(187, 148, 111, 0.2);
    border-radius: 50%;
    background: rgba(255, 251, 245, 0.72);
    color: #80634c;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.experience-reader-close:hover[b-mpbzjym3yo],
.experience-reader-close:focus-visible[b-mpbzjym3yo] {
    background: rgba(255, 255, 255, 0.94);
    color: #5e4635;
    transform: translateY(-1px);
    outline: none;
}

.experience-reader-header[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-right: 2.8rem;
    margin-bottom: 1.25rem;
}

.experience-reader-avatar[b-mpbzjym3yo] {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(218, 195, 170, 0.86);
    box-shadow: 0 10px 22px rgba(92, 65, 41, 0.12);
}

.experience-reader-meta[b-mpbzjym3yo] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.experience-reader-badge[b-mpbzjym3yo] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.16rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    background: rgba(252, 237, 229, 0.9);
    color: #b87558;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.experience-reader-name[b-mpbzjym3yo] {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #5d4736;
}

.experience-reader-time[b-mpbzjym3yo] {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: rgba(116, 88, 64, 0.72);
}

.experience-reader-title[b-mpbzjym3yo] {
    margin: -0.25rem 0 1rem;
    padding-right: 2.8rem;
    color: #3f3127;
    font-family: var(--font-serif);
    font-size: 1.95rem;
    font-weight: 760;
    line-height: 1.08;
}

.experience-reader-content[b-mpbzjym3yo] {
    font-family: var(--font-serif);
    font-size: clamp(1.08rem, 1vw + 0.84rem, 1.24rem);
    line-height: 1.95;
    color: #2f261f;
}

.experience-reader-content[b-mpbzjym3yo]  p {
    margin: 0 0 1.05em;
}

.experience-reader-content[b-mpbzjym3yo]  p:last-child {
    margin-bottom: 0;
}

.experience-reader-content[b-mpbzjym3yo]  em {
    color: #6d5846;
}

.experience-reader-content[b-mpbzjym3yo]  strong {
    color: #463428;
}

.experience-reader-content[b-mpbzjym3yo]  a {
    color: #0b6fae;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
    pointer-events: auto;
}

.experience-reader-content[b-mpbzjym3yo]  a:hover,
.experience-reader-content[b-mpbzjym3yo]  a:focus-visible {
    color: #084f7c;
}

.experience-reader-actions[b-mpbzjym3yo] {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.45rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(196, 157, 118, 0.22);
    background: linear-gradient(180deg, rgba(248, 239, 227, 0) 0%, rgba(248, 239, 227, 0.96) 28%, rgba(248, 239, 227, 0.98) 100%);
}

.experience-reader-action[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.85rem;
    padding: 0.82rem 1.35rem;
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.experience-reader-action.primary[b-mpbzjym3yo] {
    border: 1px solid rgba(166, 108, 64, 0.32);
    background: linear-gradient(180deg, rgba(235, 172, 132, 0.35) 0%, rgba(244, 201, 173, 0.72) 100%);
    color: #68412f;
    box-shadow: 0 10px 24px rgba(109, 73, 47, 0.12);
}

.experience-reader-action.secondary[b-mpbzjym3yo] {
    border: 1px solid rgba(163, 127, 96, 0.28);
    background: rgba(255, 250, 243, 0.5);
    color: rgba(90, 67, 48, 0.94);
    box-shadow: none;
}

.experience-reader-action:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
    transform: translateY(-1px);
    outline: none;
}

.experience-reader-action.primary:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action.primary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(235, 172, 132, 0.48) 0%, rgba(244, 201, 173, 0.86) 100%);
    box-shadow: 0 13px 28px rgba(109, 73, 47, 0.16);
}

.experience-reader-action.secondary:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action.secondary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
    background: rgba(255, 250, 243, 0.82);
    border-color: rgba(163, 127, 96, 0.46);
}

.experience-reader-action:disabled[b-mpbzjym3yo] {
    cursor: default;
    opacity: 0.62;
}



@media (max-width: 768px) {
    .experience-composer-zone[b-mpbzjym3yo] {
        gap: 0.8rem;
    }

    .experience-composer-rail[b-mpbzjym3yo] {
        gap: 0.75rem;
    }

    .experience-suggestion-chips[b-mpbzjym3yo] {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.7rem;
        padding: 0 1rem 0.2rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
    }

    .experience-suggestion-chip[b-mpbzjym3yo] {
        flex: 0 0 auto;
        max-width: min(82vw, 320px);
        padding: 0.78rem 1.2rem;
        font-size: 0.96rem;
        scroll-snap-align: start;
        justify-content: flex-start;
    }

    .experience-suggestion-chip-text[b-mpbzjym3yo] {
        white-space: normal;
        text-align: left;
        line-height: 1.25;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .experience-suggestion-chips[b-mpbzjym3yo]::-webkit-scrollbar {
        display: none;
    }

    .experience-scroll-to-latest[b-mpbzjym3yo] {
        width: 48px;
        height: 48px;
    }

    .experience-scroll-to-latest svg[b-mpbzjym3yo] {
        width: 20px;
        height: 20px;
    }
}

.experience-not-found[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60dvh;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: #6B5D4D;
    padding: 2rem;
    text-align: center;
}

.experience-mobile-header[b-mpbzjym3yo] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
    padding: 14px 16px;
    pointer-events: none;
    align-items: center;
    justify-content: space-between;
}

.experience-mobile-header.sidebar-open[b-mpbzjym3yo] {
    z-index: 90;
}

.mobile-back-link[b-mpbzjym3yo],
.mobile-menu-btn[b-mpbzjym3yo] {
    pointer-events: auto;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(253, 248, 240, 0.88);
    border: 1px solid rgba(188, 152, 109, 0.14);
    color: #8e7864;
}

.mobile-back-link[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem 0.42rem 0.62rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    text-decoration: none;
}

.mobile-menu-btn[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
}

.mobile-menu-btn:hover[b-mpbzjym3yo],
.mobile-menu-btn:focus-visible[b-mpbzjym3yo] {
    background: rgba(255, 251, 245, 0.96);
    border-color: rgba(188, 152, 109, 0.24);
    color: #755e4c;
    outline: none;
    box-shadow: 0 10px 22px rgba(119, 85, 56, 0.10);
}

.mobile-menu-btn:active[b-mpbzjym3yo] {
    transform: scale(0.96);
}

.mobile-menu-btn.is-open[b-mpbzjym3yo] {
    background: rgba(255, 251, 245, 0.94);
    color: #7b5a4a;
    border-color: rgba(188, 152, 109, 0.18);
    box-shadow:
        0 12px 26px rgba(119, 85, 56, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.experience-sidebar-overlay[b-mpbzjym3yo] {
    display: none;
}

.mobile-sidebar-open .experience-sidebar-overlay[b-mpbzjym3yo] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(28, 22, 16, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mobile-sidebar-open[b-mpbzjym3yo]  .experience-sidebar {
    transform: translateX(0) !important;
}

:global(body.night-mode) .experience-shell[b-mpbzjym3yo] {
    background:
        radial-gradient(circle at 50% 0%, rgba(66, 50, 33, 0.68) 0%, rgba(27, 23, 19, 0.28) 42%, rgba(27, 23, 19, 0) 76%),
        linear-gradient(180deg, #201a15 0%, #1b1713 100%);
}

:global(body.night-mode) .experience-shell[b-mpbzjym3yo]::before {
    background:
        radial-gradient(circle at 82% 90%, rgba(88, 66, 42, 0.12) 0%, transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 14%);
}

:global(body.night-mode) .experience-composer-rail-line[b-mpbzjym3yo] {
    background: linear-gradient(90deg, rgba(191, 148, 91, 0.02), rgba(191, 148, 91, 0.24), rgba(191, 148, 91, 0.02));
}

:global(body.night-mode) .experience-scroll-to-latest[b-mpbzjym3yo] {
    background: rgba(62, 49, 40, 0.92);
    color: #f0dfcc;
    border-color: rgba(191, 148, 91, 0.18);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

:global(body.night-mode) .experience-suggestion-chip[b-mpbzjym3yo] {
    background: rgba(57, 46, 39, 0.18);
    border-color: rgba(191, 148, 91, 0.24);
    color: #e5d5c3;
}

:global(body.night-mode) .experience-suggestion-chip:hover:not(:disabled)[b-mpbzjym3yo] {
    background: rgba(57, 46, 39, 0.34);
    border-color: rgba(191, 148, 91, 0.38);
}

:global(body.night-mode) .experience-sidebar-toggle[b-mpbzjym3yo] {
    background: rgba(34, 28, 24, 0.96);
}

:global(body.night-mode) .experience-sidebar-toggle.sidebar-hidden[b-mpbzjym3yo] {
    background: rgba(45, 59, 68, 0.9);
    border: 1px solid rgba(196, 154, 108, 0.2);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

:global(body.night-mode) .mobile-back-link[b-mpbzjym3yo],
:global(body.night-mode) .mobile-menu-btn[b-mpbzjym3yo] {
    background: rgba(48, 38, 30, 0.86);
    border-color: rgba(191, 148, 91, 0.18);
    color: #dcc8b2;
}

:global(body.night-mode) .mobile-menu-btn:hover[b-mpbzjym3yo],
:global(body.night-mode) .mobile-menu-btn:focus-visible[b-mpbzjym3yo],
:global(body.night-mode) .mobile-menu-btn.is-open[b-mpbzjym3yo] {
    background: rgba(62, 49, 40, 0.94);
    border-color: rgba(191, 148, 91, 0.28);
    color: #f3dfc8;
}

:global(body.night-mode) .experience-reader-overlay[b-mpbzjym3yo] {
    background:
        radial-gradient(circle at 50% 18%, rgba(128, 92, 55, 0.16) 0%, rgba(128, 92, 55, 0.06) 32%, rgba(128, 92, 55, 0) 62%),
        rgba(13, 10, 8, 0.54);
}

:global(body.night-mode) .experience-reader-panel[b-mpbzjym3yo] {
    background:
        radial-gradient(circle at 16% 12%, rgba(91, 69, 48, 0.44) 0%, rgba(91, 69, 48, 0) 32%),
        linear-gradient(180deg, rgba(49, 39, 32, 0.97) 0%, rgba(37, 30, 25, 0.96) 100%);
    border-color: rgba(166, 126, 89, 0.34);
    color: #f0e2d3;
    box-shadow:
        0 34px 92px rgba(0, 0, 0, 0.44),
        0 12px 28px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:global(body.night-mode) .experience-reader-close[b-mpbzjym3yo] {
    background: rgba(57, 45, 37, 0.76);
    border-color: rgba(165, 126, 88, 0.28);
    color: #e7d3bf;
}

:global(body.night-mode) .experience-reader-close:hover[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-close:focus-visible[b-mpbzjym3yo] {
    background: rgba(72, 57, 46, 0.94);
    color: #fff2e3;
}

:global(body.night-mode) .experience-reader-avatar[b-mpbzjym3yo] {
    border-color: rgba(168, 130, 91, 0.55);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .experience-reader-name[b-mpbzjym3yo] {
    color: #ead8c6;
}

:global(body.night-mode) .experience-reader-badge[b-mpbzjym3yo] {
    background: rgba(67, 49, 38, 0.92);
    color: #e0b18d;
}

:global(body.night-mode) .experience-reader-time[b-mpbzjym3yo] {
    color: rgba(224, 204, 180, 0.72);
}

:global(body.night-mode) .experience-reader-title[b-mpbzjym3yo] {
    color: #f2e6d8;
}

:global(body.night-mode) .experience-reader-content[b-mpbzjym3yo] {
    color: #f2e6d8;
}

:global(body.night-mode) .experience-reader-content[b-mpbzjym3yo]  em {
    color: #d9c2aa;
}

:global(body.night-mode) .experience-reader-content[b-mpbzjym3yo]  strong {
    color: #fff0df;
}

:global(body.night-mode) .experience-reader-actions[b-mpbzjym3yo] {
    border-top-color: rgba(166, 126, 89, 0.28);
    background: linear-gradient(180deg, rgba(37, 30, 25, 0) 0%, rgba(37, 30, 25, 0.96) 28%, rgba(37, 30, 25, 0.99) 100%);
}

:global(body.night-mode) .experience-reader-action.primary[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #8f6948 0%, #6f4e33 100%);
    color: #fff3e6;
    border-color: rgba(191, 148, 91, 0.24);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:global(body.night-mode) .experience-reader-action.primary:hover:not(:disabled)[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.primary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #9a7350 0%, #7a573a 100%);
}

:global(body.night-mode) .experience-reader-action.secondary[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(62, 49, 40, 0.92) 0%, rgba(47, 38, 31, 0.92) 100%);
    color: #eadfd2;
    border-color: rgba(191, 148, 91, 0.32);
}

:global(body.night-mode) .experience-reader-action.secondary:hover:not(:disabled)[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.secondary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(69, 54, 44, 0.96) 0%, rgba(52, 42, 35, 0.96) 100%);
    border-color: rgba(191, 148, 91, 0.42);
}



@media (max-width: 1024px) {
    .experience-main[b-mpbzjym3yo] {
        margin-left: 0;
    }

    .experience-stage[b-mpbzjym3yo] {
        width: min(100%, 1080px);
        padding-top: 5.5rem;
    }
}

@media (max-width: 768px) {
    :global(html:has(.experience-shell))[b-mpbzjym3yo],
    :global(body:has(.experience-shell))[b-mpbzjym3yo] {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    :global(.app-container:has(.experience-shell))[b-mpbzjym3yo],
    :global(.layout-content:has(.experience-shell))[b-mpbzjym3yo] {
        width: 100%;
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }

    @supports (height: 100svh) {
        :global(.app-container:has(.experience-shell))[b-mpbzjym3yo],
        :global(.layout-content:has(.experience-shell))[b-mpbzjym3yo] {
            min-height: 100svh;
            height: 100svh;
        }
    }

    .experience-shell[b-mpbzjym3yo] {
        --experience-mobile-header-height: calc(72px + env(safe-area-inset-top, 0px));
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        overscroll-behavior: none;
    }

    @supports (height: 100svh) {
        .experience-shell[b-mpbzjym3yo] {
            height: 100svh;
            min-height: 100svh;
        }
    }

    .experience-main[b-mpbzjym3yo],
    .experience-surface[b-mpbzjym3yo] {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    [b-mpbzjym3yo] .theme-atmosphere,
    [b-mpbzjym3yo] .theme-room,
    [b-mpbzjym3yo] .room-parchment,
    [b-mpbzjym3yo] .atmosphere-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .experience-thread[b-mpbzjym3yo] {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-padding-top: var(--experience-mobile-header-height);
        scroll-padding-bottom: 8rem;
        touch-action: pan-y;
    }

    .experience-mobile-header[b-mpbzjym3yo] {
        display: flex;
        padding: calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px));
    }

    .experience-sidebar-toggle[b-mpbzjym3yo] {
        display: none;
    }

    .experience-surface[b-mpbzjym3yo] {
        padding: 0 1rem;
    }

    .experience-stage[b-mpbzjym3yo] {
        width: 100%;
        padding: calc(var(--experience-mobile-header-height) + 0.7rem) 0 2.25rem;
        gap: 1.7rem;
    }

    .experience-composer-zone[b-mpbzjym3yo] {
        width: 100%;
        padding: 0 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .experience-reader-overlay[b-mpbzjym3yo] {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .experience-reader-panel[b-mpbzjym3yo] {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1.8rem + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        overscroll-behavior-y: contain;
    }

    .experience-reader-close[b-mpbzjym3yo] {
        top: calc(0.9rem + env(safe-area-inset-top, 0px));
        right: calc(1rem + env(safe-area-inset-right, 0px));
    }

    .experience-reader-title[b-mpbzjym3yo] {
        margin-top: -0.1rem;
        padding-right: 2.7rem;
        font-size: 1.55rem;
    }

    .experience-reader-content[b-mpbzjym3yo] {
        font-size: 1.08rem;
        line-height: 1.9;
    }

    .experience-reader-actions[b-mpbzjym3yo] {
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .experience-reader-action[b-mpbzjym3yo] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .experience-surface[b-mpbzjym3yo] {
        padding: 0 0.75rem;
    }

    .experience-stage[b-mpbzjym3yo] {
        padding-top: calc(var(--experience-mobile-header-height) + 0.45rem);
    }
}

.experience-penpal-overlay[b-mpbzjym3yo] {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 244, 226, 0.22) 0%, rgba(255, 244, 226, 0.08) 28%, rgba(255, 244, 226, 0) 60%),
        linear-gradient(180deg, rgba(88, 62, 39, 0.18) 0%, rgba(98, 72, 48, 0.28) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(0.92);
    backdrop-filter: blur(14px) saturate(0.92);
}

.experience-penpal-modal[b-mpbzjym3yo] {
    position: relative;
    width: min(100%, 50rem);
    max-height: min(92dvh, 48rem);
    padding: 2.4rem 2.4rem 2rem;
    border-radius: 40px;
    background:
        radial-gradient(circle at 18% 14%, rgba(250, 234, 208, 0.38) 0%, rgba(250, 234, 208, 0) 28%),
        radial-gradient(circle at 82% 16%, rgba(245, 222, 188, 0.24) 0%, rgba(245, 222, 188, 0) 24%),
        linear-gradient(180deg, rgba(252, 247, 239, 0.985) 0%, rgba(247, 238, 224, 0.99) 100%);
    box-shadow:
        0 34px 90px rgba(74, 52, 34, 0.15),
        0 12px 28px rgba(122, 88, 57, 0.08),
        inset 0 1px 0 rgba(255, 252, 247, 0.92);
    border: 1px solid rgba(190, 151, 111, 0.28);
    color: #4a392c;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 131, 94, 0.38) transparent;
}

.experience-penpal-modal[b-mpbzjym3yo]::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 30px;
    border: 1px solid rgba(201, 164, 125, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(255, 252, 246, 0.38),
        inset 0 12px 24px rgba(255, 251, 245, 0.18);
    pointer-events: none;
}

.experience-penpal-modal[b-mpbzjym3yo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 22%),
        radial-gradient(circle at 84% 84%, rgba(214, 179, 139, 0.09) 0%, rgba(214, 179, 139, 0) 24%);
    mix-blend-mode: soft-light;
    opacity: 0.9;
}

.experience-penpal-close[b-mpbzjym3yo] {
    position: absolute;
    top: 1.05rem;
    right: 1.15rem;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(194, 159, 124, 0.18);
    border-radius: 50%;
    background: rgba(252, 247, 240, 0.54);
    color: #8a715d;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, border-color 0.2s ease;
}

.experience-penpal-close:hover[b-mpbzjym3yo] {
    background: rgba(255, 252, 246, 0.92);
    color: #644736;
    border-color: rgba(194, 159, 124, 0.4);
    transform: translateY(-1px);
}

.experience-penpal-close:focus-visible[b-mpbzjym3yo] {
    outline: 2px solid rgba(138, 103, 73, 0.28);
    outline-offset: 3px;
}

.experience-penpal-hero[b-mpbzjym3yo] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(8rem, 10.5rem) minmax(0, 1fr);
    gap: 1.5rem 1.65rem;
    align-items: center;
}

.experience-penpal-portrait[b-mpbzjym3yo] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.95rem;
}

.experience-penpal-header[b-mpbzjym3yo] {
    text-align: left;
    position: relative;
    z-index: 1;
    padding-right: 2.4rem;
}

.experience-penpal-avatar[b-mpbzjym3yo] {
    width: 142px;
    height: 142px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0;
    border: 4px solid rgba(233, 198, 160, 0.58);
    box-shadow:
        0 18px 34px rgba(132, 96, 60, 0.15),
        0 0 0 8px rgba(248, 237, 224, 0.48);
}

.experience-penpal-badge[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0;
    padding: 0.48rem 1.15rem;
    border-radius: 999px;
    background: rgba(253, 247, 238, 0.84);
    border: 1px solid rgba(217, 182, 143, 0.54);
    color: #8c694d;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.experience-penpal-title[b-mpbzjym3yo] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.35rem, 4.3vw, 3.4rem);
    line-height: 0.97;
    letter-spacing: -0.03em;
    color: #4b3222;
    text-wrap: balance;
}

.experience-penpal-copy[b-mpbzjym3yo] {
    margin: 1rem 0 0;
    max-width: 32rem;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.72;
    font-style: italic;
    color: #725d4b;
}

.experience-penpal-divider[b-mpbzjym3yo] {
    width: min(100%, 22rem);
    height: 1px;
    margin: 1.35rem 0 0;
    background: linear-gradient(90deg, rgba(188, 152, 109, 0) 0%, rgba(188, 152, 109, 0.5) 50%, rgba(188, 152, 109, 0) 100%);
}

.experience-penpal-fields[b-mpbzjym3yo] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.35rem;
    margin-top: 1.75rem;
}

.experience-penpal-field[b-mpbzjym3yo] {
    position: relative;
    min-height: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.experience-penpal-field-memory[b-mpbzjym3yo] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.experience-penpal-label[b-mpbzjym3yo] {
    margin-bottom: 0.9rem;
    padding-left: 0.15rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9a7e65;
}

.experience-penpal-segments[b-mpbzjym3yo] {
    display: flex;
    gap: 0.3rem;
    padding: 0.38rem;
    background: rgba(255, 251, 245, 0.88);
    border: 1px solid rgba(214, 180, 144, 0.54);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 4px 16px rgba(120, 85, 54, 0.04);
}

.experience-penpal-segment[b-mpbzjym3yo] {
    flex: 1 1 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #5e4a39;
    padding: 0.9rem 0.8rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.experience-penpal-segment.active[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #dec1a3 0%, #d2ad8b 100%);
    color: #fffaf4;
    box-shadow: 0 10px 22px rgba(120, 85, 54, 0.12);
}

.experience-penpal-toggle[b-mpbzjym3yo] {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    width: 100%;
    min-height: 4.6rem;
    padding: 0.95rem 1rem;
    border-radius: 999px;
    background: rgba(255, 251, 245, 0.88);
    border: 1px solid rgba(214, 180, 144, 0.54);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 4px 16px rgba(120, 85, 54, 0.04);
    font-family: var(--font-sans);
    color: #5e4a39;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.experience-penpal-toggle input[b-mpbzjym3yo] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.experience-penpal-toggle-track[b-mpbzjym3yo] {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(231, 214, 202, 0.9);
    border: 1px solid rgba(171, 124, 96, 0.45);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.experience-penpal-toggle-thumb[b-mpbzjym3yo] {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 6px rgba(75, 46, 46, 0.18);
    transition: transform 0.2s ease;
}

.experience-penpal-toggle input:checked + .experience-penpal-toggle-track[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #dec1a3 0%, #d2ad8b 100%);
    border-color: rgba(133, 98, 69, 0.24);
}

.experience-penpal-toggle input:checked + .experience-penpal-toggle-track .experience-penpal-toggle-thumb[b-mpbzjym3yo] {
    transform: translateX(20px);
}

.experience-penpal-toggle-text[b-mpbzjym3yo] {
    font-size: 1rem;
    line-height: 1.45;
    color: #4a3325;
}

.experience-penpal-footer[b-mpbzjym3yo] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
}

.experience-penpal-footer[b-mpbzjym3yo]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(188, 152, 109, 0) 0%, rgba(188, 152, 109, 0.42) 18%, rgba(188, 152, 109, 0.42) 82%, rgba(188, 152, 109, 0) 100%);
}

.experience-penpal-next[b-mpbzjym3yo] {
    margin: 0;
    max-width: 18rem;
    font-family: var(--font-serif);
    font-style: italic;
    color: #7b6653;
    text-align: left;
}

.experience-penpal-actions[b-mpbzjym3yo] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-left: auto;
}

.experience-penpal-primary[b-mpbzjym3yo],
.experience-penpal-secondary[b-mpbzjym3yo] {
    min-width: 11.5rem;
    border: 1px solid rgba(198, 160, 122, 0.2);
    border-radius: 999px;
    padding: 1rem 1.5rem;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.experience-penpal-primary[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #dec1a3 0%, #d2ad8b 100%);
    color: #fffaf4;
    box-shadow: 0 16px 30px rgba(120, 85, 54, 0.12);
}

.experience-penpal-secondary[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #dec1a3 0%, #d2ad8b 100%);
    border-color: rgba(133, 98, 69, 0.16);
    color: #fffaf4;
    box-shadow: 0 16px 30px rgba(120, 85, 54, 0.12);
}

.experience-penpal-primary:hover[b-mpbzjym3yo],
.experience-penpal-secondary:hover[b-mpbzjym3yo] {
    transform: translateY(-1px);
    background: linear-gradient(145deg, #d9b894 0%, #cfa985 100%);
    box-shadow: 0 18px 32px rgba(120, 85, 54, 0.16);
}

.experience-penpal-seal[b-mpbzjym3yo] {
    position: absolute;
    left: 1.1rem;
    bottom: 1rem;
    z-index: 3;
    pointer-events: none;
    opacity: 0.96;
}

@media (max-width: 768px) {
    .experience-penpal-overlay[b-mpbzjym3yo] {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .experience-penpal-modal[b-mpbzjym3yo] {
        width: 100vw;
        min-height: 100dvh;
        max-height: none;
        padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1.1rem + env(safe-area-inset-bottom)) 1rem;
        border-radius: 0;
        border: none;
    }

    .experience-penpal-hero[b-mpbzjym3yo] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .experience-penpal-portrait[b-mpbzjym3yo] {
        gap: 0.8rem;
    }

    .experience-penpal-header[b-mpbzjym3yo] {
        text-align: center;
        padding-right: 0;
    }

    .experience-penpal-divider[b-mpbzjym3yo] {
        margin-left: auto;
        margin-right: auto;
    }

    .experience-penpal-fields[b-mpbzjym3yo] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .experience-penpal-field[b-mpbzjym3yo] {
        padding: 0;
    }

    .experience-penpal-footer[b-mpbzjym3yo] {
        flex-direction: column;
        align-items: stretch;
    }

    .experience-penpal-next[b-mpbzjym3yo] {
        max-width: none;
        text-align: center;
    }

    .experience-penpal-actions[b-mpbzjym3yo] {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }

    .experience-penpal-primary[b-mpbzjym3yo],
    .experience-penpal-secondary[b-mpbzjym3yo] {
        width: 100%;
        min-width: 0;
    }

    .experience-penpal-seal[b-mpbzjym3yo] {
        position: static;
        display: block;
        margin: 0.4rem auto 0;
        opacity: 0.85;
    }

    .experience-penpal-modal[b-mpbzjym3yo]::before {
        inset: 10px 10px calc(10px + env(safe-area-inset-bottom)) 10px;
        border-radius: 26px;
    }

    .experience-penpal-modal[b-mpbzjym3yo]::after {
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .experience-penpal-modal[b-mpbzjym3yo] {
        padding: calc(0.95rem + env(safe-area-inset-top)) 0.9rem calc(1rem + env(safe-area-inset-bottom)) 0.9rem;
    }

    .experience-penpal-avatar[b-mpbzjym3yo] {
        width: 118px;
        height: 118px;
    }

    .experience-penpal-title[b-mpbzjym3yo] {
        font-size: 2rem;
    }

    .experience-penpal-copy[b-mpbzjym3yo] {
        font-size: 0.98rem;
    }

    .experience-penpal-segment[b-mpbzjym3yo] {
        font-size: 0.88rem;
        padding: 0.75rem 0.55rem;
    }

    .experience-penpal-toggle-text[b-mpbzjym3yo] {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .experience-penpal-field[b-mpbzjym3yo] {
        padding: 0;
    }
}

.experience-keepsake-context-card[b-mpbzjym3yo] {
    width: min(100%, 74ch);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.experience-keepsake-paper[b-mpbzjym3yo] {
    width: 100%;
    border-radius: 32px;
    padding: clamp(1.5rem, 2vw, 2rem);
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(252, 246, 239, 0.94) 100%);
    box-shadow: 0 28px 70px rgba(85, 56, 34, 0.12);
    border: 1px solid rgba(221, 196, 173, 0.42);
}

.experience-keepsake-badge[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: rgba(252, 237, 229, 0.9);
    color: #ca8767;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.experience-keepsake-meta[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    color: #7f6854;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}

.experience-keepsake-meta .source[b-mpbzjym3yo] {
    font-weight: 600;
    color: #5e4c3a;
}

.experience-keepsake-meta .separator[b-mpbzjym3yo] {
    opacity: 0.55;
}

.experience-keepsake-title[b-mpbzjym3yo] {
    margin: 0.85rem 0 0;
    font-family: var(--font-serif);
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    line-height: 1.08;
    color: #3f3127;
}

.experience-keepsake-markdown[b-mpbzjym3yo] {
    margin-top: 1rem;
    color: #4b3a2e;
    font-family: var(--font-serif);
    font-size: 1.04rem;
    line-height: 1.9;
}

.experience-keepsake-markdown p[b-mpbzjym3yo] {
    margin: 0 0 0.95rem;
}

.experience-keepsake-toggle-row[b-mpbzjym3yo] {
    margin-top: 0.35rem;
}

.experience-keepsake-toggle[b-mpbzjym3yo] {
    border: none;
    background: transparent;
    color: #c97f59;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.experience-keepsake-loading[b-mpbzjym3yo] {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 1.3rem 0;
    color: #8c7562;
    font-family: var(--font-serif);
    font-style: italic;
}

.experience-keepsake-action-flap[b-mpbzjym3yo] {
    margin-top: -0.65rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.experience-keepsake-action-wrapper[b-mpbzjym3yo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.9rem 1.1rem 0;
}

.experience-keepsake-action-chip[b-mpbzjym3yo] {
    border: none;
    border-radius: 999px;
    padding: 0.88rem 1.3rem;
    background: linear-gradient(180deg, rgba(235, 172, 132, 0.23) 0%, rgba(244, 201, 173, 0.58) 100%);
    color: #714634;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(109, 73, 47, 0.12);
}

.experience-keepsake-action-helper[b-mpbzjym3yo] {
    color: #8a715d;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
}

.experience-letter-context-card[b-mpbzjym3yo] {
    width: min(100%, 74ch);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.experience-letter-paper[b-mpbzjym3yo] {
    width: 100%;
    border-radius: 32px;
    padding: clamp(1.5rem, 2vw, 2rem);
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.97) 0%, rgba(252, 246, 239, 0.95) 100%);
    box-shadow: 0 28px 70px rgba(85, 56, 34, 0.12);
    border: 1px solid rgba(221, 196, 173, 0.42);
}

.experience-letter-badge[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: rgba(252, 237, 229, 0.9);
    color: #ca8767;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.experience-letter-badge.badge-new[b-mpbzjym3yo] {
    background: rgba(255, 232, 226, 0.92);
    color: #b86758;
}

.experience-letter-badge.badge-replied[b-mpbzjym3yo],
.experience-letter-badge.badge-saved[b-mpbzjym3yo],
.experience-letter-badge.badge-draft[b-mpbzjym3yo] {
    background: rgba(246, 237, 226, 0.94);
    color: #8b6e5a;
}

.experience-letter-meta[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    color: #7f6854;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}

.experience-letter-meta .source[b-mpbzjym3yo] {
    font-weight: 700;
    color: #5e4c3a;
}

.experience-letter-meta .separator[b-mpbzjym3yo] {
    opacity: 0.55;
}

.experience-letter-title[b-mpbzjym3yo] {
    margin: 0.85rem 0 0;
    font-family: var(--font-serif);
    font-size: clamp(1.65rem, 2.8vw, 2.35rem);
    line-height: 1.12;
    color: #3f3127;
}

.experience-letter-markdown[b-mpbzjym3yo] {
    margin-top: 1rem;
    color: #4b3a2e;
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.95;
}

.experience-letter-markdown p[b-mpbzjym3yo] {
    margin: 0 0 0.95rem;
}

.experience-letter-inline-toggle[b-mpbzjym3yo],
.experience-letter-toggle[b-mpbzjym3yo] {
    border: none;
    background: transparent;
    color: #c97f59;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
}

.experience-letter-inline-toggle[b-mpbzjym3yo] {
    display: inline;
    margin-left: 0.35rem;
}

.experience-letter-toggle-row[b-mpbzjym3yo] {
    margin-top: 0.35rem;
}

.experience-letter-email-note[b-mpbzjym3yo] {
    margin: 0.8rem 0 0;
    color: #7f6854;
    font-family: var(--font-sans);
    font-size: 0.92rem;
}

.experience-letter-loading[b-mpbzjym3yo] {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 1.3rem 0;
    color: #8c7562;
    font-family: var(--font-serif);
    font-style: italic;
}

.experience-letter-action-flap[b-mpbzjym3yo] {
    margin-top: -0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    padding-top: 1.75rem;
}

.experience-letter-action-header[b-mpbzjym3yo] {
    color: #7f6854;
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    text-align: center;
}

.experience-letter-actions[b-mpbzjym3yo] {
    width: min(100%, 58rem);
    display: flex;
    gap: 1.35rem;
    justify-content: center;
    flex-wrap: wrap;
}

.experience-letter-action[b-mpbzjym3yo] {
    flex: 1 1 18rem;
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.42rem;
}

.experience-letter-action button[b-mpbzjym3yo] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    border-radius: 999px;
    padding: 0.88rem 1.65rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.1;
    letter-spacing: 0;
    cursor: pointer;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.experience-letter-action.primary button[b-mpbzjym3yo] {
    border: 1px solid rgba(166, 108, 64, 0.32);
    background: rgba(201, 150, 94, 0.55);
    color: #5e4128;
    box-shadow: 0 8px 18px rgba(169, 106, 61, 0.10);
}

.experience-letter-action.secondary button[b-mpbzjym3yo] {
    border: 1px solid rgba(163, 127, 96, 0.28);
    background: rgba(248, 240, 229, 0.18);
    color: rgba(90, 67, 48, 0.94);
    box-shadow: none;
}

.experience-letter-action button:hover[b-mpbzjym3yo] {
    transform: translateY(-1px);
}

.experience-letter-action.primary button:hover[b-mpbzjym3yo] {
    background: rgba(201, 150, 94, 0.72);
    border-color: rgba(166, 108, 64, 0.48);
    box-shadow: 0 12px 22px rgba(169, 106, 61, 0.16);
}

.experience-letter-action.secondary button:hover[b-mpbzjym3yo] {
    background: rgba(248, 240, 229, 0.32);
    border-color: rgba(163, 127, 96, 0.46);
}

.experience-letter-action-helper[b-mpbzjym3yo] {
    color: #8a715d;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
}

:global(body.night-mode) .experience-letter-paper[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(46, 36, 29, 0.96) 0%, rgba(36, 29, 24, 0.94) 100%);
    border-color: rgba(118, 90, 62, 0.48);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

:global(body.night-mode) .experience-letter-badge[b-mpbzjym3yo] {
    background: rgba(67, 49, 38, 0.92);
    color: #e0b18d;
}

:global(body.night-mode) .experience-letter-meta[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-email-note[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-action-helper[b-mpbzjym3yo] {
    color: rgba(224, 204, 180, 0.72);
}

:global(body.night-mode) .experience-letter-meta .source[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-title[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-markdown[b-mpbzjym3yo] {
    color: #eadfd2;
}

:global(body.night-mode) .experience-letter-action-chip[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(151, 108, 74, 0.35) 0%, rgba(102, 73, 51, 0.68) 100%);
    color: #f1d8c0;
}

:global(body.night-mode) .experience-letter-action-header[b-mpbzjym3yo] {
    color: rgba(224, 204, 180, 0.78);
}

:global(body.night-mode) .experience-letter-action.secondary button[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(62, 49, 40, 0.92) 0%, rgba(47, 38, 31, 0.92) 100%);
    color: #eadfd2;
    border-color: rgba(191, 148, 91, 0.32);
}

:global(body.night-mode) .experience-letter-action.primary button[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #8f6948 0%, #6f4e33 100%);
    color: #fff3e6;
    border-color: rgba(191, 148, 91, 0.24);
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:global(body.night-mode) .experience-letter-action.primary button:hover[b-mpbzjym3yo] {
    background: linear-gradient(145deg, #9a7350 0%, #7a573a 100%);
}

:global(body.night-mode) .experience-letter-action.secondary button:hover[b-mpbzjym3yo] {
    background: linear-gradient(180deg, rgba(69, 54, 44, 0.96) 0%, rgba(52, 42, 35, 0.96) 100%);
    border-color: rgba(191, 148, 91, 0.42);
}

.experience-reply-overlay[b-mpbzjym3yo] {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(35, 25, 18, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.experience-reply-modal[b-mpbzjym3yo] {
    width: min(860px, 92vw);
    max-height: 88dvh;
    background: linear-gradient(180deg, #fbf2e9 0%, #f4e8dd 100%);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.experience-reply-modal.mobile[b-mpbzjym3yo] {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
}

.experience-reply-header[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2.2rem 1.2rem;
    font-family: var(--font-sans);
    color: #4b2e2e;
    position: relative;
    gap: 1rem;
}

.experience-reply-title[b-mpbzjym3yo] {
    font-size: 1.25rem;
    font-weight: 700;
}

.experience-reply-title strong[b-mpbzjym3yo] {
    margin-left: 0.25rem;
}

.experience-reply-meta[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-right: 2.25rem;
    color: #7a5950;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.experience-reply-saved[b-mpbzjym3yo] {
    font-weight: 700;
}

.experience-reply-close[b-mpbzjym3yo] {
    position: absolute;
    right: 1.4rem;
    top: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(120, 90, 80, 0.3);
    background: rgba(255, 255, 255, 0.78);
    color: #5a3f34;
    font-size: 1.3rem;
    cursor: pointer;
}

.experience-reply-body[b-mpbzjym3yo] {
    padding: 0 2.2rem 1.8rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.experience-reply-toggle[b-mpbzjym3yo] {
    background: transparent;
    border: none;
    color: #b15f48;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 1rem;
    padding: 0;
}

.experience-reply-original-letter[b-mpbzjym3yo] {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.4rem;
    color: #4b2e2e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.experience-reply-original-subject[b-mpbzjym3yo] {
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.experience-reply-original-content[b-mpbzjym3yo] {
    font-size: 0.95rem;
    line-height: 1.5;
}

.experience-reply-label[b-mpbzjym3yo] {
    display: block;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #6a4d3f;
    margin: 0.9rem 0 0.5rem;
}

.experience-reply-input[b-mpbzjym3yo],
.experience-reply-textarea[b-mpbzjym3yo] {
    width: 100%;
    border: 1px solid rgba(180, 150, 130, 0.4);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    font-family: var(--font-sans);
    background: rgba(255, 255, 255, 0.75);
    color: #4b2e2e;
    outline: none;
}

.experience-reply-textarea[b-mpbzjym3yo] {
    min-height: 240px;
    resize: vertical;
    line-height: 1.7;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 26px, rgba(180, 150, 130, 0.2) 27px);
    background-attachment: local;
}

.experience-reply-footer[b-mpbzjym3yo] {
    padding: 1.3rem 2.2rem 1.8rem;
    border-top: 1px solid rgba(200, 170, 150, 0.35);
    background: rgba(255, 255, 255, 0.45);
}

.experience-reply-footer-note[b-mpbzjym3yo] {
    font-size: 0.9rem;
    color: #7a5950;
    margin-bottom: 1rem;
}

.experience-reply-actions[b-mpbzjym3yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.experience-reply-cancel[b-mpbzjym3yo] {
    background: transparent;
    border: none;
    color: #8b6e5a;
    font-size: 1rem;
    cursor: pointer;
}

.experience-reply-send[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, #d38468 0%, #a85e46 100%);
    color: #fff;
    border: 1px solid #a85e46;
    border-radius: 999px;
    padding: 0.9rem 2.8rem;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(168, 94, 70, 0.3);
}

.experience-reply-send:disabled[b-mpbzjym3yo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.experience-reply-toast[b-mpbzjym3yo] {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 2200;
    padding: 0.85rem 1.8rem;
    border-radius: 999px;
    background: rgba(41, 30, 24, 0.92);
    color: #f9f0e6;
    font-family: var(--font-sans);
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.experience-system-action[b-mpbzjym3yo] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.experience-system-action-text[b-mpbzjym3yo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: rgba(244, 225, 209, 0.62);
    color: #7c5b46;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    font-style: italic;
    text-align: center;
}

@media (max-width: 1024px) {
    .experience-reply-overlay[b-mpbzjym3yo] {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .experience-reply-modal[b-mpbzjym3yo] {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .experience-keepsake-paper[b-mpbzjym3yo] {
        border-radius: 24px;
        padding: 1.15rem 1rem 1.05rem;
    }

    .experience-keepsake-meta[b-mpbzjym3yo] {
        font-size: 0.86rem;
        flex-wrap: wrap;
    }

    .experience-keepsake-markdown[b-mpbzjym3yo] {
        font-size: 0.98rem;
        line-height: 1.78;
    }

    .experience-keepsake-action-chip[b-mpbzjym3yo] {
        width: min(100%, 20rem);
    }

    .experience-letter-paper[b-mpbzjym3yo] {
        border-radius: 24px;
        padding: 1.15rem 1rem 1.05rem;
    }

    .experience-letter-meta[b-mpbzjym3yo] {
        font-size: 0.86rem;
        flex-wrap: wrap;
    }

    .experience-letter-markdown[b-mpbzjym3yo] {
        font-size: 0.98rem;
        line-height: 1.78;
    }

    .experience-letter-actions[b-mpbzjym3yo] {
        width: 100%;
        gap: 0.85rem;
    }

    .experience-letter-action[b-mpbzjym3yo] {
        flex-basis: 100%;
        min-width: 0;
    }

    .experience-reply-overlay[b-mpbzjym3yo] {
        padding: 0;
    }

    .experience-reply-header[b-mpbzjym3yo],
    .experience-reply-body[b-mpbzjym3yo],
    .experience-reply-footer[b-mpbzjym3yo] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .experience-reply-header[b-mpbzjym3yo] {
        align-items: flex-start;
        flex-direction: column;
    }

    .experience-reply-meta[b-mpbzjym3yo] {
        margin-right: 2.25rem;
    }

    .experience-reply-body[b-mpbzjym3yo] {
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
    }

    .experience-reply-textarea[b-mpbzjym3yo] {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0.75rem;
        resize: none;
    }

    .experience-reply-actions[b-mpbzjym3yo] {
        flex-direction: column;
        align-items: stretch;
    }

    .experience-reply-send[b-mpbzjym3yo] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/ThemeInterviewDetail.razor.rz.scp.css */
/* Farmors moten detail */

:host[b-9pbuvybe8f] {
    display: block;
    width: 100%;
    background: #FAECDA;
}

.app-layout[b-9pbuvybe8f],
[b-9pbuvybe8f] .app-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: #FAECDA;
    padding-top: 0;
    overflow-x: hidden;
}

.sidebar-overlay[b-9pbuvybe8f] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.sidebar-overlay.hidden[b-9pbuvybe8f] {
    display: none;
}

.sidebar[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

.sidebar.hidden[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar.hidden {
    transform: translateX(-100%);
}

.sidebar-top-content[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.app-logo-link[b-9pbuvybe8f],
[b-9pbuvybe8f] .app-logo-link {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: -1.2rem;
    text-decoration: none;
}

.sidebar-logo img[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.toggle-sidebar[b-9pbuvybe8f] {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: #FAF3E5;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(105, 75, 45, 0.08);
}

.interview-detail-main[b-9pbuvybe8f] {
    flex: 1;
    margin-left: 280px;
    padding: clamp(2.5rem, 3.4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) 0;
    transition: margin-left 0.3s ease;
}

.interview-detail-main.sidebar-hidden[b-9pbuvybe8f] {
    margin-left: 0;
}

.interview-article[b-9pbuvybe8f],
.interview-not-found[b-9pbuvybe8f] {
    width: min(100%, 1180px);
    margin: 0 auto;
}

.interview-hero[b-9pbuvybe8f] {
    position: relative;
    min-height: clamp(520px, 47vw, 650px);
    overflow: hidden;
    border: 1px solid rgba(177, 132, 91, 0.2);
    border-radius: 8px;
    background:
        radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.82), transparent 34%),
        linear-gradient(135deg, rgba(255, 251, 246, 0.96), rgba(246, 233, 214, 0.92));
    box-shadow: 0 24px 54px rgba(99, 68, 40, 0.12);
}

.interview-hero[b-9pbuvybe8f]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(255, 250, 244, 0.99) 0%,
            rgba(255, 250, 244, 0.98) 26%,
            rgba(255, 250, 244, 0.76) 42%,
            rgba(255, 250, 244, 0.18) 60%,
            rgba(255, 250, 244, 0) 78%),
        linear-gradient(180deg,
            rgba(255, 250, 244, 0.18) 0%,
            rgba(255, 250, 244, 0) 34%,
            rgba(255, 250, 244, 0.12) 100%);
    pointer-events: none;
}

.interview-hero-copy[b-9pbuvybe8f] {
    position: relative;
    z-index: 2;
    width: min(56%, 680px);
    min-height: inherit;
    padding: clamp(2rem, 3.4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.back-link[b-9pbuvybe8f] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 1.25rem;
    color: #7B5740;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.back-link[b-9pbuvybe8f]::before {
    content: "←";
    margin-right: 0.45rem;
}

.back-link:hover[b-9pbuvybe8f] {
    color: #4B3325;
}

.interview-kicker[b-9pbuvybe8f],
.granny-notes h2[b-9pbuvybe8f],
.afterthought-panel h2[b-9pbuvybe8f] {
    margin: 0 0 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #A0633F;
}

.interview-hero h1[b-9pbuvybe8f] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(3.1rem, 4.1vw, 5rem);
    font-weight: 600;
    line-height: 1.02;
    color: #2F251D;
}

.interview-meta[b-9pbuvybe8f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
    margin: 1rem 0 0;
    color: #7C6653;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}

.interview-meta span + span[b-9pbuvybe8f]::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 1.2rem 0 0;
    border-radius: 999px;
    background: rgba(160, 99, 63, 0.55);
    vertical-align: middle;
}

.granny-notes[b-9pbuvybe8f] {
    margin-top: clamp(1.6rem, 3vw, 2.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(177, 132, 91, 0.22);
}

.granny-notes p[b-9pbuvybe8f] {
    margin: 0;
    color: #5F4F43;
    line-height: 1.75;
}

.interview-hero-image[b-9pbuvybe8f] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.interview-hero-image[b-9pbuvybe8f]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 250, 244, 0.42) 0%, rgba(255, 250, 244, 0) 48%),
        linear-gradient(180deg, rgba(61, 40, 28, 0.04) 0%, rgba(61, 40, 28, 0.1) 100%);
    pointer-events: none;
}

.interview-hero-image img[b-9pbuvybe8f] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.interview-body[b-9pbuvybe8f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem) 0;
}

.interview-transcript[b-9pbuvybe8f] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 250, 244, 0.54);
    border: 1px solid rgba(177, 132, 91, 0.14);
    border-radius: 8px;
}

.interview-turn[b-9pbuvybe8f] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 1.35rem;
    padding: 1.45rem 1.65rem;
    border-bottom: 1px solid rgba(177, 132, 91, 0.16);
}

.interview-turn:last-child[b-9pbuvybe8f] {
    border-bottom: none;
}

.turn-speaker[b-9pbuvybe8f] {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8D6044;
}

.turn-text[b-9pbuvybe8f] {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.8;
    color: #2E2924;
}

.turn-text p[b-9pbuvybe8f] {
    margin: 0;
}

.turn-text p + p[b-9pbuvybe8f] {
    margin-top: 0.8rem;
}

.stage-direction[b-9pbuvybe8f] {
    color: #7C6653;
    font-style: italic;
}

.interview-empty-transcript[b-9pbuvybe8f] {
    margin: 0;
    padding: 2rem;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.8;
    color: #4A3A2F;
}

.interview-aside[b-9pbuvybe8f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.afterthought-panel[b-9pbuvybe8f],
.handoff-panel[b-9pbuvybe8f] {
    border-radius: 8px;
    border: 1px solid rgba(177, 132, 91, 0.18);
    background: rgba(255, 250, 244, 0.76);
    box-shadow: 0 18px 34px rgba(99, 68, 40, 0.08);
}

.afterthought-panel[b-9pbuvybe8f] {
    padding: 1.6rem;
}

.afterthought-panel p[b-9pbuvybe8f] {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.8;
    color: #5D4737;
}

.afterthought-panel img[b-9pbuvybe8f] {
    display: block;
    width: 76px;
    margin: 1.35rem auto 0;
    opacity: 0.88;
}

.handoff-panel[b-9pbuvybe8f] {
    padding: 1.6rem;
}

.handoff-panel h2[b-9pbuvybe8f] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.16;
    color: #2F251D;
}

.handoff-panel p[b-9pbuvybe8f] {
    margin: 0.8rem 0 1.3rem;
    line-height: 1.65;
    color: #6F5B4C;
}

.handoff-button[b-9pbuvybe8f],
.not-found-button[b-9pbuvybe8f] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #B87049, #935536);
    color: #FFF8EE;
    font-family: var(--font-sans);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(147, 85, 54, 0.18);
}

.handoff-button[b-9pbuvybe8f] {
    min-height: 52px;
    padding: 0.7rem 1rem;
    line-height: 1.18;
    text-align: center;
    white-space: normal;
}

.handoff-button span[b-9pbuvybe8f] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.handoff-button svg[b-9pbuvybe8f] {
    flex: 0 0 auto;
}

.handoff-button:hover[b-9pbuvybe8f],
.not-found-button:hover[b-9pbuvybe8f] {
    background: linear-gradient(135deg, #A8623E, #7E452B);
}

.interview-not-found[b-9pbuvybe8f] {
    max-width: 780px;
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(177, 132, 91, 0.2);
    background: rgba(255, 250, 244, 0.76);
}

.interview-not-found .back-link[b-9pbuvybe8f] {
    margin-left: auto;
    margin-right: auto;
}

.interview-not-found h1[b-9pbuvybe8f] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4vw, 4rem);
    color: #2F251D;
}

.interview-not-found p[b-9pbuvybe8f] {
    margin: 1rem auto 1.6rem;
    max-width: 34rem;
    color: #6F5B4C;
    line-height: 1.7;
}

.not-found-button[b-9pbuvybe8f] {
    width: auto;
    padding: 0 1.35rem;
}

[b-9pbuvybe8f] .main-footer {
    width: calc(100% - 280px);
    margin-left: 280px;
    margin-top: 80px;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    box-sizing: border-box;
    background: transparent;
    color: #4F4A45;
    border-top: 0;
    transition: margin-left 0.3s ease;
}

[b-9pbuvybe8f] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

[b-9pbuvybe8f] .footer-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 60px clamp(1rem, 2vw, 1.5rem) 30px;
    box-sizing: border-box;
    background-color: #FAF3E5;
    border-top: 1px solid #f0dad3;
}

@media (max-width: 1024px) {
    [b-9pbuvybe8f] .toggle-sidebar,
    .toggle-sidebar[b-9pbuvybe8f] {
        display: none !important;
    }

    .app-layout[b-9pbuvybe8f],
    [b-9pbuvybe8f] .app-layout {
        padding-top: 60px;
    }

    .sidebar[b-9pbuvybe8f],
    [b-9pbuvybe8f] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    .sidebar.visible[b-9pbuvybe8f],
    [b-9pbuvybe8f] .sidebar.visible {
        transform: translateX(0);
    }

    .sidebar.hidden[b-9pbuvybe8f],
    [b-9pbuvybe8f] .sidebar.hidden {
        transform: translateX(-100%);
    }

    .interview-detail-main[b-9pbuvybe8f] {
        margin-left: 0;
        padding: 1.25rem var(--mobile-page-margin) 3rem;
    }

    .interview-body[b-9pbuvybe8f] {
        grid-template-columns: 1fr;
    }

    .interview-hero[b-9pbuvybe8f] {
        min-height: clamp(500px, 62vw, 610px);
    }

    .interview-hero-copy[b-9pbuvybe8f] {
        width: min(64%, 610px);
    }

    .interview-aside[b-9pbuvybe8f] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [b-9pbuvybe8f] .main-footer {
        margin-left: 0 !important;
        width: 100%;
        padding: 0 var(--mobile-page-margin);
    }
}

@media (max-width: 768px) {
    .app-layout[b-9pbuvybe8f],
    [b-9pbuvybe8f] .app-layout {
        padding-top: 60px;
        overflow-x: hidden;
    }

    .interview-hero[b-9pbuvybe8f] {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .interview-hero[b-9pbuvybe8f]::before {
        display: none;
    }

    .interview-hero-image[b-9pbuvybe8f] {
        position: relative;
        order: -1;
        min-height: auto;
        aspect-ratio: 16 / 9;
    }

    .interview-hero-image img[b-9pbuvybe8f] {
        object-position: center 38%;
    }

    .interview-hero-copy[b-9pbuvybe8f] {
        width: 100%;
        min-height: auto;
        padding: 1.5rem;
    }

    .interview-hero h1[b-9pbuvybe8f] {
        max-width: none;
        font-size: clamp(2.6rem, 12vw, 4rem);
    }

    .interview-body[b-9pbuvybe8f] {
        padding: 1.25rem 0 0;
    }

    .interview-turn[b-9pbuvybe8f] {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        padding: 1.2rem;
    }

    .interview-aside[b-9pbuvybe8f] {
        grid-template-columns: 1fr;
    }

    .handoff-panel[b-9pbuvybe8f],
    .afterthought-panel[b-9pbuvybe8f] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/ThemeInterviews.razor.rz.scp.css */
/* Farmors moten archive */

:host[b-ut6aaoxxn6] {
    display: block;
    width: 100%;
    background: #FAECDA;
}

.app-layout[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .app-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: #FAECDA;
    padding-top: 0;
    overflow-x: hidden;
}

.sidebar-overlay[b-ut6aaoxxn6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.sidebar-overlay.hidden[b-ut6aaoxxn6] {
    display: none;
}

.sidebar[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

.sidebar.hidden[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar.hidden {
    transform: translateX(-100%);
}

.sidebar-top-content[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.app-logo-link[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .app-logo-link {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: -1.2rem;
    text-decoration: none;
}

.sidebar-logo img[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.toggle-sidebar[b-ut6aaoxxn6] {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: #FAF3E5;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(105, 75, 45, 0.08);
}

.interviews-main[b-ut6aaoxxn6] {
    flex: 1;
    margin-left: 280px;
    padding: clamp(2.5rem, 3.4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) 0;
    transition: margin-left 0.3s ease;
}

.interviews-main.sidebar-hidden[b-ut6aaoxxn6] {
    margin-left: 0;
}

.interviews-hero[b-ut6aaoxxn6] {
    position: relative;
    width: min(100%, 1180px);
    margin: 0 auto clamp(3.25rem, 5.5vw, 5.5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: stretch;
}

.interviews-hero[b-ut6aaoxxn6]::before {
    content: "";
    position: absolute;
    left: clamp(1rem, 5vw, 5rem);
    right: clamp(1rem, 5vw, 5rem);
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(177, 132, 91, 0), rgba(177, 132, 91, 0.2), rgba(177, 132, 91, 0));
    pointer-events: none;
    transform: translateY(-50%);
}

.interviews-hero-copy[b-ut6aaoxxn6] {
    position: relative;
    z-index: 1;
    min-width: 0;
    align-self: center;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.interviews-kicker[b-ut6aaoxxn6],
.featured-label[b-ut6aaoxxn6],
.interview-card-meta[b-ut6aaoxxn6] {
    margin: 0 0 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #A0633F;
}

.interviews-hero h1[b-ut6aaoxxn6] {
    max-width: 100%;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 5.7rem;
    font-weight: 600;
    line-height: 0.96;
    color: #2F251D;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.interviews-hero-copy p:not(.interviews-kicker)[b-ut6aaoxxn6] {
    max-width: 36rem;
    margin: 1.35rem 0 0;
    color: #6B5848;
    font-size: clamp(1.02rem, 1.3vw, 1.2rem);
    line-height: 1.75;
}

.interviews-hero-note[b-ut6aaoxxn6] {
    width: min(100%, 28rem);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: 1.1rem;
    border-top: 1px solid rgba(177, 132, 91, 0.24);
    display: grid;
    gap: 0.35rem;
    color: #7A604D;
    font-family: var(--font-sans);
}

.interviews-hero-note span:first-child[b-ut6aaoxxn6] {
    font-family: var(--font-serif);
    font-size: clamp(1.16rem, 1.55vw, 1.42rem);
    color: #342820;
}

.featured-interview[b-ut6aaoxxn6] {
    position: relative;
    min-width: 0;
    min-height: clamp(390px, 46vw, 560px);
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    color: #FFF8EE;
    text-decoration: none;
    box-shadow: 0 28px 58px rgba(93, 62, 32, 0.2);
    border: 1px solid rgba(106, 74, 43, 0.2);
}

.featured-interview[b-ut6aaoxxn6]::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 1;
    border: 1px solid rgba(255, 248, 238, 0.18);
    border-radius: 5px;
    pointer-events: none;
}

.featured-interview img[b-ut6aaoxxn6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-interview:hover img[b-ut6aaoxxn6] {
    transform: scale(1.025);
}

.featured-interview-shade[b-ut6aaoxxn6] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(24, 18, 14, 0.08) 0%, rgba(24, 18, 14, 0.3) 38%, rgba(24, 18, 14, 0.76) 100%),
        linear-gradient(90deg, rgba(24, 18, 14, 0.4), rgba(24, 18, 14, 0.08));
}

.featured-interview-content[b-ut6aaoxxn6] {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    padding: clamp(1.65rem, 3vw, 2.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.featured-label[b-ut6aaoxxn6] {
    color: #F0C99A;
    margin-bottom: 0;
}

.featured-interview strong[b-ut6aaoxxn6] {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.8vw, 4.1rem);
    font-weight: 600;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.featured-interview-content span:not(.featured-label):not(.featured-link)[b-ut6aaoxxn6] {
    max-width: 44rem;
    color: rgba(255, 248, 238, 0.9);
    line-height: 1.65;
}

.featured-link[b-ut6aaoxxn6],
.interview-card-link[b-ut6aaoxxn6],
.interviews-empty a[b-ut6aaoxxn6] {
    font-family: var(--font-sans);
    font-weight: 700;
    color: inherit;
}

.featured-link[b-ut6aaoxxn6] {
    margin-top: 0.35rem;
}

.interviews-list-section[b-ut6aaoxxn6] {
    width: min(100%, 1100px);
    margin: 0 auto;
    scroll-margin-top: 5.5rem;
}

.interviews-section-heading[b-ut6aaoxxn6] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.35rem;
}

.interviews-section-heading h2[b-ut6aaoxxn6],
.interviews-empty h2[b-ut6aaoxxn6] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    color: #2F251D;
    scroll-margin-top: 5.5rem;
}

.interviews-section-heading p[b-ut6aaoxxn6],
.interviews-empty p[b-ut6aaoxxn6] {
    max-width: 34rem;
    margin: 0;
    color: #765E4B;
    line-height: 1.65;
}

.interviews-grid[b-ut6aaoxxn6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.interview-card[b-ut6aaoxxn6] {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 249, 241, 0.78);
    color: #332820;
    border: 1px solid rgba(177, 132, 91, 0.2);
    text-decoration: none;
    box-shadow: 0 16px 28px rgba(105, 75, 45, 0.09);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.interview-card:hover[b-ut6aaoxxn6] {
    transform: translateY(-3px);
    border-color: rgba(177, 132, 91, 0.38);
    box-shadow: 0 22px 34px rgba(105, 75, 45, 0.13);
}

.interview-card img[b-ut6aaoxxn6] {
    display: block;
    flex: 0 0 190px;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.interview-card-body[b-ut6aaoxxn6] {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.15rem 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.68rem;
    background: rgba(255, 249, 241, 0.96);
}

.interview-card-meta[b-ut6aaoxxn6] {
    margin: 0;
    letter-spacing: 0.12em;
    color: #A86C46;
}

.interview-card strong[b-ut6aaoxxn6] {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.interview-card span:not(.interview-card-meta):not(.interview-card-link)[b-ut6aaoxxn6] {
    color: #6F5B4C;
    line-height: 1.62;
}

.interview-card-link[b-ut6aaoxxn6] {
    margin-top: auto;
    color: #8A4F32;
}

.interviews-empty[b-ut6aaoxxn6] {
    width: min(100%, 760px);
    margin: 5rem auto;
    padding: 3rem;
    text-align: center;
    border: 1px solid rgba(177, 132, 91, 0.22);
    border-radius: 8px;
    background: rgba(255, 249, 241, 0.68);
}

.interviews-empty p[b-ut6aaoxxn6] {
    margin: 1rem auto 1.4rem;
}

.interviews-empty a[b-ut6aaoxxn6] {
    color: #8A4F32;
}

[b-ut6aaoxxn6] .main-footer {
    width: calc(100% - 280px);
    margin-left: 280px;
    margin-top: 80px;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    box-sizing: border-box;
    background: transparent;
    color: #4F4A45;
    border-top: 0;
    transition: margin-left 0.3s ease;
}

[b-ut6aaoxxn6] .main-footer.sidebar-hidden {
    margin-left: 0;
    width: 100%;
}

[b-ut6aaoxxn6] .footer-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 60px clamp(1rem, 2vw, 1.5rem) 30px;
    box-sizing: border-box;
    background-color: #FAF3E5;
    border-top: 1px solid #f0dad3;
}

@media (max-width: 1024px) {
    [b-ut6aaoxxn6] .toggle-sidebar,
    .toggle-sidebar[b-ut6aaoxxn6] {
        display: none !important;
    }

    .app-layout[b-ut6aaoxxn6],
    [b-ut6aaoxxn6] .app-layout {
        padding-top: 60px;
    }

    .sidebar[b-ut6aaoxxn6],
    [b-ut6aaoxxn6] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    .sidebar.visible[b-ut6aaoxxn6],
    [b-ut6aaoxxn6] .sidebar.visible {
        transform: translateX(0);
    }

    .sidebar.hidden[b-ut6aaoxxn6],
    [b-ut6aaoxxn6] .sidebar.hidden {
        transform: translateX(-100%);
    }

    .interviews-main[b-ut6aaoxxn6] {
        margin-left: 0;
        padding: 1.25rem var(--mobile-page-margin) 3rem;
    }

    .interviews-hero[b-ut6aaoxxn6] {
        grid-template-columns: 1fr;
    }

    .interviews-hero h1[b-ut6aaoxxn6] {
        font-size: 5rem;
    }

    .interviews-section-heading[b-ut6aaoxxn6] {
        display: block;
    }

    .interviews-section-heading p[b-ut6aaoxxn6] {
        margin-top: 0.55rem;
    }

    .interviews-grid[b-ut6aaoxxn6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [b-ut6aaoxxn6] .main-footer {
        margin-left: 0 !important;
        width: 100%;
        padding: 0 var(--mobile-page-margin);
    }
}

@media (max-width: 768px) {
    .app-layout[b-ut6aaoxxn6],
    [b-ut6aaoxxn6] .app-layout {
        padding-top: 60px;
        overflow-x: hidden;
    }

    .interviews-hero h1[b-ut6aaoxxn6] {
        font-size: 3.9rem;
    }

    .interviews-hero[b-ut6aaoxxn6]::before {
        display: none;
    }

    .featured-interview[b-ut6aaoxxn6] {
        min-height: 420px;
    }

    .featured-interview-content[b-ut6aaoxxn6] {
        padding-right: 4.75rem;
    }

    .interviews-grid[b-ut6aaoxxn6] {
        grid-template-columns: 1fr;
    }

    .interview-card[b-ut6aaoxxn6] {
        display: flex;
    }

    .interview-card img[b-ut6aaoxxn6] {
        flex-basis: 210px;
        height: 210px;
    }

    .interviews-empty[b-ut6aaoxxn6] {
        margin: 3rem auto;
        padding: 2rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .interviews-hero h1[b-ut6aaoxxn6] {
        font-size: 3.15rem;
    }
}
/* /Components/Pages/ThemesAll.razor.rz.scp.css */
/* Page background harmony */
:host[b-xtdjviig2t] {
    display: block;
    background: rgb(250, 236, 218);
}

/* App layout – mirror FrontPage */
[b-xtdjviig2t] .app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    /* account for fixed logo area */
}

/* Header */
.showroom-header[b-xtdjviig2t] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(250, 236, 218, 0.95);
    backdrop-filter: blur(4px);
}

.header-inner[b-xtdjviig2t] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand img[b-xtdjviig2t] {
    height: 28px;
}

.header-actions[b-xtdjviig2t] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.link-btn[b-xtdjviig2t] {
    background: transparent;
    border: none;
    color: #603A2D;
    cursor: pointer;
    font-weight: 500;
}

.cta-outline[b-xtdjviig2t] {
    border: 1px solid #C28B6C;
    background: transparent;
    color: #6E3E2C;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
}

.cta-solid[b-xtdjviig2t] {
    background: #E7783C;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(231, 120, 60, 0.35);
}

.cta-solid:hover[b-xtdjviig2t] {
    filter: brightness(0.98);
}

.header-divider[b-xtdjviig2t] {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
}

/* Featured hero */
.featured-hero[b-xtdjviig2t] {
    position: relative;
    width: 100%;
    margin: 18px auto 24px auto;
    min-height: 520px;
    border-radius: 16px;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(58, 38, 29, 0.18);
}

.featured-hero .overlay[b-xtdjviig2t] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.30) 48%, rgba(0, 0, 0, 0.22) 100%);
}

.hero-content[b-xtdjviig2t] {
    position: relative;
    z-index: 1;
    color: #FDF6EB;
    padding: 58px 56px;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-title[b-xtdjviig2t] {
    font-family: var(--font-serif);
    font-size: clamp(48px, 7.4vw, 84px);
    line-height: 1.08;
    font-weight: var(--mobile-hero-heading-weight);
    letter-spacing: -0.5px;
}

.hero-subtitle[b-xtdjviig2t] {
    font-size: 22px;
    opacity: 0.98;
    max-width: 620px;
}

.cta-primary[b-xtdjviig2t] {
    align-self: flex-start;
    background: #E7783C;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    min-height: 48px;
    font-family: var(--font-sans);
    font-size: var(--mobile-button-font-size);
    font-weight: var(--mobile-button-font-weight);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(231, 120, 60, 0.35);
}

/* Explore section */
.explore-section[b-xtdjviig2t] {
    max-width: 1100px;
    margin: 10px auto;
    padding: 0 20px;
}

.explore-title[b-xtdjviig2t] {
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: var(--mobile-section-heading-weight);
    color: #4A2E22;
    margin: 6px 0 10px;
}

/* Initial shelf placeholder: prevents the authenticated page from rendering an empty library phase. */
.theme-library-loading[b-xtdjviig2t] {
    max-width: 1100px;
    width: 100%;
    margin: 22px auto 48px;
    padding: 0 20px;
}

.theme-loading-title[b-xtdjviig2t] {
    width: min(420px, 52%);
    height: 46px;
    margin: 0 auto 34px;
    border-radius: 8px;
    background: rgba(147, 105, 82, 0.12);
}

.theme-loading-grid[b-xtdjviig2t] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.theme-loading-card[b-xtdjviig2t] {
    min-height: 312px;
    padding: 0 0 18px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(186, 135, 99, 0.14);
    background: rgba(255, 248, 239, 0.58);
    box-shadow: 0 12px 26px rgba(98, 63, 43, 0.06);
}

.theme-loading-image[b-xtdjviig2t] {
    width: 100%;
    height: 126px;
    background: rgba(147, 105, 82, 0.14);
}

.theme-loading-line[b-xtdjviig2t] {
    height: 12px;
    margin: 14px 18px 0;
    border-radius: 8px;
    background: rgba(147, 105, 82, 0.12);
}

.theme-loading-line.wide[b-xtdjviig2t] {
    width: 72%;
    height: 18px;
    margin-top: 18px;
}

.theme-loading-line.short[b-xtdjviig2t] {
    width: 44%;
}

/* Private favorites shelf */
.favorite-themes-section[b-xtdjviig2t] {
    max-width: 1100px;
    width: 100%;
    margin: 14px auto 4px;
    padding: 0 20px;
}

.favorite-themes-section-header[b-xtdjviig2t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
}

.favorite-themes-title[b-xtdjviig2t] {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: var(--mobile-section-heading-weight);
    color: #3A261D;
    margin: 0;
}

.favorite-themes-subtitle[b-xtdjviig2t] {
    max-width: 520px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: #7A6257;
    margin: 0;
}

.favorite-themes-card-grid[b-xtdjviig2t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.favorite-theme-card[b-xtdjviig2t] {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    min-height: 144px;
    overflow: hidden;
    text-decoration: none;
    color: #3A261D;
    background: rgba(255, 248, 239, 0.86);
    border: 1px solid rgba(186, 135, 99, 0.2);
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(98, 63, 43, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.favorite-theme-card:hover[b-xtdjviig2t],
.favorite-theme-card:focus-visible[b-xtdjviig2t] {
    transform: translateY(-2px);
    border-color: rgba(167, 104, 72, 0.34);
    box-shadow: 0 18px 36px rgba(98, 63, 43, 0.12);
}

.favorite-theme-card:focus-visible[b-xtdjviig2t] {
    outline: 2px solid rgba(164, 102, 67, 0.55);
    outline-offset: 3px;
}

.favorite-theme-card-image[b-xtdjviig2t] {
    width: 100%;
    height: 100%;
    min-height: 144px;
    object-fit: cover;
    display: block;
}

.favorite-theme-card-body[b-xtdjviig2t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px 18px 14px;
    box-sizing: border-box;
}

.favorite-theme-card-persona[b-xtdjviig2t] {
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
    color: #9a6a4a;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-theme-card-title[b-xtdjviig2t] {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.16;
    font-weight: 700;
    color: #3A261D;
    margin-bottom: 8px;
}

.favorite-theme-card-description[b-xtdjviig2t] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.43;
    color: #6F574D;
}

.favorite-theme-card-action[b-xtdjviig2t] {
    margin-top: auto;
    padding-top: 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: #A66342;
}

/* Quiet editorial filters */
.theme-filter-section[b-xtdjviig2t] {
    max-width: 1100px;
    width: 100%;
    margin: -8px auto 0;
    padding: 0 20px;
}

.theme-filter-row[b-xtdjviig2t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.theme-filter-pill[b-xtdjviig2t] {
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #80675C;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 9px 18px;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.theme-filter-pill:hover[b-xtdjviig2t],
.theme-filter-pill:focus-visible[b-xtdjviig2t] {
    color: #4A2E22;
    background: rgba(246, 229, 217, 0.62);
}

.theme-filter-pill:focus-visible[b-xtdjviig2t] {
    outline: 2px solid rgba(164, 102, 67, 0.45);
    outline-offset: 2px;
}

.theme-filter-pill.active[b-xtdjviig2t] {
    background: #F6E5D9;
    color: #4A2E22;
}

/* Gallery */
.gallery-section[b-xtdjviig2t] {
    max-width: 1100px;
    margin: 6px auto 28px;
    padding: 0 20px;
}

.theme-shelf-enter[b-xtdjviig2t] {
    animation: themeshelf-soft-enter-b-xtdjviig2t 220ms ease both;
}

@keyframes themeshelf-soft-enter-b-xtdjviig2t {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-header[b-xtdjviig2t] {
    margin: 6px 0 16px;
}

.gallery-title[b-xtdjviig2t] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: var(--mobile-section-heading-weight);
    color: #3A261D;
    margin: 0 0 6px;
}

.gallery-subtitle[b-xtdjviig2t] {
    font-family: var(--font-sans);
    font-size: 16px;
    color: #6B5248;
    margin: 0;
}

/* ThemesAll uses ThemeSection/ThemeCard components; adjust layout only. */
[b-xtdjviig2t] .theme-section {
    margin-bottom: 28px;
    overflow: visible !important;
}

[b-xtdjviig2t] .theme-section .section-header {
    display: none;
}

[b-xtdjviig2t] .theme-carousel {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

[b-xtdjviig2t] .carousel-load-more-container {
    display: none !important;
}

@media (max-width: 640px) {
    [b-xtdjviig2t] .theme-section {
        margin-bottom: 18px;
    }
}

/* Create your own */
.create-own-section[b-xtdjviig2t] {
    max-width: 1100px;
    margin: 26px auto 48px;
    padding: 0 20px;
}

.create-inner[b-xtdjviig2t] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.create-left[b-xtdjviig2t] {
    padding: 10px 2px;
}

.create-title[b-xtdjviig2t] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: var(--mobile-section-heading-weight);
    color: #3A261D;
    margin: 0 0 6px;
}

.create-subtitle[b-xtdjviig2t] {
    font-family: var(--font-sans);
    font-size: 16px;
    color: #6B5248;
    margin: 0;
}

.cta-card[b-xtdjviig2t] {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    background: #fde9c9;
    color: #3A261D;
    border: 2px dashed #e3b083;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    align-items: center;
    text-align: left;
}

.cta-card .cta-icon[b-xtdjviig2t] {
    font-size: 28px;
}

.cta-card-title[b-xtdjviig2t] {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
}

.cta-card-sub[b-xtdjviig2t] {
    font-family: var(--font-sans);
    font-size: 15px;
    color: #745343;
}

/* Responsive */
@media (max-width: 1024px) {
    .themes-grid[b-xtdjviig2t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .favorite-themes-card-grid[b-xtdjviig2t] {
        grid-template-columns: 1fr;
    }

    .theme-loading-grid[b-xtdjviig2t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-hero[b-xtdjviig2t] {
        min-height: 440px;
        margin-top: 40px;
    }

    .hero-title[b-xtdjviig2t] {
        font-size: clamp(40px, 6.5vw, 64px);
    }
}

@media (max-width: 640px) {
    .themes-grid[b-xtdjviig2t] {
        grid-template-columns: 1fr;
    }

    .create-inner[b-xtdjviig2t] {
        grid-template-columns: 1fr;
    }

    .featured-hero[b-xtdjviig2t] {
        min-height: 320px;
        margin-top: 40px;
    }

    /* Use the shared mobile page gutter */
    .theme-library-loading[b-xtdjviig2t],
    .explore-section[b-xtdjviig2t],
    .favorite-themes-section[b-xtdjviig2t],
    .theme-filter-section[b-xtdjviig2t],
    .gallery-section[b-xtdjviig2t],
    .create-own-section[b-xtdjviig2t] {
        padding: 0 var(--mobile-page-margin);
    }

    .favorite-themes-section-header[b-xtdjviig2t] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .favorite-themes-title[b-xtdjviig2t] {
        font-size: 30px;
    }

    .favorite-theme-card[b-xtdjviig2t] {
        grid-template-columns: 108px minmax(0, 1fr);
        min-height: 132px;
    }

    .favorite-theme-card-image[b-xtdjviig2t] {
        min-height: 132px;
    }

    .favorite-theme-card-body[b-xtdjviig2t] {
        padding: 14px 14px 12px;
    }

    .favorite-theme-card-title[b-xtdjviig2t] {
        font-size: 20px;
    }

    .hero-content[b-xtdjviig2t] {
        padding: 36px 28px;
    }
}

@media (max-width: 420px) {
    .favorite-theme-card[b-xtdjviig2t] {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .favorite-theme-card-description[b-xtdjviig2t] {
        -webkit-line-clamp: 2;
    }

    .theme-filter-row[b-xtdjviig2t] {
        justify-content: flex-start;
    }

    .theme-loading-grid[b-xtdjviig2t] {
        grid-template-columns: 1fr;
    }

    .theme-loading-title[b-xtdjviig2t] {
        width: 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-shelf-enter[b-xtdjviig2t],
    .favorite-theme-card[b-xtdjviig2t],
    .theme-filter-pill[b-xtdjviig2t] {
        animation: none;
        transition: none;
    }

    .favorite-theme-card:hover[b-xtdjviig2t],
    .favorite-theme-card:focus-visible[b-xtdjviig2t] {
        transform: none;
    }
}

/* Sidebar and layout (mirrors FrontPage) */
/* app-layout flex already defined at top to mirror FrontPage */

/* Button styles (copied from FrontPage) */
[b-xtdjviig2t] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-xtdjviig2t] .btn:hover {
    background-color: #FADDAA;
}

[b-xtdjviig2t] .btn-login {
    background-color: #FBCFA8;
}

/* Sidebar container-specific width for buttons */
[b-xtdjviig2t] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar */
[b-xtdjviig2t] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-xtdjviig2t] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-xtdjviig2t] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1.0rem;
}

[b-xtdjviig2t] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-xtdjviig2t] .sidebar-logo {
    text-align: center;
}

[b-xtdjviig2t] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    height: 50px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[b-xtdjviig2t] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-xtdjviig2t] .sidebar a:hover {
    color: #000;
}

[b-xtdjviig2t] .sidebar-nav {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

[b-xtdjviig2t] .sidebar-nav h3 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: #4b2e2e;
    margin-bottom: 0.5rem;
}

[b-xtdjviig2t] .sidebar-nav p {
    font-size: 0.95rem;
    color: #6a504b;
    line-height: 1.4;
    margin: 0;
}

[b-xtdjviig2t] .action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

[b-xtdjviig2t] .nav-button {
    width: 100%;
    padding: 0.9rem 1rem;
    background-color: var(--loved-one-peach);
    color: var(--loved-one-text);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    /* inherited font-sans */
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

[b-xtdjviig2t] .nav-button:hover,
[b-xtdjviig2t] .nav-button.active {
    background-color: var(--loved-one-accent);
}

[b-xtdjviig2t] .nav-button .fas {
    font-size: 1em;
}

/* Sidebar bottom user */
[b-xtdjviig2t] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-xtdjviig2t] .sidebar-divider {
    width: 100%;
    height: 1px;
    background: #e0d6d1;
    margin-bottom: 1rem;
}

[b-xtdjviig2t] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color .2s ease;
}

[b-xtdjviig2t] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, .5);
}

[b-xtdjviig2t] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #4F4A45;
}

[b-xtdjviig2t] .user-name {
    font-size: .95rem;
    color: #4b2e2e;
    font-weight: 600;
}

[b-xtdjviig2t] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-xtdjviig2t] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
}

[b-xtdjviig2t] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: .9rem;
    color: #4F4A45;
    display: flex;
    align-items: center;
}

[b-xtdjviig2t] .dropdown-item:hover {
    background: #f0dad3;
}

/* Toggle button */
[b-xtdjviig2t] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: .9rem;
    cursor: pointer;
    z-index: 100;
    transition: left .3s ease;
}

/* Hide desktop toggle on mobile/tablet - mobile top bar provides hamburger */
@media (max-width: 1024px) {
    [b-xtdjviig2t] .mobile-floating-header {
        z-index: 1200;
        background:
            linear-gradient(180deg, rgba(250, 236, 218, 0.97) 0%, rgba(250, 236, 218, 0.86) 72%, rgba(250, 236, 218, 0) 100%);
    }

    [b-xtdjviig2t] .toggle-sidebar {
        display: none !important;
    }

    /* Sidebar starts below the floating mobile header */
    [b-xtdjviig2t] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [b-xtdjviig2t] .sidebar.visible {
        transform: translateX(0);
    }

    [b-xtdjviig2t] .sidebar.hidden {
        transform: translateX(-100%);
    }

    /* Adjust app layout for mobile top bar */
    .app-layout[b-xtdjviig2t],
    [b-xtdjviig2t] .app-layout {
        display: block;
        padding-top: 60px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        background-color: #FAECDA;
    }

    .container-v3[b-xtdjviig2t] {
        margin-left: 0;
    }

    [b-xtdjviig2t] .main-footer {
        margin-left: 0 !important;
    }
}

/* ≤768px: Reinforce sidebar positioning for phones */
@media (max-width: 768px) {
    .app-layout[b-xtdjviig2t],
    [b-xtdjviig2t] .app-layout {
        padding-top: 60px;
        overflow-x: hidden;
    }

    [b-xtdjviig2t] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-xtdjviig2t] .sidebar.visible {
        transform: translateX(0);
    }

    [b-xtdjviig2t] .sidebar.hidden {
        transform: translateX(-100%);
    }

    .container-v3[b-xtdjviig2t] {
        padding: 0 var(--mobile-page-margin) 40px;
    }
}

/* Mobile top bar - now handled by shared MobileTopBar component */
/* Removed redundant ::deep .mobile-top-bar styles - see Components/MobileTopBar.razor.css */

/* Main content container accounting for sidebar */
.container-v3[b-xtdjviig2t] {
    flex: 1;
    max-width: 1200px;
    margin: 30px auto;
    margin-left: 280px;
    min-width: 0;
    padding: 0 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transition: margin-left .3s ease;
    box-sizing: border-box;
}

.container-v3.sidebar-hidden[b-xtdjviig2t] {
    margin-left: 0;
}

@media (max-width: 1024px) {
    .container-v3[b-xtdjviig2t],
    .container-v3.sidebar-hidden[b-xtdjviig2t] {
        flex: none;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        padding: 0 0 44px;
        gap: 34px;
    }

    .featured-hero[b-xtdjviig2t] {
        width: auto;
        min-height: 420px;
        margin: 22px 18px 18px;
        border-radius: 18px;
        background-position: center;
        box-shadow: 0 16px 34px rgba(106, 72, 42, 0.13);
    }

    .featured-hero .overlay[b-xtdjviig2t] {
        background:
            linear-gradient(90deg, rgba(30, 18, 10, 0.52) 0%, rgba(35, 20, 12, 0.34) 56%, rgba(35, 20, 12, 0.18) 100%);
    }

    .hero-content[b-xtdjviig2t] {
        min-height: 420px;
        justify-content: center;
        padding: 56px 40px 38px;
        max-width: min(680px, 100%);
        box-sizing: border-box;
    }

    .hero-title[b-xtdjviig2t] {
        font-size: clamp(2.75rem, 8vw, 4rem);
        line-height: 1.08;
        letter-spacing: 0;
    }

    .hero-subtitle[b-xtdjviig2t] {
        max-width: 34rem;
        font-size: clamp(1.08rem, 3vw, 1.35rem);
        line-height: 1.38;
    }

    .explore-section[b-xtdjviig2t] {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }

    .explore-title[b-xtdjviig2t] {
        font-size: clamp(2.65rem, 8.5vw, 4.4rem);
        line-height: 1.12;
        letter-spacing: 0;
    }
}

@media (max-width: 768px) {
    .container-v3[b-xtdjviig2t],
    .container-v3.sidebar-hidden[b-xtdjviig2t] {
        max-width: 680px;
        padding-bottom: 40px;
        gap: 30px;
    }
}

@media (max-width: 680px) {
    .featured-hero[b-xtdjviig2t] {
        min-height: 430px;
        margin: 22px var(--mobile-page-margin, 16px) 18px;
        border-radius: 16px;
        background-position: 58% center;
    }

    .hero-content[b-xtdjviig2t] {
        min-height: 430px;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 70px 20px 26px;
        gap: 12px;
    }

    .hero-title[b-xtdjviig2t] {
        max-width: 18rem;
        font-size: clamp(2.25rem, 10vw, 2.72rem);
    }

    .hero-subtitle[b-xtdjviig2t] {
        max-width: 19.5rem;
        font-size: clamp(1.05rem, 5.2vw, 1.28rem);
        line-height: 1.36;
    }

    .cta-primary[b-xtdjviig2t] {
        width: 100%;
        max-width: 220px;
        min-height: 50px;
        border-radius: 12px;
        padding: 12px 18px;
    }

    .explore-section[b-xtdjviig2t] {
        padding: 0 var(--mobile-page-margin, 16px);
    }

    .explore-title[b-xtdjviig2t] {
        font-size: clamp(2.75rem, 12vw, 3.8rem);
        line-height: 1.12;
        margin: 0;
    }
}

@media (max-width: 420px) {
    .hero-content[b-xtdjviig2t] {
        padding-top: 68px;
    }

    .hero-title[b-xtdjviig2t] {
        font-size: clamp(2.18rem, 9.7vw, 2.5rem);
    }
}

/* Footer alignment identical to FrontPage */
/* --- New Footer Styles --- */

[b-xtdjviig2t] .main-footer {
    /* This creates the full-width "floor" for the page */
    /* width: calc(100% - 280px);  Subtract sidebar width from total width */
    margin-left: 280px;
    /* Start where main content starts */
    background-color: #FAF3E5;
    /* Match the warm card background color */
    padding: 60px 0 30px 0;
    margin-top: 80px;
    /* Space above the footer */
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    /* Remove grid-area, as the footer is no longer part of the content grid */
}


[b-xtdjviig2t] .main-footer.sidebar-hidden {
    margin-left: 0;
    /* Remove left margin when sidebar is hidden */
    width: 100%;
}



/* A container to keep the footer content aligned with the main page content */
[b-xtdjviig2t] .footer-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
}

/* When sidebar is hidden, use full width container */
[b-xtdjviig2t] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
    /* Center when sidebar is hidden */
}


/* 1. Brand Section */
[b-xtdjviig2t] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-xtdjviig2t] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-xtdjviig2t] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* 2. Navigation Links Section */
[b-xtdjviig2t] .footer-nav-links {
    /* Use Flexbox to group and center the items */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Allows wrapping on smaller screens */
    /* The 'gap' now controls the space BETWEEN the columns */
    gap: 80px;
    /* Adjust this value to your liking (e.g., 60px, 100px) */

    margin-bottom: 40px;
}

[b-xtdjviig2t] .footer-section {
    padding: 0 var(--mobile-page-margin);
    /* Adds some space for smaller screens */
}

[b-xtdjviig2t] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-xtdjviig2t] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-xtdjviig2t] .footer-section ul li {
    margin-bottom: 10px;
}

[b-xtdjviig2t] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-xtdjviig2t] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

/* 3. Bottom Bar (Utilities & Legal) */
[b-xtdjviig2t] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    /* Allows items to wrap on small screens */
    gap: 20px;
}

[b-xtdjviig2t] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-xtdjviig2t] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-xtdjviig2t] .footer-languages a:hover,
[b-xtdjviig2t] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

/* NEW: Wrapper for the right-aligned text */
[b-xtdjviig2t] .footer-legal-origin {
    text-align: right;
}

/* NEW: Style for the "Made by" line */
[b-xtdjviig2t] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
    /* Add a little space below it */
}


[b-xtdjviig2t] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    /* Remove default paragraph margins */
    text-align: left;
    /* Ensure it stays right-aligned */
}


/* Sidebar overlay for mobile */
.sidebar-overlay[b-xtdjviig2t] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, .4);
    z-index: 9;
}

.sidebar-overlay.hidden[b-xtdjviig2t] {
    display: none;
}

/* Responsive switches */
@media (max-width: 1024px) {
    .mobile-top-bar[b-xtdjviig2t] {
        display: flex;
    }
}
/* /Components/Pages/VaultMessages.razor.rz.scp.css */
/* ===========================================
   LAYOUT & NAVIGATION STYLES
   =========================================== */

/* Global body/html overflow prevention - REMOVED */

/* App Layout */
[b-byq7ws25rc] .app-layout {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
    /* inherited font-sans */
    background-color: #FAECDA;
    padding-top: 80px;
    /* Account for fixed logo */
}

/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
    [b-byq7ws25rc] .toggle-sidebar {
        display: none !important;
    }
}

/* Sidebar */
[b-byq7ws25rc] .sidebar {
    width: 280px;
    background: #FAECDA;
    padding: 1.5rem;
    border-right: 1px solid #f0dad3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease;
}

[b-byq7ws25rc] .sidebar.hidden {
    transform: translateX(-100%);
}

[b-byq7ws25rc] .sidebar .logo {
    font-family: var(--font-sans) !important;
    font-size: 1.4em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 2rem;
}

[b-byq7ws25rc] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-byq7ws25rc] .sidebar a:hover {
    color: #000;
}

[b-byq7ws25rc] .sidebar .btn-login {
    width: 100%;
    background: #FBCFA8;
    margin-bottom: 1rem;
}

/* Sidebar Logo Styles */
[b-byq7ws25rc] .sidebar-top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1.0rem;
}

[b-byq7ws25rc] .app-logo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

[b-byq7ws25rc] .app-logo-link:hover {
    outline: none;
    border: none;
    background: none;
}

[b-byq7ws25rc] .app-logo-link:focus {
    outline: none;
    border: none;
    background: none;
}

[b-byq7ws25rc] .sidebar-logo {
    text-align: center;
}

[b-byq7ws25rc] .sidebar-logo img {
    display: inline-block;
    max-width: 180px;
    width: auto;
    height: 50px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

[b-byq7ws25rc] .sidebar a {
    display: block;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #4F4A45;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

[b-byq7ws25rc] .sidebar a:hover {
    color: #000;
}

/* Sidebar Bottom User Section */
[b-byq7ws25rc] .sidebar-bottom {
    margin-top: auto;
    padding-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[b-byq7ws25rc] .sidebar-divider {
    width: 100%;
    height: 1px;
    background-color: #e0d6d1;
    margin-bottom: 1rem;
}

[b-byq7ws25rc] .sidebar-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
}

[b-byq7ws25rc] .sidebar-user:hover {
    background-color: rgba(255, 228, 210, 0.5);
}

[b-byq7ws25rc] .user-avatar-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffc4b3, #ffdacf);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--text, #4F4A45);
}

[b-byq7ws25rc] .user-name {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-weight: 600;
}

/* User Dropdown */
[b-byq7ws25rc] .user-dropdown-container {
    position: relative;
    display: inline-block;
}

[b-byq7ws25rc] .user-dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-40%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 150px;
    padding: 8px 0;
    animation: fadeIn-b-byq7ws25rc 0.2s ease-in-out;
}

@keyframes fadeIn-b-byq7ws25rc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[b-byq7ws25rc] .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F4A45;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

[b-byq7ws25rc] .dropdown-item:hover {
    background-color: #f0dad3;
}


/* Button Styles */
[b-byq7ws25rc] .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    transition: background-color 0.3s ease;
    background-color: #F5DDC3;
    color: #4F4A45;
    border: 1px solid #EADDC0;
}

[b-byq7ws25rc] .btn:hover {
    background-color: #FADDAA;
}

[b-byq7ws25rc] .btn-login {
    background-color: #FBCFA8;
}

[b-byq7ws25rc] .btn-primary {
    padding: 12px 25px;
    margin-top: 10px;
    background-color: #FBCFA8;
}

[b-byq7ws25rc] .btn-secondary {
    padding: 8px 18px;
    margin-top: 10px;
}

/* Load More Button */
[b-byq7ws25rc] .load-more-container {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1rem;
}

[b-byq7ws25rc] .load-more-btn {
    background: #7B5A53;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(123, 90, 83, 0.2);
}

[b-byq7ws25rc] .load-more-btn:hover:not(:disabled) {
    background: #5d453f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 90, 83, 0.3);
}

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

[b-byq7ws25rc] .load-more-btn:disabled:hover {
    background: #7B5A53;
    box-shadow: 0 2px 8px rgba(123, 90, 83, 0.2);
}

/* Toggle Sidebar Button */
[b-byq7ws25rc] .toggle-sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: #ffece3;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 100;
    transition: left 0.3s ease;
}

/* Main Messages Container - Two Column Layout */
[b-byq7ws25rc] .messages-container {
    flex: 1;
    min-width: 0;
    margin-left: 280px;
    padding: 0;
    max-width: 1200px;
    box-sizing: border-box;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    background: #FAECDA;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "main-content sidebar-content";
    gap: 0;
}

[b-byq7ws25rc] .messages-container.sidebar-hidden {
    margin-left: 0;
}

/* Sidebar Overlay */
.sidebar-overlay[b-byq7ws25rc] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9;
    transition: opacity 0.3s ease;
    touch-action: none;
    /* Prevent scroll-through when overlay is visible */
}

.sidebar-overlay.hidden[b-byq7ws25rc] {
    display: none;
}

/* ===========================================
   VAULT MESSAGES - ELEGANT MASONRY DESIGN
   =========================================== */

/* Page Layout & Container */
[b-byq7ws25rc] .messages-container {
    min-height: calc(100vh - 60px);
    padding: 0;
    background: #FAECDA;
}

/* Vault Header */
[b-byq7ws25rc] .vault-header {
    grid-area: header;
    text-align: center;
    padding: 3rem 2rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Main Content Area (left column) */
[b-byq7ws25rc] .main-content-area {
    grid-area: main-content;
    padding: 0 2rem 3rem 2rem;
    position: relative;
}

[b-byq7ws25rc] .loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 3rem 0;
}

[b-byq7ws25rc] .vault-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    color: #5B4F45;
}

[b-byq7ws25rc] .vault-loader-image {
    width: 90px;
    height: auto;
    animation: candleGlow-b-byq7ws25rc 1.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 10px 26px rgba(251, 160, 97, 0.35));
}

[b-byq7ws25rc] .vault-loader-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #2C2A28;
    margin: 0;
}

[b-byq7ws25rc] .vault-loader-subtitle {
    /* inherited font-sans */
    font-size: 1rem;
    color: #7B5A53;
    margin: 0;
}

@keyframes candleGlow-b-byq7ws25rc {
    0% {
        transform: translateY(0px) scale(1);
        opacity: 0.95;
    }

    50% {
        transform: translateY(-1px) scale(1.03);
        opacity: 1;
    }

    100% {
        transform: translateY(1px) scale(0.98);
        opacity: 0.9;
    }
}

/* Sidebar Content Area (right column) */
[b-byq7ws25rc] .sidebar-content-area {
    grid-area: sidebar-content;
    padding: 0 2rem 3rem 1.5rem;
    position: relative;
}

[b-byq7ws25rc] .vault-header h1 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: var(--mobile-hero-heading-weight);
    color: #2C2A28;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

[b-byq7ws25rc] .vault-subtitle {
    /* inherited font-sans */
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6B5B57;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* ===========================================
   TODAY'S MEMORY CARD - SIDEBAR PLACEMENT
   =========================================== */

[b-byq7ws25rc] .today-memory-wrapper {
    margin-bottom: 2rem;
}

[b-byq7ws25rc] .today-memory-card {
    background: #FFF8F3;
    border: 1px solid #F0E6D2;
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    box-shadow: 0 4px 20px rgba(43, 42, 40, 0.08);
    position: relative;
    transform: rotate(-0.3deg);
    transition: all 0.3s ease;
}

[b-byq7ws25rc] .today-memory-card:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 6px 30px rgba(43, 42, 40, 0.12);
}

[b-byq7ws25rc] .today-memory-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

[b-byq7ws25rc] .today-memory-icon {
    font-size: 1.2rem;
}

[b-byq7ws25rc] .today-memory-title {
    /* inherited font-sans */
    font-weight: 600;
    font-size: 0.9rem;
    color: #7B5A53;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-byq7ws25rc] .today-memory-text {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.6;
    color: #2C2A28;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

[b-byq7ws25rc] .today-memory-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

[b-byq7ws25rc] .today-memory-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F0E6D2;
}

[b-byq7ws25rc] .today-memory-name {
    /* inherited font-sans */
    font-weight: 500;
    font-size: 0.9rem;
    color: #7B5A53;
}

[b-byq7ws25rc] .today-memory-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

[b-byq7ws25rc] .today-memory-date {
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #A67B5B;
    opacity: 0.8;
}

/* ===========================================
   FILTER & SORT SECTION
   =========================================== */

[b-byq7ws25rc] .vault-filters {
    display: flex;
    justify-content: flex-end;
    padding: 0 2rem;
    margin-bottom: 2rem;
    position: relative;
}

[b-byq7ws25rc] .filter-sort-btn {
    background: #F5E6D3;
    border: 1px solid #E8DCC0;
    border-radius: 25px;
    padding: 0.6rem 1.2rem;
    /* inherited font-sans */
    font-size: 0.9rem;
    font-weight: 500;
    color: #7B5A53;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-byq7ws25rc] .filter-sort-btn:hover {
    background: #EFDCC7;
    border-color: #D4C19A;
}

[b-byq7ws25rc] .filter-icon {
    font-size: 0.8rem;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

[b-byq7ws25rc] .filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #E8DCC0;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(43, 42, 40, 0.15);
    padding: 1.5rem;
    width: 280px;
    z-index: 100;
    margin-top: 0.5rem;
}

[b-byq7ws25rc] .filter-dropdown-title {
    /* inherited font-sans */
    font-size: 1rem;
    font-weight: 600;
    color: #2C2A28;
    margin-bottom: 1rem;
}

[b-byq7ws25rc] .filter-group {
    margin-bottom: 1rem;
}

[b-byq7ws25rc] .filter-label {
    display: block;
    /* inherited font-sans */
    font-size: 0.85rem;
    font-weight: 500;
    color: #7B5A53;
    margin-bottom: 0.4rem;
}

[b-byq7ws25rc] .filter-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #E8DCC0;
    border-radius: 8px;
    /* inherited font-sans */
    font-size: 0.9rem;
    background: white;
    color: #2C2A28;
}

[b-byq7ws25rc] .filter-actions {
    margin-top: 1.5rem;
    text-align: right;
}

[b-byq7ws25rc] .filter-close-btn {
    background: #7B5A53;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    /* inherited font-sans */
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

[b-byq7ws25rc] .filter-close-btn:hover {
    background: #6B4A43;
}

/* ===========================================
   MASONRY GRID LAYOUT - LEFT COLUMN
   =========================================== */

[b-byq7ws25rc] .vault-masonry {
    column-count: 2;
    column-gap: 1.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 1024px) {
    [b-byq7ws25rc] .vault-masonry {
        column-count: 2;
        column-gap: 1.2rem;
    }
}

@media (max-width: 640px) {
    [b-byq7ws25rc] .vault-masonry {
        column-count: 1;
        padding: 0 1rem 3rem;
    }
}

/* ===========================================
   VAULT CARDS - ORGANIC MASONRY DESIGN
   =========================================== */

[b-byq7ws25rc] .vault-card {
    break-inside: avoid;
    background: white;
    border: 1px solid #F0E6D2;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 15px rgba(43, 42, 40, 0.08);
    /* Enhanced shadow for button feel */
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text selection */
    cursor: pointer;
    /* Universal clickable cue */
}

[b-byq7ws25rc] .vault-card:hover {
    transform: translateY(-4px);
    /* Elegant lift effect */
    box-shadow: 0 8px 25px rgba(43, 42, 40, 0.12);
    /* Soft, premium shadow */
    border-color: #E8DCC0;
}

[b-byq7ws25rc] .vault-card:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(43, 42, 40, 0.08);
    transition: all 0.1s ease;
}

/* Card Clickable Area */
[b-byq7ws25rc] .vault-card-clickable {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    transition: all 0.2s ease;
}

[b-byq7ws25rc] .vault-card-clickable:hover {
    background-color: rgba(240, 230, 210, 0.3);
}

[b-byq7ws25rc] .vault-card-clickable:active {
    transform: scale(0.98) translateY(1px);
    background-color: rgba(240, 230, 210, 0.5);
    transition: all 0.1s ease;
}

/* Mobile Chat Hint - Layer 3 Affordance */
[b-byq7ws25rc] .vault-card-chat-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    opacity: 0.6;
    color: #8B7355;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

/* Show hint more prominently on mobile */
@media (max-width: 768px) {
    [b-byq7ws25rc] .vault-card-chat-hint {
        opacity: 0.8;
    }

    [b-byq7ws25rc] .vault-card:hover .vault-card-chat-hint {
        opacity: 1;
        color: #6B5B47;
    }
}

/* Hide hint on desktop hover for clean experience */
@media (min-width: 769px) {
    [b-byq7ws25rc] .vault-card:hover .vault-card-chat-hint {
        opacity: 0.3;
    }
}

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

[b-byq7ws25rc] .vault-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F0E6D2;
    flex-shrink: 0;
}

[b-byq7ws25rc] .vault-card-name {
    /* inherited font-sans */
    font-weight: 500;
    font-size: 0.85rem;
    color: #7B5A53;
    margin-left: 0.5rem;
    flex-grow: 1;
}

/* Three Dots Menu Button */
[b-byq7ws25rc] .three-dots-menu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0.6;
    z-index: 10;
}

[b-byq7ws25rc] .three-dots-menu:hover {
    background-color: rgba(167, 123, 91, 0.1);
    opacity: 1;
    transform: scale(1.1);
}

[b-byq7ws25rc] .three-dots-menu:active {
    transform: scale(0.95);
}

[b-byq7ws25rc] .three-dots-menu svg {
    width: 16px;
    height: 16px;
    fill: #7B5A53;
}

/* Vault Card Dropdown Menu */
[b-byq7ws25rc] .vault-card-dropdown {
    position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    background: white;
    border: 1px solid #E8DCC0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(43, 42, 40, 0.15);
    z-index: 1000;
    min-width: 140px;
    overflow: hidden;
}

[b-byq7ws25rc] .vault-action-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1205;
    background: rgba(43, 42, 40, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    touch-action: none;
}

/* Keep the global host button below the temporary page-level sheet. */
:global(.app-container:has(.vault-action-sheet) .floating-host-container)[b-byq7ws25rc] {
    z-index: 1204;
}

[b-byq7ws25rc] .vault-action-sheet {
    position: fixed;
    left: 50%;
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    width: min(92vw, 380px);
    z-index: 1210;
    background: #fffaf5;
    border: 1px solid rgba(216, 168, 138, 0.5);
    border-radius: 22px;
    padding: 0.4rem 0;
    box-shadow: 0 28px 58px rgba(43, 42, 40, 0.24);
    transform: translate(-50%, 18px);
    animation: vault-sheet-rise-b-byq7ws25rc 0.2s ease-out forwards;
    overflow: hidden;
}

[b-byq7ws25rc] .vault-action-sheet-item {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.2rem;
    color: #4b2e2e;
    font-size: 0.96rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

[b-byq7ws25rc] .vault-action-sheet-item:hover,
[b-byq7ws25rc] .vault-action-sheet-item:focus-visible {
    background: #f7f0ea;
    outline: none;
}

[b-byq7ws25rc] .vault-action-sheet-item:active {
    background: #efe3da;
}

[b-byq7ws25rc] .vault-action-sheet-item.danger {
    color: #a94636;
}

[b-byq7ws25rc] .vault-action-sheet-item svg {
    flex: 0 0 auto;
    color: currentColor;
}

@keyframes vault-sheet-rise-b-byq7ws25rc {
    from {
        opacity: 0;
        transform: translate(-50%, 18px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

[b-byq7ws25rc] .vault-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    /* inherited font-sans */
    font-size: 0.85rem;
    color: #7B5A53;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

[b-byq7ws25rc] .vault-dropdown-item:hover {
    background-color: #F5E6D3;
}

[b-byq7ws25rc] .vault-dropdown-item:active {
    background-color: #E8DCC0;
}

[b-byq7ws25rc] .vault-dropdown-item svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.7;
}

[b-byq7ws25rc] .unsave-btn {
    background: none;
    border: none;
    color: #A67B5B;
    /* inherited font-sans */
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateX(10px);
}

[b-byq7ws25rc] .vault-card:hover .unsave-btn {
    opacity: 1;
    transform: translateX(0);
}

[b-byq7ws25rc] .unsave-btn:hover {
    background: #F5E6D3;
    color: #7B5A53;
}

/* Card Message */
[b-byq7ws25rc] .vault-card-message {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: #3A3228;
    margin-bottom: 1rem;
    font-weight: 400;
}

/* Match LovedOneChat image sizing for inline images in vault messages */
[b-byq7ws25rc] .vault-card-message img {
    max-width: 220px !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    margin: 1rem 0 1.1rem;
    border-radius: 12px;
    object-fit: cover !important;
    display: block;
    box-shadow: 0 12px 26px rgba(75, 46, 38, 0.16), 0 2px 6px rgba(75, 46, 38, 0.10);
}

@media (max-width: 768px) {
    [b-byq7ws25rc] .vault-card-message img {
        max-width: 160px !important;
        max-height: 160px !important;
    }
}

/* Card Footer */
[b-byq7ws25rc] .vault-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-byq7ws25rc] .vault-card-context {
    display: flex;
    align-items: center;
}

[b-byq7ws25rc] .context-text {
    /* inherited font-sans */
    font-size: 0.8rem;
    color: #A67B5B;
    opacity: 0.8;
    font-style: italic;
}

/* ===========================================
   FOOTER STYLES
   =========================================== */

/* Footer Styles */
[b-byq7ws25rc] .main-footer {
    /* Keep footer aligned with content width and sidebar offset */
    width: calc(100% - 280px);
    max-width: min(1200px, calc(100% - 280px));
    margin-left: 280px;
    margin-right: auto;
    background-color: #FAF3E5;
    padding: 60px 0 30px 0;
    margin-top: 80px;
    color: #4F4A45;
    border-top: 1px solid #f0dad3;
    box-sizing: border-box;
}

[b-byq7ws25rc] .main-footer.sidebar-hidden {
    /* Match the main container width when sidebar is hidden */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

[b-byq7ws25rc] .footer-container {
    /* Keep the inner footer content aligned with main container padding */
    max-width: 1200px;
    width: 100%;
    margin: 30px auto;
    padding: 0 20px;
    transition: margin-left 0.3s ease;
    box-sizing: border-box;
}

[b-byq7ws25rc] .main-footer.sidebar-hidden .footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

[b-byq7ws25rc] .footer-brand {
    text-align: center;
    margin-bottom: 50px;
}

[b-byq7ws25rc] .footer-logo img {
    height: 45px;
    width: auto;
    margin-bottom: 15px;
}

[b-byq7ws25rc] .footer-tagline {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

[b-byq7ws25rc] .footer-nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 40px;
}

[b-byq7ws25rc] .footer-section {
    padding: 0 var(--mobile-page-margin);
}

[b-byq7ws25rc] .footer-section h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.1em;
    font-weight: 700;
    color: #4F4A45;
    margin-bottom: 15px;
}

[b-byq7ws25rc] .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-byq7ws25rc] .footer-section ul li {
    margin-bottom: 10px;
}

[b-byq7ws25rc] .footer-section ul li a {
    color: #666;
    text-decoration: none;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

[b-byq7ws25rc] .footer-section ul li a:hover {
    color: #4F4A45;
    text-decoration: underline;
}

[b-byq7ws25rc] .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid #f0dad3;
    flex-wrap: wrap;
    gap: 20px;
}

[b-byq7ws25rc] .footer-languages {
    display: flex;
    gap: 15px;
    align-items: center;
}

[b-byq7ws25rc] .footer-languages a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

[b-byq7ws25rc] .footer-languages a:hover,
[b-byq7ws25rc] .footer-languages a.active {
    background-color: #FBCFA8;
    color: #4F4A45;
}

[b-byq7ws25rc] .footer-legal-origin {
    text-align: right;
}

[b-byq7ws25rc] .footer-made-by {
    font-size: 0.85em;
    color: #888;
    margin: 0 0 5px 0;
}

[b-byq7ws25rc] .footer-copyright {
    font-size: 0.85em;
    color: #888;
    margin: 0;
    text-align: left;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

@media (max-width: 768px) {
    [b-byq7ws25rc] .vault-header {
        padding: 2rem 1rem 1.5rem;
    }

    [b-byq7ws25rc] .vault-header h1 {
        font-size: 2rem;
    }

    [b-byq7ws25rc] .vault-subtitle {
        font-size: 1rem;
    }

    [b-byq7ws25rc] .today-memory-wrapper {
        padding: 0 1rem;
    }

    [b-byq7ws25rc] .today-memory-card {
        padding: 1.5rem;
    }

    [b-byq7ws25rc] .vault-filters {
        padding: 0 1rem;
    }

    [b-byq7ws25rc] .filter-dropdown {
        width: calc(100vw - 2rem);
        right: 1rem;
    }
}

@media (max-width: 480px) {
    [b-byq7ws25rc] .vault-header h1 {
        font-size: 1.8rem;
    }

    [b-byq7ws25rc] .today-memory-card {
        padding: 1.2rem;
    }

    [b-byq7ws25rc] .vault-card {
        padding: 1.2rem;
    }
}

/* Mobile touch scroll fixes - REMOVED to fix window scrolling */
@media (max-width: 768px) {
    /*
    ::deep .app-layout {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch; 
    }

    ::deep .container-v3,
    ::deep .messages-container {
        overflow-x: hidden;
        touch-action: pan-y pinch-zoom;
        overscroll-behavior: contain;
    }
    */
}

/* Responsive Layout Styles */
@media (max-width: 1024px) {
    [b-byq7ws25rc] .toggle-sidebar {
        display: none;
    }

    [b-byq7ws25rc] .app-layout {
        padding-top: 60px;
    }

    [b-byq7ws25rc] .messages-container {
        margin-left: 0 !important;
        margin-top: 70px;
        padding: 1rem;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main-content"
            "sidebar-content";
    }

    [b-byq7ws25rc] .main-content-area {
        padding: 1rem 0;
    }

    [b-byq7ws25rc] .sidebar-content-area {
        padding: 1rem 0 2rem;
    }

    [b-byq7ws25rc] .sidebar-content-area::before {
        display: none;
    }

    [b-byq7ws25rc] .main-footer {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100%;
    }

    [b-byq7ws25rc] .footer-container {
        margin: 0 auto;
        padding: 0 1rem;
    }

    [b-byq7ws25rc] .sidebar {
        top: 60px;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
    }

    [b-byq7ws25rc] .sidebar.visible {
        transform: translateX(0);
    }

    [b-byq7ws25rc] .sidebar.hidden {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    [b-byq7ws25rc] .messages-container {
        padding: var(--mobile-page-margin);
        margin-top: 60px;
    }

    [b-byq7ws25rc] .filters-panel.mobile-open {
        left: max(0.85rem, env(safe-area-inset-left));
        right: max(0.85rem, env(safe-area-inset-right));
        bottom: calc(0.85rem + env(safe-area-inset-bottom));
    }

    [b-byq7ws25rc] .vault-header {
        padding: 1.5rem var(--mobile-page-margin);
    }

    [b-byq7ws25rc] .vault-header h1 {
        font-size: 2rem;
    }

    [b-byq7ws25rc] .today-memory-wrapper {
        padding: 0 var(--mobile-page-margin);
        margin: 1.5rem auto 2rem;
    }

    [b-byq7ws25rc] .vault-filters {
        padding: 0 var(--mobile-page-margin);
    }

    [b-byq7ws25rc] .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    [b-byq7ws25rc] .footer-section {
        text-align: center;
    }

    [b-byq7ws25rc] .footer-bottom {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }

    [b-byq7ws25rc] .footer-legal-origin {
        text-align: center;
    }

    [b-byq7ws25rc] .footer-copyright {
        text-align: center;
    }
}

@media (max-width: 480px) {

    [b-byq7ws25rc] .toggle-sidebar,
    [b-byq7ws25rc] .mobile-top-bar,
    [b-byq7ws25rc] .sidebar-overlay,
    [b-byq7ws25rc] .sidebar {
        display: block;
    }

    [b-byq7ws25rc] .messages-container {
        padding: var(--mobile-page-margin);
    }

    [b-byq7ws25rc] .vault-header h1 {
        font-size: 1.8rem;
    }

    [b-byq7ws25rc] .mobile-top-bar {
        display: flex;
    }
}

/* ===========================================
   SIDEBAR & LAYOUT COMPATIBILITY
   =========================================== */

/* Call to Action for non-authenticated users - Sidebar placement */
[b-byq7ws25rc] .vault-cta {
    text-align: center;
    padding: 2rem 1.5rem;
}

[b-byq7ws25rc] .vault-cta h2 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 300;
    color: #2C2A28;
    margin-bottom: 1rem;
}

[b-byq7ws25rc] .vault-cta p {
    /* inherited font-sans */
    font-size: 0.95rem;
    color: #6B5B57;
    margin-bottom: 1.5rem;
}

[b-byq7ws25rc] .cta-button {
    background: #7B5A53;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.8rem 1.8rem;
    /* inherited font-sans */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-byq7ws25rc] .cta-button:hover {
    background: #6B4A43;
    transform: translateY(-1px);
}

/* ===========================================
   UNSAVE CONFIRMATION MODAL STYLES
   =========================================== */

/* Modal Overlay for Centering and Background */
[b-byq7ws25rc] .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

[b-byq7ws25rc] .modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Modal Content for Unsave Confirmation */
[b-byq7ws25rc] .modal-content.layered-modal {
    background-color: rgb(255, 242, 236);
    /* Match page background */
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width: 450px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    padding: 24px;
}

[b-byq7ws25rc] .modal-overlay.visible .modal-content {
    transform: scale(1);
}

/* Modal Header */
[b-byq7ws25rc] .modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 16px 0;
    margin-bottom: 8px;
}

[b-byq7ws25rc] .modal-close-icon-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

[b-byq7ws25rc] .modal-close-icon-button:hover {
    color: #666;
    background-color: rgba(0, 0, 0, 0.05);
}

/* Modal Body */
[b-byq7ws25rc] .modal-body {
    padding: 0 8px 24px 8px;
}

[b-byq7ws25rc] .modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 16px 0;
    text-align: center;
}

[b-byq7ws25rc] .modal-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
    text-align: center;
    line-height: 1.5;
}

/* Message Preview Card */
[b-byq7ws25rc] .message-preview-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    text-align: left;
}

[b-byq7ws25rc] .preview-content {
    position: relative;
}

[b-byq7ws25rc] .preview-text {
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0;
    font-style: italic;
}

/* Modal Actions */
[b-byq7ws25rc] .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f0f0f0;
}

/* Button Styles */
[b-byq7ws25rc] .btn-secondary-action {
    background-color: transparent;
    color: #666;
    border: 1px solid #e5e5e5;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-byq7ws25rc] .btn-secondary-action:hover {
    background-color: #f5f5f5;
    border-color: #d1d1d1;
    color: #555;
}

[b-byq7ws25rc] .btn-danger-action {
    background-color: #e53e3e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-byq7ws25rc] .btn-danger-action:hover {
    background-color: #c53030;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

[b-byq7ws25rc] .btn-danger-action:active {
    transform: translateY(0);
}

/* Mobile Responsiveness for Modal */
@media (max-width: 768px) {
    [b-byq7ws25rc] .modal-content.layered-modal {
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;
    }

    [b-byq7ws25rc] .modal-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    [b-byq7ws25rc] .modal-subtitle {
        font-size: 15px;
        margin-bottom: 20px;
    }

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

    [b-byq7ws25rc] .btn-secondary-action,
    [b-byq7ws25rc] .btn-danger-action {
        width: 100%;
        padding: 14px 24px;
    }
}

[b-byq7ws25rc] .filters-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #E8DCC0;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 28px rgba(124, 90, 83, 0.12);
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: 0;
    max-width: 360px;
    width: 100%;
    position: sticky;
    top: 2rem;
}

[b-byq7ws25rc] .filters-panel-header {
    /* inherited font-sans */
    font-size: 1.05rem;
    font-weight: 600;
    color: #5A413A;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}

[b-byq7ws25rc] .filters-panel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

[b-byq7ws25rc] .mobile-filters-trigger-row,
[b-byq7ws25rc] .mobile-filters-backdrop {
    display: none;
}

[b-byq7ws25rc] .mobile-filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #D8A88A;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #5A413A;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
}

[b-byq7ws25rc] .mobile-filters-trigger.has-active {
    background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}

[b-byq7ws25rc] .mobile-filters-trigger-badge {
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #7B5A53;
    color: #fff;
    font-size: 0.8rem;
}

[b-byq7ws25rc] .mobile-filters-close {
    display: none;
    border: none;
    border-radius: 999px;
    background: rgba(123, 90, 83, 0.1);
    color: #5A413A;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

[b-byq7ws25rc] .filters-panel-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.75rem;
}

[b-byq7ws25rc] .filters-panel-section:last-of-type {
    margin-bottom: 0;
}

[b-byq7ws25rc] .filters-panel-label {
    /* inherited font-sans */
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A67B5B;
}

[b-byq7ws25rc] .filter-pill-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

[b-byq7ws25rc] .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(126, 100, 92, 0.4);
    background: rgba(255, 245, 237, 0.9);
    color: #6f5a55;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-byq7ws25rc] .filter-pill:hover,
[b-byq7ws25rc] .filter-pill:focus-visible {
    border-color: rgba(126, 100, 92, 0.7);
    color: #4b3a34;
    transform: translateY(-1px);
}

[b-byq7ws25rc] .filter-pill.active {
    background: #7b5a53;
    color: #fff8f2;
    border-color: #7b5a53;
    box-shadow: 0 8px 18px rgba(90, 64, 57, 0.22);
}

[b-byq7ws25rc] .filter-pill-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

[b-byq7ws25rc] .loved-one-pill {
    padding: 0.45rem 1rem 0.45rem 0.55rem;
}

[b-byq7ws25rc] .filters-panel-link {
    background: none;
    border: none;
    color: #7b5a53;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    text-align: left;
    padding: 0;
}

@media (max-width: 1024px) {
    [b-byq7ws25rc] .filters-panel {
        display: none;
        position: static;
        max-width: none;
        margin: 0 auto 2rem;
        width: 90%;
    }

    [b-byq7ws25rc] .filters-panel.mobile-open {
        display: block;
        position: fixed;
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
        bottom: calc(1rem + env(safe-area-inset-bottom));
        top: auto;
        z-index: 1300;
        margin: 0;
        width: auto;
        max-width: none;
        max-height: min(78vh, calc(100dvh - 6rem));
        overflow-y: auto;
        padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
    }

    [b-byq7ws25rc] .mobile-filters-trigger-row {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 1rem;
    }

    [b-byq7ws25rc] .mobile-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(43, 42, 40, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    [b-byq7ws25rc] .mobile-filters-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
}

/* ===========================================
   EMPTY STATE
   =========================================== */

[b-byq7ws25rc] .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 1px dashed #E8DCC0;
}

[b-byq7ws25rc] .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

[b-byq7ws25rc] .empty-state h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: #5A413A;
    margin-bottom: 0.75rem;
}

[b-byq7ws25rc] .empty-state p {
    /* inherited font-sans */
    font-size: 1rem;
    color: #8B7355;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

[b-byq7ws25rc] .empty-state-action {
    background: linear-gradient(135deg, #7B5A53, #A86F5C);
    color: #fffaf6;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    /* inherited font-sans */
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-byq7ws25rc] .empty-state-action:hover {
    background: linear-gradient(135deg, #6B4A43, #915847);
    transform: translateY(-2px);
}

/* VaultMessages mobile polish - keeps the saved message cards but fixes the page frame. */
@media (max-width: 1024px) {
    [b-byq7ws25rc] .mobile-floating-header {
        z-index: 1200;
        background:
            linear-gradient(180deg, rgba(250, 236, 218, 0.97) 0%, rgba(250, 236, 218, 0.86) 72%, rgba(250, 236, 218, 0) 100%);
    }

    .app-layout[b-byq7ws25rc],
    [b-byq7ws25rc] .app-layout {
        display: block;
        width: 100%;
        max-width: 100vw;
        padding-top: 60px;
        overflow-x: hidden;
        background-color: #FAECDA;
    }

    .messages-container[b-byq7ws25rc],
    [b-byq7ws25rc] .messages-container,
    .messages-container.sidebar-hidden[b-byq7ws25rc],
    [b-byq7ws25rc] .messages-container.sidebar-hidden {
        width: 100%;
        max-width: 720px;
        min-width: 0;
        margin: 0 auto !important;
        padding: 0 0 44px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main-content"
            "sidebar-content";
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .vault-header[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-header {
        width: 100%;
        max-width: 680px;
        padding: 30px 18px 22px;
        box-sizing: border-box;
    }

    .vault-header h1[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-header h1 {
        font-size: clamp(2.05rem, 7vw, 2.7rem);
        line-height: 1.1;
        letter-spacing: 0;
        margin-bottom: 1rem;
    }

    .vault-subtitle[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-subtitle {
        max-width: 36rem;
        font-size: clamp(1.05rem, 2.8vw, 1.25rem);
        line-height: 1.55;
    }

    .main-content-area[b-byq7ws25rc],
    [b-byq7ws25rc] .main-content-area {
        width: 100%;
        padding: 0 18px 2.5rem;
        box-sizing: border-box;
    }

    .mobile-filters-trigger-row[b-byq7ws25rc],
    [b-byq7ws25rc] .mobile-filters-trigger-row {
        margin-bottom: 1rem;
    }

    .vault-masonry[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-masonry {
        width: 100%;
        padding: 0;
        column-gap: 1rem;
    }
}

@media (max-width: 680px) {
    .messages-container[b-byq7ws25rc],
    [b-byq7ws25rc] .messages-container,
    .messages-container.sidebar-hidden[b-byq7ws25rc],
    [b-byq7ws25rc] .messages-container.sidebar-hidden {
        max-width: 680px;
        padding-bottom: 40px;
    }

    .vault-header[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-header {
        padding: 24px var(--mobile-page-margin, 16px) 16px;
    }

    .vault-header h1[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-header h1 {
        font-size: clamp(2.05rem, 9.2vw, 2.35rem);
        line-height: 1.12;
    }

    .vault-subtitle[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-subtitle {
        font-size: clamp(1.02rem, 4.4vw, 1.16rem);
        line-height: 1.55;
    }

    .main-content-area[b-byq7ws25rc],
    [b-byq7ws25rc] .main-content-area {
        padding: 0 var(--mobile-page-margin, 16px) 2.5rem;
    }

    .vault-masonry[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-masonry {
        column-count: 1;
        padding: 0;
    }

    .vault-card[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-card {
        border-radius: 18px;
        padding: 1.2rem 1.25rem 1.25rem;
        margin-bottom: 1.6rem;
        box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
    }

    .vault-card-message[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-card-message {
        font-size: clamp(1rem, 4.4vw, 1.12rem);
        line-height: 1.72;
    }
}

@media (max-width: 420px) {
    .vault-header[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-header {
        padding-top: 22px;
    }

    .vault-card-header[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-card-header {
        gap: 0.75rem;
    }

    .vault-card-avatar[b-byq7ws25rc],
    [b-byq7ws25rc] .vault-card-avatar {
        width: 32px;
        height: 32px;
    }
}
/* /Components/PenPalUpsellModal.razor.rz.scp.css */
.modal-overlay[b-4gpja6ktog] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 17, 14, 0.58);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1300;
}

.modal-overlay.visible[b-4gpja6ktog] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-content[b-4gpja6ktog] {
    background-color: #fdf8f3;
    padding: 28px 30px;
    border-radius: 18px;
    border: 1px solid rgba(184, 136, 90, 0.22);
    box-shadow: 0 18px 40px rgba(22, 12, 9, 0.2);
    position: relative;
    max-width: 520px;
    width: 92%;
    text-align: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.24s ease;
}

.modal-overlay.visible .modal-content[b-4gpja6ktog] {
    transform: translateY(0) scale(1);
}

.modal-close-btn[b-4gpja6ktog] {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    font-size: 1.7rem;
    color: #b29a8c;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    touch-action: manipulation;
    pointer-events: auto;
}

.modal-close-btn:hover[b-4gpja6ktog] {
    color: #6a4a42;
}

.modal-title[b-4gpja6ktog] {
    margin: 6px 0 10px;
    color: #563e3a;
    font-size: 1.4rem;
    font-weight: 700;
}

.modal-description[b-4gpja6ktog] {
    margin: 0 0 18px;
    color: #6b4b47;
    font-size: 0.98rem;
    line-height: 1.45;
}

.pen-pal-upsell-avatar[b-4gpja6ktog] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    display: block;
    margin: 4px auto 14px;
    border: 3px solid #f6e3d4;
}

.pen-pal-upsell-avatar-wrap[b-4gpja6ktog] {
    position: relative;
    display: inline-block;
}

.pen-pal-upsell-badge[b-4gpja6ktog] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f4dcc7;
    border: 1px solid rgba(184, 136, 90, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(41, 24, 18, 0.18);
}

.pen-pal-example[b-4gpja6ktog] {
    background: #fffaf6;
    border: 1px solid rgba(184, 136, 90, 0.2);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: left;
    color: #5b4039;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    overflow: visible;
    max-height: none;
}

.pen-pal-example-title[b-4gpja6ktog] {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: #8f6f63;
    margin-bottom: 10px;
}

.pen-pal-example-body[b-4gpja6ktog] {
    white-space: pre-line;
    font-size: 1.02rem;
    color: #4B2E2E;
    font-family: var(--font-serif);
    margin-bottom: 0.8rem;
    line-height: 1.6;
    font-style: italic;
}

.modal-actions[b-4gpja6ktog] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width: 768px) {
    .modal-close-btn[b-4gpja6ktog] {
        top: calc(8px + env(safe-area-inset-top));
        right: 10px;
    }

    .modal-content.pen-pal-upsell-modal[b-4gpja6ktog] {
        width: 100%;
        height: 100dvh;
        max-width: 100%;
        border-radius: 0;
        padding: 18px 18px 24px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-actions[b-4gpja6ktog] {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
        background: #fdf8f3;
        box-shadow: 0 -12px 24px rgba(22, 12, 9, 0.06);
    }
}

.btn-primary-action[b-4gpja6ktog] {
    background-color: var(--peach);
    color: var(--text);
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.btn-primary-action:hover[b-4gpja6ktog] {
    filter: brightness(0.98);
}

.btn-primary-action:active[b-4gpja6ktog] {
    transform: translateY(1px);
}

.btn-secondary-link[b-4gpja6ktog] {
    appearance: none;
    background: transparent;
    border: none;
    color: #7b5a53;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 8px;
}

.btn-secondary-link:hover[b-4gpja6ktog] {
    text-decoration: underline;
}

.btn-tertiary-link[b-4gpja6ktog] {
    appearance: none;
    background: transparent;
    border: none;
    color: #8a5c51;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 2px 8px;
}

.btn-tertiary-link:hover[b-4gpja6ktog] {
    text-decoration: underline;
}
/* /Components/PersonalityPresetCarousel.razor.rz.scp.css */
.personality-preset-header[b-wc5cd2i0js] {
    margin-bottom: 0.75rem;
}

.personality-preset-title[b-wc5cd2i0js] {
    font-weight: 700;
    color: var(--text, #4b2e2e);
    margin-bottom: 0.2rem;
}

.personality-preset-subtext[b-wc5cd2i0js] {
    font-size: 0.95rem;
    color: var(--text-light, #967f6b);
}

.personality-preset-carousel-wrap[b-wc5cd2i0js] {
    position: relative;
    margin-bottom: 1rem;
}

/* Next arrow button */
.carousel-nav-btn.next[b-wc5cd2i0js] {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(75, 46, 46, 0.15);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text, #4b2e2e);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Previous arrow button (same visual as next) */
.carousel-nav-btn.prev[b-wc5cd2i0js] {
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(75, 46, 46, 0.15);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text, #4b2e2e);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-nav-btn.prev:hover[b-wc5cd2i0js] {
    background: var(--peach-bg, #fff2ec);
    border-color: #EBB180;
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn.next:hover[b-wc5cd2i0js] {
    background: var(--peach-bg, #fff2ec);
    border-color: #EBB180;
    transform: translateY(-50%) scale(1.1);
}

/* Pagination dots */
.carousel-dots[b-wc5cd2i0js] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* Controls row (arrows + dots aligned on same baseline) */
.carousel-controls[b-wc5cd2i0js] {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    column-gap: 12px;
    margin-top: 12px;
}

.carousel-controls .carousel-dots[b-wc5cd2i0js] {
    margin-top: 0;
}

/* Override absolute positioning when arrows are in the controls row */
.carousel-controls .carousel-nav-btn.prev[b-wc5cd2i0js],
.carousel-controls .carousel-nav-btn.next[b-wc5cd2i0js] {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
}

.carousel-controls .carousel-nav-btn.prev:hover[b-wc5cd2i0js],
.carousel-controls .carousel-nav-btn.next:hover[b-wc5cd2i0js] {
    transform: scale(1.1);
}

.carousel-dot[b-wc5cd2i0js] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(75, 46, 46, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.carousel-dot:hover[b-wc5cd2i0js] {
    background: rgba(75, 46, 46, 0.4);
}

.carousel-dot.active[b-wc5cd2i0js] {
    background: var(--text, #4b2e2e);
    width: 24px;
    border-radius: 4px;
}

/* Hide nav button on mobile */
@media (max-width: 768px) {
    .carousel-nav-btn.next[b-wc5cd2i0js] {
        display: none;
    }
}

@media (max-width: 768px) {
    .carousel-nav-btn.prev[b-wc5cd2i0js] {
        display: none;
    }
}

/* Edge fades (subtle, always on). */
.personality-preset-carousel-wrap[b-wc5cd2i0js]::before,
.personality-preset-carousel-wrap[b-wc5cd2i0js]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 2;
}

.personality-preset-carousel-wrap[b-wc5cd2i0js]::before {
    right: 0;
    background: linear-gradient(to left, var(--modal-bg, #ffffff), rgba(255, 255, 255, 0));
}

.personality-preset-carousel-wrap[b-wc5cd2i0js]::after {
    left: 0;
    background: linear-gradient(to right, var(--modal-bg, #ffffff), rgba(255, 255, 255, 0));
}

.personality-preset-carousel[b-wc5cd2i0js] {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.personality-preset-carousel[b-wc5cd2i0js]::-webkit-scrollbar {
    display: none;
}

.personality-preset-card[b-wc5cd2i0js] {
    scroll-snap-align: start;
    scroll-snap-stop: always;

    flex: 0 0 auto;
    width: 150px;
    text-align: right;

    border: 1px solid rgba(75, 46, 46, 0.12);
    background: #ffffff;
    border-radius: 14px;

    padding: 0.7rem 0.7rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}

.personality-preset-card:hover[b-wc5cd2i0js] {
    transform: translateY(-1px);
}

.personality-preset-card.selected[b-wc5cd2i0js] {
    border-color: #EBB180;
    background: var(--peach-bg, #fff2ec);
}

.personality-preset-image[b-wc5cd2i0js] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(75, 46, 46, 0.10);
}

.personality-preset-card-title[b-wc5cd2i0js] {
    font-weight: 700;
    color: var(--text, #4b2e2e);
    font-size: 0.95rem;
    line-height: 1.15;
    text-align: center;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}

.personality-preset-card-desc[b-wc5cd2i0js] {
    font-size: 0.85rem;
    color: var(--text-light, #967f6b);
    line-height: 1.25;
    text-align: center;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.4em;
}

/* /Components/PetLovedOneEditModal.razor.rz.scp.css */
/* Overlay and modal base matching pet create modal */
.modal-overlay[b-ase402vym9] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(40,25,15,0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 4000
}
.modal-overlay.visible[b-ase402vym9]{opacity:1;visibility:visible}
.modal-content.pet-edit-modal[b-ase402vym9]{background:#fff8f6;border-radius:20px;width:720px;max-width:95%;box-shadow:0 18px 48px rgba(0,0,0,.18);padding:20px 20px 0;display:flex;flex-direction:column;position:relative;overflow:hidden}
.modal-content.pet-edit-modal .modal-close-icon-button[b-ase402vym9]{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.5rem;font-weight:400;color:#7B6A66;cursor:pointer;line-height:1;padding:5px;transition:color .2s ease}
.modal-content.pet-edit-modal .modal-close-icon-button:hover[b-ase402vym9]{color:#4B2E2E}
.pet-content[b-ase402vym9]{flex:1;overflow-y:auto;padding:0 4px 12px;-webkit-overflow-scrolling:touch}

.pet-modal-title[b-ase402vym9]{font-size:26px;color:#4B2E2E;margin:4px 0 12px;font-weight:800;padding-right:32px}
.modal-tabs-container[b-ase402vym9]{display:flex;margin-bottom:1.5rem;border-bottom:1px solid var(--soft-border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.modal-tabs-container[b-ase402vym9]::-webkit-scrollbar{display:none}
.modal-tab-button[b-ase402vym9]{flex:1;padding:.8rem .5rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:.9rem;font-weight:500;color:var(--text-light);font-family:var(--font-lato);text-align:center;white-space:nowrap}
.modal-tab-button:hover[b-ase402vym9]{color:var(--text)}
.modal-tab-button.active[b-ase402vym9]{color:var(--text);border-bottom-color:var(--accent);font-weight:600}

.pet-form-grid[b-ase402vym9]{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;margin-bottom:14px}
.avatar-col[b-ase402vym9]{text-align:center}
.avatar-preview-img[b-ase402vym9]{width:128px;height:128px;border-radius:50%;border:2px solid #efd7bb;background:#fdf4ed;box-shadow:0 1px 4px rgba(247,186,173,.07);cursor:pointer}
.avatar-hint[b-ase402vym9]{color:#7B6A66;font-size:12px;margin-top:8px;text-align:center}

.field-label[b-ase402vym9]{font-weight:700;color:#6b4a43;margin:6px 0 6px;display:block}
.text-input[b-ase402vym9],.select-input[b-ase402vym9],.text-area[b-ase402vym9]{width:100%;border-radius:12px;border:1px solid #ecd6cf;padding:12px 14px;font-size:15px;background:#fff;color:#4B2E2E}
.text-area[b-ase402vym9]{resize:vertical}

.slider-group[b-ase402vym9]{margin:10px 0 4px}
.slider-label[b-ase402vym9]{color:#6b4a43;font-weight:700;display:block;margin-bottom:6px}
.slider-row[b-ase402vym9]{display:flex;align-items:center;gap:10px}
.slider-end[b-ase402vym9]{color:#7B6A66;font-size:12px;width:120px;text-align:center}
.range[b-ase402vym9]{flex:1;accent-color:#7B5A53}

.actions-row[b-ase402vym9]{display:flex;gap:12px;align-items:center;margin-top:12px;padding:16px 20px;border-top:1px solid #f0e1d0;background:#fff8f6;box-shadow:0 -4px 10px rgba(0,0,0,.05)}
.btn-primary[b-ase402vym9]{background:#7B5A53;color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn-outline[b-ase402vym9]{background:transparent;color:#7B5A53;border:2px solid #e8d4cc;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}

/* Avatar picker reuse */
.avatar-picker-overlay[b-ase402vym9]{position:fixed;z-index:4500;inset:0;background:rgba(80,60,44,.24);display:flex;align-items:center;justify-content:center}
.avatar-picker-modal[b-ase402vym9]{background:#fff9f4;padding:2em 2.3em 1.5em;border-radius:22px;box-shadow:0 6px 44px rgba(120,80,55,.11);min-width:320px;max-width:96vw}
.avatar-picker-list[b-ase402vym9]{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:1.2em;justify-items:center;margin:1.4em 0 1.8em}
.avatar-picker-img[b-ase402vym9]{width:80px;height:80px;border-radius:50%;border:2px solid #efd7bb;background:#fdf4ed;box-shadow:0 1px 4px rgba(247,186,173,.07);cursor:pointer;transition:border .16s,box-shadow .16s}
.avatar-picker-img.selected[b-ase402vym9],.avatar-picker-img:hover[b-ase402vym9]{border:2.4px solid #fbbbad;box-shadow:0 2px 8px #fbbbad33}

.form-group-settings[b-ase402vym9] {
    margin-bottom: 1.3rem;
}

.form-group-settings label[b-ase402vym9] {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-light);
        margin-bottom: 0.5rem;
}

.input-hint[b-ase402vym9] {
    font-size: 0.8rem;
    color: var(--text-light);
}

@media (max-width:640px){
  .modal-content.pet-edit-modal[b-ase402vym9]{width:100%;height:100vh;height:100dvh;max-width:100%;border-radius:0;padding:16px 0 0}
  .pet-form-grid[b-ase402vym9]{grid-template-columns:1fr;padding:0 16px}
    .pet-bottom[b-ase402vym9] {
        padding: 0 16px;
    }
  .pet-modal-title[b-ase402vym9]{padding:0 16px;font-size:24px}
  .actions-row[b-ase402vym9]{position:sticky;bottom:0;padding:14px 16px;box-shadow:0 -6px 16px rgba(0,0,0,.08)}
  .actions-row .btn-primary[b-ase402vym9],.actions-row .btn-outline[b-ase402vym9]{flex:1}
}

/* Typeahead styles (copy from Step1) */
.typeahead[b-ase402vym9]{position:relative}
.typeahead .text-input[b-ase402vym9]{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%237B6A66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.ta-dropdown[b-ase402vym9]{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1500;max-height:14rem;overflow:auto;background:#fff;border:1px solid #eadfd8;border-radius:12px;box-shadow:0 12px 28px rgba(80,60,44,.12)}
.ta-item[b-ase402vym9]{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .8rem;cursor:pointer;border-bottom:1px solid #f4eee9}
.ta-item:last-child[b-ase402vym9]{border-bottom:0}
.ta-item:hover[b-ase402vym9],.ta-item.active[b-ase402vym9]{background:#fff5f0}
.ta-label[b-ase402vym9]{font-size:.92rem;color:#5b463c}
.ta-species[b-ase402vym9]{font-size:.78rem;color:#a79083}
.ta-empty[b-ase402vym9]{color:#a79083}
.ta-divider[b-ase402vym9]{height:1px;background:#f0e8e2;margin:.25rem 0}
@media (max-width:640px){.ta-dropdown[b-ase402vym9]{max-height:50vh}}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar{width:10px}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar-track{background:#fff;border-radius:12px}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar-thumb{background:#eadfd8;border-radius:12px}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar-thumb:hover{background:#e0cfc7}

/* Underline-style slider visuals (brown accent) */
.slider-group .slider-input-row[b-ase402vym9]{display:grid;grid-template-columns:1fr;width:100%;margin:0;padding:0}
.custom-slider[b-ase402vym9]{width:100%;height:2rem;appearance:none;background:transparent;outline:none;margin:0;padding:0}
.custom-slider[b-ase402vym9]::-webkit-slider-thumb{appearance:none;height:1.3rem;width:1.3rem;background:#7B5A53;border-radius:50%;border:0;margin-top:-0.4rem}
.custom-slider[b-ase402vym9]::-webkit-slider-runnable-track{background:#eadfd8;height:.5rem;border-radius:.25rem;border:0}
.custom-slider[b-ase402vym9]::-moz-range-thumb{height:1.3rem;width:1.3rem;background:#7B5A53;border-radius:50%;border:0}
.custom-slider[b-ase402vym9]::-moz-range-track{background:#eadfd8;height:.5rem;border-radius:.25rem;border:0}
.slider-label[b-ase402vym9]{
font-size: 0.9rem;
    font-weight: 500;
    color:#6b4a43;
    margin-bottom: 0.25rem;
}
.slider-extreme-labels[b-ase402vym9]{display:flex;justify-content:space-between;color:#a79083;font-size:.85rem;margin-bottom:.25rem}
.slider-mobile-extremes[b-ase402vym9]{display:none;justify-content:space-between;color:#a79083;font-size:.85rem;margin:.25rem 0}
@media (max-width:640px){.slider-extreme-labels[b-ase402vym9]{display:none}.slider-mobile-extremes[b-ase402vym9]{display:flex}}

/* Tag chips (brown look) */
.tags-container[b-ase402vym9]{
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* center like LovedOneEditModal screenshot */
  column-gap:18px; /* airy spacing between chips */
  row-gap:16px;    /* vertical space between rows */
  margin-bottom:0.25em;
}
.tag-chip[b-ase402vym9]{
  background:#fff;
  border:1.5px solid #eadfd8;
  color:#4B2E2E;
  border-radius:24px;
  padding:10px 18px;

  font-size:.95rem;
  cursor:pointer;
}
.tag-chip.selected[b-ase402vym9]{
  background:#f6d6cb; /* soft peach */
  border-color:#f0c8bb;
  color:#4B2E2E;
}

/* /Components/PricingModal.razor.rz.scp.css */
.modal-overlay[b-587tq6eq2r] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40,25,15,0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1000;
}

.modal-overlay.visible[b-587tq6eq2r] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-content.pricing-modal-content[b-587tq6eq2r] {
    position: relative;
    background-color: var(--card-content-bg, #fff9f5);
    padding: 30px;
    border-radius: 18px;
    max-width: 640px;
    width: 90%;
    box-shadow: var(--shadow-medium, 0 8px 25px rgba(100,80,70,0.12));
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .pricing-modal-content[b-587tq6eq2r] {
    transform: scale(1);
}

.pricing-modal-content .modal-close-btn[b-587tq6eq2r] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: #a1a1aa;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

    .pricing-modal-content .modal-close-btn:hover[b-587tq6eq2r] {
        color: #52525b;
    }

.pricing-headline[b-587tq6eq2r] {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #5c4033;
}

.plans-container[b-587tq6eq2r] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.plan-box[b-587tq6eq2r] {
    background: #fff7f2;
    border: 1px solid var(--soft-border, #e1d4c9);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    width: 180px;
    box-shadow: var(--shadow-soft, 0 4px 12px rgba(100,80,70,0.08));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan-box h3[b-587tq6eq2r] {
    margin: 0 0 0.3rem 0;
    color: #4b2e2e;
}

.plan-box .price[b-587tq6eq2r] {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #6a504b;
}

.plan-box ul[b-587tq6eq2r] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: #6a504b;
}

.plan-box li[b-587tq6eq2r] {
    margin-bottom: 0.25rem;
}

.btn-select[b-587tq6eq2r] {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background-color: var(--button-card-primary-bg, #ff9d7e);
    color: var(--button-card-primary-text, #fff);
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-select:hover:not(:disabled)[b-587tq6eq2r] {
    background-color: var(--button-card-primary-hover-bg, #ff855f);
}

.btn-select:disabled[b-587tq6eq2r] {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* /Components/PrivateReflectionModal.razor.rz.scp.css */
/* PrivateReflectionModal.razor.css */

/* ========================================= */
/*        Shared Modal Overlay Styling       */
/* ========================================= */
.modal-overlay[b-eeykqepucp] { /* YOUR EXISTING STYLE - UNCHANGED */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

    .modal-overlay.visible[b-eeykqepucp] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-eeykqepucp] { /* YOUR EXISTING STYLE - UNCHANGED (used as a base) */
    position: relative;
   /* padding: 30px 45px;*/
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002;
}

.modal-overlay.visible .modal-content[b-eeykqepucp] {
    transform: scale(1);
}


/* === Specific styles for the REFINED Reflection Modal === */
/* This targets the <div class="modal-content reflection-modal-content" ...> */
.modal-content.reflection-modal-content[b-eeykqepucp] {
    background-color: #FFFCFA; /* Very light, almost white, warm cream (like Reset Password modal) */
    border-radius: 16px; /* Softer, larger radius */
    max-width: 480px; /* Adjust width if needed, maybe slightly wider for textarea */
    /* width: 90%; /* Inherited */
    text-align: center; /* Default text align for title/subtitle */
    box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12); /* Soft, warm shadow */
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden; /* Important for fixed header/footer layout */
    position: relative; /* For absolute positioning of close button */
}

/* Header Section for Reflection Modal - No distinct BG, just structure */
.reflection-modal-header-section[b-eeykqepucp] {
    flex-shrink: 0;
    padding: 2rem 3rem 1rem 2rem; /* Added right padding for close button */
    background: #FFFCFA;
    border-bottom: 1px solid #f0e1d0;
    position: relative; /* For close button */
}
/* Remove adaptive header backgrounds if not used for this cleaner style */
/* .reflection-modal-header-section.emotion-header-heavy { ... } */
/* .reflection-modal-header-section.emotion-header-balanced { ... } */


/* Back Button - Can be removed if only close button is desired for simplicity */
.modal-back-btn[b-eeykqepucp] {
    position: absolute;
    left: 18px; /* Consistent with close button */
    top: 18px; /* Consistent with close button */
    background: none;
    border: none;
    font-size: 1.3rem; /* Slightly larger if using FontAwesome icon */
    color: var(--text-light);
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
    line-height: 1;
}

    .modal-back-btn:hover[b-eeykqepucp] {
        color: var(--text);
    }

    .modal-back-btn .fas[b-eeykqepucp] { /* If using FontAwesome */
        display: block;
    }


.reflection-headline[b-eeykqepucp] { /* Title like "Reset Password", "Ta ett djupt..." */
    font-family: var(--font-serif); /* Or your main heading font */
    font-size: 1.6rem; /* Large and clear, adjust to fit */
    font-weight: 600;
    color: #594a3a;
    text-align: center;
    margin: 0; /* Remove default margins */
    line-height: 1.25;
}

/* Close button matching Reset Password modal style */
.modal-close-btn-alt[b-eeykqepucp] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.5rem; /* Size of '×' */
    font-weight: 400; /* Not too bold */
    color: #967f6b;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
}

    .modal-close-btn-alt:hover[b-eeykqepucp] {
        color: #594a3a;
    }


.reflection-modal-body-section[b-eeykqepucp] {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    text-align: left; /* Align content like labels and textarea to the left */
    /* Enable smooth momentum scrolling on iOS/mobile */
    -webkit-overflow-scrolling: touch;
}

/* NEW Subtitle style (if you add one like in Reset Password modal) */
.reflection-modal-subtitle[b-eeykqepucp] {
    font-size: 0.95rem;
    color: #967f6b;
    margin-bottom: 1.5rem; /* Space before textarea */
    line-height: 1.5;
    text-align: center; /* Subtitle is centered */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}


.reflection-textarea-styled[b-eeykqepucp] { /* Input field style from Reset Password modal */
    width: 100%;
    padding: 14px 18px; /* Generous padding */
    font-size: 1rem;
    border-radius: 12px; /* Rounded corners */
    border: 1px solid #E0D8D1; /* Softer, lighter border */
    background-color: #fff; /* White background */
    color: #594a3a;
    line-height: 1.6;
    min-height: 120px; /* Adjust as needed */
    resize: vertical;
    margin-bottom: 0.5rem; /* Space before hint text */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .reflection-textarea-styled[b-eeykqepucp]::placeholder {
        color: #b0a9a7;
    }

    .reflection-textarea-styled:focus[b-eeykqepucp] {
        border-color: #fbbbad; /* Accent color border on focus */
        outline: none;
        box-shadow: 0 0 0 3px rgba(251, 187, 173, 0.25); /* Accent glow */
    }

.reflection-hint[b-eeykqepucp] { /* "This is private..." text */
    display: block;
    margin-bottom: 1.2rem; /* Space before tags */
    font-size: 0.75rem; /* Smaller hint text */
    color: #967f6b; /* Softer color */
    text-align: left; /* Align with textarea */
}

.reflection-tags-area[b-eeykqepucp] {
    margin-top: 1rem;
}

.tags-label[b-eeykqepucp] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #594a3a; /* Slightly darker label */
    margin-bottom: 0.6rem;
    text-align: left;
}

.tags-options-container[b-eeykqepucp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-option-button[b-eeykqepucp] { /* Softer, more subtle tags */
    background-color: transparent;
    color: #967f6b;
    border: 1px solid #E0D8D1; /* Lighter border */
    border-radius: 15px;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

    .tag-option-button:hover[b-eeykqepucp] {
        border-color: #f9ac9c;
        background-color: #FFF9F7; /* Very subtle hover */
    }

    .tag-option-button.active[b-eeykqepucp] { /* Selected tag */
        background-color: #f9ac9c;
        color: #594a3a;
        border-color: #fbbbad;
        font-weight: 500;
    }

.reflection-modal-footer-section[b-eeykqepucp] {
    flex-shrink: 0;
    padding: 1.5rem 2rem;
    border-top: 1px solid #f0e1d0; /* Separator line above button */
    background: #FFFCFA;
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 0.75rem;
    width: 100%;
}

.btn-modal-cancel[b-eeykqepucp] { /* Cancel button */
    background-color: #E9E4E0;
    color: #594a3a;
    border: 1px solid #dcd6d4;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-modal-cancel:hover[b-eeykqepucp] {
        background-color: #d9d3cf;
    }

.btn-modal-save[b-eeykqepucp] { /* Primary Save button, styled like "Send Reset Link" */
    background-color: #fbbbad;
    color: #38250d;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-modal-save:hover[b-eeykqepucp] {
        background-color: #f9ac9c; /* Lighter/darker on hover */
    }

    .btn-modal-save.disabled[b-eeykqepucp],
    .btn-modal-save:disabled[b-eeykqepucp] {
        background-color: #E0D8D1 !important;
        color: #967f6b !important;
        cursor: not-allowed;
    }

/* === Mobile Responsiveness === */
@media (max-width: 768px) {
    .modal-content.reflection-modal-content[b-eeykqepucp] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .reflection-modal-header-section[b-eeykqepucp] {
        padding: 1.5rem 2.5rem 1rem 1.5rem; /* Adjusted right padding for close button */
    }

    .reflection-headline[b-eeykqepucp] {
        font-size: 1.4rem;
    }

    .modal-close-btn-alt[b-eeykqepucp] {
        top: 15px;
        right: 15px;
        font-size: 1.4rem;
    }

    .reflection-modal-subtitle[b-eeykqepucp] {
        padding: 0 1.5rem;
    }

    .reflection-modal-body-section[b-eeykqepucp] {
        padding: 1.5rem 1.5rem;
        position: relative;
    }

    /* Add a subtle shadow/gradient above the footer to hint at scrollable content */
    .reflection-modal-body-section[b-eeykqepucp]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to top, rgba(255, 252, 250, 0.9) 0%, rgba(255, 252, 250, 0.3) 50%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -1.5rem; /* Compensate for body padding */
    }

    .reflection-modal-footer-section[b-eeykqepucp] {
        padding: 1.5rem 1.5rem;
        /* Keep buttons right-aligned at 768px, they're still side by side */
        /* Add a subtle shadow above the footer */
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    }
}

@media (max-width: 480px) {
    .modal-content.reflection-modal-content[b-eeykqepucp] {
        width: 100%;
        height: 100vh;
        max-height: none;
        max-width: none;
        border-radius: 0;
    }

    .reflection-modal-header-section[b-eeykqepucp] {
        padding: 1rem 2rem 0.8rem 1rem; /* Adjusted right padding for close button */
    }

    .reflection-headline[b-eeykqepucp] {
        font-size: 1.2rem;
    }

    .modal-close-btn-alt[b-eeykqepucp] {
        top: 12px;
        right: 12px;
        font-size: 1.3rem;
    }

    .reflection-modal-subtitle[b-eeykqepucp] {
        padding: 0 1rem;
    }

    .reflection-modal-body-section[b-eeykqepucp] {
        padding: 1rem;
        position: relative;
    }

    /* Add a more prominent shadow/gradient above the footer on very small screens */
    .reflection-modal-body-section[b-eeykqepucp]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to top, rgba(255, 252, 250, 0.95) 0%, rgba(255, 252, 250, 0.4) 60%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -1rem; /* Compensate for body padding */
    }

    .reflection-modal-footer-section[b-eeykqepucp] {
        padding: 1rem;
        /* Enhanced shadow for small screens */
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
        /* Stack buttons vertically on mobile */
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Ensure all button types are full width on mobile */
    .btn-modal-cancel[b-eeykqepucp], .btn-modal-save[b-eeykqepucp] {
        width: 100% !important;
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}
/* /Components/ReviewMemoryModal.razor.rz.scp.css */
/* ReviewMemoryModal.razor.css */

.review-modal-overlay[b-bmnsfepcei] {
    position: fixed;
    inset: 0;
    background-color: rgba(38, 29, 22, 0.64);
    -webkit-backdrop-filter: blur(10px) saturate(108%);
    backdrop-filter: blur(10px) saturate(108%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: clamp(0.85rem, 3vw, 1.5rem);
}

.review-modal-content[b-bmnsfepcei] {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 238, 216, 0.7), transparent 50%),
        linear-gradient(180deg, #FFFDF8 0%, #FFF4E7 100%);
    border-radius: 18px;
    width: 100%;
    max-width: 590px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(55, 39, 27, 0.24), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
    border: 1px solid rgba(196, 154, 108, 0.2);
}

.review-modal-header[b-bmnsfepcei] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.2rem 0;
}

.review-modal-close[b-bmnsfepcei] {
    background: none;
    border: none;
    border-radius: 999px;
    font-size: 1.35rem;
    color: rgba(91, 69, 52, 0.68);
    cursor: pointer;
    padding: 0.2rem 0.55rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.review-modal-close:hover[b-bmnsfepcei],
.review-modal-close:focus-visible[b-bmnsfepcei] {
    background: rgba(164, 123, 80, 0.1);
    color: #5C4033;
    outline: none;
}

.review-modal-body[b-bmnsfepcei] {
    padding: 0 clamp(1.15rem, 4vw, 2.2rem) 1.4rem;
    text-align: center;
}

.review-icon-circle[b-bmnsfepcei] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    color: #9D744C;
    background: rgba(255, 247, 235, 0.9);
    box-shadow: 0 0 0 1px rgba(196, 154, 108, 0.18), 0 10px 28px rgba(142, 98, 55, 0.12);
}

.review-icon-circle svg[b-bmnsfepcei] {
    width: 2.6rem;
    height: 2.6rem;
}

.review-title[b-bmnsfepcei] {
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 3.8vw, 1.8rem);
    font-weight: 600;
    line-height: 1.14;
    color: #33291F;
    margin: 0 0 0.35rem;
}

.review-counter[b-bmnsfepcei] {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #7A604A;
    letter-spacing: 0.02em;
    margin: 0;
    white-space: nowrap;
}

.review-counter-row[b-bmnsfepcei] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0 0 1.25rem;
}

.review-stack-nav[b-bmnsfepcei] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(142, 103, 68, 0.22);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(247, 238, 224, 0.82));
    box-shadow: 0 5px 14px rgba(82, 54, 31, 0.07), inset 0 -1px 0 rgba(113, 82, 52, 0.08);
    color: #6B523E;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1;
    transition: all 0.3s ease;
}

.review-stack-nav:hover:not(:disabled)[b-bmnsfepcei],
.review-stack-nav:focus-visible[b-bmnsfepcei] {
    background: linear-gradient(135deg, rgba(255, 250, 241, 1), rgba(242, 226, 205, 0.9));
    border-color: rgba(125, 88, 58, 0.38);
    box-shadow: 0 8px 18px rgba(82, 54, 31, 0.11), inset 0 -1px 0 rgba(113, 82, 52, 0.1);
    color: #493425;
}

.review-stack-nav:focus-visible[b-bmnsfepcei] {
    outline: 2px solid rgba(145, 102, 61, 0.32);
    outline-offset: 3px;
}

.review-stack-nav:disabled[b-bmnsfepcei] {
    cursor: not-allowed;
    opacity: 0.34;
    box-shadow: inset 0 -1px 0 rgba(113, 82, 52, 0.05);
}

/* Memory Card */
.review-memory-card[b-bmnsfepcei] {
    background: rgba(255, 252, 246, 0.72);
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 10px;
    padding: clamp(1rem, 3vw, 1.25rem);
    text-align: left;
    margin-bottom: 1rem;
    min-height: clamp(12rem, 30vh, 18rem);
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.26s ease, filter 0.26s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.review-memory-card.is-transitioning[b-bmnsfepcei] {
    opacity: 0.16;
    filter: blur(1.5px);
}

.review-memory-image-wrapper[b-bmnsfepcei] {
    width: 100%;
    padding: 0;
    margin: 0 0 0.9rem;
    border: none;
    background: transparent;
}

.review-memory-image[b-bmnsfepcei] {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 10px;
}

.review-memory-content[b-bmnsfepcei] {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: #3A3228;
    margin: 0 0 0.75rem;
}

.review-memory-meta[b-bmnsfepcei] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border-top: 1px solid rgba(232, 213, 200, 0.3);
    padding-top: 0.6rem;
}

.review-memory-author[b-bmnsfepcei] {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.85rem;
    color: #6B5B4E;
}

.review-memory-relation[b-bmnsfepcei] {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #8B7355;
}

.review-memory-date[b-bmnsfepcei] {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #A89880;
    margin-left: auto;
}

.review-memory-email[b-bmnsfepcei] {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.45;
    color: #5E4938;
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(196, 154, 108, 0.16);
    word-break: break-word;
}

.review-verification-footnote[b-bmnsfepcei] {
    margin: 0.28rem 0 0;
    max-width: 34rem;
    font-family: var(--font-serif);
    font-size: 0.79rem;
    font-style: italic;
    line-height: 1.55;
    color: #8A6F58;
}

.review-verification-footnote[b-bmnsfepcei]::before {
    content: "";
    display: block;
    width: 2.35rem;
    height: 1px;
    margin: 0 0 0.32rem;
    background: rgba(142, 103, 68, 0.24);
}

.review-verification-actions[b-bmnsfepcei] {
    text-align: left;
    font-family: var(--font-sans);
    color: #665445;
    background: rgba(255, 251, 244, 0.64);
    border: 1px solid rgba(196, 154, 108, 0.15);
    border-radius: 8px;
    padding: 0.85rem 0.95rem;
    margin-bottom: 1rem;
}

.review-verification-actions p[b-bmnsfepcei] {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6D5644;
}

.review-btn-resend[b-bmnsfepcei] {
    background: transparent;
    border: 1px solid rgba(142, 103, 68, 0.3);
    border-radius: 999px;
    color: #604733;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    padding: 0.55rem 0.9rem;
    transition: all 0.3s ease;
}

.review-btn-resend:hover:not(:disabled)[b-bmnsfepcei],
.review-btn-resend:focus-visible[b-bmnsfepcei] {
    background: rgba(246, 228, 206, 0.38);
    border-color: rgba(125, 88, 58, 0.42);
}

.review-btn-resend:focus-visible[b-bmnsfepcei] {
    outline: 2px solid rgba(145, 102, 61, 0.28);
    outline-offset: 3px;
}

.review-btn-resend:disabled[b-bmnsfepcei] {
    cursor: not-allowed;
    opacity: 0.55;
}

.review-resend-feedback[b-bmnsfepcei] {
    margin-top: 0.65rem !important;
    font-style: italic;
    line-height: 1.45;
}

.review-resend-feedback.is-success[b-bmnsfepcei],
.review-resend-feedback.is-warning[b-bmnsfepcei] {
    color: #765D49;
}

.review-action-feedback[b-bmnsfepcei] {
    margin: 0.9rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(153, 93, 64, 0.18);
    background: rgba(255, 247, 239, 0.82);
    color: #765D49;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* AI Toggle */
.review-toggle-group[b-bmnsfepcei] {
    text-align: left;
}

.review-toggle-label[b-bmnsfepcei] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #5C4033;
    cursor: pointer;
    width: fit-content;
}

.review-toggle-input[b-bmnsfepcei] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.review-toggle-box[b-bmnsfepcei] {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    border-radius: 7px;
    border: 1.5px solid rgba(164, 123, 80, 0.48);
    background: rgba(255, 252, 246, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition: all 0.3s ease;
}

.review-toggle-box[b-bmnsfepcei]::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    top: 0.18rem;
    width: 0.34rem;
    height: 0.62rem;
    border: solid #4A3122;
    border-width: 0 1.8px 1.8px 0;
    opacity: 0;
    transform: rotate(42deg) scale(0.82);
    transition: all 0.3s ease;
}

.review-toggle-input:checked + .review-toggle-box[b-bmnsfepcei] {
    border-color: rgba(144, 91, 50, 0.22);
    background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
}

.review-toggle-input:checked + .review-toggle-box[b-bmnsfepcei]::after {
    opacity: 1;
    transform: rotate(42deg) scale(1);
}

.review-toggle-input:focus-visible + .review-toggle-box[b-bmnsfepcei] {
    outline: 2px solid rgba(196, 154, 108, 0.45);
    outline-offset: 3px;
}

.review-toggle-copy[b-bmnsfepcei] {
    line-height: 1.35;
}

.review-toggle-help[b-bmnsfepcei] {
    margin: 0.5rem 0 0;
    font-family: var(--font-serif);
    font-size: 0.81rem;
    font-style: italic;
    line-height: 1.5;
    color: #775E47;
}

.review-image-note[b-bmnsfepcei] {
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #765D49;
    background: rgba(196, 154, 108, 0.08);
    border: 1px solid rgba(196, 154, 108, 0.18);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
}

.review-responsibility-panel[b-bmnsfepcei] {
    text-align: left;
    margin-top: 0.85rem;
    padding: 0.9rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(196, 154, 108, 0.18);
    background: rgba(255, 251, 244, 0.7);
}

.review-responsibility-title[b-bmnsfepcei] {
    margin: 0 0 0.3rem;
    font-family: var(--font-serif);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.35;
    color: #4F3928;
}

.review-responsibility-body[b-bmnsfepcei] {
    margin: 0 0 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.55;
    color: #6D5644;
}

.review-responsibility-check[b-bmnsfepcei] {
    width: auto;
    max-width: 100%;
}

/* Footer */
.review-modal-footer[b-bmnsfepcei] {
    padding: 0 clamp(1.15rem, 4vw, 2.2rem) 1.5rem;
    text-align: center;
}

.review-footer-actions[b-bmnsfepcei] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.review-btn-approve[b-bmnsfepcei] {
    background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
    color: #4A3122;
    border: 1px solid rgba(144, 91, 50, 0.18);
    border-radius: 24px;
    padding: 0.72rem 1.3rem;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 650;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 10px 24px rgba(144, 91, 50, 0.16);
    transition: all 0.3s ease;
}

.review-btn-approve:hover:not(:disabled)[b-bmnsfepcei],
.review-btn-approve:focus-visible[b-bmnsfepcei] {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(144, 91, 50, 0.2);
    outline: none;
}

.review-btn-approve:disabled[b-bmnsfepcei] {
    background: rgba(196, 154, 108, 0.14);
    color: rgba(91, 69, 52, 0.56);
    box-shadow: none;
    cursor: not-allowed;
}

.review-btn-reject[b-bmnsfepcei] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.28);
    border-radius: 24px;
    padding: 0.72rem 1.3rem;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    font-weight: 600;
    color: #6A5645;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
}

.review-btn-reject:hover:not(:disabled)[b-bmnsfepcei],
.review-btn-reject:focus-visible[b-bmnsfepcei] {
    background: rgba(164, 123, 80, 0.08);
    outline: none;
}

.review-btn-reject:disabled[b-bmnsfepcei] {
    opacity: 0.5;
    cursor: not-allowed;
}

.review-btn-close[b-bmnsfepcei] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 24px;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #6B5B4E;
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-spinner[b-bmnsfepcei] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(74, 49, 34, 0.22);
    border-top-color: #4A3122;
    border-radius: 50%;
    animation: spin-b-bmnsfepcei 0.7s linear infinite;
}

.review-btn-reject .review-spinner[b-bmnsfepcei] {
    border-color: rgba(107, 91, 78, 0.3);
    border-top-color: #6B5B4E;
}

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

@media (max-width: 540px) {
    .review-modal-overlay[b-bmnsfepcei] {
        align-items: flex-end;
        padding: 0;
    }

    .review-modal-content[b-bmnsfepcei] {
        border-radius: 20px 20px 0 0;
        max-height: 95vh;
        max-width: 100%;
    }

    .review-footer-actions[b-bmnsfepcei] {
        flex-direction: column-reverse;
    }

    .review-btn-approve[b-bmnsfepcei],
    .review-btn-reject[b-bmnsfepcei],
    .review-btn-close[b-bmnsfepcei] {
        width: 100%;
        justify-content: center;
    }

    .review-memory-date[b-bmnsfepcei] {
        margin-left: 0;
        width: 100%;
    }

    .review-counter-row[b-bmnsfepcei] {
        width: 100%;
        gap: 0.4rem;
    }

    .review-stack-nav[b-bmnsfepcei] {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1.2rem;
    }

    .review-counter[b-bmnsfepcei] {
        min-width: 0;
        font-size: 0.78rem;
    }

    .review-memory-card[b-bmnsfepcei] {
        min-height: 10.5rem;
    }

    .review-verification-actions[b-bmnsfepcei] {
        padding: 0.8rem 0.85rem;
    }

    .review-responsibility-panel[b-bmnsfepcei] {
        padding: 0.85rem;
    }

    .review-btn-resend[b-bmnsfepcei] {
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }
}
/* /Components/SaveProgressModal.razor.rz.scp.css */
/* ========================================= */
/*        Shared Modal Overlay Styling       */
/* ========================================= */

.modal-overlay[b-r4mkb7lbi6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ensure THIS is the background color applied for BOTH modals */
    background-color: rgba(40, 25, 15, 0.55);
    /* Lighter overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Base z-index - content inside modals will have higher values */
    z-index: 9999;
}

.modal-overlay.visible[b-r4mkb7lbi6] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-r4mkb7lbi6] {
    position: relative;
    /* Needed for pseudo-elements/absolute positioning */
    padding: 30px 45px;
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 10000;
    /* Ensure content is above potential background layers */
}

.modal-overlay.visible .modal-content[b-r4mkb7lbi6] {
    transform: scale(1);
}

/* --- Layered Effect for Modal --- */
.modal-content.layered-modal[b-r4mkb7lbi6] {
    background-color: rgb(255, 242, 236);
    /* The top layer color */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Slightly stronger shadow for top layer */
}

/* The background layer */
.modal-content.layered-modal[b-r4mkb7lbi6]::before {
    content: '';
    position: absolute;
    /* Make it slightly larger than the parent */
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    /* Style the background layer */
    background: rgba(255, 255, 255, 0.6);
    /* Semi-transparent white - adjust as needed */
    border-radius: 22px;
    /* Slightly more rounded than the main content */
    z-index: -1;
    /* Place it behind the main content */
}

/* ========================================= */
/*      Save Progress Modal Styling         */
/* ========================================= */

.save-progress-modal[b-r4mkb7lbi6] {
    max-width: 480px;
    position: relative;
    /* Ensure absolute positioning of close button works relative to this */
}

/* --- Close Button Styling --- */
.save-progress-modal .modal-close-btn[b-r4mkb7lbi6] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: #a1a1aa;
    /* Slightly muted color */
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
    /* Ensure clickable */
}

.save-progress-modal .modal-close-btn:hover[b-r4mkb7lbi6] {
    color: #52525b;
    /* Darker on hover */
}

/* --- Header Styling --- */
.save-progress-header[b-r4mkb7lbi6] {
    margin-bottom: 25px;
}

.save-progress-headline[b-r4mkb7lbi6] {
    font-size: 1.8rem;
    font-weight: 600;
    color: #5c4033;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.25;
}

.save-progress-subtext[b-r4mkb7lbi6] {
    font-size: 1rem;
    color: #7d6c66;
    margin-bottom: 0;
    line-height: 1.4;
    padding: 0 10px;
}

/* --- Waiting Room Specific Styling --- */
.waiting-room-icon[b-r4mkb7lbi6] {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.waiting-room-note[b-r4mkb7lbi6] {
    font-size: 0.9rem;
    color: #8f8886;
    margin-top: 15px;
    font-style: italic;
}

/* --- Progress Indicator Styling --- */
.creation-progress[b-r4mkb7lbi6] {
    margin: 25px 0;
    padding: 20px 0;
    border-top: 1px solid #e8e4e2;
    border-bottom: 1px solid #e8e4e2;
}

.progress-steps[b-r4mkb7lbi6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.progress-step[b-r4mkb7lbi6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.progress-step.completed[b-r4mkb7lbi6] {
    opacity: 1;
}

.progress-step.next[b-r4mkb7lbi6] {
    opacity: 0.7;
}

.step-icon[b-r4mkb7lbi6] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #e8e4e2;
    color: #7d6c66;
}

.progress-step.completed .step-icon[b-r4mkb7lbi6] {
    background-color: #4CAF50;
    color: white;
}

.progress-step.next .step-icon[b-r4mkb7lbi6] {
    background-color: #ff9d7e;
    color: white;
}

.step-label[b-r4mkb7lbi6] {
    font-size: 0.8rem;
    color: #7d6c66;
    font-weight: 500;
}

/* --- Modal Actions Styling --- */
.modal-actions[b-r4mkb7lbi6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-button[b-r4mkb7lbi6] {
    background-color: #2a2a2a;
    color: white;
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-align: left;
}

.social-button:hover[b-r4mkb7lbi6] {
    background-color: #3f3f3f;
}

.social-button .social-content[b-r4mkb7lbi6] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
}

.social-button .icon-wrapper[b-r4mkb7lbi6] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.social-button .label[b-r4mkb7lbi6] {
    flex-grow: 1;
    text-align: center;
}

.modal-divider[b-r4mkb7lbi6] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #b0a9a7;
    font-size: 0.85rem;
    margin: 6px 0;
    text-transform: uppercase;
}

.modal-divider[b-r4mkb7lbi6]::before,
.modal-divider[b-r4mkb7lbi6]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e8e4e2;
}

.modal-divider span[b-r4mkb7lbi6] {
    padding: 0 0.8em;
}

.modal-divider[b-r4mkb7lbi6]::before {
    margin-right: 0;
}

.modal-divider[b-r4mkb7lbi6]::after {
    margin-left: 0;
}

/* --- Email Input Section --- */
.email-input-section[b-r4mkb7lbi6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.email-input[b-r4mkb7lbi6] {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid #dcd6d4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;
}

.email-input[b-r4mkb7lbi6]::placeholder {
    color: #b0a9a7;
}

.email-input:focus[b-r4mkb7lbi6] {
    border-color: #ff9d7e;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.2);
}

.email-continue-button[b-r4mkb7lbi6] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #ff9d7e;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.email-continue-button:hover:not(:disabled)[b-r4mkb7lbi6] {
    background-color: #ff855f;
}

.email-continue-button:disabled[b-r4mkb7lbi6] {
    background-color: #dcd6d4;
    color: #b0a9a7;
    cursor: not-allowed;
}

/* --- Links and Text --- */
.email-link[b-r4mkb7lbi6] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 14px;
    background-color: #ff9d7e;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    text-align: center;
}

.email-link:hover[b-r4mkb7lbi6] {
    background-color: #ff855f;
}

.modal-text-link[b-r4mkb7lbi6] {
    color: #d97706;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    display: block;
    margin-top: 8px;
    text-decoration: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-text-link:hover[b-r4mkb7lbi6] {
    background-color: rgba(217, 119, 6, 0.1);
}

.manual-login-link[b-r4mkb7lbi6] {
    text-align: center;
    margin-top: 0;
}

.terms-text[b-r4mkb7lbi6] {
    font-size: 0.8rem;
    color: #8f8886;
    text-align: center;
    margin-top: 20px;
    line-height: 1.4;
}

.terms-text a[b-r4mkb7lbi6] {
    color: #7d6c66;
    text-decoration: underline;
    font-weight: 500;
}

.terms-text a:hover[b-r4mkb7lbi6] {
    color: #5c4033;
}

/* --- Waiting Room Actions --- */
.waiting-room-actions[b-r4mkb7lbi6] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.btn-secondary[b-r4mkb7lbi6] {
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #e8e4e2;
    color: #5c4033;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover[b-r4mkb7lbi6] {
    background-color: #dcd6d4;
}

/* --- Skip Section --- */
.skip-section[b-r4mkb7lbi6] {
    margin-top: 20px;
    text-align: center;
}

.skip-link[b-r4mkb7lbi6] {
    color: #8f8886;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.skip-link:hover[b-r4mkb7lbi6] {
    color: #7d6c66;
}

/* --- Responsive Design --- */
@media (max-width: 480px) {
    .modal-content[b-r4mkb7lbi6] {
        padding: 25px 30px;
        max-width: 95%;
    }

    .save-progress-headline[b-r4mkb7lbi6] {
        font-size: 1.6rem;
    }

    .progress-steps[b-r4mkb7lbi6] {
        gap: 20px;
    }

    .step-icon[b-r4mkb7lbi6] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .step-label[b-r4mkb7lbi6] {
        font-size: 0.75rem;
    }
}
/* /Components/Shared/ChatInputCapsule.razor.rz.scp.css */
/* =============================================================================
   FLOATING CAPSULE CHAT INPUT
   A modern, ChatGPT-style floating input that hovers above the page bottom
   The input is positioned OVER the chat content (messages scroll behind it)
   ============================================================================= */

/* === OUTER CONTAINER === */
.floating-chat-input-container[b-rcogdu5lck] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 20px 1rem;
    /* Bottom padding lifts off edge */
    z-index: 10;
    pointer-events: none;
    /* Allow clicking through empty areas */
    /* background: linear-gradient(to top, rgba(255, 249, 246, 0.95) 0%, rgba(255, 249, 246, 0.8) 60%, transparent 100%); */
}

/* === SUGGESTION CHIPS ROW (Desktop) === */
.suggestion-chips-row[b-rcogdu5lck] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center chips perfectly above input */
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.4rem 0.2rem;
    width: min(800px, 100%);
    margin: 0 auto;
    margin-bottom: 10px;
    /* Breathing room between chips and input - "Luft = Lyx" */
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: auto;
    /* Re-enable clicking on chips */
}

.suggestion-chips-row[b-rcogdu5lck]::-webkit-scrollbar {
    display: none;
}

.suggestion-chip[b-rcogdu5lck] {
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
    border: 1px solid rgba(232, 213, 200, 0.6);
    /* Softer, semi-transparent border */
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #4b2e2e;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(83, 51, 43, 0.08);
    /* Softer shadow for depth */
    white-space: nowrap;
}

.suggestion-chip:hover[b-rcogdu5lck] {
    background: linear-gradient(135deg, #ffe3d1 0%, #ffd0c0 100%);
    border-color: rgba(255, 208, 192, 0.7);
    /* Keep border soft on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(83, 51, 43, 0.12);
}

.suggestion-chip:active[b-rcogdu5lck] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(83, 51, 43, 0.12);
}

/* === THE FLOATING CAPSULE === */
.chat-input-capsule[b-rcogdu5lck] {
    width: min(800px, 100%);
    /* Wide capsule like ChatGPT */
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 26px;
    /* Large radius for pill/capsule shape */
    box-shadow:
        0 8px 32px -8px rgba(75, 46, 46, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 0.35rem 0.6rem;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    pointer-events: auto;
    /* Re-enable clicking on the capsule */
}

/* Focus state - subtle glow effect */
.chat-input-capsule.focused[b-rcogdu5lck] {
    border-color: rgba(200, 140, 110, 0.35);
    box-shadow:
        0 10px 40px -10px rgba(75, 46, 46, 0.22),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 0 0 3px rgba(200, 140, 110, 0.12);
}

/* === INPUT WRAPPER === */
.chat-input-wrapper[b-rcogdu5lck] {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100%;
}

.input-row[b-rcogdu5lck] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* === TEXTAREA === */
.capsule-textarea[b-rcogdu5lck] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0.9rem 3.5rem 0.9rem 1.25rem;
    font-size: 1.05rem;
    resize: none;
    width: 100%;
    overflow: hidden;
    box-shadow: none;
    outline: none;
    font-family: var(--font-sans);
    line-height: 1.5;
    min-height: 44px;
    box-sizing: border-box;
    display: block;
    color: #4b2e2e;
}

.capsule-textarea[b-rcogdu5lck]::placeholder {
    color: rgba(75, 46, 46, 0.45);
}

.capsule-textarea:disabled[b-rcogdu5lck] {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.7;
}

.capsule-textarea.has-sparkle-btn[b-rcogdu5lck] {
    padding-left: 3.1rem;
}

/* === SEND BUTTON === */
.send-btn[b-rcogdu5lck] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: linear-gradient(135deg, #f7d9b8, #f0cba2);
    border-radius: 50%;
    color: #7d4e2d;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.send-btn:hover:not(:disabled)[b-rcogdu5lck] {
    background: linear-gradient(135deg, #f0cba2, #e8bc8f);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

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

.send-btn svg[b-rcogdu5lck] {
    width: 18px;
    height: 18px;
}

/* === SCROLL TO BOTTOM BUTTON === */
.scroll-to-bottom-btn[b-rcogdu5lck] {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #4b2e2e;
    animation: slideUp-b-rcogdu5lck 0.2s ease-out;
    pointer-events: auto;
    /* Enable clicking - parent has pointer-events: none */
}

@keyframes slideUp-b-rcogdu5lck {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.scroll-to-bottom-btn:hover[b-rcogdu5lck] {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) scale(1.05);
}

.scroll-to-bottom-btn:active[b-rcogdu5lck] {
    transform: translateX(-50%) scale(0.95);
}

.scroll-to-bottom-btn svg[b-rcogdu5lck] {
    width: 20px;
    height: 20px;
}

/* === READ-ONLY BANNER === */
.read-only-banner[b-rcogdu5lck] {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 244, 232, 0.95);
    border: 1px solid rgba(150, 110, 80, 0.18);
    border-radius: 14px;
    width: min(800px, 92%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #4b2e2e;
    pointer-events: auto;
}

.read-only-banner-text[b-rcogdu5lck] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.read-only-banner-cta[b-rcogdu5lck] {
    font-weight: 700;
}

.read-only-upgrade-btn[b-rcogdu5lck] {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, rgba(239, 166, 118, 0.98), rgba(219, 122, 73, 0.98));
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(219, 122, 73, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.read-only-upgrade-btn:hover[b-rcogdu5lck] {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(219, 122, 73, 0.28);
}

/* === DISCLAIMER (Outside the capsule) === */
.capsule-disclaimer[b-rcogdu5lck] {
    width: min(800px, 92%);
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: rgba(75, 46, 46, 0.45);
    font-family: var(--font-sans);
    pointer-events: none;
}

/* === SPARKLE MENU (Mobile) === */
.sparkle-input-btn[b-rcogdu5lck] {
    display: none;
}

.sparkle-menu[b-rcogdu5lck] {
    display: none;
}

.sparkle-backdrop[b-rcogdu5lck] {
    display: none;
}

/* Hide desktop chips on mobile */
.desktop-only[b-rcogdu5lck] {
    display: flex;
}

/* Hide mobile-only elements on desktop */
.mobile-only[b-rcogdu5lck] {
    display: none !important;
}

/* === HERO CHIP (Mobile Keepsake Mode) === */
/* Note: .hero-chip-row uses .mobile-only class, so it's hidden on desktop */
.hero-chip-row[b-rcogdu5lck] {
    justify-content: center;
    width: min(800px, 100%);
    margin: 0 auto;
    margin-bottom: 10px;
    pointer-events: auto;
}

.hero-chip[b-rcogdu5lck] {
    padding: 0.65rem 1.3rem;
    background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
    border: 1px solid rgba(232, 213, 200, 0.6);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #4b2e2e;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 12px rgba(83, 51, 43, 0.12);
    white-space: nowrap;
}

.hero-chip:hover[b-rcogdu5lck] {
    background: linear-gradient(135deg, #ffe3d1 0%, #ffd0c0 100%);
    border-color: rgba(255, 208, 192, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(83, 51, 43, 0.15);
}

.hero-chip:active[b-rcogdu5lck] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(83, 51, 43, 0.12);
}

/* =============================================================================
   MOBILE STYLES
   ============================================================================= */
@media (max-width: 768px) {
    .floating-chat-input-container[b-rcogdu5lck] {
        padding: 0 0.5rem 16px 0.5rem;
        /* background: linear-gradient(to top, rgba(255, 249, 246, 0.98) 0%, rgba(255, 249, 246, 0.85) 50%, transparent 100%); */
    }

    .chat-input-capsule[b-rcogdu5lck] {
        width: min(96%, 600px);
        border-radius: 22px;
        padding: 0.25rem 0.4rem;
        box-shadow:
            0 6px 24px -10px rgba(75, 46, 46, 0.25),
            0 3px 10px rgba(0, 0, 0, 0.06);
    }

    .suggestion-chips-row[b-rcogdu5lck] {
        width: min(95%, 600px);
    }

    .read-only-banner[b-rcogdu5lck] {
        width: min(95%, 600px);
    }

    .capsule-disclaimer[b-rcogdu5lck] {
        width: 90%;
        font-size: 0.7rem;
        /* Hide on mobile */
        display: none;
    }

    .capsule-textarea[b-rcogdu5lck] {
        padding: 0.85rem 3.25rem 0.85rem 1rem;
        font-size: 1rem;
    }

    /* Hide desktop chips on mobile */
    .desktop-only[b-rcogdu5lck] {
        display: none !important;
    }

    /* Show mobile-only elements (Hero Chip) on mobile */
    .mobile-only[b-rcogdu5lck] {
        display: flex !important;
    }

    .hero-chip-row[b-rcogdu5lck] {
        width: min(95%, 600px);
        margin-bottom: 8px;
    }

    .hero-chip[b-rcogdu5lck] {
        font-size: 0.9rem;
        padding: 0.6rem 1.1rem;
    }

    /* Sparkle button - positioned inside the input field */
    .sparkle-input-btn[b-rcogdu5lck] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border: none;
        background-color: transparent;
        border-radius: 50%;
        font-size: 18px;
        color: #8b5a3c;
        cursor: pointer;
        padding: 0;
        transition: background-color 0.25s ease, transform 0.25s ease;
        z-index: 2;
    }

    .sparkle-input-btn:hover[b-rcogdu5lck] {
        background-color: #f7d9b8;
        transform: translateY(-50%) scale(1.05);
    }

    .sparkle-input-btn:active[b-rcogdu5lck] {
        transform: translateY(-50%) scale(0.95);
    }

    .sparkle-input-btn.active[b-rcogdu5lck] {
        background-color: #ffe4d2;
    }

    /* Backdrop for click-outside-to-close */
    .sparkle-backdrop[b-rcogdu5lck] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: transparent;
    }

    /* Sparkle menu - floating popup like ChatGPT */
    .sparkle-menu[b-rcogdu5lck] {
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        width: auto;
        min-width: 220px;
        background: #ffffff;
        border: none;
        border-radius: 16px;
        padding: 8px 0;
        z-index: 100;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .sparkle-menu.open[b-rcogdu5lck] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Clean menu items - like ChatGPT */
    .sparkle-chip[b-rcogdu5lck] {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 18px;
        font-size: 1rem;
        font-weight: 400;
        color: #2d2d2d;
        background: transparent;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: background-color 0.15s ease;
        text-align: left;
        white-space: nowrap;
    }

    .sparkle-chip:hover[b-rcogdu5lck] {
        background: #f7f7f7;
    }

    .sparkle-chip:active[b-rcogdu5lck] {
        background: #efefef;
    }

    .scroll-to-bottom-btn[b-rcogdu5lck] {
        width: 36px;
        height: 36px;
        bottom: calc(100% + 8px);
    }

    .scroll-to-bottom-btn svg[b-rcogdu5lck] {
        width: 18px;
        height: 18px;
    }
}

/* =============================================================================
   TABLET STYLES
   ============================================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .floating-chat-input-container[b-rcogdu5lck] {
        margin-bottom: 18px;
    }

    .chat-input-capsule[b-rcogdu5lck] {
        width: min(680px, 92%);
    }
}
/* /Components/Shared/ContextualSidebarWidget.razor.rz.scp.css */
:host[b-8lxxy15z0o] {
    display: block;
}

.contextual-sidebar-widget[b-8lxxy15z0o] {
    width: 100%;
}

.widget-card[b-8lxxy15z0o] {
    width: 100%;
    border-radius: 20px;
    background: radial-gradient(circle at top, rgba(255, 245, 230, 0.98), rgba(245, 221, 191, 0.96) 65%, rgba(231, 201, 167, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        0 14px 28px rgba(109, 72, 54, 0.18);
    border: 1px solid rgba(153, 110, 80, 0.2);
    padding: 1.2rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: #4b2e2e;
    position: relative;
    background-blend-mode: multiply;
}

button.widget-card[b-8lxxy15z0o] {
    border: none;
    background: radial-gradient(circle at top, rgba(255, 245, 230, 0.98), rgba(245, 221, 191, 0.96) 65%, rgba(231, 201, 167, 0.94));
    text-align: left;
    padding: 1.2rem 1.4rem 1.4rem;
}

.widget-card--clickable[b-8lxxy15z0o] {
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.widget-card--clickable:not(:disabled):hover[b-8lxxy15z0o] {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 18px 32px rgba(109, 72, 54, 0.22);
}

.widget-card--clickable:disabled[b-8lxxy15z0o] {
    cursor: default;
    opacity: 0.65;
}

.widget-header[b-8lxxy15z0o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.widget-icon[b-8lxxy15z0o] {
    font-size: 1.35rem;
    line-height: 1;
}

.widget-pill[b-8lxxy15z0o] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5b361d;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(249, 212, 168, 0.92), rgba(236, 184, 138, 0.9));
}

.widget-body[b-8lxxy15z0o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.widget-title[b-8lxxy15z0o] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
}

.widget-description[b-8lxxy15z0o] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #5a3c2c;
}

.widget-cta[b-8lxxy15z0o] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, rgba(239, 166, 118, 0.95), rgba(219, 122, 73, 0.95));
    color: #fff;
    font-weight: 600;
    /* inherited font-sans */
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(219, 122, 73, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget-cta:hover[b-8lxxy15z0o] {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(219, 122, 73, 0.28);
}

.widget-cta-icon[b-8lxxy15z0o] {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .widget-card[b-8lxxy15z0o] {
        padding: 1rem 1.1rem 1.2rem;
    }
}

.widget-placeholder[b-8lxxy15z0o] {
    height: 0;
}
/* /Components/Shared/CtaSidebarWidget.razor.rz.scp.css */
:host[b-9xv1cu4m67] {
    display: block;
}

.cta-sidebar-widget[b-9xv1cu4m67] {
    width: 100%;
    margin-top: 5em;
}

.cta-card[b-9xv1cu4m67] {
    width: 100%;
    border-radius: 22px;
    background: radial-gradient(circle at top, rgba(255, 245, 230, 0.98), rgba(245, 221, 191, 0.96) 65%, rgba(231, 201, 167, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        0 14px 28px rgba(109, 72, 54, 0.18);
    border: 1px solid rgba(153, 110, 80, 0.18);
    padding: 1.4rem 1.6rem 1.6rem;
    color: #4b2e2e;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-blend-mode: multiply;
}

.cta-header[b-9xv1cu4m67] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cta-icon-image[b-9xv1cu4m67] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(122, 88, 59, 0.25));
}

.cta-icon-text[b-9xv1cu4m67] {
    font-size: 2rem;
    line-height: 1;
}

.cta-title[b-9xv1cu4m67] {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.35rem;
}

.cta-body[b-9xv1cu4m67] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cta-description[b-9xv1cu4m67] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: #553525;
}

.cta-link[b-9xv1cu4m67] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    font-weight: 700;
    font-size: 1rem;
    color: #3b2216;
    text-decoration: none;
}

.cta-link:hover[b-9xv1cu4m67],
.cta-link:focus[b-9xv1cu4m67] {
    text-decoration: underline;
}

.cta-link-arrow[b-9xv1cu4m67] {
    font-size: 1.1rem;
}

.cta-citat[b-9xv1cu4m67] {
    margin: 0;
    font-style: italic;
    font-size: 0.95rem;
    color: #6b4a3a;
}

@media (max-width: 768px) {
    .cta-card[b-9xv1cu4m67] {
        padding: 1.2rem 1.3rem 1.4rem;
    }

    .cta-title[b-9xv1cu4m67] {
        font-size: 1.2rem;
    }

    .cta-description[b-9xv1cu4m67] {
        font-size: 0.95rem;
    }
}
/* /Components/Shared/FamilyTreeVisualizer.razor.rz.scp.css */
.family-tree-container[b-t2jl87gxyo] {
    width: 100%;
    min-height: 400px; /* Minimum height, can grow with content */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: auto;
    position: relative;
    background: var(--background-subtle);
}

    .family-tree-container svg[b-t2jl87gxyo] {
        width: 100%;
        height: auto; /* Allow height to adjust dynamically */
        min-height: 400px;
    }

.tree-controls[b-t2jl87gxyo] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    background: var(--background-float);
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .tree-controls button[b-t2jl87gxyo] {
        padding: 6px 12px;
        border: 1px solid var(--border-color);
        background: var(--background-primary);
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        .tree-controls button:hover[b-t2jl87gxyo] {
            background: var(--background-hover);
            transform: scale(1.05);
        }

/* Styling for nodes and their elements */
[b-t2jl87gxyo] .node {
    transition: transform 0.3s ease;
}

    [b-t2jl87gxyo] .node circle {
        fill: #ffffff; /* White fill for nodes */
        stroke-width: 2px;
        transition: fill 0.3s ease, stroke 0.3s ease;
    }

    [b-t2jl87gxyo] .node.spouse circle {
        stroke: #6a5acd; /* Purple for spouses */
    }

    [b-t2jl87gxyo] .node.child circle {
        stroke: #ffa500; /* Orange for children */
    }

    [b-t2jl87gxyo] .node:not(.spouse):not(.child) circle {
        stroke: #1e90ff; /* Blue for others (e.g., self, parents, siblings) */
    }

    [b-t2jl87gxyo] .node:hover circle {
        fill: var(--accent-primary); /* Highlight on hover with primary accent color */
    }

    /* Text styling for node labels (only names now) */
    [b-t2jl87gxyo] .node text {
        font: 14px var(--font-family);
        fill: var(--text-primary);
        stroke-width: 0;
        pointer-events: none;
        text-shadow: 1px 1px 0 var(--background-primary), -1px 1px 0 var(--background-primary), 1px -1px 0 var(--background-primary), -1px -1px 0 var(--background-primary);
    }

[b-t2jl87gxyo] .name-label {
    font-size: 16px;
    font-weight: 500;
    fill: var(--text-primary);
}

/* Styling for links (connections between nodes) */
[b-t2jl87gxyo] .link {
    fill: none;
    stroke-width: 1.5px;
    transition: stroke 0.3s ease;
}

    [b-t2jl87gxyo] .link.spouse {
        stroke: #6a5acd; /* Purple for spouse relationships */
        stroke-dasharray: 5,5; /* Dashed line for spouses */
    }

    [b-t2jl87gxyo] .link.child {
        stroke: #ffa500; /* Orange for child relationships */
    }

    [b-t2jl87gxyo] .link:not(.spouse):not(.child) {
        stroke: #ccc; /* Default gray for other relationships */
    }

    /* Hover effects for links */
    [b-t2jl87gxyo] .link:hover {
        stroke-width: 2px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

/* Additional styling for node interactions */
[b-t2jl87gxyo] .node:hover {
    cursor: pointer;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2)); /* Shadow on hover for depth */
}

/* Ensure text wrapping works visually */
[b-t2jl87gxyo] .node text tspan {
    dominant-baseline: middle;
    text-anchor: middle;
}

/* Position spouses side by side */
[b-t2jl87gxyo] .node.spouse {
    transform: translateX(150px); /* Match the JavaScript offset for horizontal spacing */
}

/* /Components/Shared/LocalChatHeader.razor.rz.scp.css */
/* LocalChatHeader.razor.css */

/* Header bar - Apple-style frosted glass */
.local-chat-header[b-rwxc14niik] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 1rem);
    /* More breathing room with increased horizontal padding */
    padding: 0.75rem 1.125rem;
    /* Frosted glass - more translucent */
    background: rgba(255, 245, 230, 0.35);
    /* True frosted glass blur */
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    /* Rounded corners */
    border-radius: 16px;
    /* Feathered bottom edge - soft fade */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    z-index: 100;
    min-height: 48px;
    box-sizing: border-box;
    /* Small margin for rounded effect */
    margin: 0.5rem;
}

/* Left Column: Back Button - FLAT arrow only, NO visible container */
.header-back-btn[b-rwxc14niik] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 8px; /* Invisible padding for tap target */
    background: transparent; /* Completely invisible */
    border: none;
    cursor: pointer;
    color: #4a3228; /* Warm dark brown for readability */
    transition: opacity 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.header-back-btn:hover[b-rwxc14niik] {
    opacity: 0.7;
}

.header-back-btn:active[b-rwxc14niik] {
    transform: scale(0.92);
    opacity: 0.6;
}

.header-back-btn svg[b-rwxc14niik] {
    width: 22px;
    height: 22px;
}

/* Center Column: Title */
.header-title[b-rwxc14niik] {
    flex: 1;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: #4b2e2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
    line-height: 1.4;
}

/* Right Column: Actions */
.header-actions[b-rwxc14niik] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* Pen Pal quick action */
.header-penpal-btn[b-rwxc14niik] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    color: #4a3228;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.header-penpal-btn:hover[b-rwxc14niik] {
    opacity: 0.7;
}

.header-penpal-btn:active[b-rwxc14niik] {
    transform: scale(0.92);
    opacity: 0.6;
}

.header-penpal-btn.active[b-rwxc14niik] {
    color: #5a3f34;
}

.header-penpal-icon[b-rwxc14niik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-penpal-icon svg[b-rwxc14niik] {
    width: 22px;
    height: 22px;
}

.header-penpal-badge[b-rwxc14niik] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f4bf9b;
    color: #4b2e2e;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(186, 130, 95, 0.7);
}

/* Right Column: Menu Button - FLAT icon only, NO visible container */
.header-menu-btn[b-rwxc14niik] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 8px; /* Invisible padding for tap target */
    background: transparent; /* Completely invisible */
    border: none;
    cursor: pointer;
    color: #4a3228; /* Warm dark brown for readability */
    transition: opacity 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.header-menu-btn:hover[b-rwxc14niik] {
    opacity: 0.7;
}

.header-menu-btn:active[b-rwxc14niik] {
    transform: scale(0.92);
    opacity: 0.6;
}

.header-menu-btn svg[b-rwxc14niik] {
    width: 22px;
    height: 22px;
}

/* Focus states for accessibility */
.header-back-btn:focus-visible[b-rwxc14niik],
.header-menu-btn:focus-visible[b-rwxc14niik],
.header-penpal-btn:focus-visible[b-rwxc14niik] {
    outline: 2px solid rgba(255, 196, 179, 0.8);
    outline-offset: 2px;
}

/* Dark mode / Night mode support */
@media (prefers-color-scheme: dark) {
    .local-chat-header[b-rwxc14niik] {
        background: rgba(40, 30, 25, 0.3);
    }

    .header-back-btn[b-rwxc14niik],
    .header-menu-btn[b-rwxc14niik] {
        color: #e8ddd6;
    }

    .header-title[b-rwxc14niik] {
        color: #e8ddd6;
    }

    .header-penpal-btn[b-rwxc14niik] {
        color: #e8ddd6;
    }
}

/* /Components/ShareKeepsakeModal.razor.rz.scp.css */
/*  ShareKeepsakeModal  */

.share-modal-overlay[b-vz9mrl836o] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    animation: shareOverlayIn-b-vz9mrl836o 0.2s ease-out;
}

@keyframes shareOverlayIn-b-vz9mrl836o {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-modal-content[b-vz9mrl836o] {
    background: #faf6f1;
    border-radius: 20px;
    width: 480px;
    max-width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    animation: shareContentIn-b-vz9mrl836o 0.25s ease-out;
}

@keyframes shareContentIn-b-vz9mrl836o {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*  Header  */

.share-modal-header[b-vz9mrl836o] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px 0 16px;
}

.share-modal-close[b-vz9mrl836o] {
    background: none;
    border: none;
    font-size: 22px;
    color: #8b6b66;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}

.share-modal-close:hover[b-vz9mrl836o] {
    background: rgba(0, 0, 0, 0.04);
    color: #5a3a33;
}

/*  Body  */

.share-modal-body[b-vz9mrl836o] {
    padding: 4px 28px 8px 28px;
    text-align: center;
}

.share-icon-circle[b-vz9mrl836o] {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

/* LovOne Wax Seal — "Your gift is sealed" confirmation */
.share-seal-area[b-vz9mrl836o] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

[b-vz9mrl836o] .share-seal {
    width: 90px;
    height: 90px;
    animation: sealStamp-b-vz9mrl836o 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes sealStamp-b-vz9mrl836o {
    0% {
        opacity: 0;
        transform: rotate(var(--sigill-rotation, -8deg)) scale(1.3);
    }
    60% {
        opacity: 1;
        transform: rotate(var(--sigill-rotation, -8deg)) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--sigill-rotation, -8deg)) scale(1);
    }
}

.share-title[b-vz9mrl836o] {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: #5a3a33;
    margin: 0 0 6px 0;
}

.share-subtitle[b-vz9mrl836o] {
    color: #6b5a57;
    font-size: 0.95rem;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/*  Error Banner  */

.share-error-banner[b-vz9mrl836o] {
    background: #fef2f2;
    border: 1px solid #f5c6c6;
    color: #b73a3a;
    padding: 10px 20px;
    margin: 0 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    text-align: center;
}

/*  Note Input  */

.share-note-group[b-vz9mrl836o] {
    text-align: left;
}

.share-note-label[b-vz9mrl836o] {
    display: block;
    font-size: 0.85rem;
    color: #8b7355;
    margin-bottom: 6px;
    font-weight: 500;
}

.share-note-input[b-vz9mrl836o] {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    border: 1px solid #e6ddd5;
    border-radius: 12px;
    background: #fff;
    color: #5a3a33;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.share-note-input:focus[b-vz9mrl836o] {
    outline: none;
    border-color: #c4755d;
    box-shadow: 0 0 0 3px rgba(196, 117, 93, 0.12);
}

.share-note-input[b-vz9mrl836o]::placeholder {
    color: #b5a89e;
}

.share-note-charcount[b-vz9mrl836o] {
    display: block;
    text-align: right;
    font-size: 0.78rem;
    color: #b5a89e;
    margin-top: 4px;
}

/*  Link Display  */

.share-link-container[b-vz9mrl836o] {
    display: flex;
    gap: 0;
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e6ddd5;
    background: #f3ede6;
}

.share-link-input[b-vz9mrl836o] {
    flex: 1;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: #5a3a33;
    font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    min-width: 0;
    outline: none;
}

.share-copy-btn[b-vz9mrl836o] {
    padding: 12px 18px;
    background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
    color: #fff;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    min-width: 120px;
}

.share-copy-btn:hover[b-vz9mrl836o] {
    background: linear-gradient(180deg, #d99a80 0%, #b86e54 100%);
}

.share-copied-text[b-vz9mrl836o] {
    color: #fff;
}

/*  Footer  */

.share-modal-footer[b-vz9mrl836o] {
    padding: 12px 28px 24px 28px;
    display: flex;
    justify-content: center;
}

.share-btn-primary[b-vz9mrl836o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(168, 94, 70, 0.25);
}

.share-btn-primary:hover:not(:disabled)[b-vz9mrl836o] {
    background: linear-gradient(180deg, #d99a80 0%, #b86e54 100%);
    transform: translateY(-1px);
}

.share-btn-primary:disabled[b-vz9mrl836o] {
    opacity: 0.7;
    cursor: not-allowed;
}

.share-btn-close[b-vz9mrl836o] {
    padding: 10px 28px;
    background: #fff;
    color: #6b5a57;
    border: 1px solid #e6ddd5;
    border-radius: 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
}

.share-btn-close:hover[b-vz9mrl836o] {
    background: #f5efe9;
}

.share-footer-actions[b-vz9mrl836o] {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.share-btn-revoke[b-vz9mrl836o] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #a85e46;
    border: 1px solid rgba(168, 94, 70, 0.3);
    border-radius: 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn-revoke:hover:not(:disabled)[b-vz9mrl836o] {
    background: rgba(168, 94, 70, 0.08);
    border-color: rgba(168, 94, 70, 0.5);
}

.share-btn-revoke:disabled[b-vz9mrl836o] {
    opacity: 0.6;
    cursor: not-allowed;
}

/*  Spinner  */

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

@keyframes shareSpin-b-vz9mrl836o {
    to { transform: rotate(360deg); }
}

/*  Responsive  */

@media (max-width: 540px) {
    .share-modal-content[b-vz9mrl836o] {
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }

    .share-modal-overlay[b-vz9mrl836o] {
        align-items: flex-end;
    }

    .share-modal-body[b-vz9mrl836o] {
        padding: 4px 20px 8px 20px;
    }

    .share-modal-footer[b-vz9mrl836o] {
        padding: 12px 20px 24px 20px;
    }

    .share-title[b-vz9mrl836o] {
        font-size: 1.3rem;
    }

    .share-link-container[b-vz9mrl836o] {
        flex-direction: column;
    }

    .share-copy-btn[b-vz9mrl836o] {
        border-radius: 0;
        padding: 14px 18px;
    }

    .share-btn-primary[b-vz9mrl836o] {
        width: 100%;
    }
}
/* /Components/SidebarBottom.razor.rz.scp.css */
/* Styles for SidebarBottom component (sidebar user dropdown) */

.sidebar-bottom[b-lacu6cs1fn] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-language-wrapper[b-lacu6cs1fn] {
    width: 100%;
    margin-bottom: 8px;
}

/* Variant for explicit pinning: allows pages to opt-in without depending on specific parent selectors */
.sidebar-bottom.pinned[b-lacu6cs1fn] {
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* stack divider above avatar/name */
    align-items: center; /* center horizontally */
    justify-content: center;
    padding-left: 0;
}

/* Override for loved-one-chat-sidebar: use relative positioning for proper flex layout */
.loved-one-chat-sidebar .sidebar-bottom.pinned[b-lacu6cs1fn] {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: auto;
}

/* Desktop: when the sidebar is fixed (desktop layouts), pin the user block to the viewport bottom
   so it visually aligns with the fixed sidebar. This avoids relying on parent's positioning
   and is a safe, localized override. On small screens the existing media query will revert it. */
@media (min-width: 993px) {
    .sidebar-bottom.pinned[b-lacu6cs1fn] {
        position: fixed;
        left: 0;
        bottom: 22px;
        width: 280px; /* match the main sidebar width */
        padding-left: 0;
        display: flex;
        flex-direction: column; /* stack divider above avatar/name */
        align-items: center; /* center avatar/name horizontally */
        justify-content: flex-end; /* keep block pinned near bottom */
        z-index: 110; /* ensure it appears above main content but below any high z-index toggles */
    }
    
    /* Override for loved-one-chat-sidebar on desktop: keep relative positioning */
    .loved-one-chat-sidebar .sidebar-bottom.pinned[b-lacu6cs1fn] {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        margin-top: auto;
        z-index: auto;
    }
    
    /* Ensure the user-dropdown-menu appears centered above the avatar */
    .sidebar-bottom.pinned .user-dropdown-container[b-lacu6cs1fn] {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .sidebar-bottom.pinned .user-dropdown-menu[b-lacu6cs1fn] {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    /* If the sidebar is collapsed/hidden on desktop, ensure this pinned block does not
       remain visible due to fixed positioning. Target the generic sidebar hidden state
       so the component is not coupled to a specific page implementation. */
    .sidebar.hidden .sidebar-bottom.pinned[b-lacu6cs1fn] {
        display: none !important;
        visibility: hidden !important;
    }
}

.sidebar-divider[b-lacu6cs1fn] {
    height: 1px;
    width: 100%;
    background: rgba(75,46,46,0.06);
    margin-bottom: 8px;
}

.user-dropdown-container[b-lacu6cs1fn] {
    position: relative;
}

.sidebar-user[b-lacu6cs1fn] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}

.user-avatar-circle[b-lacu6cs1fn] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F9D5C9;
    color: #4B2E2E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.user-name[b-lacu6cs1fn] {
    color: #4B2E2E;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.user-name-line[b-lacu6cs1fn] {
    display: inline-flex;
    align-items: center;
    line-height: 1.1;
}

.memory-friend-mini-badge[b-lacu6cs1fn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 125px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(218, 151, 79, 0.14);
    border: 1px solid rgba(170, 112, 59, 0.22);
    color: #70482f;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.memory-friend-mini-badge__mark[b-lacu6cs1fn] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #d7924d;
    box-shadow: 0 0 0 2px rgba(215, 146, 77, 0.16);
}

.dropdown-indicator[b-lacu6cs1fn] {
    transition: transform .18s ease;
    margin-left: 6px;
}

.dropdown-indicator.open[b-lacu6cs1fn] {
    transform: rotate(180deg);
}

.user-dropdown-menu[b-lacu6cs1fn] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%); /* Centered */
    background-color: white;
    border: 1px solid #ccc; /* ThemeChat border */
    border-radius: 8px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 180px;
    width: max-content;
    padding: 8px 0;
    animation: fadeIn 0.2s ease-in-out; /* ThemeChat animation */
}

.user-dropdown-menu .dropdown-item[b-lacu6cs1fn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #4B2E2E;
    text-decoration: none;
    border-radius: 8px;
    margin: 2px 8px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.user-dropdown-menu .dropdown-item:hover[b-lacu6cs1fn] {
    background: #FCE6DA;
}

/* Menu icons styling - brown/sepia color */
.menu-icon[b-lacu6cs1fn] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    font-size: 1rem;
    color: #7B5A53;
    opacity: 0.85;
    text-align: center;
    flex-shrink: 0;
}

/* Granny face icon in menu */
.granny-menu-icon[b-lacu6cs1fn] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid #FFE5D0;
    box-sizing: border-box;

}

/* Special styling for Granny item to make it feel warm */
.dropdown-item.granny-item[b-lacu6cs1fn] {
    background: linear-gradient(135deg, rgba(255, 229, 208, 0.15) 0%, rgba(255, 242, 236, 0.1) 100%);
}

.dropdown-item.granny-item:hover[b-lacu6cs1fn] {
    background: linear-gradient(135deg, rgba(255, 229, 208, 0.4) 0%, rgba(255, 242, 236, 0.3) 100%);
}

/* Separator between main items and logout */
.dropdown-separator[b-lacu6cs1fn] {
    height: 1px;
    background: rgba(75, 46, 46, 0.1);
    margin: 8px 16px;
}

/* Logout item slightly muted */
.dropdown-item.logout-item[b-lacu6cs1fn] {
    opacity: 0.85;
}

.dropdown-item.logout-item:hover[b-lacu6cs1fn] {
    opacity: 1;
}

/* Language selector item in dropdown */
.dropdown-item.language-item[b-lacu6cs1fn] {
    justify-content: flex-start;
}

.dropdown-item.language-item .globe-icon[b-lacu6cs1fn] {
    color: #7B5A53;
}

.submenu-arrow[b-lacu6cs1fn] {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.18s ease;
}

.submenu-arrow.open[b-lacu6cs1fn] {
    transform: rotate(90deg);
}

/* Language submenu */
.language-submenu[b-lacu6cs1fn] {
    background: rgba(249, 213, 201, 0.15);
    border-radius: 6px;
    margin: 4px 8px;
    padding: 4px 0;
    border-left: 2px solid rgba(123, 90, 83, 0.2);
}

.language-submenu .dropdown-item[b-lacu6cs1fn] {
    padding: 10px 16px 10px 24px;
    font-size: 0.85rem;
    margin: 0;
    border-radius: 0;
}

.language-submenu .dropdown-item:first-child[b-lacu6cs1fn] {
    border-radius: 6px 6px 0 0;
}

.language-submenu .dropdown-item:last-child[b-lacu6cs1fn] {
    border-radius: 0 0 6px 6px;
}

.language-submenu .dropdown-item.active[b-lacu6cs1fn] {
    background: rgba(249, 213, 201, 0.4);
    font-weight: 600;
}

.language-submenu .dropdown-item.active[b-lacu6cs1fn]::before {
    content: "✓";
    margin-right: 8px;
    font-size: 0.75rem;
}

keyframes fadeIn[b-lacu6cs1fn] {
    from{
        opacity: 0;
    }

    to[b-lacu6cs1fn] {
        opacity: 1;
    }
}

.dropdown-item[b-lacu6cs1fn] {
    padding: 10px 15px; /* ThemeChat */
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    
}

    .dropdown-item:hover[b-lacu6cs1fn] {
        background-color: var(--soft-border);
    }
    /* ThemeChat hover */
    .dropdown-item .fas[b-lacu6cs1fn] { /* Styles for icons in dropdown */
        width: 16px;
        text-align: center;
        opacity: 0.7;
    }

@media (max-width: 768px) {
    .user-dropdown-menu[b-lacu6cs1fn] {
          /* Constrain menu horizontally with small insets and position it above the pinned avatar
              when the sidebar is displayed as an overlay on very small screens. Use calc to
              respect any bottom safe-area inset on devices like iOS. */
          left: 16px;
          right: 16px;
          bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* 72px accounts for avatar+padding */
          top: auto;
    }
    /* On small screens let the sidebar flow naturally (no absolute positioning) */
    .sidebar-bottom.pinned[b-lacu6cs1fn] {
        position: static;
        padding: 12px 16px;
        justify-content: center;
    }
}

/* Tablet and small-desktop breakpoint: ensure pinned block sits at the bottom of the sidebar overlay
   when the sidebar is used as an overlay (mobile-show). This relies on the parent sidebar using
   display:flex; flex-direction:column so margin-top:auto will push this block to the bottom. */
@media (max-width: 992px) {
    /* If the sidebar becomes an overlay, ensure contents allow pushing bottom block */
    .sidebar.mobile-show[b-lacu6cs1fn], .sidebar.mobile-visible-overlay[b-lacu6cs1fn] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Make the pinned block grow/shrink correctly and sit at the bottom */
    .sidebar-bottom.pinned[b-lacu6cs1fn] {
        position: static !important;
        margin-top: auto; /* push to bottom */
        padding: 12px 16px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Ensure the dropdown menu positions correctly within the overlay */
    .sidebar-bottom.pinned .user-dropdown-menu[b-lacu6cs1fn] {
          /* Center the menu horizontally and keep it above the pinned avatar in overlay mode.
              Use a max-width so it doesn't overflow the overlay on narrow devices. */
          left: 50%;
          right: auto;
          transform: translateX(-50%);
          bottom: calc(72px + env(safe-area-inset-bottom, 0px));
          max-width: calc(100% - 32px);
    }
}

/* /Components/SidebarGuestActions.razor.rz.scp.css */
.sidebar-guest-actions[b-p0yirk08xb] {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}

/* Primary CTA button */
.sidebar-signup-btn[b-p0yirk08xb] {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 24px;
    background: #F9C9B6;
    color: #4B2E2E;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.sidebar-signup-btn:hover[b-p0yirk08xb] {
    background: #F5B8A0;
}

.sidebar-signup-btn:active[b-p0yirk08xb] {
    transform: scale(0.98);
}

/* Micro-copy under signup */
.sidebar-signup-note[b-p0yirk08xb] {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #7B6B63;
}

/* Login text with link */
.sidebar-login-text[b-p0yirk08xb] {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    color: #7B6B63;
}

.sidebar-login-link[b-p0yirk08xb] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4B2E2E;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.sidebar-login-link:hover[b-p0yirk08xb] {
    color: #7B5A53;
    text-decoration: underline;
}

/* Language selector wrapper - more breathing room */
.sidebar-language-wrapper[b-p0yirk08xb] {
    margin-top: 0.5rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid rgba(75, 46, 46, 0.08);
}

@media (max-width: 1024px) {
    .sidebar-guest-actions[b-p0yirk08xb] {
        padding: 1rem 0 0;
    }

    .sidebar-signup-btn[b-p0yirk08xb] {
        min-height: 52px;
        border-radius: 999px;
        background: #F8BFAF;
        box-shadow: 0 12px 26px rgba(100, 63, 47, 0.12);
    }

    .sidebar-signup-note[b-p0yirk08xb] {
        margin-top: 0.65rem;
        margin-bottom: 0.45rem;
        color: #7b675c;
    }

    .sidebar-login-text[b-p0yirk08xb] {
        margin-bottom: 1.05rem;
    }

    .sidebar-language-wrapper[b-p0yirk08xb] {
        margin-top: 0.85rem;
        padding-top: 1rem;
    }
}

@media (max-width: 420px) and (max-height: 740px) {
    .sidebar-guest-actions[b-p0yirk08xb] {
        padding-top: 0.65rem;
    }

    .sidebar-signup-btn[b-p0yirk08xb] {
        min-height: 46px;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .sidebar-signup-note[b-p0yirk08xb] {
        margin-top: 0.42rem;
        margin-bottom: 0.28rem;
        font-size: 0.74rem;
    }

    .sidebar-login-text[b-p0yirk08xb] {
        margin-bottom: 0.7rem;
        font-size: 0.82rem;
    }

    .sidebar-login-link[b-p0yirk08xb] {
        font-size: 0.82rem;
    }

    .sidebar-language-wrapper[b-p0yirk08xb] {
        margin-top: 0.55rem;
        padding-top: 0.72rem;
    }
}

/* /Components/SidebarLanguageSelector.razor.rz.scp.css */
.sidebar-language-selector[b-vqtwqkuy5f] {
    position: relative;
    width: 100%;
}

.language-selector-trigger[b-vqtwqkuy5f] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: transparent;
    border: none;
    color: #4F4A45;
    font-size: 0.92rem;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar-language-selector.compact .language-selector-trigger[b-vqtwqkuy5f] {
    padding: 0.45rem 0.75rem;
    font-size: 0.86rem;
}

.language-selector-trigger:hover[b-vqtwqkuy5f] {
    color: #000;
}

.globe-icon[b-vqtwqkuy5f] {
    flex-shrink: 0;
}

.current-language[b-vqtwqkuy5f] {
    flex-grow: 1;
    text-align: left;
}

.dropdown-arrow[b-vqtwqkuy5f] {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.language-selector-trigger:hover .dropdown-arrow[b-vqtwqkuy5f] {
    transform: translateY(-1px);
}

.language-dropdown[b-vqtwqkuy5f] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    background: #FFFFFF;
    border: 1px solid rgba(79, 74, 69, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    overflow: hidden;
    z-index: 1000;
}

.language-option[b-vqtwqkuy5f] {
    display: block;
    padding: 0.7rem 1rem;
    color: #4F4A45;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 400;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-language-selector.compact .language-option[b-vqtwqkuy5f] {
    font-size: 0.88rem;
}

.language-option:hover[b-vqtwqkuy5f] {
    background-color: rgba(251, 216, 205, 0.3);
    color: #000;
}

.language-option.active[b-vqtwqkuy5f] {
    background-color: rgba(251, 216, 205, 0.5);
    color: #000;
    font-weight: 600;
}

/* /Components/SidebarMenu.razor.rz.scp.css */
.sidebar-menu[b-96ktk9i5i3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.5rem 0 1.5rem;
    width: 100%;
    padding: 0 0.5rem;
}

.sidebar-menu-section[b-96ktk9i5i3] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link {
    align-items: center;
    border-radius: 10px;
    color: var(--text-dark, #4B2E2E);
    display: flex;
    font-size: 0.925rem;
    font-weight: 500;
    gap: 0.75rem;
    line-height: 1.5;
    margin: 0;
    padding: 0.625rem 0.875rem;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.1s ease;
    position: relative;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-icon {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    width: 1.25rem;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-icon svg {
    height: 1.125rem;
    width: 1.125rem;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link:hover {
    background: rgba(75, 46, 46, 0.06);
    color: var(--text-dark, #4B2E2E);
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link:hover .sidebar-menu-icon {
    opacity: 1;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link:focus-visible {
    background: rgba(75, 46, 46, 0.08);
    outline: 2px solid rgba(75, 46, 46, 0.2);
    outline-offset: -2px;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link:active {
    transform: scale(0.98);
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link.active {
    background: rgba(249, 213, 201, 0.5);
    color: #4B2E2E;
    font-weight: 600;
}

.sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link.active .sidebar-menu-icon {
    opacity: 1;
}

/* Night mode styles */
body.night-mode .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link {
    color: var(--text-dark, #E8D5C9);
}

body.night-mode .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dark, #E8D5C9);
}

body.night-mode .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline-color: rgba(255, 255, 255, 0.2);
}

body.night-mode .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link.active {
    background: rgba(255, 111, 97, 0.2);
    color: var(--text-dark, #E8D5C9);
}

@media (max-width: 1024px) {
    .sidebar-menu[b-96ktk9i5i3] {
        gap: 0.2rem;
        margin: 0;
        padding: 0;
    }

    .sidebar-menu-section[b-96ktk9i5i3] {
        gap: 0.18rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link {
        min-height: 48px;
        border-radius: 18px;
        gap: 0.95rem;
        padding: 0.78rem 1rem;
        font-size: 1.08rem;
        letter-spacing: 0;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link--group-start {
        margin-top: 1rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link--group-start::before {
        content: "";
        position: absolute;
        top: calc(-0.45rem - 1px);
        left: 0.95rem;
        right: 0.95rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(130, 93, 70, 0.16), transparent);
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-icon {
        height: 1.6rem;
        width: 1.6rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-icon svg {
        height: 1.35rem;
        width: 1.35rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link.active {
        background: rgba(249, 213, 201, 0.58);
        box-shadow: inset 0 0 0 1px rgba(125, 84, 64, 0.08);
    }
}

@media (max-width: 380px) {
    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link {
        min-height: 44px;
        border-radius: 16px;
        padding: 0.62rem 0.85rem;
        font-size: 0.98rem;
    }
}

@media (max-width: 420px) and (max-height: 740px) {
    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link {
        min-height: 40px;
        border-radius: 14px;
        gap: 0.72rem;
        padding: 0.5rem 0.82rem;
        font-size: 0.94rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link--group-start {
        margin-top: 0.62rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-link--group-start::before {
        top: calc(-0.34rem - 1px);
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-icon {
        height: 1.35rem;
        width: 1.35rem;
    }

    .sidebar-menu[b-96ktk9i5i3]  .sidebar-menu-icon svg {
        height: 1.12rem;
        width: 1.12rem;
    }
}
/* /Components/Sigill.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Sigill — LovOne ceremonial wax seal
   
   Usage: <Sigill Size="SigillSize.Md" />
   
   Sizes:  sm = 64px   (inline confirmations, card corners)
           md = 100px  (modal seals, letter delivered states)
           lg = 130px  (hero placements, full ceremony)
   
   The sigill is a ritual emblem — one per ceremony, never tiled.
   ═══════════════════════════════════════════════════════════ */

.sigill[b-bbtw4tbfbf] {
    display: inline-block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;

    /* Hand-stamped tilt — overridable via --sigill-rotation */
    transform: rotate(var(--sigill-rotation, -8deg));

    /* Layered shadows: contact + ambient depth + warm glow halo */
    filter:
        drop-shadow(0 2px 3px rgba(60, 30, 8, 0.45))
        drop-shadow(0 6px 16px rgba(80, 40, 10, 0.30))
        drop-shadow(0 0 24px rgba(193, 140, 70, 0.18));

    transition: transform 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
}


/* ─── Size variants ─── */

.sigill-sm[b-bbtw4tbfbf] {
    width: 64px;
    height: 64px;
}

.sigill-md[b-bbtw4tbfbf] {
    width: 100px;
    height: 100px;
}

.sigill-lg[b-bbtw4tbfbf] {
    width: 130px;
    height: 130px;
}


/* ─── Muted mode — subtle, desaturated ─── */

.sigill-muted[b-bbtw4tbfbf] {
    opacity: 0.35;
    filter:
        grayscale(30%)
        drop-shadow(0 2px 3px rgba(60, 30, 8, 0.25))
        drop-shadow(0 4px 10px rgba(80, 40, 10, 0.15));
}


/* ─── Night mode ─── */

:global(body.night-mode) .sigill[b-bbtw4tbfbf] {
    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6))
        drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 24px rgba(193, 140, 70, 0.12));
    opacity: 0.85;
}

:global(body.night-mode) .sigill-muted[b-bbtw4tbfbf] {
    opacity: 0.25;
    filter:
        grayscale(40%)
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4))
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
/* /Components/SignUpPromptModal.razor.rz.scp.css */
/* ========================================= */
/*        Shared Modal Overlay Styling       */
/* ========================================= */

.modal-overlay[b-807759vhde] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ensure THIS is the background color applied for BOTH modals */
    background-color: rgba(40, 25, 15, 0.55); /* Lighter overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Base z-index - content inside modals will have higher values */
    z-index: 9999;
}

    .modal-overlay.visible[b-807759vhde] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }



/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-807759vhde] {
    position: relative; /* Needed for pseudo-elements/absolute positioning */
    padding: 30px 45px;
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 10000; /* Ensure content is above overlay and shared chrome */
}

.modal-overlay.visible .modal-content[b-807759vhde] {
    transform: scale(1);
}

/* --- Layered Effect for First Modal --- */
.modal-content.layered-modal[b-807759vhde] {
    background-color: rgb(255, 242, 236); /* The top layer color */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow for top layer */
}

    .modal-content.layered-modal .signup-modal-close[b-807759vhde] {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        color: #9f8e86;
        cursor: pointer;
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        padding: 0;
        z-index: 3;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .modal-content.layered-modal .signup-modal-close:hover[b-807759vhde],
    .modal-content.layered-modal .signup-modal-close:focus-visible[b-807759vhde] {
        color: #6f554a;
        background: rgba(111, 85, 74, 0.08);
        border-radius: 50%;
        outline: none;
    }

    /* The background layer */
    .modal-content.layered-modal[b-807759vhde]::before {
        content: '';
        position: absolute;
        /* Make it slightly larger than the parent */
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        /* Style the background layer */
        background: rgba(255, 255, 255, 0.6); /* Semi-transparent white - adjust as needed */
        /* Or try a light blue/grey: background: rgba(220, 230, 240, 0.4); */
        /* Optional blur effect (can impact performance) */
        /* filter: blur(5px); */
        border-radius: 22px; /* Slightly more rounded than the main content */
        z-index: -1; /* Place it behind the main content */
    }

    /* --- Specific Styles for First Modal Content --- */
    .modal-content.layered-modal .signup-avatar[b-807759vhde] {
        display: flex;
        justify-content: center;
        margin: 4px auto 14px;
    }

    .modal-content.layered-modal .signup-avatar img[b-807759vhde] {
        width: 128px;
        height: 128px;
        border-radius: 50%;
        border: 3px solid #FFE5D0;
        background: linear-gradient(135deg, #FFF9F6 0%, #FFF2EC 100%);
        box-shadow:
            0 4px 15px rgba(83, 51, 43, 0.18),
            0 2px 6px rgba(83, 51, 43, 0.1);
        object-fit: cover;
        display: block;
    }

    .modal-content.layered-modal .signup-headline[b-807759vhde] {
        font-size: 1.8rem;
        font-weight: 600;
        color: #5c4033;
        margin-top: 0;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .modal-content.layered-modal .signup-subtext[b-807759vhde] {
        font-size: 1rem;
        color: #7d6c66;
        margin-bottom: 25px;
        line-height: 1.4;
        padding: 0 10px;
    }

    .modal-content.layered-modal .modal-actions[b-807759vhde] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .modal-content.layered-modal .social-button[b-807759vhde] {
        background-color: #2a2a2a;
        color: white;
        width: 100%;
        padding: 12px 20px;
        border: none;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
        text-align: left;
    }

        .modal-content.layered-modal .social-button:hover[b-807759vhde] {
            background-color: #3f3f3f;
        }

        .modal-content.layered-modal .social-button .social-content[b-807759vhde] {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            gap: 12px;
        }

        .modal-content.layered-modal .social-button .icon-wrapper[b-807759vhde] {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .modal-content.layered-modal .social-button .label[b-807759vhde] {
            flex-grow: 1;
            text-align: center;
        }

    .modal-content.layered-modal .modal-divider[b-807759vhde] {
        display: flex;
        align-items: center;
        text-align: center;
        color: #b0a9a7;
        font-size: 0.85rem;
        margin: 6px 0;
        text-transform: uppercase;
    }

        .modal-content.layered-modal .modal-divider[b-807759vhde]::before, .modal-content.layered-modal .modal-divider[b-807759vhde]::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #e8e4e2;
        }

        .modal-content.layered-modal .modal-divider span[b-807759vhde] {
            padding: 0 0.8em;
        }

        .modal-content.layered-modal .modal-divider[b-807759vhde]::before {
            margin-right: 0;
        }

        .modal-content.layered-modal .modal-divider[b-807759vhde]::after {
            margin-left: 0;
        }

    .modal-content.layered-modal .email-link[b-807759vhde] {
        appearance: none;
        border: 1px solid rgba(125, 108, 102, 0.3);
        background: rgba(255, 255, 255, 0.42);
        font-family: inherit;
        color: #6b5850;
        font-size: 1rem;
        font-weight: 500;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        margin-top: 2px;
        text-decoration: none;
        cursor: pointer;
        padding: 0 18px;
        border-radius: 14px;
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

        .modal-content.layered-modal .email-link:hover[b-807759vhde] {
            border-color: rgba(125, 108, 102, 0.46);
            background-color: rgba(255, 255, 255, 0.66);
            color: #4f3f39;
        }

    .modal-content.layered-modal .terms-text[b-807759vhde] {
        font-size: 0.8rem;
        color: #8f8886;
        text-align: center;
        margin-top: 20px;
        line-height: 1.4;
    }

        .modal-content.layered-modal .terms-text a[b-807759vhde] {
            color: #7d6c66;
            text-decoration: underline;
            font-weight: 500;
        }

            .modal-content.layered-modal .terms-text a:hover[b-807759vhde] {
                color: #5c4033;
            }

    .modal-content.layered-modal .modal-secondary-close[b-807759vhde] {
        background: transparent;
        border: 1px solid #dfcbbd;
        border-radius: 12px;
        color: #7d5f51;
        cursor: pointer;
        font-size: 0.95rem;
        font-weight: 600;
        margin-top: 2px;
        padding: 11px 16px;
        transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
        width: 100%;
    }

    .modal-content.layered-modal .modal-secondary-close:hover[b-807759vhde],
    .modal-content.layered-modal .modal-secondary-close:focus-visible[b-807759vhde] {
        background: rgba(255, 255, 255, 0.45);
        border-color: #caa58d;
        color: #5f4338;
        outline: none;
    }


/* ========================================= */
/*      Email Sign-up Modal Styling        */
/* ========================================= */
/* Use distinct z-index if modals can overlap */
.modal-overlay > .modal-content.email-signup-modal[b-807759vhde] {
    z-index: 1012;
}

.modal-content.email-signup-modal[b-807759vhde] {
    background-color: rgb(255, 242, 236); /* Match page background */
    padding: 25px 35px 30px 35px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    /* No layered effect needed here, styles remain simpler */
}

/* --- Header Elements --- */
.email-signup-modal .back-btn[b-807759vhde],
.email-signup-modal .modal-close-btn[b-807759vhde] {
    position: absolute;
    top: 18px;
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: 300;
    color: #a1a1aa;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
}

.email-signup-modal .back-btn[b-807759vhde] {
    left: 15px;
}

.email-signup-modal .modal-close-btn[b-807759vhde] {
    right: 15px;
}

    .email-signup-modal .back-btn:hover[b-807759vhde], .email-signup-modal .modal-close-btn:hover[b-807759vhde] {
        color: #52525b;
    }

/* Title */
.email-signup-modal h2[b-807759vhde] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #5c4033;
    margin-top: 5px;
    margin-bottom: 8px;
    padding: 0 30px;
    text-align: center;
    line-height: 1.3;
}

/* Subtext */
.email-signup-modal p[b-807759vhde] {
    font-size: 0.95rem;
    color: #7d6c66;
    margin-bottom: 20px;
    line-height: 1.4;
    text-align: center;
}

/* --- Form Elements --- */
.email-signup-modal .form-input[b-807759vhde] {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid #dcd6d4;
    margin-bottom: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;
}

    .email-signup-modal .form-input[b-807759vhde]::placeholder {
        color: #b0a9a7;
    }

    .email-signup-modal .form-input:focus[b-807759vhde] {
        border-color: #ff9d7e;
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.2);
    }

/* Submit/Close Buttons */
.email-signup-modal .btn-email-submit[b-807759vhde],
.email-signup-modal .btn-close-success[b-807759vhde] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background-color: #ff9d7e;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .email-signup-modal .btn-email-submit:hover[b-807759vhde], .email-signup-modal .btn-close-success:hover[b-807759vhde] {
        background-color: #ff855f;
    }

.email-signup-modal .btn-close-success[b-807759vhde] {
    margin-top: 15px;
}

/* Success State Text */
.email-signup-modal h2:has(+ p strong)[b-807759vhde] {
    margin-bottom: 10px;
}

.email-signup-modal p:has(strong)[b-807759vhde] {
    margin-bottom: 20px;
    text-align: center;
}

.modal-content.layered-modal .modal-text-link[b-807759vhde] {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    color: #d97706;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    display: inline-flex;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-content.layered-modal .modal-text-link:hover[b-807759vhde] {
    background-color: rgba(217, 119, 6, 0.1);
}

.modal-content.layered-modal .manual-login-link[b-807759vhde] {
    text-align: center;
    margin-top: 0;
    color: #7d6c66;
    font-size: 0.92rem;
}

@media (max-width: 768px) {
    .modal-overlay[b-807759vhde] {
        align-items: stretch;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
        background: #fff9f5;
    }

    .modal-content[b-807759vhde],
    .modal-content.layered-modal[b-807759vhde] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        padding: calc(56px + env(safe-area-inset-top, 0px)) 24px calc(22px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: #fff9f5;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
        box-sizing: border-box;
    }

    .modal-overlay.visible .modal-content[b-807759vhde] {
        transform: none;
    }

    .modal-content.layered-modal[b-807759vhde]::before {
        display: none;
    }

    .modal-content.layered-modal .signup-modal-close[b-807759vhde] {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        font-size: 2rem;
        color: #8f7d75;
    }

    .modal-content.layered-modal .signup-avatar[b-807759vhde] {
        margin: 4px auto 18px;
    }

    .modal-content.layered-modal .signup-avatar img[b-807759vhde] {
        width: 92px;
        height: 92px;
        border-width: 2px;
        box-shadow: 0 8px 22px rgba(83, 51, 43, 0.14);
    }

    .modal-content.layered-modal .signup-headline[b-807759vhde] {
        max-width: 340px;
        margin-bottom: 10px;
        font-size: 2.1rem;
        line-height: 1.12;
    }

    .modal-content.layered-modal .signup-subtext[b-807759vhde] {
        max-width: 320px;
        margin-bottom: 26px;
        padding: 0;
        font-size: 1rem;
        line-height: 1.38;
    }

    .modal-content.layered-modal .modal-actions[b-807759vhde] {
        width: 100%;
        max-width: 342px;
        gap: 12px;
    }

    .modal-content.layered-modal .social-button[b-807759vhde],
    .modal-content.layered-modal .email-link[b-807759vhde] {
        min-height: 54px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .modal-content.layered-modal .social-button[b-807759vhde] {
        padding: 0 18px;
    }

    .modal-content.layered-modal .email-link[b-807759vhde] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 18px;
        border: 1px solid rgba(125, 108, 102, 0.32);
        background: rgba(255, 255, 255, 0.52);
        color: #6b5850;
    }

    .modal-content.layered-modal .modal-divider[b-807759vhde] {
        margin: 0;
        color: #beb6b1;
        font-size: 0.76rem;
    }

    .modal-content.layered-modal .manual-login-link[b-807759vhde] {
        display: flex;
        justify-content: center;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 7px;
        margin-top: 8px;
        font-size: 0.94rem;
        line-height: 1.35;
    }

    .modal-content.layered-modal .modal-text-link[b-807759vhde] {
        padding: 0;
        font-size: 0.94rem;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .modal-content.layered-modal .terms-text[b-807759vhde] {
        max-width: 310px;
        margin: 4px auto 0;
        padding-top: 28px;
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .modal-content.layered-modal .modal-secondary-close[b-807759vhde] {
        display: none;
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .modal-content[b-807759vhde],
    .modal-content.layered-modal[b-807759vhde] {
        padding-top: calc(46px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .modal-content.layered-modal .signup-avatar[b-807759vhde] {
        margin-bottom: 12px;
    }

    .modal-content.layered-modal .signup-avatar img[b-807759vhde] {
        width: 72px;
        height: 72px;
    }

    .modal-content.layered-modal .signup-headline[b-807759vhde] {
        font-size: 1.7rem;
        margin-bottom: 7px;
    }

    .modal-content.layered-modal .signup-subtext[b-807759vhde] {
        margin-bottom: 18px;
        font-size: 0.92rem;
    }

    .modal-content.layered-modal .modal-actions[b-807759vhde] {
        gap: 9px;
    }

    .modal-content.layered-modal .social-button[b-807759vhde],
    .modal-content.layered-modal .email-link[b-807759vhde] {
        min-height: 48px;
    }

    .modal-content.layered-modal .terms-text[b-807759vhde] {
        padding-top: 18px;
        font-size: 0.72rem;
    }
}

/* /Components/StandardAuthModal.razor.rz.scp.css */
/* ========================================= */
/*     Username/Password Modal Styling       */
/*    (Matching Email Signup Modal Style)    */
/* ========================================= */

/* --- Modal Overlay (Shared - Keep Consistent) --- */
/* ========================================= */
/*        Email Sign Up Modal Styling        */
/* ========================================= */

/* --- Modal Overlay (Shared?) --- */
/* If this is shared with other modals, keep it separate */
.modal-overlay[b-8fg4toi05x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55); /* Dim overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 9999;
}

    .modal-overlay.visible[b-8fg4toi05x] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }





/* --- Modal Content Box --- */
.modal-content.standard-auth-modal[b-8fg4toi05x] {
    background-color: rgb(255, 242, 236); /* Match page background */

    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative; /* Needed for pseudo-element & absolute buttons */
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 10000; /* Ensure content is above overlay and shared chrome */
}

.modal-overlay.visible .modal-content.standard-auth-modal[b-8fg4toi05x] {
    transform: scale(1);
}

/* Close and Back Buttons */
.standard-auth-modal .back-btn[b-8fg4toi05x],
.standard-auth-modal .modal-close-btn[b-8fg4toi05x] {
    position: absolute;
    top: 16px; /* Adjust vertical position */
    background: none;
    border: none;
    font-size: 1.5rem; /* Adjust size */
    font-weight: 400; /* Standard weight */
    color: #AEAEB2; /* Light grey, match target */
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    transition: color 0.2s ease;
    z-index: 1020;
}

.standard-auth-modal .back-btn[b-8fg4toi05x] {
    left: 12px;
}

.standard-auth-modal .modal-close-btn[b-8fg4toi05x] {
    right: 12px;
}

    .standard-auth-modal .back-btn:hover[b-8fg4toi05x],
    .standard-auth-modal .modal-close-btn:hover[b-8fg4toi05x] {
        color: #6C6C70; /* Darker grey on hover */
    }


/* --- Tabs --- */
.standard-auth-modal .modal-tabs[b-8fg4toi05x] {
    display: flex;
    /* Remove background, rely on main modal background */
    border-bottom: 1px solid #E5E5EA; /* Subtle separator line like 'OR' line */
    margin: 0 25px; /* Add some horizontal margin */
    padding-top: 50px; /* Space below close/back buttons */
}

    .standard-auth-modal .modal-tabs button[b-8fg4toi05x] {
        flex: 1;
        padding: 12px 10px; /* Adjust padding */
        border: none;
        background-color: transparent;
        font-size: 1rem; /* Match target style */
        font-weight: 500; /* Medium weight */
        color: #8A8A8E; /* Inactive tab color - match target */
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease;
        border-bottom: 2px solid transparent; /* Indicator line space */
        margin-bottom: -1px; /* Overlap border-bottom */
    }

        .standard-auth-modal .modal-tabs button:focus-visible[b-8fg4toi05x] {
            box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.3); /* Keep focus style */
            outline: none;
        }


        .standard-auth-modal .modal-tabs button.active[b-8fg4toi05x] {
            color: #000; /* Active tab color - match target */
            font-weight: 600; /* Slightly bolder */
            border-bottom-color: #000; /* Active indicator line color - match target */
        }

/* --- Form Content Area --- */
.standard-auth-modal .modal-form-content[b-8fg4toi05x] {
    padding: 25px 30px 30px 30px; /* Consistent padding */
    text-align: center;
}

    /* Title inside form area */
    .standard-auth-modal .modal-form-content h2[b-8fg4toi05x] {
        font-size: 1.6rem; /* Match target */
        font-weight: 600;
        color: #1D1D1F; /* Match target title color */
        margin-top: 0;
        margin-bottom: 25px;
        text-align: center;
    }

/* Form Inputs */
.standard-auth-modal .form-input[b-8fg4toi05x] {
    width: 100%;
    padding: 14px 16px; /* Match target padding */
    font-size: 1rem;
    border-radius: 12px; /* Match target rounding */
    border: 1px solid #D1D1D6; /* Match target border color */
    margin-bottom: 16px; /* Match target spacing */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff; /* White background */
}

    .standard-auth-modal .form-input[b-8fg4toi05x]::placeholder {
        color: #8A8A8E; /* Match target placeholder color */
    }

    .standard-auth-modal .form-input:focus[b-8fg4toi05x] {
        border-color: #ff9d7e; /* Your primary focus color */
        outline: none;
        box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.25); /* Your focus glow */
    }

.standard-auth-modal .password-requirements[b-8fg4toi05x] {
    display: block;
    margin: -6px 2px 0;
    color: #7d6c66;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
}

.standard-auth-modal .passwordless-login-link[b-8fg4toi05x] {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin-top: 16px;
    color: #7d6c66;
    font-size: 0.88rem;
    line-height: 1.35;
}

.standard-auth-modal .auth-text-link[b-8fg4toi05x] {
    appearance: none;
    border: 0;
    background: transparent;
    color: #d97706;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.standard-auth-modal .auth-text-link:hover[b-8fg4toi05x],
.standard-auth-modal .auth-text-link:focus-visible[b-8fg4toi05x] {
    color: #b45309;
    outline: none;
}

.standard-auth-modal .verification-required-content[b-8fg4toi05x] {
    padding-top: 58px;
}

.standard-auth-modal .verification-eyebrow[b-8fg4toi05x] {
    margin: 0 0 10px;
    color: #a66f49;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.standard-auth-modal .verification-body[b-8fg4toi05x] {
    margin: -8px 0 14px;
    color: #58463c;
    font-size: 0.98rem;
    line-height: 1.55;
}

.standard-auth-modal .verification-note[b-8fg4toi05x] {
    margin: 0 0 18px;
    color: #7d6c66;
    font-size: 0.88rem;
    line-height: 1.45;
}

.standard-auth-modal .verification-status[b-8fg4toi05x] {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.4;
}

.standard-auth-modal .verification-status.success[b-8fg4toi05x] {
    background: rgba(70, 174, 83, 0.12);
    border: 1px solid rgba(70, 174, 83, 0.25);
    color: #276b32;
}

.standard-auth-modal .verification-status.warning[b-8fg4toi05x] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #b4232f;
}

/* Submit Button */
.standard-auth-modal .btn-submit[b-8fg4toi05x] {
    width: 100%;
    padding: 14px; /* Match target height */
    border-radius: 12px; /* Match target rounding */
    background-color: #ff9d7e; /* Your primary action color */
    color: white;
    font-size: 1rem; /* Match target */
    font-weight: 600; /* Match target */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    margin-top: 15px;
}

    .standard-auth-modal .btn-submit:hover:not(:disabled)[b-8fg4toi05x] {
        background-color: #ff855f; /* Darker shade */
    }

.standard-auth-modal .btn-secondary-auth[b-8fg4toi05x] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #dfcbbd;
    background: transparent;
    color: #7d5f51;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

    .standard-auth-modal .btn-secondary-auth:hover[b-8fg4toi05x] {
        background: rgba(255, 255, 255, 0.45);
        border-color: #caa58d;
        color: #5f4338;
    }

    .standard-auth-modal .btn-submit:disabled[b-8fg4toi05x] {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* --- Loading / Error States (Keep consistent) --- */

.standard-auth-modal .modal-error-message[b-8fg4toi05x] {
    color: var(--error-color, #c81e1e);
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-align: center;
}

.standard-auth-modal .loading-indicator[b-8fg4toi05x] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: #7d6c66;
    font-size: 1rem;
}

.standard-auth-modal .spinner[b-8fg4toi05x] {
    display: inline-block;
    border: 3px solid rgba(125, 108, 102, 0.3);
    border-radius: 50%;
    border-top-color: #7d6c66;
    width: 1.5em;
    height: 1.5em;
    animation: spin-b-8fg4toi05x 1s linear infinite;
    margin-right: 12px;
}

.modal-content.standard-auth-modal[b-8fg4toi05x]::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
    /* Optional blur: filter: blur(5px); */
    border-radius: 22px; /* Slightly more rounded */
    z-index: -1; /* Behind the main content */
}

.standard-auth-modal .modal-tabs[b-8fg4toi05x],
.standard-auth-modal .modal-form-content[b-8fg4toi05x] {
    position: relative;
    z-index: 2;
}

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

.forgot-password-link[b-8fg4toi05x] {
    text-align: right;
    font-size: 0.85rem;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .modal-overlay[b-8fg4toi05x] {
        align-items: stretch;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
        background: #fff9f5;
    }

    .modal-content.standard-auth-modal[b-8fg4toi05x] {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
        border-radius: 0;
        background: #fff9f5;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
        box-sizing: border-box;
    }

    .modal-overlay.visible .modal-content.standard-auth-modal[b-8fg4toi05x] {
        transform: none;
    }

    .modal-content.standard-auth-modal[b-8fg4toi05x]::before {
        display: none;
    }

    .standard-auth-modal .back-btn[b-8fg4toi05x],
    .standard-auth-modal .modal-close-btn[b-8fg4toi05x] {
        top: calc(10px + env(safe-area-inset-top, 0px));
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.7rem;
        color: #8f7d75;
    }

    .standard-auth-modal .back-btn[b-8fg4toi05x] {
        left: calc(12px + env(safe-area-inset-left, 0px));
    }

    .standard-auth-modal .modal-close-btn[b-8fg4toi05x] {
        right: calc(12px + env(safe-area-inset-right, 0px));
    }

    .standard-auth-modal .modal-tabs[b-8fg4toi05x] {
        width: calc(100% - 48px);
        max-width: 360px;
        margin: 0 auto;
        padding-top: calc(66px + env(safe-area-inset-top, 0px));
    }

    .standard-auth-modal .modal-tabs button[b-8fg4toi05x] {
        min-height: 48px;
    }

    .standard-auth-modal .modal-form-content[b-8fg4toi05x] {
        width: calc(100% - 48px);
        max-width: 360px;
        margin: 0 auto;
        padding: 26px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .standard-auth-modal .verification-required-content[b-8fg4toi05x] {
        padding-top: calc(88px + env(safe-area-inset-top, 0px));
    }

    .standard-auth-modal .modal-form-content h2[b-8fg4toi05x] {
        margin-bottom: 22px;
        font-size: 2rem;
        line-height: 1.15;
    }

    .standard-auth-modal .form-input[b-8fg4toi05x] {
        min-height: 52px;
        margin-bottom: 14px;
    }

    .standard-auth-modal .btn-submit[b-8fg4toi05x],
    .standard-auth-modal .btn-secondary-auth[b-8fg4toi05x] {
        min-height: 52px;
    }
}

@media (max-width: 768px) and (max-height: 720px) {
    .standard-auth-modal .modal-tabs[b-8fg4toi05x] {
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }

    .standard-auth-modal .modal-form-content[b-8fg4toi05x] {
        padding-top: 18px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .standard-auth-modal .verification-required-content[b-8fg4toi05x] {
        padding-top: calc(72px + env(safe-area-inset-top, 0px));
    }

    .standard-auth-modal .modal-form-content h2[b-8fg4toi05x] {
        margin-bottom: 16px;
        font-size: 1.45rem;
    }
}

/* /Components/SubmitMemoryModal.razor.rz.scp.css */
/* SubmitMemoryModal.razor.css */

.submit-modal-overlay[b-nlbky294cm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(35, 25, 18, 0.72);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
    padding: 1rem;
}

.submit-modal-content[b-nlbky294cm] {
    background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
    border-radius: 20px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(139, 115, 85, 0.25);
    border: 1px solid rgba(232, 213, 200, 0.4);
    transition: max-width 0.3s ease, max-height 0.3s ease, border-radius 0.3s ease;
}

.submit-modal-header[b-nlbky294cm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem 0;
}

.submit-modal-close[b-nlbky294cm] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #8B7355;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.submit-modal-close:hover[b-nlbky294cm] {
    color: #5C4033;
}

.submit-modal-maximize[b-nlbky294cm] {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #8B7355;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
}

.submit-modal-maximize:hover[b-nlbky294cm] {
    color: #5C4033;
    background: rgba(139, 115, 85, 0.08);
}

.submit-modal-body[b-nlbky294cm] {
    padding: 0 2rem 1.5rem;
    text-align: center;
}

.submit-icon-circle[b-nlbky294cm] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.submit-title[b-nlbky294cm] {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: #3A3228;
    margin: 0.25rem 0 0.25rem;
}

.submit-subtitle[b-nlbky294cm] {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #6B5B4E;
    line-height: 1.6;
    margin: 0;
}

.submit-error-banner[b-nlbky294cm] {
    background: #FFF0F0;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin: 0.75rem 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #a94442;
    text-align: left;
}

.submit-field-group[b-nlbky294cm] {
    margin-top: 0.75rem;
    text-align: left;
}

/* Hero field (textarea) gets more space */
.submit-field-hero[b-nlbky294cm] {
    margin-top: 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Compact fields (author details) */
.submit-field-compact[b-nlbky294cm] {
    margin-top: 0.5rem;
}

/* Author section — visually lighter, separated */
.submit-author-section[b-nlbky294cm] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(232, 213, 200, 0.35);
}

/* Name + Relation side by side */
.submit-author-row[b-nlbky294cm] {
    display: flex;
    gap: 0.75rem;
}

.submit-author-row .submit-field-compact[b-nlbky294cm] {
    flex: 1;
    min-width: 0;
}

/* Editor meta line (charcount + hint) */
.submit-editor-meta[b-nlbky294cm] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.3rem;
    gap: 0.5rem;
}

.submit-label[b-nlbky294cm] {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: #5C4033;
    margin-bottom: 0.35rem;
}

.submit-input[b-nlbky294cm] {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(232, 213, 200, 0.6);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #3A3228;
    background: rgba(255, 255, 255, 0.7);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.submit-input:focus[b-nlbky294cm] {
    border-color: #C49A6C;
}

.submit-textarea[b-nlbky294cm] {
    width: 100%;
    min-height: 420px;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(232, 213, 200, 0.6);
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #3A3228;
    background: rgba(255, 255, 255, 0.7);
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.submit-textarea:focus[b-nlbky294cm] {
    border-color: #C49A6C;
}

.submit-charcount[b-nlbky294cm] {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #A89880;
    white-space: nowrap;
}

.submit-formatting-hint[b-nlbky294cm] {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #9B8579;
    font-style: italic;
    text-align: right;
}

.submit-image-section[b-nlbky294cm] {
    margin-top: 1rem;
}

.submit-image-section-header[b-nlbky294cm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.submit-image-picker[b-nlbky294cm] {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 72px;
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 1px dashed rgba(164, 123, 80, 0.35);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    color: #6B5B4E;
    font-family: var(--font-sans);
    font-size: 0.92rem;
}

.submit-image-input[b-nlbky294cm] {
    display: none;
}

.submit-image-picker-btn[b-nlbky294cm] {
    flex-shrink: 0;
    min-width: 136px;
    border: 1px solid rgba(164, 123, 80, 0.28);
    border-radius: 999px;
    background: linear-gradient(145deg, #fff8ee 0%, #f7ead7 100%);
    color: #5c4033;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.submit-image-picker-name[b-nlbky294cm] {
    min-width: 0;
    font-size: 0.95rem;
    color: #7b6757;
    line-height: 1.35;
    word-break: break-word;
}

.submit-image-preview-card[b-nlbky294cm] {
    position: relative;
    margin-top: 0.5rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(232, 213, 200, 0.6);
    background: rgba(255, 255, 255, 0.75);
}

.submit-image-preview[b-nlbky294cm] {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.submit-image-remove[b-nlbky294cm] {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(58, 50, 40, 0.8);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.submit-modal-footer[b-nlbky294cm] {
    padding: 0 2rem 1.5rem;
    text-align: center;
}

.submit-footer-actions[b-nlbky294cm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.submit-btn-primary[b-nlbky294cm] {
    background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s;
}

.submit-btn-primary:hover:not(:disabled)[b-nlbky294cm] {
    opacity: 0.9;
}

.submit-btn-primary:disabled[b-nlbky294cm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-btn-secondary[b-nlbky294cm] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 24px;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #6B5B4E;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-btn-secondary:hover[b-nlbky294cm] {
    background: rgba(164, 123, 80, 0.08);
}

.submit-btn-close[b-nlbky294cm] {
    background: transparent;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 24px;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #6B5B4E;
    cursor: pointer;
}

.submit-spinner[b-nlbky294cm] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-nlbky294cm 0.7s linear infinite;
}

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

.submit-required[b-nlbky294cm] {
    color: #c4755d;
    font-weight: 600;
}

.submit-field-hint[b-nlbky294cm] {
    display: block;
    font-size: 0.8rem;
    color: #8B7355;
    font-style: italic;
    margin-top: 0.25rem;
}

.submit-consent-group[b-nlbky294cm] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.submit-consent-label[b-nlbky294cm] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #5A534C;
    cursor: pointer;
    line-height: 1.4;
}

.submit-consent-label input[type="checkbox"][b-nlbky294cm] {
    margin-top: 0.2rem;
    accent-color: #C49A6C;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.submit-verify-hint[b-nlbky294cm] {
    font-size: 0.9rem;
    color: #8B7355;
    font-style: italic;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(196, 154, 108, 0.08);
    border-radius: 8px;
    border-left: 3px solid #C49A6C;
    text-align: left;
}

/* ========== Maximized state (desktop) ========== */

.submit-modal-content.maximized[b-nlbky294cm] {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.submit-modal-content.maximized .submit-modal-body[b-nlbky294cm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.submit-modal-content.maximized .submit-field-hero[b-nlbky294cm] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.submit-modal-content.maximized .submit-editor-container[b-nlbky294cm] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.submit-modal-content.maximized .submit-textarea[b-nlbky294cm],
.submit-modal-content.maximized .submit-preview-content[b-nlbky294cm],
.submit-modal-content.maximized .submit-preview-empty[b-nlbky294cm] {
    flex: 1;
    min-height: 300px;
}

.submit-modal-content.maximized .submit-modal-footer[b-nlbky294cm] {
    flex-shrink: 0;
}

/* Mobile full-screen */
@media (max-width: 540px) {
    .submit-modal-overlay[b-nlbky294cm] {
        align-items: stretch;
        padding: 0;
    }

    .submit-modal-content[b-nlbky294cm] {
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Compact header — close button doesn't waste a full row */
    .submit-modal-header[b-nlbky294cm] {
        padding: 0.5rem 0.75rem 0;
        min-height: auto;
    }

    /* Bigger tap target for close button */
    .submit-modal-close[b-nlbky294cm] {
        font-size: 1.6rem;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 0;
    }

    .submit-modal-body[b-nlbky294cm] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0 1.25rem 1rem;
    }

    /* Title in input mode — inline with header row on mobile */
    .submit-title-input[b-nlbky294cm] {
        font-size: 1.1rem;
        margin: 0 0 0.25rem;
        text-align: left;
    }

    .submit-field-hero[b-nlbky294cm] {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .submit-editor-container[b-nlbky294cm] {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .submit-textarea[b-nlbky294cm],
    .submit-preview-content[b-nlbky294cm],
    .submit-preview-empty[b-nlbky294cm] {
        flex: 1;
        min-height: 380px;
    }

    /* Tighter formatting hint — single line */
    .submit-formatting-hint[b-nlbky294cm] {
        font-size: 0.72rem;
    }

    /* Bigger B/I toolbar buttons for touch */
    .submit-toolbar-btn[b-nlbky294cm] {
        min-width: 36px;
        min-height: 36px;
        font-size: 1rem;
        padding: 0.35rem 0.6rem;
        border-radius: 6px;
    }

    .submit-tab[b-nlbky294cm] {
        padding: 0.55rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Author section — generous spacing for touch */
    .submit-author-section[b-nlbky294cm] {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .submit-author-row[b-nlbky294cm] {
        flex-direction: column;
        gap: 0;
    }

    .submit-field-compact[b-nlbky294cm] {
        margin-top: 0.75rem;
    }

    .submit-label[b-nlbky294cm] {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .submit-input[b-nlbky294cm] {
        padding: 0.75rem 0.9rem;
        font-size: 1rem;
    }

    /* Marketing consent — bigger checkbox, comfortable row */
    .submit-consent-group[b-nlbky294cm] {
        margin-top: 1rem;
        margin-bottom: 0.75rem;
    }

    .submit-consent-label[b-nlbky294cm] {
        gap: 0.75rem;
        font-size: 0.9rem;
        padding: 0.6rem 0;
    }

    .submit-consent-label input[type="checkbox"][b-nlbky294cm] {
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    /* Footer — full-width stacked buttons for mobile */
    .submit-modal-footer[b-nlbky294cm] {
        flex-shrink: 0;
        padding: 0.75rem 1.25rem 1.25rem;
    }

    .submit-footer-actions[b-nlbky294cm] {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .submit-btn-primary[b-nlbky294cm],
    .submit-btn-secondary[b-nlbky294cm] {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.5rem;
        font-size: 1rem;
    }

    .submit-image-picker[b-nlbky294cm] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        min-height: 0;
    }

    .submit-image-picker-btn[b-nlbky294cm] {
        width: 100%;
    }

    .submit-image-picker-name[b-nlbky294cm] {
        text-align: center;
    }

    .submit-modal-maximize[b-nlbky294cm] {
        display: none;
    }
}

/* ========== Granny Ambassador — Guest Thank You ========== */

.submit-granny-ambassador[b-nlbky294cm] {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 229, 208, 0.6);
    box-shadow:
        0 0 28px rgba(210, 160, 90, 0.2),
        0 4px 16px rgba(139, 115, 85, 0.12);
    animation: grannyFadeIn-b-nlbky294cm 0.6s ease-out;
}

.submit-granny-image[b-nlbky294cm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes grannyFadeIn-b-nlbky294cm {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.submit-granny-cta[b-nlbky294cm] {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(232, 213, 200, 0.3);
}

.submit-granny-intro[b-nlbky294cm] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.88rem;
    color: #8B7355;
    line-height: 1.6;
    margin: 0 0 0.6rem;
}

.submit-granny-link[b-nlbky294cm] {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #A67B50;
    text-decoration: none;
    border: 1px solid rgba(164, 123, 80, 0.3);
    border-radius: 24px;
    padding: 0.5rem 1.3rem;
    transition: all 0.2s ease;
}

.submit-granny-link:hover[b-nlbky294cm] {
    background: rgba(164, 123, 80, 0.08);
    border-color: rgba(164, 123, 80, 0.5);
}

/* Night mode — Granny ambassador */
body.night-mode .submit-granny-ambassador[b-nlbky294cm] {
    border-color: rgba(196, 154, 108, 0.25);
    box-shadow: 0 0 28px rgba(196, 154, 108, 0.15), 0 4px 16px rgba(0, 0, 0, 0.25);
}

body.night-mode .submit-granny-intro[b-nlbky294cm] {
    color: #A0B4BC;
}

body.night-mode .submit-granny-link[b-nlbky294cm] {
    color: #C49A6C;
    border-color: rgba(196, 154, 108, 0.25);
}

body.night-mode .submit-granny-link:hover[b-nlbky294cm] {
    background: rgba(196, 154, 108, 0.08);
}

/* ========== Editor Tab Bar (GitHub-style) ========== */

.submit-editor-tabbar[b-nlbky294cm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(232, 213, 200, 0.5);
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

.submit-tabbar-left[b-nlbky294cm] {
    display: flex;
    gap: 0;
}

.submit-tab[b-nlbky294cm] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #8B7355;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.submit-tab.active[b-nlbky294cm] {
    color: #5C4033;
    border-bottom-color: #C49A6C;
    font-weight: 600;
}

.submit-toolbar[b-nlbky294cm] {
    display: flex;
    gap: 2px;
}

.submit-toolbar-btn[b-nlbky294cm] {
    background: none;
    border: 1px solid rgba(232, 213, 200, 0.4);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #8B7355;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.submit-toolbar-btn:hover[b-nlbky294cm] {
    background: rgba(196, 154, 108, 0.12);
    color: #5C4033;
}

.submit-toolbar-btn-italic[b-nlbky294cm] {
    font-style: italic;
}

/* Editor Container — single area, switches content */
.submit-editor-container[b-nlbky294cm] {
    display: flex;
    flex-direction: column;
}

.submit-preview-content[b-nlbky294cm] {
    min-height: 280px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(232, 213, 200, 0.4);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: rgba(255, 253, 248, 0.6);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #3A3228;
    line-height: 1.65;
}

.submit-preview-empty[b-nlbky294cm] {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(232, 213, 200, 0.3);
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: rgba(255, 253, 248, 0.4);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: #A89880;
    font-style: italic;
}

/* Night mode — Toolbar & Preview */
body.night-mode .submit-editor-tabbar[b-nlbky294cm] {
    border-bottom-color: rgba(196, 154, 108, 0.15);
}

body.night-mode .submit-toolbar-btn[b-nlbky294cm] {
    border-color: rgba(196, 154, 108, 0.2);
    color: #A0B4BC;
}

body.night-mode .submit-toolbar-btn:hover[b-nlbky294cm] {
    background: rgba(196, 154, 108, 0.12);
    color: #C49A6C;
}

body.night-mode .submit-tab[b-nlbky294cm] {
    color: #A0B4BC;
}

body.night-mode .submit-tab.active[b-nlbky294cm] {
    color: #C49A6C;
    border-bottom-color: #C49A6C;
}

body.night-mode .submit-preview-content[b-nlbky294cm] {
    background: rgba(30, 28, 25, 0.6);
    border-color: rgba(196, 154, 108, 0.15);
    color: #D4C5B0;
}

body.night-mode .submit-preview-empty[b-nlbky294cm] {
    background: rgba(30, 28, 25, 0.4);
    border-color: rgba(196, 154, 108, 0.1);
    color: #7A6E60;
}

body.night-mode .submit-author-section[b-nlbky294cm] {
    border-top-color: rgba(196, 154, 108, 0.15);
}

body.night-mode .submit-textarea[b-nlbky294cm] {
    background: rgba(30, 28, 25, 0.6);
    border-color: rgba(196, 154, 108, 0.2);
    color: #D4C5B0;
}

body.night-mode .submit-textarea:focus[b-nlbky294cm] {
    border-color: #C49A6C;
}

body.night-mode .submit-image-picker[b-nlbky294cm] {
    background: rgba(30, 28, 25, 0.6);
    border-color: rgba(196, 154, 108, 0.25);
    color: #D4C5B0;
}

body.night-mode .submit-image-picker-btn[b-nlbky294cm] {
    background: linear-gradient(145deg, rgba(76, 61, 42, 0.95) 0%, rgba(96, 74, 47, 0.95) 100%);
    border-color: rgba(196, 154, 108, 0.28);
    color: #f2e4d0;
}

body.night-mode .submit-image-picker-name[b-nlbky294cm] {
    color: #c3b29d;
}

body.night-mode .submit-image-preview-card[b-nlbky294cm] {
    background: rgba(30, 28, 25, 0.7);
    border-color: rgba(196, 154, 108, 0.15);
}
/* /Components/ThemeCard.razor.rz.scp.css */
.theme-card[b-1vwid2st8w] {
    background: linear-gradient(180deg, #fffaf5 0%, #fbf1e7 100%);
    border: 1px solid rgba(154, 111, 72, 0.18);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(89, 60, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 300px;
    min-width: 300px;
    align-self: stretch;
    flex-shrink: 0;
    transition: all 0.3s ease;
    scroll-snap-align: start; /* CSS Scroll Snap */
    max-width: 95vw;
    position: relative; /* For heart button positioning */
    cursor: pointer;
}

.theme-card:hover[b-1vwid2st8w],
.theme-card:focus-within[b-1vwid2st8w] {
    transform: translateY(-4px);
    border-color: rgba(154, 111, 72, 0.32);
    box-shadow: 0 14px 30px rgba(89, 60, 38, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    z-index: 10;
}

.theme-card--unavailable[b-1vwid2st8w] {
    cursor: default;
}

.theme-card--unavailable:hover[b-1vwid2st8w],
.theme-card--unavailable:focus-within[b-1vwid2st8w] {
    transform: none;
}

.theme-card-link[b-1vwid2st8w] {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
    border-radius: inherit;
}

.theme-card-link:focus-visible[b-1vwid2st8w] {
    outline: 2px solid #d2a16f;
    outline-offset: -4px;
}

/* ===== FAVORITE HEART BUTTON ===== */
.favorite-heart-btn[b-1vwid2st8w] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(207, 174, 129, 0.42);
    border-radius: 50%;
    background: rgba(252, 245, 232, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.82;
    box-shadow: 0 2px 6px rgba(88, 62, 40, 0.12);
    transition: opacity 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
    pointer-events: auto;
}

.favorite-heart-btn:hover[b-1vwid2st8w] {
    opacity: 0.96;
    border-color: rgba(205, 157, 98, 0.56);
    box-shadow: 0 3px 8px rgba(90, 59, 31, 0.16);
    animation: heart-whisper-pulse-b-1vwid2st8w 0.85s ease-out 1;
}

.favorite-heart-btn:active[b-1vwid2st8w] {
    opacity: 1;
}

.favorite-heart-btn:focus-visible[b-1vwid2st8w] {
    outline: 2px solid #d2a16f;
    outline-offset: 2px;
}

/* Heart icon styling */
.heart-icon[b-1vwid2st8w] {
    width: 16px;
    height: 16px;
    transition: color 0.24s ease, filter 0.24s ease;
}

.heart-icon.outline[b-1vwid2st8w] {
    color: #b79569;
}

.favorite-heart-btn:hover .heart-icon.outline[b-1vwid2st8w] {
    color: #c4884f;
}

.heart-icon.filled[b-1vwid2st8w] {
    color: #c8674b;
    filter: drop-shadow(0 0 2px rgba(215, 128, 102, 0.42));
}

/* Quiet "warmth" confirmation, no bounce. */
.favorite-heart-btn.is-favorite .heart-icon.filled[b-1vwid2st8w] {
    animation: heart-candle-glow-b-1vwid2st8w 0.7s ease-out 1;
}

.favorite-heart-btn.is-favorite[b-1vwid2st8w] {
    background: rgba(255, 246, 239, 0.96);
    border-color: rgba(200, 106, 78, 0.62);
    opacity: 0.98;
    box-shadow: 0 3px 9px rgba(126, 67, 46, 0.24);
}

@keyframes heart-candle-glow-b-1vwid2st8w {
    0% { color: #be6247; filter: drop-shadow(0 0 0 rgba(215, 128, 102, 0)); }
    45% { color: #d9795c; filter: drop-shadow(0 0 7px rgba(215, 128, 102, 0.58)); }
    100% { color: #c8674b; filter: drop-shadow(0 0 2px rgba(215, 128, 102, 0.42)); }
}

@keyframes heart-whisper-pulse-b-1vwid2st8w {
    0% { box-shadow: 0 2px 6px rgba(88, 62, 40, 0.12); }
    50% { box-shadow: 0 3px 10px rgba(162, 121, 74, 0.24); }
    100% { box-shadow: 0 3px 8px rgba(90, 59, 31, 0.16); }
}

.favorite-heart-hint[b-1vwid2st8w] {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    pointer-events: none;
    background: rgba(251, 244, 231, 0.94);
    color: #845d3f;
    border: 1px solid rgba(209, 174, 127, 0.46);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.favorite-heart-btn:hover .favorite-heart-hint[b-1vwid2st8w],
.favorite-heart-btn:focus-visible .favorite-heart-hint[b-1vwid2st8w] {
    opacity: 1;
}

.favorite-heart-confirmation[b-1vwid2st8w] {
    margin: 0;
    padding: 0.4rem 0.9rem 0.05rem;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: #986a4b;
    text-align: left;
    animation: favorite-confirmation-fade-b-1vwid2st8w 1.5s ease forwards;
}

@keyframes favorite-confirmation-fade-b-1vwid2st8w {
    0% { opacity: 0; transform: translateY(-2px); }
    15% { opacity: 1; transform: translateY(0); }
    85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-2px); }
}

/* ===== END FAVORITE HEART BUTTON ===== */

.theme-image[b-1vwid2st8w] {
    width: 100%;
    height: 184px;
    object-fit: cover;
    flex-shrink: 0;
}

.theme-content[b-1vwid2st8w] {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.theme-content h3[b-1vwid2st8w] {
    margin: 0;
    font-family: var(--font-serif);
    color: #4b2e2e;
    line-height: 1.18;
}

.theme-persona-name[b-1vwid2st8w] {
    margin: 0 0 0.4rem;
    color: #9a6a4a;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.25;
}

.subtitle[b-1vwid2st8w] {
    color: #555;
    margin-bottom: 0;
    line-height: 1.5;
}

.theme-footer[b-1vwid2st8w] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-top: 1rem;
}

.theme-actions[b-1vwid2st8w] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: auto;
    min-height: 34px;
}

.theme-card-action[b-1vwid2st8w] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #865322;
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
    line-height: 1;
    transition: color 0.2s ease;
}

.theme-card-action[b-1vwid2st8w]::after {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(134, 83, 34, 0.28);
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.theme-lifecycle-badge[b-1vwid2st8w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(200, 157, 130, 0.48);
    background: #f3ddd1;
    color: #835f50;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.48rem 0.78rem;
}

.theme-lifecycle-badge--sunsetting[b-1vwid2st8w] {
    border-color: rgba(178, 133, 54, 0.44);
    background: #f5ead1;
    color: #745a23;
}

.theme-lifecycle-badge--retired[b-1vwid2st8w],
.theme-lifecycle-badge--draft[b-1vwid2st8w] {
    border-color: rgba(155, 140, 132, 0.42);
    background: #eee8e3;
    color: #6f625c;
}

.theme-card-action-arrow[b-1vwid2st8w] {
    display: inline-block;
    transition: transform 0.22s ease;
}

.theme-card:hover .theme-card-action[b-1vwid2st8w],
.theme-card:focus-within .theme-card-action[b-1vwid2st8w] {
    color: #6f3f17;
}

.theme-card:hover .theme-card-action[b-1vwid2st8w]::after,
.theme-card:focus-within .theme-card-action[b-1vwid2st8w]::after {
    transform: scaleX(1);
}

.theme-card:hover .theme-card-action-arrow[b-1vwid2st8w],
.theme-card:focus-within .theme-card-action-arrow[b-1vwid2st8w] {
    transform: translateX(3px);
}

.theme-status-row[b-1vwid2st8w] {
    min-height: 18px;
    min-width: 0;
}

/* Tablet responsiveness - broader range for Surface Pro etc */
@media (max-width: 1200px) and (min-width: 769px) {
    .theme-card[b-1vwid2st8w] {
        width: 280px; /* Keep desktop size for tablets */
        min-width: 280px;
        scroll-snap-align: start;
    }
    
    .theme-content[b-1vwid2st8w] {
        padding: 1.25rem;
    }
    
    .theme-card-action[b-1vwid2st8w] {
        font-size: 1rem;
    }
}

/* Mobile phones only */
@media (max-width: 768px) {
    .theme-card[b-1vwid2st8w] {
        width: 100%; /* Full width on mobile */
        min-width: auto; /* Remove fixed min-width */
        max-width: none; /* Remove max-width restriction */
        scroll-snap-align: none; /* Remove scroll snap for vertical layout */
    }

    .theme-image[b-1vwid2st8w] {
        height: 190px;
    }
    
    .theme-content[b-1vwid2st8w] {
        padding: 1rem;
    }
    
    .theme-card-action[b-1vwid2st8w] {
        font-size: 0.95rem;
    }

    .favorite-heart-hint[b-1vwid2st8w] {
        display: none;
    }
}

@media (max-width: 480px) {
    .theme-card[b-1vwid2st8w] {
        width: 100%;
        min-width: auto;
    }

    .theme-image[b-1vwid2st8w] {
        height: 176px;
    }
    
    .theme-content[b-1vwid2st8w] {
        padding: 0.875rem;
    }
    
    .theme-card-action[b-1vwid2st8w] {
        font-size: 0.9rem;
    }
}

/* ===== SUBSCRIPTION STATUS INDICATOR ===== */

.subscription-status[b-1vwid2st8w] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 18px;
    font-size: 0.68rem;
    color: rgba(107, 82, 72, 0.6);
    font-style: italic;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    letter-spacing: 0.01em;
    pointer-events: auto;
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.subscription-status:hover[b-1vwid2st8w] {
    color: rgba(107, 69, 32, 0.82);
    text-decoration-line: underline;
    text-decoration-color: rgba(107, 69, 32, 0.28);
}

.subscription-status:focus-visible[b-1vwid2st8w] {
    outline: 2px solid rgba(210, 161, 111, 0.74);
    outline-offset: 2px;
    color: rgba(107, 69, 32, 0.88);
}

.subscription-status-icon[b-1vwid2st8w] {
    font-size: 0.64rem;
    line-height: 1;
    opacity: 0.62;
}

/* /Components/ThemeExperience/ThemeExperienceAtmosphere.razor.rz.scp.css */
/* ThemeExperienceAtmosphere — image becomes parchment */

.theme-atmosphere[b-x41fl2sqko] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.theme-atmosphere[b-x41fl2sqko]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 241, 220, 0.4) 0%, transparent 32%),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.2) 0%, transparent 20%);
}

.atmosphere-bg[b-x41fl2sqko] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-size: cover;
    background-position: center 20%;
    z-index: 0;
    transform: scale(1.04);
    filter:
        saturate(calc(0.95 - (var(--thread-scroll-progress) * 0.08)))
        contrast(0.96)
        brightness(calc(0.94 - (var(--thread-scroll-progress) * 0.08)))
        blur(calc(var(--thread-scroll-progress) * 1.8px));
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
    transition: filter 0.24s ease;
}

.atmosphere-fade[b-x41fl2sqko] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(253, 248, 240, 0.1) 0%,
        rgba(253, 248, 240, 0.24) 18%,
        rgba(253, 248, 240, 0.52) 34%,
        rgba(253, 248, 240, 0.84) 50%,
        rgba(253, 248, 240, 0.98) 66%,
        rgba(253, 248, 240, 1) 78%
    );
}

.atmosphere-content[b-x41fl2sqko] {
    position: relative;
    z-index: 2;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

:global(body.night-mode) .theme-atmosphere[b-x41fl2sqko]::before {
    background:
        radial-gradient(circle at 50% 15%, rgba(160, 116, 63, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.04) 0%, transparent 20%);
}

:global(body.night-mode) .atmosphere-bg[b-x41fl2sqko] {
    filter:
        saturate(calc(0.84 - (var(--thread-scroll-progress) * 0.06)))
        contrast(0.92)
        brightness(calc(0.7 - (var(--thread-scroll-progress) * 0.08)))
        blur(calc(var(--thread-scroll-progress) * 1.8px));
}

:global(body.night-mode) .atmosphere-fade[b-x41fl2sqko] {
    background: linear-gradient(
        180deg,
        rgba(27, 23, 19, 0.14) 0%,
        rgba(27, 23, 19, 0.32) 22%,
        rgba(27, 23, 19, 0.7) 42%,
        rgba(27, 23, 19, 0.92) 62%,
        rgba(27, 23, 19, 1) 80%
    );
}

@media (max-width: 768px) {
    .atmosphere-bg[b-x41fl2sqko] {
        height: 46%;
        background-position: center 18%;
    }
}
/* /Components/ThemeExperience/ThemeExperienceChips.razor.rz.scp.css */
/* ThemeExperienceChips — scoped styles */

.theme-chips[b-0xmj6vyupm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0.75rem 1rem;
    max-width: 640px;
    margin: 0 auto;
}

.theme-chip[b-0xmj6vyupm] {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: #5A4A3A;
    background: rgba(253, 248, 240, 0.85);
    border: 1px solid rgba(176, 141, 110, 0.3);
    border-radius: 20px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    white-space: nowrap;
}

.theme-chip:hover[b-0xmj6vyupm] {
    background: rgba(253, 248, 240, 1);
    border-color: rgba(176, 141, 110, 0.55);
    transform: translateY(-1px);
}

.theme-chip:active[b-0xmj6vyupm] {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .theme-chips[b-0xmj6vyupm] {
        padding: 0.5rem 0.75rem;
        gap: 6px;
    }

    .theme-chip[b-0xmj6vyupm] {
        font-size: 0.82rem;
        padding: 0.4rem 0.85rem;
    }
}
/* /Components/ThemeExperience/ThemeExperienceHero.razor.rz.scp.css */
/* ThemeExperienceHero — editorial title block */

.theme-hero[b-8e2fpzrbjg] {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 0.1rem;
}

.hero-copy[b-8e2fpzrbjg] {
    width: min(100%, 72rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.hero-eyebrow[b-8e2fpzrbjg] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(142, 91, 48, 0.98);
}

.hero-title[b-8e2fpzrbjg] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.35rem, 3.55vw, 3.75rem);
    line-height: 1.02;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #30251c;
    max-width: none;
    text-shadow: 0 1px 0 rgba(255, 247, 237, 0.22);
}

.hero-divider[b-8e2fpzrbjg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: min(100%, 20rem);
    margin-top: 0.15rem;
    color: rgba(187, 152, 115, 0.9);
}

.hero-divider[b-8e2fpzrbjg]::before,
.hero-divider[b-8e2fpzrbjg]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(187, 152, 115, 0.48), transparent);
}

.hero-divider-mark[b-8e2fpzrbjg] {
    font-size: 0.95rem;
}

.hero-dek[b-8e2fpzrbjg] {
    position: relative;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    line-height: 1.45;
    font-style: italic;
    font-weight: 500;
    color: #5a3e2d;
    max-width: 30rem;
    z-index: 0;
}

.hero-dek[b-8e2fpzrbjg]::before {
    content: "";
    position: absolute;
    inset: -0.72rem -1.35rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(253, 248, 240, 0.5) 0%,
        rgba(253, 248, 240, 0.28) 50%,
        rgba(253, 248, 240, 0) 78%);
}

:global(body.night-mode) .hero-eyebrow[b-8e2fpzrbjg] {
    color: #e0b579;
}

:global(body.night-mode) .hero-title[b-8e2fpzrbjg] {
    color: #f2e3d2;
}

:global(body.night-mode) .hero-divider[b-8e2fpzrbjg] {
    color: #d0a56b;
}

:global(body.night-mode) .hero-divider[b-8e2fpzrbjg]::before,
:global(body.night-mode) .hero-divider[b-8e2fpzrbjg]::after {
    background: linear-gradient(90deg, transparent, rgba(208, 165, 107, 0.55), transparent);
}

:global(body.night-mode) .hero-dek[b-8e2fpzrbjg] {
    color: #ead4bc;
}

:global(body.night-mode) .hero-dek[b-8e2fpzrbjg]::before {
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.26) 0%,
        rgba(0, 0, 0, 0.12) 52%,
        rgba(0, 0, 0, 0) 78%);
}

@media (max-width: 768px) {
    .theme-hero[b-8e2fpzrbjg] {
        padding-top: 0;
    }

    .hero-copy[b-8e2fpzrbjg] {
        width: min(100%, 28rem);
        gap: 0.72rem;
    }

    .hero-title[b-8e2fpzrbjg] {
        font-size: clamp(2.3rem, 9vw, 3.35rem);
        max-width: 11.5ch;
        text-wrap: balance;
    }

    .hero-eyebrow[b-8e2fpzrbjg] {
        font-size: 0.68rem;
        letter-spacing: 0.18em;
    }

    .hero-dek[b-8e2fpzrbjg] {
        font-size: 0.92rem;
        max-width: 22rem;
    }

    .hero-divider[b-8e2fpzrbjg] {
        width: min(100%, 15rem);
    }
}

@media (min-width: 900px) {
    .hero-title[b-8e2fpzrbjg] {
        white-space: nowrap;
    }
}
/* /Components/ThemeExperience/ThemeExperienceInput.razor.rz.scp.css */
/* ThemeExperienceInput — writing line, not card */

.theme-input-shell[b-zizyf4zle5] {
    width: 100%;
    position: relative;
    padding: 0.35rem 0 calc(0.2rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(253, 248, 240, 0) 0%, rgba(253, 248, 240, 0.74) 36%, rgba(253, 248, 240, 0.96) 100%);
}

.theme-input-frame[b-zizyf4zle5] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.theme-input-line[b-zizyf4zle5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.2rem 0 0.45rem;
    border-bottom: 1px solid rgba(170, 137, 102, 0.34);
}

.theme-text-wrap[b-zizyf4zle5] {
    min-width: 0;
}

.theme-textarea[b-zizyf4zle5] {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    overflow-y: auto;
    -ms-overflow-style: none;
    background: transparent;
    color: #47392d;
    font-family: var(--font-serif);
    font-size: 1.03rem;
    line-height: 1.65;
    min-height: 2.5rem;
    max-height: 10rem;
    padding: 0;
}

.theme-textarea[b-zizyf4zle5]::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.theme-textarea[b-zizyf4zle5]::placeholder {
    color: rgba(117, 95, 74, 0.68);
    font-style: italic;
}

.theme-action-cluster[b-zizyf4zle5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: end;
    padding-bottom: 0.08rem;
}

.theme-send-button[b-zizyf4zle5] {
    min-width: 104px;
    min-height: 46px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(145deg, #c9965e, #a66c40);
    color: #fff8f2;
    font-family: var(--font-serif);
    font-size: 0.96rem;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.12rem;
    box-shadow: 0 16px 30px rgba(169, 106, 61, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, min-width 0.18s ease, padding 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.theme-send-button:hover:not(:disabled)[b-zizyf4zle5] {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(169, 106, 61, 0.26);
}

.theme-send-button:disabled[b-zizyf4zle5] {
    min-width: 92px;
    padding: 0.72rem 0.96rem;
    opacity: 1;
    color: rgba(128, 101, 74, 0.78);
    background: rgba(242, 228, 212, 0.88);
    box-shadow: 0 8px 18px rgba(142, 108, 76, 0.08);
}

.theme-input-disclaimer[b-zizyf4zle5] {
    width: min(100%, 880px);
    margin: 0.4rem auto 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(94, 70, 50, 0.52);
    pointer-events: none;
}

:global(body.night-mode) .theme-input-shell[b-zizyf4zle5] {
    background: linear-gradient(180deg, rgba(27, 23, 19, 0) 0%, rgba(27, 23, 19, 0.74) 36%, rgba(27, 23, 19, 0.96) 100%);
}

:global(body.night-mode) .theme-input-line[b-zizyf4zle5] {
    border-bottom-color: rgba(191, 148, 91, 0.22);
}

:global(body.night-mode) .theme-textarea[b-zizyf4zle5] {
    color: #e1d0bc;
}

:global(body.night-mode) .theme-textarea[b-zizyf4zle5]::placeholder {
    color: #bfa892;
}

:global(body.night-mode) .theme-input-disclaimer[b-zizyf4zle5] {
    color: rgba(225, 208, 188, 0.58);
}

@media (max-width: 768px) {
    .theme-input-line[b-zizyf4zle5] {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
        padding-bottom: 0.35rem;
    }

    .theme-input-line.is-expanded[b-zizyf4zle5] {
        grid-template-columns: minmax(0, 1fr);
        align-items: end;
    }

    .theme-textarea[b-zizyf4zle5] {
        font-size: 1rem;
        line-height: 1.55;
        min-height: 2.3rem;
    }

    .theme-input-line.is-expanded .theme-action-cluster[b-zizyf4zle5] {
        justify-content: flex-end;
        align-self: stretch;
        padding-bottom: 0;
    }

    .theme-send-button[b-zizyf4zle5] {
        min-width: 96px;
        min-height: 44px;
        padding: 0.72rem 1rem;
        font-size: 0.92rem;
        gap: 0.45rem;
    }

    .theme-send-button:disabled[b-zizyf4zle5] {
        min-width: 84px;
        padding: 0.66rem 0.88rem;
    }

    .theme-input-disclaimer[b-zizyf4zle5] {
        display: none;
    }
}

:global(body.night-mode) .theme-send-button:disabled[b-zizyf4zle5] {
    color: rgba(232, 215, 194, 0.74);
    background: rgba(75, 59, 48, 0.88);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
}
/* /Components/ThemeExperience/ThemeExperienceMessage.razor.rz.scp.css */
/* ThemeExperienceMessage — manuscript rhythm */

.exp-msg[b-u88cgok571] {
    width: 100%;
    display: flex;
    animation: msgFadeIn-b-u88cgok571 0.34s ease-out;
}

.exp-msg-body[b-u88cgok571] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    position: relative;
}

.exp-msg-prelude[b-u88cgok571] {
    margin-top: 0.35rem;
}

.exp-msg-ai[b-u88cgok571] {
    justify-content: flex-start;
}

.exp-msg-ai .exp-msg-body[b-u88cgok571] {
    width: min(72ch, 100%);
}

.exp-msg-user[b-u88cgok571] {
    justify-content: flex-end;
    padding-left: 18%;
}

.exp-msg-user .exp-msg-body[b-u88cgok571] {
    width: min(100%, 26rem);
    align-items: flex-end;
}

.exp-msg-content[b-u88cgok571] {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
    flex: 1;
}

.exp-msg-avatar-wrap[b-u88cgok571] {
    position: relative;
    flex: 0 0 auto;
    padding-top: 0.15rem;
}

.exp-msg-avatar-button[b-u88cgok571],
.exp-msg-avatar-static[b-u88cgok571] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    padding: 0;
}

.exp-msg-avatar-button[b-u88cgok571] {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.exp-msg-avatar-button:hover:not(:disabled)[b-u88cgok571] {
    transform: translateY(-1px);
}

.exp-msg-avatar-button.unsaved:hover:not(:disabled)[b-u88cgok571] {
    box-shadow: 0 0 0 4px rgba(223, 195, 167, 0.32);
}

.exp-msg-avatar-button.saved[b-u88cgok571] {
    box-shadow: 0 0 0 3px rgba(218, 182, 148, 0.46);
}

.exp-msg-avatar-button.pulse[b-u88cgok571] {
    animation: expKeepsakePulse-b-u88cgok571 1.35s ease-out;
}

.exp-msg-avatar-button.saving[b-u88cgok571] {
    opacity: 0.72;
}

.exp-msg-avatar[b-u88cgok571] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(230, 211, 193, 0.8);
}

.exp-msg-avatar-badge[b-u88cgok571] {
    position: absolute;
    right: -0.12rem;
    top: -0.14rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: rgba(255, 249, 242, 0.96);
    box-shadow: 0 8px 22px rgba(107, 76, 46, 0.18);
    font-size: 0.62rem;
}

.exp-msg-keepsake-tooltip[b-u88cgok571] {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.7rem);
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 0.62rem 0.92rem;
    border-radius: 999px;
    background: rgba(255, 252, 248, 0.96);
    border: 1px solid rgba(226, 205, 185, 0.85);
    box-shadow: 0 14px 34px rgba(92, 67, 46, 0.14);
    color: #6b5140;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    animation: expKeepsakeTooltipFade-b-u88cgok571 0.24s ease-out;
    z-index: 32;
}

.exp-msg-surface[b-u88cgok571] {
    position: relative;
    font-size: 1.1rem;
    line-height: 1.9;
    word-break: break-word;
}

.exp-msg-ai .exp-msg-surface[b-u88cgok571] {
    font-family: var(--font-serif);
    color: #362b22;
}

.exp-msg-ai .exp-msg-readable[b-u88cgok571] {
    margin: -0.34rem -0.54rem;
    padding: 0.34rem 0.54rem;
    border-radius: 16px;
    cursor: zoom-in;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.exp-msg-ai .exp-msg-readable:hover[b-u88cgok571],
.exp-msg-ai .exp-msg-readable:focus-visible[b-u88cgok571] {
    background: rgba(255, 250, 242, 0.24);
    box-shadow: 0 10px 30px rgba(84, 62, 42, 0.08);
    outline: none;
}

.exp-msg-user .exp-msg-surface[b-u88cgok571] {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    padding: 0.82rem 1.28rem;
    border-radius: 16px;
    background: rgba(222, 193, 168, 0.22);
    color: #5a4738;
    font-family: var(--font-serif);
    font-style: italic;
}

.exp-msg-meta[b-u88cgok571] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: rgba(110, 90, 70, 0.68);
}

.exp-msg-keepsake-backdrop[b-u88cgok571] {
    position: fixed;
    inset: 0;
    z-index: 39;
}

.exp-msg-keepsake-menu[b-u88cgok571] {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    min-width: 14rem;
    padding: 0.45rem;
    border-radius: 1.1rem;
    background: rgba(255, 252, 248, 0.98);
    border: 1px solid rgba(226, 205, 185, 0.85);
    box-shadow: 0 18px 40px rgba(92, 67, 46, 0.14);
    z-index: 40;
}

.exp-msg-keepsake-item[b-u88cgok571] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    border: none;
    background: transparent;
    color: #5e4938;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    text-align: left;
    padding: 0.78rem 0.92rem;
    border-radius: 0.9rem;
    cursor: pointer;
    transition: background 0.18s ease;
}

.exp-msg-keepsake-item:hover[b-u88cgok571] {
    background: rgba(246, 233, 220, 0.78);
}

.exp-msg-keepsake-icon[b-u88cgok571] {
    width: 1.2rem;
    text-align: center;
    flex: 0 0 1.2rem;
}

.exp-msg-keepsake-item.danger[b-u88cgok571] {
    color: #8a564d;
}

.exp-msg-user .exp-msg-meta[b-u88cgok571] {
    align-self: flex-end;
    line-height: 1.25;
    font-style: normal;
    text-align: right;
}

.exp-msg-ai .exp-msg-surface[b-u88cgok571]  p {
    margin: 0 0 0.75em;
}

.exp-msg-ai .exp-msg-surface[b-u88cgok571]  p:last-child {
    margin-bottom: 0;
}

.exp-msg-ai .exp-msg-surface[b-u88cgok571]  em {
    color: #6d5a49;
}

.exp-msg-ai .exp-msg-surface[b-u88cgok571]  strong {
    color: #4b3b2d;
}

.exp-msg-user .exp-msg-surface p[b-u88cgok571] {
    margin: 0;
    white-space: pre-wrap;
}

:global(body.night-mode) .exp-msg-ai .exp-msg-surface[b-u88cgok571] {
    color: #eadfd2;
}

:global(body.night-mode) .exp-msg-user .exp-msg-surface[b-u88cgok571] {
    background: rgba(191, 148, 91, 0.18);
    color: #f0e2d3;
}

:global(body.night-mode) .exp-msg-ai .exp-msg-readable:hover[b-u88cgok571],
:global(body.night-mode) .exp-msg-ai .exp-msg-readable:focus-visible[b-u88cgok571] {
    background: rgba(54, 42, 33, 0.34);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

:global(body.night-mode) .exp-msg-action[b-u88cgok571] {
    background: rgba(53, 41, 31, 0.88);
    border-color: rgba(163, 125, 85, 0.38);
    color: #ead6c2;
}

:global(body.night-mode) .exp-msg-avatar[b-u88cgok571] {
    border-color: rgba(168, 130, 91, 0.55);
}

:global(body.night-mode) .exp-msg-avatar-button.saved[b-u88cgok571] {
    box-shadow: 0 0 0 3px rgba(174, 136, 95, 0.28);
}

:global(body.night-mode) .exp-msg-avatar-badge[b-u88cgok571] {
    background: rgba(42, 31, 24, 0.94);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .exp-msg-keepsake-tooltip[b-u88cgok571] {
    background: rgba(35, 27, 22, 0.96);
    border-color: rgba(118, 90, 62, 0.55);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
    color: #ead6c2;
}

:global(body.night-mode) .exp-msg-keepsake-menu[b-u88cgok571] {
    background: rgba(35, 27, 22, 0.98);
    border-color: rgba(118, 90, 62, 0.55);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.32);
}

:global(body.night-mode) .exp-msg-keepsake-item[b-u88cgok571] {
    color: #ead6c2;
}

:global(body.night-mode) .exp-msg-keepsake-item:hover[b-u88cgok571] {
    background: rgba(71, 52, 38, 0.92);
}

:global(body.night-mode) .exp-msg-meta[b-u88cgok571],
:global(body.night-mode) .exp-msg-ai .exp-msg-surface[b-u88cgok571]  em {
    color: rgba(224, 204, 180, 0.72);
}

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

@keyframes expKeepsakePulse-b-u88cgok571 {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(218, 182, 148, 0.55); }
    45% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(218, 182, 148, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(218, 182, 148, 0); }
}

@keyframes expKeepsakeTooltipFade-b-u88cgok571 {
    from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (max-width: 768px) {
    .exp-msg-surface[b-u88cgok571] {
        font-size: 1rem;
        line-height: 1.82;
    }

    .exp-msg-ai .exp-msg-body[b-u88cgok571] {
        width: min(100%, 68ch);
        gap: 0.72rem;
    }

    .exp-msg-user[b-u88cgok571] {
        padding-left: 10%;
    }

    .exp-msg-avatar-button[b-u88cgok571],
    .exp-msg-avatar-static[b-u88cgok571] {
        width: 2.55rem;
        height: 2.55rem;
    }

    .exp-msg-keepsake-menu[b-u88cgok571] {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: 1.2rem;
        top: auto;
        min-width: 0;
        border-radius: 1.35rem;
        padding: 0.6rem;
        box-shadow: 0 20px 48px rgba(88, 61, 39, 0.22);
    }

    .exp-msg-keepsake-item[b-u88cgok571] {
        font-size: 1.02rem;
        padding: 0.92rem 1rem;
    }

    .exp-msg-keepsake-tooltip[b-u88cgok571] {
        top: calc(100% + 0.55rem);
        left: 50%;
        transform: translateX(-50%);
        white-space: normal;
        text-align: center;
        min-width: 11rem;
    }
}
/* /Components/ThemeExperience/ThemeExperienceRoom.razor.rz.scp.css */
/* ThemeExperienceRoom — room stays, then softens with scroll */

.theme-room[b-k1aw1z0fkz] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.room-bg[b-k1aw1z0fkz] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter:
        saturate(calc(0.96 - (var(--thread-scroll-progress) * 0.1)))
        contrast(0.98)
        brightness(calc(1 - (var(--thread-scroll-progress) * 0.12)))
        blur(calc(var(--thread-scroll-progress) * 5px));
    transition: filter 0.24s ease;
}

.room-overlay[b-k1aw1z0fkz] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 100% at 50% 50%, transparent 26%, rgba(28, 22, 16, calc(0.16 + (var(--thread-scroll-progress) * 0.16))) 100%),
        linear-gradient(180deg, rgba(28, 22, 16, 0.06) 0%, rgba(28, 22, 16, calc(0.12 + (var(--thread-scroll-progress) * 0.08))) 100%);
}

.room-parchment[b-k1aw1z0fkz] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(1280px, calc(100% - 2rem));
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(
        180deg,
        rgba(253, 248, 240, calc(0.7 + (var(--thread-scroll-progress) * 0.14))) 0%,
        rgba(253, 248, 240, calc(0.9 + (var(--thread-scroll-progress) * 0.06))) 100%
    );
    -webkit-backdrop-filter: blur(calc(10px + (var(--thread-scroll-progress) * 5px))) saturate(1.04);
    backdrop-filter: blur(calc(10px + (var(--thread-scroll-progress) * 5px))) saturate(1.04);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.42),
        0 30px 60px rgba(40, 30, 20, 0.18),
        0 8px 24px rgba(40, 30, 20, 0.1);
}

:global(body.night-mode) .room-bg[b-k1aw1z0fkz] {
    filter:
        saturate(calc(0.88 - (var(--thread-scroll-progress) * 0.08)))
        contrast(0.94)
        brightness(calc(0.78 - (var(--thread-scroll-progress) * 0.1)))
        blur(calc(var(--thread-scroll-progress) * 5px));
}

:global(body.night-mode) .room-overlay[b-k1aw1z0fkz] {
    background:
        radial-gradient(ellipse 80% 100% at 50% 50%, transparent 24%, rgba(0, 0, 0, calc(0.34 + (var(--thread-scroll-progress) * 0.18))) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, calc(0.24 + (var(--thread-scroll-progress) * 0.1))) 100%);
}

:global(body.night-mode) .room-parchment[b-k1aw1z0fkz] {
    background: linear-gradient(
        180deg,
        rgba(27, 23, 19, calc(0.82 + (var(--thread-scroll-progress) * 0.08))) 0%,
        rgba(27, 23, 19, calc(0.92 + (var(--thread-scroll-progress) * 0.06))) 100%
    );
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .room-parchment[b-k1aw1z0fkz] {
        max-width: 100%;
        box-shadow: none;
    }
}
/* /Components/ThemeExperience/ThemeExperienceSidebar.razor.rz.scp.css */
/* ============================================================
   ThemeExperienceSidebar — contextual sidebar for theme rooms.
   Mirrors ConversationSidebar's warm parchment language.
   ============================================================ */

.experience-sidebar[b-l5qnahvgww] {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0 1rem;
    overflow: hidden;
    z-index: 40;
    transition: width 0.3s ease, padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 245, 229, 0.96) 0%, rgba(255, 245, 229, 0.58) 28%, rgba(253, 248, 240, 0) 56%),
        linear-gradient(180deg, #FFF9F1 0%, #FDF8F0 20%, #F8F0E3 62%, #F5EBDC 100%);
    border-right: 1px solid rgba(188, 152, 109, 0.14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6), 20px 0 40px rgba(94, 69, 43, 0.06);
}

.experience-sidebar[b-l5qnahvgww]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 18%),
        radial-gradient(circle at 50% 8%, rgba(229, 193, 148, 0.18) 0%, rgba(229, 193, 148, 0) 24%);
}

.experience-sidebar.hidden[b-l5qnahvgww] {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
    box-shadow: none;
}

.experience-sidebar.hidden > *[b-l5qnahvgww] {
    display: none;
}

/* ── Header ── */

.sidebar-top-content[b-l5qnahvgww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.app-logo-link[b-l5qnahvgww] {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: -1.2rem;
}

.sidebar-logo img[b-l5qnahvgww] {
    display: inline-block;
    max-width: 190px;
    width: auto;
    height: 52px;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    transition: none !important;
}

/* ── Portrait Section ── */

.sidebar-portrait-section[b-l5qnahvgww] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.15rem 1.45rem 1rem;
}

.sidebar-avatar-wrap[b-l5qnahvgww] {
    position: relative;
    width: 132px;
    height: 132px;
    margin-bottom: 0.98rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 251, 245, 0.98) 0%, rgba(236, 213, 185, 0.94) 100%);
    box-shadow: 0 0 30px rgba(196, 154, 108, 0.18), 0 14px 28px rgba(113, 82, 51, 0.14);
}

.sidebar-avatar-wrap[b-l5qnahvgww]::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(233, 204, 169, 0.3) 0%, rgba(233, 204, 169, 0.16) 38%, rgba(233, 204, 169, 0.04) 58%, rgba(233, 204, 169, 0) 76%),
        radial-gradient(circle at 50% 35%, rgba(255, 245, 231, 0.55) 0%, rgba(255, 245, 231, 0.14) 42%, transparent 72%);
    z-index: -2;
    filter: blur(12px);
}

.sidebar-avatar-wrap[b-l5qnahvgww]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(191, 150, 101, 0.14);
    pointer-events: none;
}

.sidebar-avatar[b-l5qnahvgww] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 28%;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(123, 93, 64, 0.1);
}

.favorite-heart-btn[b-l5qnahvgww] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #F4CABC;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(146, 110, 83, 0.16);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    z-index: 2;
}

.favorite-heart-btn:hover[b-l5qnahvgww] {
    transform: translateY(-1px) scale(1.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background: #fff !important;
}

.favorite-heart-btn.toggling[b-l5qnahvgww] {
    opacity: 0.6;
    pointer-events: none;
}

.favorite-heart-btn .heart-icon[b-l5qnahvgww] {
    width: 18px;
    height: 18px;
    color: #999;
    transition: all 0.3s ease;
}

.favorite-heart-btn:hover .heart-icon[b-l5qnahvgww] {
    color: #CE8568;
}

.favorite-heart-btn.favorited .heart-icon.filled[b-l5qnahvgww] {
    color: #CE8568;
    animation: heartPulse-b-l5qnahvgww 0.4s ease;
}

@keyframes heartPulse-b-l5qnahvgww {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.sidebar-theme-name[b-l5qnahvgww] {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.48rem;
    font-weight: 600;
    line-height: 1.08;
    color: #372D23;
    text-align: center;
}

.sidebar-theme-lifespan[b-l5qnahvgww] {
    margin: 0.35rem 0 0;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    line-height: 1.3;
    color: #8B7355;
    text-align: center;
    letter-spacing: 0.06em;
}

.sidebar-theme-ingress[b-l5qnahvgww] {
    margin: 0.85rem 0 0;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    line-height: 1.75;
    font-style: italic;
    color: #6F5846;
    text-align: center;
}

.sidebar-theme-ingress-wrapper[b-l5qnahvgww] {
    position: relative;
    margin: 0.85rem 0 0;
}

.sidebar-theme-ingress-wrapper .sidebar-theme-ingress[b-l5qnahvgww] {
    margin: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
}

.sidebar-theme-ingress-wrapper.collapsed .sidebar-theme-ingress[b-l5qnahvgww] {
    max-height: 13rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

.sidebar-theme-ingress-wrapper.no-overflow .sidebar-theme-ingress[b-l5qnahvgww],
.sidebar-theme-ingress-wrapper.collapsed.no-overflow .sidebar-theme-ingress[b-l5qnahvgww] {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
}

.sidebar-theme-ingress-wrapper.expanded .sidebar-theme-ingress[b-l5qnahvgww] {
    max-height: 200rem;
}

.sidebar-theme-ingress-toggle[b-l5qnahvgww] {
    display: block;
    margin: 0.5rem auto 0;
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.88rem;
    color: #B89060;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: color 0.18s ease, transform 0.18s ease;
}

.sidebar-theme-ingress-toggle:hover[b-l5qnahvgww] {
    color: #8A6735;
    transform: translateY(-1px);
}

.sidebar-theme-ingress-toggle:focus-visible[b-l5qnahvgww] {
    outline: 2px solid rgba(184, 144, 96, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}

.sidebar-theme-subtitle[b-l5qnahvgww] {
    margin: 0.65rem 0 0;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    line-height: 1.5;
    font-style: italic;
    color: #8B7355;
    text-align: center;
}

/* ── Navigation ── */

.sidebar-nav[b-l5qnahvgww] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.45rem 0.9rem;
}

.sidebar-nav-item[b-l5qnahvgww] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.72rem;
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(255, 251, 246, 0.54);
    color: #564536;
    text-decoration: none;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.91rem;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.sidebar-penpal-block[b-l5qnahvgww] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 0.28rem 0.1rem;
}

.sidebar-penpal-invite-btn[b-l5qnahvgww] {
    width: 100%;
    background: rgba(255, 251, 246, 0.72);
    border: 1px solid rgba(206, 160, 128, 0.38);
    border-radius: 18px;
    padding: 0.9rem 1rem;
    color: #4b2e2e;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.sidebar-penpal-invite-btn:hover[b-l5qnahvgww] {
    background: rgba(255, 246, 236, 0.92);
    border-color: rgba(186, 130, 95, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 12px 18px rgba(114, 81, 49, 0.08);
}

.sidebar-penpal-icon[b-l5qnahvgww] {
    width: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    line-height: 0;
}

.sidebar-penpal-status-card[b-l5qnahvgww] {
    width: 100%;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(208, 170, 140, 0.35);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-penpal-status-card.paused[b-l5qnahvgww] {
    opacity: 0.72;
    filter: grayscale(0.22);
}

.sidebar-penpal-status-row[b-l5qnahvgww] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.sidebar-penpal-status-icon[b-l5qnahvgww] {
    font-size: 1rem;
    line-height: 1;
}

.sidebar-penpal-status-title[b-l5qnahvgww] {
    font-size: 0.95rem;
    color: #4b2e2e;
    font-family: var(--font-serif);
    font-weight: 700;
}

.sidebar-penpal-status-sub[b-l5qnahvgww] {
    font-size: 0.82rem;
    color: rgba(75, 46, 46, 0.7);
    font-family: var(--font-serif);
}

.sidebar-penpal-status-actions[b-l5qnahvgww] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.sidebar-penpal-link[b-l5qnahvgww] {
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: #7a5648;
    font-weight: 600;
    font-size: 0.82rem;
    font-family: var(--font-sans);
    cursor: pointer;
}

.sidebar-penpal-link:hover[b-l5qnahvgww] {
    color: #5a3f34;
}

.sidebar-penpal-divider[b-l5qnahvgww] {
    color: rgba(75, 46, 46, 0.5);
}

.sidebar-nav-item[b-l5qnahvgww]::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #D1A470, #A96E46);
    transform: translateY(-50%);
    transition: height 0.16s ease, opacity 0.16s ease;
    opacity: 0;
}

.sidebar-nav-item:hover[b-l5qnahvgww] {
    transform: translateY(-1px);
    background: rgba(255, 251, 246, 0.86);
    border-color: rgba(188, 152, 109, 0.16);
    color: #3C3026;
    box-shadow: 0 12px 20px rgba(114, 81, 49, 0.08);
}

.sidebar-nav-item:hover[b-l5qnahvgww]::before {
    height: 58%;
    opacity: 1;
}

.nav-icon[b-l5qnahvgww] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    flex-shrink: 0;
    font-size: 0.98rem;
    opacity: 0.72;
}

.foyer-action-icon[b-l5qnahvgww] {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    color: inherit;
    stroke: currentColor;
}

/* Hairline divider between primary nav and back link */
.sidebar-nav-divider[b-l5qnahvgww] {
    height: 1px;
    margin: 0.78rem 0.72rem 0.32rem;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(188, 152, 109, 0.16) 18%,
        rgba(188, 152, 109, 0.38) 50%,
        rgba(188, 152, 109, 0.16) 82%,
        transparent 100%);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.48), 0 8px 18px rgba(125, 86, 48, 0.07);
}

/* Back-to-themes is a quieter, secondary action */
.sidebar-nav-item.sidebar-nav-back[b-l5qnahvgww] {
    background: transparent;
    color: #7A6957;
    font-style: italic;
    font-size: 0.86rem;
}

.sidebar-nav-item.sidebar-nav-back:hover[b-l5qnahvgww] {
    background: rgba(255, 251, 246, 0.7);
    color: #3C3026;
}

:global(body.night-mode) .sidebar-nav-divider[b-l5qnahvgww] {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(191, 148, 91, 0.12) 18%,
        rgba(191, 148, 91, 0.32) 50%,
        rgba(191, 148, 91, 0.12) 82%,
        transparent 100%);
    box-shadow: 0 -1px 0 rgba(255, 236, 206, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
}

:global(body.night-mode) .sidebar-nav-item.sidebar-nav-back[b-l5qnahvgww] {
    color: #B5A38C;
}

:global(body.night-mode) .sidebar-nav-item.sidebar-nav-back:hover[b-l5qnahvgww] {
    color: #F5E6D0;
}

/* ── Footer ── */

.sidebar-scroll-area[b-l5qnahvgww] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 115, 85, 0.28) transparent;
}

.sidebar-scroll-area[b-l5qnahvgww]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll-area[b-l5qnahvgww]::-webkit-scrollbar-thumb {
    background: rgba(139, 115, 85, 0.28);
    border-radius: 3px;
}

.sidebar-scroll-area[b-l5qnahvgww]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-footer[b-l5qnahvgww] {
    margin-top: auto;
    padding: 0.75rem 1rem 0;
    flex-shrink: 0;
}

/* ── History Panel ── */

.sidebar-history-panel[b-l5qnahvgww] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.sidebar-history-header[b-l5qnahvgww] {
    padding: 0.5rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-history-back[b-l5qnahvgww] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #8B7355;
    padding: 0.25rem 0;
    transition: color 0.2s;
}

.sidebar-history-back:hover[b-l5qnahvgww] {
    color: #6B5A44;
}

.sidebar-history-back .nav-icon[b-l5qnahvgww] {
    font-size: 0.9rem;
}

.sidebar-history-title[b-l5qnahvgww] {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: #3A3228;
    margin: 0;
}

.sidebar-new-conversation[b-l5qnahvgww] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 2.5rem);
    margin: 0 1.25rem 0.75rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(196, 117, 93, 0.08) 0%, rgba(196, 117, 93, 0.04) 100%);
    border: 1.5px dashed rgba(196, 117, 93, 0.3);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: #C4755D;
    transition: background 0.2s, border-color 0.2s;
}

.sidebar-new-conversation:hover[b-l5qnahvgww] {
    background: linear-gradient(135deg, rgba(196, 117, 93, 0.14) 0%, rgba(196, 117, 93, 0.07) 100%);
    border-color: rgba(196, 117, 93, 0.5);
}

.sidebar-new-conversation .nav-icon[b-l5qnahvgww] {
    font-size: 1.1rem;
    font-weight: 600;
}

.sidebar-history-list[b-l5qnahvgww] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.75rem;
}

.sidebar-history-loading[b-l5qnahvgww] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem 1.25rem;
    color: #8B7355;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-style: italic;
}

.sidebar-history-spinner[b-l5qnahvgww] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(139, 115, 85, 0.2);
    border-top-color: #8B7355;
    border-radius: 50%;
    animation: historySpinnerRotate-b-l5qnahvgww 0.8s linear infinite;
}

@keyframes historySpinnerRotate-b-l5qnahvgww {
    to { transform: rotate(360deg); }
}

.sidebar-history-empty[b-l5qnahvgww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: 0.5rem;
}

.sidebar-history-empty-text[b-l5qnahvgww] {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    color: #6B5A44;
    margin: 0;
}

.sidebar-history-empty-hint[b-l5qnahvgww] {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #A09080;
    margin: 0;
}

/* ── Night Mode ── */

:global(body.night-mode) .experience-sidebar[b-l5qnahvgww] {
    background:
        radial-gradient(circle at 50% 0%, rgba(111, 78, 45, 0.22) 0%, rgba(111, 78, 45, 0.08) 28%, rgba(34, 28, 24, 0) 56%),
        linear-gradient(180deg, #2A231F 0%, #241E1A 22%, #201A17 68%, #1A1512 100%);
    border-right-color: rgba(191, 148, 91, 0.14);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03), 22px 0 44px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .experience-sidebar[b-l5qnahvgww]::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%),
        radial-gradient(circle at 50% 8%, rgba(171, 123, 68, 0.14) 0%, rgba(171, 123, 68, 0) 22%);
}

:global(body.night-mode) .sidebar-avatar-wrap[b-l5qnahvgww] {
    background: linear-gradient(145deg, rgba(62, 50, 42, 0.96) 0%, rgba(43, 35, 30, 0.96) 100%);
    box-shadow: 0 0 32px rgba(170, 120, 68, 0.16), 0 18px 34px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .sidebar-avatar-wrap[b-l5qnahvgww]::before {
    background:
        radial-gradient(circle, rgba(173, 124, 70, 0.28) 0%, rgba(173, 124, 70, 0.14) 38%, rgba(173, 124, 70, 0.03) 58%, rgba(173, 124, 70, 0) 76%),
        radial-gradient(circle at 50% 35%, rgba(111, 78, 45, 0.34) 0%, rgba(111, 78, 45, 0.1) 42%, transparent 72%);
}

:global(body.night-mode) .sidebar-avatar-wrap[b-l5qnahvgww]::after {
    border-color: rgba(255, 244, 228, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 244, 228, 0.08), inset 0 0 0 1px rgba(191, 148, 91, 0.18);
}

:global(body.night-mode) .sidebar-theme-name[b-l5qnahvgww] {
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-theme-subtitle[b-l5qnahvgww] {
    color: #BFA58A;
}

:global(body.night-mode) .sidebar-theme-lifespan[b-l5qnahvgww] {
    color: #BFA58A;
}

:global(body.night-mode) .sidebar-theme-ingress[b-l5qnahvgww] {
    color: #D8C3AD;
}

:global(body.night-mode) .favorite-heart-btn[b-l5qnahvgww] {
    background: rgba(42, 34, 29, 0.96);
    border-color: rgba(224, 174, 149, 0.7);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

:global(body.night-mode) .favorite-heart-btn .heart-icon[b-l5qnahvgww] {
    color: #C9B7A2;
}

:global(body.night-mode) .favorite-heart-btn:hover .heart-icon[b-l5qnahvgww],
:global(body.night-mode) .favorite-heart-btn.favorited .heart-icon.filled[b-l5qnahvgww] {
    color: #F2AE92;
}

:global(body.night-mode) .sidebar-nav-item[b-l5qnahvgww] {
    background: rgba(50, 41, 35, 0.6);
    color: #DDCCB8;
}

:global(body.night-mode) .sidebar-penpal-invite-btn[b-l5qnahvgww] {
    background: rgba(50, 41, 35, 0.6);
    border-color: rgba(191, 148, 91, 0.18);
    color: #DDCCB8;
}

:global(body.night-mode) .sidebar-penpal-invite-btn:hover[b-l5qnahvgww] {
    background: rgba(60, 49, 41, 0.88);
    color: #F4E5D3;
}

:global(body.night-mode) .sidebar-penpal-status-card[b-l5qnahvgww] {
    background: rgba(50, 41, 35, 0.72);
    border-color: rgba(191, 148, 91, 0.18);
}

:global(body.night-mode) .sidebar-penpal-status-title[b-l5qnahvgww] {
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-penpal-status-sub[b-l5qnahvgww],
:global(body.night-mode) .sidebar-penpal-link[b-l5qnahvgww] {
    color: #C9B7A2;
}

:global(body.night-mode) .sidebar-penpal-link:hover[b-l5qnahvgww] {
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-penpal-divider[b-l5qnahvgww] {
    color: rgba(201, 183, 162, 0.5);
}

:global(body.night-mode) .sidebar-nav-item:hover[b-l5qnahvgww] {
    background: rgba(60, 49, 41, 0.88);
    border-color: rgba(191, 148, 91, 0.16);
    color: #F4E5D3;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}

:global(body.night-mode) .app-logo-link[b-l5qnahvgww] {
    filter: brightness(1.4) contrast(0.88);
}

/* Night mode – history panel */
:global(body.night-mode) .sidebar-history-title[b-l5qnahvgww] {
    color: #E8DDD0;
}

:global(body.night-mode) .sidebar-history-back[b-l5qnahvgww] {
    color: #C9B7A2;
}

:global(body.night-mode) .sidebar-history-back:hover[b-l5qnahvgww] {
    color: #E8DDD0;
}

:global(body.night-mode) .sidebar-new-conversation[b-l5qnahvgww] {
    background: linear-gradient(135deg, rgba(196, 117, 93, 0.1) 0%, rgba(196, 117, 93, 0.05) 100%);
    border-color: rgba(196, 117, 93, 0.25);
    color: #E0A890;
}

:global(body.night-mode) .sidebar-new-conversation:hover[b-l5qnahvgww] {
    background: linear-gradient(135deg, rgba(196, 117, 93, 0.18) 0%, rgba(196, 117, 93, 0.08) 100%);
    border-color: rgba(196, 117, 93, 0.4);
}

:global(body.night-mode) .sidebar-history-loading[b-l5qnahvgww] {
    color: #C9B7A2;
}

:global(body.night-mode) .sidebar-history-spinner[b-l5qnahvgww] {
    border-color: rgba(201, 183, 162, 0.2);
    border-top-color: #C9B7A2;
}

:global(body.night-mode) .sidebar-history-empty-text[b-l5qnahvgww] {
    color: #C9B7A2;
}

:global(body.night-mode) .sidebar-history-empty-hint[b-l5qnahvgww] {
    color: #8B7A6A;
}

/* ── Mobile ── */

@media (max-width: 768px) {
    .experience-sidebar[b-l5qnahvgww] {
        left: 0;
        right: 0;
        width: 100vw;
        max-width: none;
        height: 100vh;
        padding: 1.1rem 0 1.1rem;
        transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
        transform: translateX(-100%);
        border-right: none;
        box-shadow: 0 18px 48px rgba(94, 69, 43, 0.12);
        z-index: 70;
    }

    @supports (height: 100svh) {
        .experience-sidebar[b-l5qnahvgww] {
            height: 100svh;
        }
    }

    .experience-sidebar:not(.hidden)[b-l5qnahvgww] {
        transform: translateX(0);
    }

    .experience-sidebar .sidebar-portrait-section[b-l5qnahvgww],
    .experience-sidebar .sidebar-nav[b-l5qnahvgww],
    .experience-sidebar .sidebar-footer[b-l5qnahvgww] {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.42s ease 0.08s, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
    }

    .experience-sidebar .sidebar-nav[b-l5qnahvgww] {
        transition-delay: 0.16s;
    }

    .experience-sidebar .sidebar-footer[b-l5qnahvgww] {
        transition-delay: 0.22s;
    }

    .experience-sidebar:not(.hidden) .sidebar-portrait-section[b-l5qnahvgww],
    .experience-sidebar:not(.hidden) .sidebar-nav[b-l5qnahvgww],
    .experience-sidebar:not(.hidden) .sidebar-footer[b-l5qnahvgww] {
        opacity: 1;
        transform: translateY(0);
    }

    .experience-sidebar.hidden[b-l5qnahvgww] {
        width: 100vw;
        padding-left: 0;
        padding-right: 0;
        border-right-color: transparent;
        box-shadow: none;
    }

    .experience-sidebar.hidden > *[b-l5qnahvgww] {
        display: initial;
    }

    .sidebar-top-content[b-l5qnahvgww] {
        margin-bottom: 0.75rem;
        padding-top: 0.35rem;
    }

    .app-logo-link[b-l5qnahvgww] {
        margin-top: 0;
        opacity: 0;
        pointer-events: none;
        height: 0;
        overflow: hidden;
    }

    .sidebar-avatar-wrap[b-l5qnahvgww] {
        width: 196px;
        height: 196px;
        margin-bottom: 1.2rem;
    }

    .sidebar-theme-name[b-l5qnahvgww] {
        font-size: 2.3rem;
        line-height: 1.02;
    }

    .sidebar-theme-lifespan[b-l5qnahvgww] {
        font-size: 1rem;
        margin-top: 0.45rem;
    }

    .sidebar-theme-ingress[b-l5qnahvgww] {
        margin-top: 1rem;
        padding: 0 1.35rem;
        font-size: 1.15rem;
        line-height: 1.7;
    }

    .sidebar-theme-ingress-wrapper.collapsed .sidebar-theme-ingress[b-l5qnahvgww] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        max-height: none;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .sidebar-theme-ingress-wrapper.expanded .sidebar-theme-ingress[b-l5qnahvgww] {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
        max-height: none;
    }

    .sidebar-theme-ingress-wrapper.no-overflow .sidebar-theme-ingress[b-l5qnahvgww],
    .sidebar-theme-ingress-wrapper.collapsed.no-overflow .sidebar-theme-ingress[b-l5qnahvgww] {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .sidebar-portrait-section[b-l5qnahvgww] {
        padding: 1.35rem 1.25rem 1rem;
    }

    .favorite-heart-btn[b-l5qnahvgww] {
        top: -8px;
        right: -8px;
        width: 52px;
        min-width: 52px;
        height: 52px;
    }

    .favorite-heart-btn .heart-icon[b-l5qnahvgww] {
        width: 24px;
        height: 24px;
    }

    .sidebar-nav[b-l5qnahvgww] {
        gap: 0.55rem;
        padding: 0.7rem 1rem 0.9rem;
    }

    .sidebar-nav-item[b-l5qnahvgww],
    .sidebar-penpal-invite-btn[b-l5qnahvgww] {
        min-height: 58px;
        border-radius: 999px;
        font-size: 0.98rem;
        padding: 0.95rem 1.15rem;
    }

    .sidebar-history-teaser[b-l5qnahvgww] {
        padding: 0 0.2rem;
    }

    .sidebar-history-link[b-l5qnahvgww] {
        min-height: 78px;
        border-radius: 26px;
    }

    .sidebar-footer[b-l5qnahvgww] {
        padding: 0.9rem 1.35rem 0;
    }
}

@media (max-width: 480px) {
    .sidebar-avatar-wrap[b-l5qnahvgww] {
        width: 156px;
        height: 156px;
        margin-bottom: 1rem;
    }

    .sidebar-portrait-section[b-l5qnahvgww] {
        padding: 1rem 1rem 0.85rem;
    }

    .sidebar-theme-name[b-l5qnahvgww] {
        font-size: 1.7rem;
    }

    .sidebar-theme-lifespan[b-l5qnahvgww] {
        font-size: 0.95rem;
    }

    .sidebar-theme-ingress[b-l5qnahvgww] {
        padding: 0 1rem;
        font-size: 1.05rem;
        line-height: 1.7;
        -webkit-line-clamp: 4;
    }

    .favorite-heart-btn[b-l5qnahvgww] {
        top: -6px;
        right: -6px;
        width: 46px;
        min-width: 46px;
        height: 46px;
    }

    .favorite-heart-btn .heart-icon[b-l5qnahvgww] {
        width: 20px;
        height: 20px;
    }
}

/* ── "Previous conversations" pill link (Mode 1) ── */
.sidebar-history-teaser[b-l5qnahvgww] {
    padding: 0 0.28rem 0.18rem;
}

.sidebar-history-link[b-l5qnahvgww] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.82rem 0.92rem;
    border: 1px solid rgba(188, 152, 109, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.72), rgba(248, 240, 229, 0.92));
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #8B7355;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.sidebar-history-link:hover:not(:disabled)[b-l5qnahvgww] {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(249, 241, 230, 0.98));
    border-color: rgba(188, 152, 109, 0.24);
    box-shadow: 0 12px 18px rgba(114, 81, 49, 0.08);
    color: #5A4534;
}

.sidebar-history-link:disabled[b-l5qnahvgww] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.sidebar-history-link-icon[b-l5qnahvgww] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(188, 152, 109, 0.16);
    background: rgba(255, 248, 239, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.sidebar-history-link-icon-glyph[b-l5qnahvgww] {
    font-size: 0.86rem;
    line-height: 1;
}

.sidebar-history-link-copy[b-l5qnahvgww] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sidebar-history-link-label[b-l5qnahvgww] {
    font-size: 0.92rem;
    font-style: italic;
}

.sidebar-history-link-chevron[b-l5qnahvgww] {
    margin-left: 0.45rem;
    font-size: 0.86rem;
    line-height: 1;
    opacity: 0.45;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.sidebar-history-link:hover .sidebar-history-link-chevron[b-l5qnahvgww] {
    opacity: 0.7;
    transform: translateX(2px);
}

.sidebar-history-count[b-l5qnahvgww] {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(207, 167, 117, 0.16), rgba(188, 152, 109, 0.1));
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-style: normal;
    color: #8B7355;
}

.sidebar-divider[b-l5qnahvgww] {
    height: 1px;
    margin: 0.12rem 0.9rem 0.5rem;
    background: linear-gradient(90deg, transparent, rgba(188, 152, 109, 0.3), transparent);
}

/* ── Load more button (history mode) ── */
.sidebar-history-load-more[b-l5qnahvgww] {
    margin-top: 0.85rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(188, 152, 109, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.9), rgba(247, 238, 226, 0.96));
    color: #6B523D;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.sidebar-history-load-more:hover:not(:disabled)[b-l5qnahvgww] {
    transform: translateY(-1px);
    border-color: rgba(188, 152, 109, 0.32);
    box-shadow: 0 12px 20px rgba(114, 81, 49, 0.08);
    color: #4B3A2C;
}

.sidebar-history-load-more:disabled[b-l5qnahvgww] {
    opacity: 0.62;
    cursor: wait;
}

/* Night mode — pill + load more */
:global(body.night-mode) .sidebar-history-link[b-l5qnahvgww] {
    background: linear-gradient(180deg, rgba(50, 41, 35, 0.6), rgba(42, 34, 29, 0.72));
    border-color: rgba(191, 148, 91, 0.16);
    color: #C9B7A2;
}

:global(body.night-mode) .sidebar-history-link:hover[b-l5qnahvgww] {
    background: linear-gradient(180deg, rgba(60, 49, 41, 0.88), rgba(50, 41, 35, 0.92));
    border-color: rgba(191, 148, 91, 0.28);
    color: #F0E3D4;
}

:global(body.night-mode) .sidebar-history-link-icon[b-l5qnahvgww] {
    background: rgba(42, 34, 29, 0.82);
    border-color: rgba(191, 148, 91, 0.2);
}

:global(body.night-mode) .sidebar-history-count[b-l5qnahvgww] {
    background: linear-gradient(180deg, rgba(191, 148, 91, 0.2), rgba(191, 148, 91, 0.12));
    color: #D8C3AD;
}

:global(body.night-mode) .sidebar-divider[b-l5qnahvgww] {
    background: linear-gradient(90deg, transparent, rgba(191, 148, 91, 0.28), transparent);
}

:global(body.night-mode) .sidebar-history-load-more[b-l5qnahvgww] {
    background: linear-gradient(180deg, rgba(50, 41, 35, 0.72), rgba(42, 34, 29, 0.84));
    border-color: rgba(191, 148, 91, 0.2);
    color: #D8C3AD;
}

:global(body.night-mode) .sidebar-history-load-more:hover:not(:disabled)[b-l5qnahvgww] {
    border-color: rgba(191, 148, 91, 0.34);
    color: #F0E3D4;
}
/* /Components/ThemeSection.razor.rz.scp.css */
.theme-section[b-n9r51s54pk] {
    margin-bottom: 3rem;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Prevent horizontal overflow on the section level */
}

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

.section-header h2[b-n9r51s54pk] {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--loved-one-text, #4b2e2e);
    margin: 0;
    font-weight: 600;
}

.scroll-controls[b-n9r51s54pk] {
    display: flex;
    gap: 0.5rem;
}

.scroll-arrow[b-n9r51s54pk] {
    background: rgba(255, 196, 179, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #4b2e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.scroll-arrow:hover[b-n9r51s54pk] {
    background: rgba(255, 196, 179, 1);
    transform: scale(1.1);
}

.scroll-arrow:focus[b-n9r51s54pk] {
    outline: 2px solid #ffc4b3;
    outline-offset: 2px;
}

/* CSS-based layout - wrapped grid approach for all devices */
.theme-carousel[b-n9r51s54pk] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* Allow wrapping on all devices */
    gap: 1.25rem;
    padding: 0 1rem 1rem 1rem;

    /* Remove horizontal scrolling - use wrapped layout instead */
    overflow-x: visible;
    scroll-behavior: smooth;

    /* Ensure proper width calculation */
    width: 100%;
    min-width: 0;

    /* Better performance */
    will-change: transform;
    transform: translateZ(0);
}

/* Hide scrollbar when content doesn't overflow */
.theme-carousel[data-no-scroll][b-n9r51s54pk] {
    -ms-overflow-style: none;
}

.theme-carousel[data-no-scroll][b-n9r51s54pk]::-webkit-scrollbar {
    display: none;
}

/* Webkit scrollbar styling for desktop - only visible when overflowing */
.theme-carousel:not([data-no-scroll])[b-n9r51s54pk]::-webkit-scrollbar {
    height: 8px;
}

.theme-carousel[b-n9r51s54pk]::-webkit-scrollbar-track {
    background: rgba(255, 196, 179, 0.2);
    border-radius: 4px;
}

.theme-carousel[b-n9r51s54pk]::-webkit-scrollbar-thumb {
    background: rgba(255, 196, 179, 0.6);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.theme-carousel[b-n9r51s54pk]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 196, 179, 0.8);
}



.carousel-load-more-container[b-n9r51s54pk] {
    flex: 0 0 auto;
    /* Never shrink, never grow */
    width: 100%;
    /* Full width on all devices */
    flex-basis: 100%;
    /* Force to new line */
    order: 999;
    /* Ensure it comes last */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin-top: 0.5rem;
}

.carousel-load-more[b-n9r51s54pk] {
    background: linear-gradient(135deg, #ffdacf, #ffc4b3);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #4b2e2e;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 196, 179, 0.3);
    min-height: 120px;
    width: 200px;
    /* Fixed width for centered appearance */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-load-more:hover[b-n9r51s54pk] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(255, 196, 179, 0.4);
    background: linear-gradient(135deg, #ffc4b3, #ff9580);
}

.carousel-load-more:focus[b-n9r51s54pk] {
    outline: 2px solid #ffc4b3;
    outline-offset: 2px;
}

.load-more-content[b-n9r51s54pk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.load-more-icon[b-n9r51s54pk] {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.load-more-text[b-n9r51s54pk] {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Tablet/iPad responsive design - broader range for better coverage */
@media (max-width: 1400px) and (min-width: 769px) {
    .theme-section[b-n9r51s54pk] {
        margin-bottom: 2.5rem;
    }

    .section-header[b-n9r51s54pk] {
        padding: 0 1.5rem;
    }

    .section-header h2[b-n9r51s54pk] {
        font-size: 1.4rem;
    }

    /* Hide scroll arrows on tablets - use natural scrolling */
    .scroll-controls[b-n9r51s54pk] {
        display: none;
    }

    /* Mixed layout for tablets - cards horizontal, load more below */
    .theme-carousel[b-n9r51s54pk] {
        flex-wrap: wrap;
        align-items: stretch;
        /* Allow wrapping */
        gap: 1.5rem;
        padding: 0 1.5rem 1.5rem 1.5rem;

        /* Remove horizontal scrolling for tablets */
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .carousel-load-more-container[b-n9r51s54pk] {
        width: 100%;
        /* Full width on tablets */
        flex-basis: 100%;
        /* Force to new line */
        order: 999;
        /* Ensure it comes last */
        margin-top: 1rem;
    }

    .carousel-load-more[b-n9r51s54pk] {
        width: 200px;
        margin: 0 auto;
        /* Center the button */
        min-height: 80px;
        padding: 1rem 1.5rem;
    }

    .load-more-icon[b-n9r51s54pk] {
        font-size: 1.5rem;
    }

    .load-more-text[b-n9r51s54pk] {
        font-size: 0.9rem;
    }
}

/* Mobile phones only */
@media (max-width: 768px) {
    .theme-section[b-n9r51s54pk] {
        margin-bottom: 2rem;
    }

    .section-header[b-n9r51s54pk] {
        padding: 0 0.5rem;
    }

    .section-header h2[b-n9r51s54pk] {
        font-size: 1.2rem;
    }

    /* Hide scroll arrows on mobile - use vertical layout */
    .scroll-controls[b-n9r51s54pk] {
        display: none;
    }

    /* Change to vertical layout on mobile */
    .theme-carousel[b-n9r51s54pk] {
        flex-direction: column;
        align-items: stretch;
        /* Stack vertically */
        overflow-x: visible;
        /* Remove horizontal scroll */
        overflow-y: visible;
        /* Allow vertical flow */
        gap: 1rem;
        padding: 0 0.5rem;

        /* Remove scroll behaviors for vertical layout */
        scroll-snap-type: none;
        -ms-overflow-style: none;
    }

    .theme-carousel[b-n9r51s54pk]::-webkit-scrollbar {
        display: none;
    }

    .carousel-load-more-container[b-n9r51s54pk] {
        width: 100%;
        /* Full width on mobile */
        align-self: stretch;
        /* Stretch to full width */
        margin-top: 0.5rem;
    }

    .carousel-load-more[b-n9r51s54pk] {
        width: 100%;
        min-height: 60px;
        /* Smaller height for mobile */
        padding: 1rem;
    }

    .load-more-icon[b-n9r51s54pk] {
        font-size: 1.5rem;
    }

    .load-more-text[b-n9r51s54pk] {
        font-size: 0.8rem;
    }
}

/*@media (max-width: 480px) {
    .carousel-load-more-container {
        width: 140px;
        min-width: 140px;
    }
}*/

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .theme-carousel[b-n9r51s54pk] {
        scroll-behavior: auto;
    }

    .theme-card[b-n9r51s54pk],
    .carousel-load-more[b-n9r51s54pk] {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .scroll-arrow[b-n9r51s54pk],
    .carousel-load-more[b-n9r51s54pk] {
        border: 2px solid;
    }
}
/* /Components/ThemeToggle.razor.rz.scp.css */
/* ThemeToggle.razor.css */

.theme-toggle[b-qhykqoaz4k] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--theme-toggle-bg);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .theme-icon[b-qhykqoaz4k] {
    font-size: 1.2em;
  }
  
  .theme-text[b-qhykqoaz4k] {
    font-size: 1em;
  }
  
/* /Components/TopBar.razor.rz.scp.css */
.top-bar[b-h3lka7ogw6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    z-index: 1000;
}

.top-bar-content[b-h3lka7ogw6] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
}

.top-bar-right[b-h3lka7ogw6] {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Push page content down to avoid hiding behind fixed top bar */
body[b-h3lka7ogw6], .main-container[b-h3lka7ogw6] {
    padding-top: 50px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .top-bar[b-h3lka7ogw6] {
        height: auto;
        padding: 0.5rem 1rem;
    }

    .top-bar-content[b-h3lka7ogw6] {
        flex-direction: column;
        gap: 4px;
        font-size: 0.9rem;
        text-align: center;
    }

    .top-bar-right[b-h3lka7ogw6] {
        font-size: 0.8rem;
    }
}
/* /Components/UpgradePromptModal.razor.rz.scp.css */
/* Basic Modal Styling - Customize Heavily! */
.modal-overlay[b-48zw5ive4l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dim overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 1000; /* Ensure it's on top */
}

    .modal-overlay.visible[b-48zw5ive4l] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

.modal-content[b-48zw5ive4l] {
    background-color: #fff8f6 !important;
    padding: 30px 40px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    position: relative;
    max-width: 520px;
    width: 92%;
    text-align: center;
    transform: scale(0.96);
    transition: transform 0.24s ease;
}

.modal-overlay.visible .modal-content[b-48zw5ive4l] {
    transform: scale(1);
}

.modal-close-btn[b-48zw5ive4l] {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

    .modal-close-btn:hover[b-48zw5ive4l] {
        color: #333;
    }

.modal-title[b-48zw5ive4l] { margin: 6px 0 10px; color: #563e3a; font-size: 1.35rem; font-weight: 700; }
.modal-description[b-48zw5ive4l] { margin: 0 0 22px; color: #6b4b47; font-size: 0.98rem; line-height: 1.45; }

/* Soft reassurance message for paid users who hit daily limits */
.modal-reassurance[b-48zw5ive4l] {
    margin: 0 0 16px;
    color: #6b4b47;
    background-color: #fff4f2;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.98rem;
    line-height: 1.45;
}

/* Avatar at top */
.upgrade-avatar[b-48zw5ive4l] { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(0,0,0,0.18); display: block; margin: 8px auto 12px; border: 3px solid #fff; }

.modal-actions[b-48zw5ive4l] {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between buttons/divider */
}

.btn-google-signup[b-48zw5ive4l],
.btn-email-signup[b-48zw5ive4l] {
    /* Add common button styles */
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    text-decoration: none; /* For link version */
    display: inline-block; /* For link version */
    color: #333; /* Adjust */
}

.btn-google-signup[b-48zw5ive4l] {
    background-color: #fff; /* Google style */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .btn-google-signup img[b-48zw5ive4l] {
        width: 18px;
        height: 18px;
    }

    .btn-google-signup:hover[b-48zw5ive4l] {
        background-color: #f8f8f8;
    }

.btn-email-signup[b-48zw5ive4l] {
    background-color: #eee; /* Example */
}

    .btn-email-signup:hover[b-48zw5ive4l] {
        background-color: #ddd;
    }


.modal-divider[b-48zw5ive4l] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    font-size: 0.9rem;
    margin: 5px 0;
}

    .modal-divider[b-48zw5ive4l]::before,
    .modal-divider[b-48zw5ive4l]::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #eee;
    }

    .modal-divider[b-48zw5ive4l]::before {
        margin-right: .5em;
    }

    .modal-divider[b-48zw5ive4l]::after {
        margin-left: .5em;
    }


/* Add specific styles for the upgrade modal if desired */
.upgrade-modal[b-48zw5ive4l] { background: #fff8f6; }

    .upgrade-modal .btn-primary-action[b-48zw5ive4l] {
        background-color: var(--peach);
        color: var(--text);
        border: none;
        padding: 12px 24px;
        border-radius: 10px;
        font-size: 0.98rem;
        font-weight: 700;
        cursor: pointer;
        transition: filter 0.15s ease, transform 0.1s ease;
    }

        .upgrade-modal .btn-primary-action:hover[b-48zw5ive4l] { filter: brightness(0.98); }
        .upgrade-modal .btn-primary-action:active[b-48zw5ive4l] { transform: translateY(1px); }

    /* Secondary link ("Not now") */
    .upgrade-modal .btn-secondary-link[b-48zw5ive4l] {
        appearance: none;
        background: transparent;
        border: none;
        color: #7b5a53;
        font-size: 0.95rem;
        cursor: pointer;
        text-decoration: none;
        padding: 2px 8px;
    }
    .upgrade-modal .btn-secondary-link:hover[b-48zw5ive4l] { text-decoration: underline; }

.modal-footer-links[b-48zw5ive4l] {
    margin-top: 20px;
    font-size: 0.85rem;
}

    .modal-footer-links a[b-48zw5ive4l] {
        color: /* your link color */;
        text-decoration: none;
    }

        .modal-footer-links a:hover[b-48zw5ive4l] {
            text-decoration: underline;
        }

/* /Components/UserFamilyTreeEditor.razor.rz.scp.css */
/* =============== UserFamilyTreeEditor (tab container) =============== */

.tree-tab[b-83848w4b9t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
}

/* Toolbar header row */
.tree-toolbar[b-83848w4b9t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff8f4;
    border: 1px solid #ffe6d6;
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 1px 4px rgba(120, 80, 60, 0.08);
}

    .tree-toolbar .left[b-83848w4b9t] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.section-title[b-83848w4b9t] {
    color: #bb6535; /* warm accent */
    font-weight: 700;
    font-size: 1.05rem;
}

/* Year badge (if shown in toolbar) */
.year-chip[b-83848w4b9t] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f4efe9;
    color: #6b5a53;
    font-size: 12px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.04);
}

.tree-toolbar .right[b-83848w4b9t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Link-style button in toolbar */
.tree-tab .btn-link[b-83848w4b9t] {
    background: transparent;
    border: none;
    color: #a65322;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
}

    .tree-tab .btn-link:hover[b-83848w4b9t] {
        text-decoration: underline;
        background: #fff1e8;
    }

/* Loading / empty */
.tree-loading[b-83848w4b9t] {
    min-height: min(440px, 54vh);
    border: 1px solid #eadbcc;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffdf9 0%, #fffaf6 100%);
    color: #5b3436;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 34px 22px;
    box-shadow: 0 8px 24px rgba(90, 58, 38, 0.06);
}

.tree-loading-spinner[b-83848w4b9t] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 4px solid #f3ddd2;
    border-top-color: #bb6535;
    animation: tree-loading-spin-b-83848w4b9t 0.9s linear infinite;
}

.tree-loading-text[b-83848w4b9t] {
    color: #5b3436;
    font-size: 1.05rem;
    font-weight: 700;
}

.tree-loading-skeleton[b-83848w4b9t] {
    width: min(520px, 80%);
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.tree-loading-skeleton span[b-83848w4b9t] {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f7e7dc 0%, #fff4ed 48%, #f7e7dc 100%);
    background-size: 220% 100%;
    animation: tree-loading-shimmer-b-83848w4b9t 1.4s ease-in-out infinite;
}

.tree-loading-skeleton span:nth-child(1)[b-83848w4b9t] {
    width: 100%;
}

.tree-loading-skeleton span:nth-child(2)[b-83848w4b9t] {
    width: 76%;
    justify-self: center;
}

.tree-loading-skeleton span:nth-child(3)[b-83848w4b9t] {
    width: 58%;
    justify-self: center;
}

.tree-empty[b-83848w4b9t] {
    color: #7b6a66;
    font-size: 0.95rem;
    padding: 6px 2px;
}

@keyframes tree-loading-spin-b-83848w4b9t {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tree-loading-shimmer-b-83848w4b9t {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tree-loading-spinner[b-83848w4b9t],
    .tree-loading-skeleton span[b-83848w4b9t] {
        animation: none;
    }
}

/* Optional: add a soft divider below toolbar to separate editor area */
.tree-tab .editor-divider[b-83848w4b9t] {
    height: 1px;
    background: #ffe6d6;
    margin: 4px 0 8px;
}

/* =============== AttachPersonModal (if used) =============== */

.modal-overlay[b-83848w4b9t] {
    position: fixed;
    inset: 0;
    background: rgba(80,60,44,0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}

.modal-content[b-83848w4b9t] {
    background: #fff9f4;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    border: 1px solid rgba(58,38,29,0.18);
    width: min(720px, 92vw);
    padding: 16px 18px 14px;
}

    .modal-content h3[b-83848w4b9t] {
        margin: 0 0 10px 0;
        color: #bb6535;
        font-size: 1.1rem;
    }

    .modal-content .text-input[b-83848w4b9t] {
        width: 100%;
        border: none;
        border-radius: 10px;
        padding: 10px 12px;
        background: #fffaf7;
        box-shadow: 0 1px 3px #ffe6d699;
        font-size: 1rem;
        margin-bottom: 10px;
    }

/* People list */
.person-list[b-83848w4b9t] {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid #ffe6d6;
    border-radius: 10px;
    background: #fffefc;
}

.person-row[b-83848w4b9t] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px dashed #ffe6d6;
}

    .person-row:last-child[b-83848w4b9t] {
        border-bottom: none;
    }

    .person-row .left[b-83848w4b9t] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.avatar-sm[b-83848w4b9t] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffe6d6;
    box-shadow: 0 0 0 1px #ffd3b7 inset;
}

.person-name[b-83848w4b9t] {
    color: #6b4a43;
    font-weight: 600;
}

.person-year[b-83848w4b9t] {
    color: #b2886a;
    font-size: 12px;
}

.person-row .btn-small[b-83848w4b9t] {
    padding: 0.28em 0.88em;
    border-radius: 8px;
    border: none;
    background: #ffe6d6;
    color: #bb6535;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    font-size: 0.95em;
    box-shadow: 0 0.5px 2px 0 #ffe6d699;
}

    .person-row .btn-small:hover[b-83848w4b9t] {
        background: #ffd3b7;
        color: #a65322;
    }

.modal-actions[b-83848w4b9t] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

    .modal-actions .btn-link[b-83848w4b9t] {
        background: transparent;
        border: none;
        color: #7b6a66;
        font-weight: 600;
        cursor: pointer;
        padding: 6px 8px;
    }

        .modal-actions .btn-link:hover[b-83848w4b9t] {
            text-decoration: underline;
        }

/* =============== Small responsive tweaks =============== */

@media (max-width: 640px) {
    .tree-toolbar[b-83848w4b9t] {
        padding: 6px 10px;
    }

    .tree-loading[b-83848w4b9t] {
        min-height: min(360px, 48vh);
        padding: 28px 16px;
    }

    .tree-loading-skeleton[b-83848w4b9t] {
        width: 88%;
    }

    .section-title[b-83848w4b9t] {
        font-size: 1rem;
    }

    .year-chip[b-83848w4b9t] {
        font-size: 11px;
        padding: 2px 8px;
    }

    .modal-content[b-83848w4b9t] {
        width: 94vw;
        padding: 14px;
    }

    .person-row[b-83848w4b9t] {
        padding: 8px;
    }
}

/* /Components/UserSettingsModal.razor.rz.scp.css */
/* ========================================= */
/*   Shared Modal Overlay Styling (from you) */
/* ========================================= */
.modal-overlay[b-hdhpip63hu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 25, 15, 0.55); /* Your overlay color */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 2000;
}

    .modal-overlay.visible[b-hdhpip63hu] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

/* --- Base Modal Content Styling (from you) --- */
.modal-content[b-hdhpip63hu] {
    position: relative;
   /* padding: 30px 45px;*/
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002;
}

.modal-overlay.visible .modal-content[b-hdhpip63hu] {
    transform: scale(1);
}


/* === Specific styles for the USER SETTINGS Modal === */
/* This targets <div class="modal-content user-settings-modal-content" ...> */
.modal-content.user-settings-modal-content[b-hdhpip63hu] {
    background-color: #FFFCFA; /* Match Reflection Modal background */
    border-radius: 16px; /* Match Reflection Modal */
    max-width: 600px; /* Wider for tabbed content */
    width: 90%;
    text-align: left; /* Default for form content */
    box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12); /* Match Reflection Modal */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Match Reflection Modal */
    overflow: hidden; /* Important for fixed header/footer layout */
    position: relative; /* For absolute positioning of close button */
}

/* Close button - identical to PrivateReflectionModal's .modal-close-icon-button */
.user-settings-modal-content .modal-close-icon-button[b-hdhpip63hu] {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 400;
    color: #967f6b;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
    z-index: 10;
}

    .user-settings-modal-content .modal-close-icon-button:hover[b-hdhpip63hu] {
        color: #594a3a;
    }

/* Modal Title - "User Settings" */
.user-settings-modal-title[b-hdhpip63hu] {
    font-family: var(--font-serif);
    font-size: 1.75rem; /* Match Reflection Modal title */
    font-weight: 600;
    color: #594a3a;
    text-align: center;
    margin: 0;
    padding: 2rem 3rem 1rem 2rem; /* Added right padding for close button */
    flex-shrink: 0;
    background: #FFFCFA;
    border-bottom: 1px solid #f0e1d0;
}

/* Tabs Container Styling */
.modal-tabs-container[b-hdhpip63hu] {
    display: flex;
    border-bottom: 1px solid #f0e1d0;
    flex-shrink: 0; /* Prevent tabs from shrinking if content is small */
    background: #FFFCFA;
    padding: 0 2rem;
}

.modal-tab-button[b-hdhpip63hu] {
    flex: 1; /* Tabs share width equally */
    padding: 0.8rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent; /* Underline for active tab */
    cursor: pointer;
    font-size: 0.9rem; /* Slightly smaller than main modal title */
    font-weight: 500;
    color: #967f6b;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-family: var(--font-lato);
    text-align: center;
    white-space: nowrap; /* Prevent tab text from wrapping */
}

    .modal-tab-button:hover[b-hdhpip63hu] {
        color: #594a3a;
    }

    .modal-tab-button.active[b-hdhpip63hu] {
        color: #594a3a; /* Darker text for active tab */
        border-bottom-color: #fbbbad; /* Accent color underline */
        font-weight: 600;
    }

/* Body for Tab Content */
.user-settings-modal-body[b-hdhpip63hu] {
    flex: 1;
    overflow-y: auto; /* Allow tab content to scroll if it's too long */
    padding: 1.5rem 2rem;
    /* Enable smooth momentum scrolling on iOS/mobile */
    -webkit-overflow-scrolling: touch;
}

/* Form Group Styling (Common for input fields within tabs) */
.form-group-settings[b-hdhpip63hu] {
    margin-bottom: 1.3rem; /* Consistent spacing */
}    .form-group-settings label[b-hdhpip63hu] {
        display: block;
        font-size: 0.85rem; /* Match Reflection Modal tags label */
        font-weight: 500;
        color: #967f6b;
        margin-bottom: 0.5rem;
    }

    .form-group-settings input[type="text"][b-hdhpip63hu],
    .form-group-settings input[type="email"][b-hdhpip63hu],
    .form-group-settings input[type="date"][b-hdhpip63hu],
        select[b-hdhpip63hu],
    .user-settings-modal-body .form-select-styled[b-hdhpip63hu] { /* Scoped select style */
        width: 100%;
        padding: 12px 15px; /* Match Reflection Modal textarea padding */
        font-size: 0.95rem; /* Match Reflection Modal textarea font-size */
        border-radius: 10px; /* Match Reflection Modal textarea border-radius */
        border: 1px solid #E0D8D1; /* Match Reflection Modal textarea border */
        background-color: #fff;
        color: #594a3a;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box;
        line-height: 1.5; /* Added for better text display */
    }

        .form-group-settings input[type="text"]:focus[b-hdhpip63hu],
        .form-group-settings input[type="email"]:focus[b-hdhpip63hu],
        .form-group-settings input[type="date"]:focus[b-hdhpip63hu],
        .user-settings-modal-body .form-select-styled:focus[b-hdhpip63hu] {
            border-color: #fbbbad; /* Match Reflection Modal focus */
            outline: none;
            box-shadow: 0 0 0 3px rgba(251, 187, 173, 0.25); /* Match Reflection Modal focus */
        }    .form-group-settings input[readonly][b-hdhpip63hu] {
        background-color: #f8f6f5; /* Slightly different bg for readonly */
        cursor: default; /* Not not-allowed, just non-interactive */
        color: #967f6b;
    }

    .form-group-settings .text-warning[b-hdhpip63hu] {
        font-size: 0.8rem;
        color: #c87800;
        margin-top: 0.25rem;
    }

        .form-group-settings .text-warning a[b-hdhpip63hu] {
            color: #c87800;
            text-decoration: underline;
        }

.btn-link-like[b-hdhpip63hu] { /* For links like "Change Password" */
    background: none;
    border: none;
    color: #fbbbad;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .btn-link-like:hover[b-hdhpip63hu] {
        color: #594a3a;
        text-decoration: underline;
    }

.static-info[b-hdhpip63hu] { /* For displaying non-editable info like subscription tier */
    font-size: 0.95rem;
    color: #594a3a;
    padding: 10px 0; /* To visually align with inputs */
}

    .static-info .upgrade-link[b-hdhpip63hu] {
        margin-left: 0.75rem;
        font-size: 0.85rem;
        color: #fbbbad;
    }

    .soft-link[b-hdhpip63hu] {
    color: #E0A96D;
    text-decoration: underline;
    font-weight: 500;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.soft-link:hover[b-hdhpip63hu] {
    opacity: 0.8;
}

.modal-content.user-settings-modal-content.family-tree-settings-modal[b-hdhpip63hu] {
    max-width: 860px;
}

.memory-friend-status[b-hdhpip63hu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    margin: 0.75rem 0 1rem;
    border: 1px solid rgba(190, 134, 76, 0.28);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 250, 243, 0.98), rgba(246, 226, 202, 0.66));
    color: #5d3a29;
}

.memory-friend-status__mark[b-hdhpip63hu] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: radial-gradient(circle at 50% 35%, #fff4d4 0 20%, #d7924d 22% 58%, #8a5b3f 60% 100%);
    box-shadow: 0 0 0 4px rgba(215, 146, 77, 0.12);
}

.memory-friend-status__copy[b-hdhpip63hu] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.memory-friend-status__copy strong[b-hdhpip63hu] {
    font-size: 0.95rem;
    color: #5d3a29;
}

.memory-friend-status__copy span[b-hdhpip63hu] {
    color: #7a5a44;
}

.contact-section[b-hdhpip63hu] {
    /* Softer, lighter divider to reduce strong sectioning */
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 20px;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-section .LineItem-image[b-hdhpip63hu] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.contact-section > div[b-hdhpip63hu] {
    flex: 1;
}

.contact-section h3[b-hdhpip63hu] {
    margin-top: 0;
    margin-bottom: 10px;
}

.support-section[b-hdhpip63hu] {
    /* Softer, lighter divider to reduce strong sectioning */
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 20px;
    margin-top: 20px;
}

.memory-limit-card[b-hdhpip63hu] {
    border: 1px solid #f0e1d0;
    background: #fff7f2;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-top: 0.8rem;
    text-align: left;
}

.memory-limit-title[b-hdhpip63hu] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #594a3a;
    margin-bottom: 0.4rem;
}

.memory-limit-row[b-hdhpip63hu] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: #6f5c4a;
}

.memory-limit-remaining[b-hdhpip63hu] {
    font-weight: 600;
    color: #8a5b52;
}

.memory-limit-hint[b-hdhpip63hu] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #967f6b;
    line-height: 1.4;
}

.memory-continuity-card[b-hdhpip63hu] {
    margin-top: 1.25rem;
}

.memory-continuity-text[b-hdhpip63hu] {
    margin: 0.6rem 0 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #6c757d;
    white-space: pre-line;
}

.auth-method-list[b-hdhpip63hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-method-chip[b-hdhpip63hu] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid #ead8ca;
    border-radius: 999px;
    background: #fff7f2;
    color: #6f5c4a;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

/* === Portrait Credits Section === */
.credits-section[b-hdhpip63hu] {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 20px;
    margin-top: 20px;
}

.credits-balance-card[b-hdhpip63hu] {
    border: 1px solid #f0e1d0;
    background: #fff7f2;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    text-align: left;
}

.credits-balance-header[b-hdhpip63hu] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.credits-count[b-hdhpip63hu] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #594a3a;
    font-family: var(--font-serif);
    line-height: 1;
}

.credits-label[b-hdhpip63hu] {
    font-size: 0.9rem;
    color: #967f6b;
    font-weight: 500;
}

.credits-hint[b-hdhpip63hu] {
    font-size: 0.8rem;
    color: #967f6b;
    margin: 0.3rem 0 0.8rem 0;
    line-height: 1.4;
}

.credits-topup-link[b-hdhpip63hu] {
    display: inline-block;
    color: #E0A96D;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.credits-topup-link:hover[b-hdhpip63hu] {
    color: #c9935a;
    text-decoration: underline;
}

/* Footer Styling */
.user-settings-modal-footer[b-hdhpip63hu] {
    flex-shrink: 0;
    padding: 1.5rem 2rem;
    border-top: 1px solid #f0e1d0;
    background: #FFFCFA;
    display: flex;
    justify-content: flex-end; /* Align buttons to right */
    gap: 0.75rem;
}

.user-settings-modal-footer.family-tree-footer[b-hdhpip63hu] {
    align-items: center;
    justify-content: space-between;
}

.family-tree-autosave-note[b-hdhpip63hu] {
    color: #8a7464;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-right: auto;
}
/* Buttons .btn-modal-cancel-refined and .btn-modal-save-refined reuse exact styles
   from PrivateReflectionModal.razor.css for visual consistency */
.btn-modal-save-refined.disabled[b-hdhpip63hu],
.btn-modal-cancel-refined.disabled[b-hdhpip63hu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-modal-cancel-refined[b-hdhpip63hu] {
    background-color: #E9E4E0;
    color: #594a3a;
    border: 1px solid #dcd6d4;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-modal-cancel-refined:hover[b-hdhpip63hu] {
        background-color: #d9d3cf;
    }

.btn-modal-save-refined[b-hdhpip63hu] {
    background-color: #fbbbad;
    color: #38250d;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-modal-save-refined:hover[b-hdhpip63hu] {
        background-color: #f9ac9c;
    }

    .btn-modal-save-refined.saving[b-hdhpip63hu] { /* For when IsSaving is true */
        background-color: #f9ac9c !important; /* Keep a noticeable color but indicate processing */
        cursor: wait;
    }

        .btn-modal-save-refined.saving .spinner-inline[b-hdhpip63hu] {
            width: 1em;
            height: 1em;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #38250d;
            border-radius: 50%;
            display: inline-block;
            animation: spin-b-hdhpip63hu 0.8s linear infinite;
            margin-right: 0.5rem;
            vertical-align: text-bottom;
        }

    .btn-modal-save-refined:disabled:not(.saving)[b-hdhpip63hu] { /* Standard HTML disabled, not during saving */
        background-color: #e0e0e0 !important;
        color: #a0a0a0 !important;
        cursor: not-allowed;
    }

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

/* --- Hobby tags styling --- */
.tags-selection-area[b-hdhpip63hu] {
    margin-top: 1rem;
    width: 100%;
}

.tags-container[b-hdhpip63hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.tag-chip[b-hdhpip63hu] {
    background-color: transparent;
    color: #967f6b;
    border: 1px solid #E0D8D1;
    border-radius: 15px;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.tag-chip:hover[b-hdhpip63hu] {
    border-color: #f9ac9c;
    background-color: #FFF9F7;
}

.tag-chip.selected[b-hdhpip63hu] {
    background-color: #f9ac9c;
    color: #594a3a;
    border-color: #fbbbad;
    font-weight: 500;
}

.missing-trait-feedback[b-hdhpip63hu] {
    text-align: center;
    margin-top: 1.1rem;
    font-size: 0.92em;
    color: #9e8262;
}

.missing-trait-feedback .feedback-link[b-hdhpip63hu] {
    color: #a4886c;
    text-decoration: none;
    transition: color 0.15s;
    cursor: pointer;
}

.missing-trait-feedback .feedback-link:hover[b-hdhpip63hu],
.missing-trait-feedback .feedback-link:focus[b-hdhpip63hu] {
    color: #fbbbad;
    text-decoration: underline;
}


/* === Mobile Responsiveness === */
@media (max-width: 768px) {
    .modal-content.user-settings-modal-content[b-hdhpip63hu] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .user-settings-modal-title[b-hdhpip63hu] {
        padding: 1.5rem 2.5rem 1rem 1.5rem; /* Adjusted right padding for close button */
        font-size: 1.3rem;
    }

    .user-settings-modal-content .modal-close-icon-button[b-hdhpip63hu] {
        top: 15px;
        right: 15px;
        font-size: 1.4rem;
    }

    .modal-tabs-container[b-hdhpip63hu] {
        padding: 0 1.5rem;
    }

    .user-settings-modal-body[b-hdhpip63hu] {
        padding: 1.5rem 1.5rem;
        position: relative;
    }

    /* Add a subtle shadow/gradient above the footer to hint at scrollable content */
    .user-settings-modal-body[b-hdhpip63hu]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to top, rgba(255, 252, 250, 0.9) 0%, rgba(255, 252, 250, 0.3) 50%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -1.5rem; /* Compensate for body padding */
    }

    .user-settings-modal-footer[b-hdhpip63hu] {
        padding: 1.5rem 1.5rem;
        gap: 0.75rem;
        /* Add a subtle shadow above the footer */
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    }

    .user-settings-modal-footer button[b-hdhpip63hu] {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .modal-content.user-settings-modal-content[b-hdhpip63hu] {
        width: 100%;
        height: 100vh;
        max-height: none;
        max-width:none;
        border-radius: 0;
    }

    .user-settings-modal-title[b-hdhpip63hu] {
        padding: 1rem 2rem 0.8rem 1rem; /* Adjusted right padding for close button */
        font-size: 1.2rem;
    }

    .user-settings-modal-content .modal-close-icon-button[b-hdhpip63hu] {
        top: 12px;
        right: 12px;
        font-size: 1.3rem;
    }

    .modal-tabs-container[b-hdhpip63hu] {
        padding: 0 1rem;
    }

    .user-settings-modal-body[b-hdhpip63hu] {
        padding: 1rem;
        position: relative;
    }

    /* Add a more prominent shadow/gradient above the footer on very small screens */
    .user-settings-modal-body[b-hdhpip63hu]::after {
        content: '';
        position: sticky;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to top, rgba(255, 252, 250, 0.95) 0%, rgba(255, 252, 250, 0.4) 60%, transparent 100%);
        pointer-events: none;
        z-index: 1;
        margin: 0 -1rem; /* Compensate for body padding */
    }

    .user-settings-modal-footer[b-hdhpip63hu] {
        padding: 1rem;
        /* Enhanced shadow for small screens */
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
    }

    .user-settings-modal-footer button[b-hdhpip63hu] {
        padding: 1rem 1.2rem;
        font-size: 1rem;
    }
}
/* /Components/ViewAllLovedOnesModal.razor.rz.scp.css */
/* Scoped styles for ViewAllLovedOnesModal, modeled after ViewAllMemoriesModal */

.modal-overlay[b-3hv74k9a4z] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.visible[b-3hv74k9a4z] { opacity: 1; visibility: visible; }

.lovedones-modal[b-3hv74k9a4z] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-3hv74k9a4z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.modal-header h3[b-3hv74k9a4z] { margin: 0; color: #3A3A3A; font-size: 1.25rem; font-weight: 600; }

.close-btn[b-3hv74k9a4z] { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }

.modal-body[b-3hv74k9a4z] { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }

.filters-section[b-3hv74k9a4z] { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eaeaea; }

.filter-row[b-3hv74k9a4z] { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

.search-input[b-3hv74k9a4z] { flex: 1; padding: 0.6rem 0.8rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; }

.sort-label[b-3hv74k9a4z] { display: inline-flex; align-items: center; font-size: 0.95rem; color: #555; margin-right: 0.5rem; }
.sort-select[b-3hv74k9a4z] { padding: 0.5rem 0.7rem; border: 1px solid #ddd; border-radius: 8px; background: white; font-size: 0.95rem; }

.loading-state[b-3hv74k9a4z] { text-align: center; padding: 2rem 1rem; color: #666; }


.lovedones-list[b-3hv74k9a4z] { 
    display: grid; 
    gap: 1rem; 
    /* grid-template-columns: repeat(4, 1fr);  */
    align-items: start; 
}

/* The component markup wraps cards in a .cards-grid — ensure it uses a 2-column grid as well */
.cards-grid[b-3hv74k9a4z] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 992px) {
    .cards-grid[b-3hv74k9a4z] { grid-template-columns: 1fr; }
}

/* Match Dashboard memory-card styles so modal cards look identical to dashboard */
.memory-card[b-3hv74k9a4z] {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memory-card:hover[b-3hv74k9a4z] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Recent Memory / Loved One card specifics */
.recent-memory-card[b-3hv74k9a4z] { background: #fff; }

.memory-card-image[b-3hv74k9a4z] {
    height: 160px;
    overflow: hidden;
    background: var(--card-image-placeholder-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.memory-placeholder-image[b-3hv74k9a4z] { color: var(--text-light); font-size: 2rem; }

.memory-card-content[b-3hv74k9a4z] { padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }

.memory-loved-one[b-3hv74k9a4z] { font-size: 0.9rem; color: var(--accent); font-weight: 600; margin-bottom: 0.5rem; }

.memory-title[b-3hv74k9a4z] { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; line-height: 1.3; }

.memory-date[b-3hv74k9a4z] { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1rem; }

.memory-actions[b-3hv74k9a4z] { display: flex; gap: 0.5rem; }

.btn-view-memory[b-3hv74k9a4z] {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 1.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-view-memory:hover[b-3hv74k9a4z] { background: var(--accent-hover); }

@media (max-width: 768px) {
    .cards-grid[b-3hv74k9a4z] { grid-template-columns: 1fr; }
}

.lovedone-card[b-3hv74k9a4z] { border: 1px solid #e0e0e0; border-radius: 12px; padding: 1rem; background: white; display: flex; flex-direction: column; min-height: 140px; }

.lovedone-header[b-3hv74k9a4z] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.lovedone-header h4[b-3hv74k9a4z] { margin: 0; font-size: 1.05rem; color: #333; }
.lovedone-meta[b-3hv74k9a4z] { font-size: 0.85rem; color: #666; }

.lovedone-content[b-3hv74k9a4z] { flex: 1; }
.lovedone-notes[b-3hv74k9a4z] { margin: 0; color: #555; font-size: 0.95rem; }

.lovedone-actions[b-3hv74k9a4z] { display: flex; gap: 0.5rem; margin-top: 0.75rem; justify-content: flex-end; }

.btn-view[b-3hv74k9a4z], .btn-edit[b-3hv74k9a4z], .btn-select[b-3hv74k9a4z] { padding: 0.45rem 0.85rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; font-size: 0.85rem; }

.btn-view[b-3hv74k9a4z] { background: #e3f2fd; color: #1976d2; }
.btn-edit[b-3hv74k9a4z] { background: #fff8e1; color: #f57c00; }
.btn-select[b-3hv74k9a4z] { background: #e8f5e9; color: #2e7d32; }

.btn-view:hover[b-3hv74k9a4z] { background: #bbdefb; transform: translateY(-1px); }
.btn-edit:hover[b-3hv74k9a4z] { background: #ffe0b2; transform: translateY(-1px); }
.btn-select:hover[b-3hv74k9a4z] { background: #c8e6c9; transform: translateY(-1px); }

.no-lovedones[b-3hv74k9a4z] { text-align: center; padding: 2rem 1rem; color: #666; }

.modal-actions[b-3hv74k9a4z] { display: flex; justify-content: center; padding-top: 1rem; border-top: 1px solid #f0f0f0; }

.btn-secondary-action[b-3hv74k9a4z] { background-color: transparent; color: #666; border: 1px solid #e5e5e5; padding: 10px 20px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; }

@media (max-width: 768px) {
    .lovedones-modal[b-3hv74k9a4z] { width: 95%; max-height: 95vh; margin: 1rem; }
    .lovedones-list[b-3hv74k9a4z] { grid-template-columns: 1fr; }
    .filter-row[b-3hv74k9a4z] { flex-direction: column; }
    .lovedone-actions[b-3hv74k9a4z] { justify-content: stretch; }
    .btn-view[b-3hv74k9a4z], .btn-edit[b-3hv74k9a4z], .btn-select[b-3hv74k9a4z] { flex: 1; }
}

/* Slightly tighten card content for grid layout */
.memory-card-content[b-3hv74k9a4z], .lovedone-card[b-3hv74k9a4z] { display: flex; flex-direction: column; justify-content: space-between; }
.memory-card-image img[b-3hv74k9a4z] { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.memory-placeholder-image[b-3hv74k9a4z] { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; background:#f4f4f4; border-radius:8px; }

/* /Components/ViewAllMemoriesModal.razor.rz.scp.css */
/* Modal styles copied from VaultMessages.razor.css (UNSAVE CONFIRMATION MODAL STYLES)
   Scoped to this component so the same classes render correctly when used here.
*/

[b-2mhyuuv09x] .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

[b-2mhyuuv09x] .modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

[b-2mhyuuv09x] .modal-content.layered-modal {
    background-color: rgb(255, 242, 236);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width: 450px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    padding: 24px;
}

[b-2mhyuuv09x] .modal-overlay.visible .modal-content {
    transform: scale(1);
}

[b-2mhyuuv09x] .modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 16px 0;
    margin-bottom: 8px;
}

[b-2mhyuuv09x] .modal-close-icon-button {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

[b-2mhyuuv09x] .modal-close-icon-button:hover {
    color: #666;
    background-color: rgba(0, 0, 0, 0.05);
}

[b-2mhyuuv09x] .modal-body {
    padding: 0 8px 24px 8px;
}

[b-2mhyuuv09x] .modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0 0 16px 0;
    text-align: center;
}

[b-2mhyuuv09x] .modal-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
    text-align: center;
    line-height: 1.5;
}

[b-2mhyuuv09x] .message-preview-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    text-align: left;
}

[b-2mhyuuv09x] .preview-content {
    position: relative;
}

[b-2mhyuuv09x] .preview-text {
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0;
    font-style: italic;
}

[b-2mhyuuv09x] .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f0f0f0;
}

[b-2mhyuuv09x] .btn-secondary-action {
    background-color: transparent;
    color: #666;
    border: 1px solid #e5e5e5;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-2mhyuuv09x] .btn-secondary-action:hover {
    background-color: #f5f5f5;
    border-color: #d1d1d1;
    color: #555;
}

[b-2mhyuuv09x] .btn-danger-action {
    background-color: #e53e3e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

[b-2mhyuuv09x] .btn-danger-action:hover {
    background-color: #c53030;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

[b-2mhyuuv09x] .btn-danger-action:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    [b-2mhyuuv09x] .modal-content.layered-modal {
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;
    }

    [b-2mhyuuv09x] .modal-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    [b-2mhyuuv09x] .modal-subtitle {
        font-size: 15px;
        margin-bottom: 20px;
    }

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

    [b-2mhyuuv09x] .btn-secondary-action,
    [b-2mhyuuv09x] .btn-danger-action {
        width: 100%;
        padding: 14px 24px;
    }
}
.modal-overlay[b-2mhyuuv09x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.visible[b-2mhyuuv09x] {
    opacity: 1;
    visibility: visible;
}

.memories-modal[b-2mhyuuv09x] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header[b-2mhyuuv09x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

    .modal-header h3[b-2mhyuuv09x] {
        margin: 0;
        color: #3A3A3A;
        font-size: 1.5rem;
        font-weight: 600;
    }

.close-btn[b-2mhyuuv09x] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

    .close-btn:hover[b-2mhyuuv09x] {
        background-color: #f0f0f0;
    }

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

.filters-section[b-2mhyuuv09x] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.filter-row[b-2mhyuuv09x] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-select[b-2mhyuuv09x], .filter-input[b-2mhyuuv09x] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    min-width: 150px;
}

    .filter-select:focus[b-2mhyuuv09x], .filter-input:focus[b-2mhyuuv09x] {
        outline: none;
        border-color: #9CB0A3;
        box-shadow: 0 0 0 2px rgba(156, 176, 163, 0.2);
    }

.search-row[b-2mhyuuv09x] {
    display: flex;
    gap: 1rem;
}

.search-input[b-2mhyuuv09x] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
}

    .search-input:focus[b-2mhyuuv09x] {
        outline: none;
        border-color: #9CB0A3;
        box-shadow: 0 0 0 2px rgba(156, 176, 163, 0.2);
    }

.loading-state[b-2mhyuuv09x] {
    text-align: center;
    padding: 3rem 2rem;
    color: #666;
}

.memories-list[b-2mhyuuv09x] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* FIXED: Memory card now uses flexbox for proper tag positioning */
.memory-card[b-2mhyuuv09x] {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem;
    background: white;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

    .memory-card:hover[b-2mhyuuv09x] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.memory-header[b-2mhyuuv09x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

    .memory-header h4[b-2mhyuuv09x] {
        margin: 0;
        color: #3A3A3A;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.3;
        flex: 1;
    }

.memory-date[b-2mhyuuv09x] {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
    background: #f0f0f0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.memory-image[b-2mhyuuv09x] {
    margin-bottom: 1rem;
}

    /* Constrain images shown in the memories list so they render as thumbnails
       and don't overflow the card. Also target .uploaded-image (used by
       CachedMediaDisplay) to ensure the CSS applies regardless of the img class. */
    .memory-image img[b-2mhyuuv09x],
    .memory-image .uploaded-image[b-2mhyuuv09x] {
        max-width: 100%;       /* don't exceed the card width */
        max-height: 180px;     /* cap thumbnail height */
        width: auto;
        height: auto;
        object-fit: contain;   /* preserve aspect ratio and fit inside bounds */
        border-radius: 8px;
        display: block;
    }

/* Stronger, specific override for CachedMediaDisplay container to prevent
   other global image styles from forcing full-size/fill behavior inside
   the memories grid. */
.memory-image .cached-media-container img.uploaded-image[b-2mhyuuv09x] {
    max-width: 100% !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* FIXED: Memory content now grows to fill space and push footer to bottom */
.memory-content[b-2mhyuuv09x] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.memory-content p[b-2mhyuuv09x] {
    margin: 0 0 1rem 0;
    color: #555;
    line-height: 1.5;
    font-size: 0.95rem;
    flex: 1;
}

/* FIXED: Footer is now always at bottom with margin-top: auto */
.memory-footer[b-2mhyuuv09x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: auto;
    padding-top: 1rem;
}

/* Container for tags with proper spacing */
.memory-tags[b-2mhyuuv09x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.loved-one-tag[b-2mhyuuv09x] {
    background: #9CB0A3;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    align-self: flex-start;
}

.memory-actions[b-2mhyuuv09x] {
    display: flex;
    gap: 0.5rem;
    align-self: flex-start;
}

.btn-view[b-2mhyuuv09x], .btn-chat[b-2mhyuuv09x], .btn-delete[b-2mhyuuv09x] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-view[b-2mhyuuv09x] {
    background: #e3f2fd;
    color: #1976d2;
}

.btn-chat[b-2mhyuuv09x] {
    background: #fff3e0;
    color: #f57c00;
}

.btn-delete[b-2mhyuuv09x] {
    background: #fff3e0;
    color: #f57c00;
}

.btn-view:hover[b-2mhyuuv09x] {
    background: #bbdefb;
    transform: translateY(-1px);
}

.btn-chat:hover[b-2mhyuuv09x] {
    background: #ffe0b2;
    transform: translateY(-1px);
}

.btn-delete:hover[b-2mhyuuv09x] {
    background: #ffe0b2;
    transform: translateY(-1px);
}

.no-memories[b-2mhyuuv09x] {
    text-align: center;
    padding: 3rem 2rem;
    color: #666;
}

    .no-memories p[b-2mhyuuv09x] {
        font-size: 1.1rem;
        margin: 0;
    }

.pagination[b-2mhyuuv09x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.btn-page[b-2mhyuuv09x] {
    padding: 0.75rem 1.5rem;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

    .btn-page:hover:not(:disabled)[b-2mhyuuv09x] {
        background: #9CB0A3;
        color: white;
        border-color: #9CB0A3;
    }

    .btn-page:disabled[b-2mhyuuv09x] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-info[b-2mhyuuv09x] {
    color: #666;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Category tag styling */
.category-tag[b-2mhyuuv09x] {
    background: #e8f4fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    align-self: flex-start;
    border: 1px solid #bbdefb;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.category-icon[b-2mhyuuv09x] {
    font-size: 0.8rem;
}

/* Different colors for different categories */
.category-tag[data-category="Life"][b-2mhyuuv09x] {
    background: #e8f5e8;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.category-tag[data-category="Shared"][b-2mhyuuv09x] {
    background: #fff3e0;
    color: #f57c00;
    border-color: #ffcc02;
}

.category-tag[data-category="Personal"][b-2mhyuuv09x] {
    background: #f3e5f5;
    color: #7b1fa2;
    border-color: #ce93d8;
}

.category-tag[data-category="Everyday"][b-2mhyuuv09x] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #bbdefb;
}

.category-quick-filters[b-2mhyuuv09x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.quick-filter-label[b-2mhyuuv09x] {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    margin-right: 0.5rem;
}

.quick-filter-btn[b-2mhyuuv09x] {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-filter-btn:hover[b-2mhyuuv09x] {
    background: #f5f5f5;
}

.quick-filter-btn.active[b-2mhyuuv09x] {
    background: #9CB0A3;
    color: white;
    border-color: #9CB0A3;
}

/* Tabs styling for Memories / Archive */
.memories-tabs[b-2mhyuuv09x] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.tab-btn[b-2mhyuuv09x] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #ddd;
    cursor: pointer;
    font-weight: 500;
    background: white;
}
.tab-active[b-2mhyuuv09x] {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
}
.tab-inactive[b-2mhyuuv09x] {
    background: white;
    color: #333;
}

/* Archive button styling - matches the look in screenshots */
.btn-archive[b-2mhyuuv09x] {
    padding: 0.5rem 0.9rem;
    border: 2px solid #333;
    border-radius: 6px;
    background: transparent;
    color: #111;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.12s ease;
}
.btn-archive:hover[b-2mhyuuv09x] {
    background: #f5f5f5;
    transform: translateY(-1px);
}

/* Restore and permanent delete button styling */
.btn-restore[b-2mhyuuv09x] {
    padding: 0.45rem 0.85rem;
    border: 1px solid #444;
    border-radius: 6px;
    background: white;
    color: #222;
    cursor: pointer;
    font-weight: 600;
}
.btn-restore:hover[b-2mhyuuv09x] {
    background: #f5f5f5;
    transform: translateY(-1px);
}

.btn-delete-perm[b-2mhyuuv09x] {
    padding: 0.45rem 0.9rem;
    border: 2px solid #b71c1c;
    border-radius: 6px;
    background: transparent;
    color: #b71c1c;
    cursor: pointer;
    font-weight: 700;
}
.btn-delete-perm:hover[b-2mhyuuv09x] {
    background: rgba(183,28,28,0.06);
    transform: translateY(-1px);
}

/* Soft button base to match View/Chat style */
.btn-soft[b-2mhyuuv09x] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.16s ease;
    white-space: nowrap;
}

/* Archive: neutral soft button */
.btn-archive[b-2mhyuuv09x] {
    background: #f5f5f5;
    color: #222;
    border: none;
    font-weight: 500;
}
.btn-archive:hover[b-2mhyuuv09x] { background: #e9e9e9; transform: translateY(-1px); }

/* Restore: soft neutral like archive */
.btn-restore[b-2mhyuuv09x] {
    background: #f5f5f5;
    color: #222;
    border: none;
    font-weight: 500;
}
.btn-restore:hover[b-2mhyuuv09x] { background: #e9e9e9; transform: translateY(-1px); }

/* Permanently delete: soft red variant */
.btn-delete-perm[b-2mhyuuv09x] {
    background: #ffebee; /* light red */
    color: #b71c1c;
    border: none;
    font-weight: 500;
}
.btn-delete-perm:hover[b-2mhyuuv09x] { background: #ffd5d6; transform: translateY(-1px); }

/* Ensure these buttons adopt the same size/spacing as view/chat */
.memory-actions .btn-archive[b-2mhyuuv09x],
.memory-actions .btn-restore[b-2mhyuuv09x],
.memory-actions .btn-delete-perm[b-2mhyuuv09x] {
    margin-left: 0.25rem;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .memories-modal[b-2mhyuuv09x] {
        width: 95%;
        max-height: 95vh;
        margin: 1rem;
    }

    .modal-header[b-2mhyuuv09x], .modal-body[b-2mhyuuv09x] {
        padding: 1rem;
    }

    .filter-row[b-2mhyuuv09x] {
        flex-direction: column;
    }

    .filter-select[b-2mhyuuv09x], .filter-input[b-2mhyuuv09x] {
        min-width: unset;
    }

    .memories-list[b-2mhyuuv09x] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .memory-footer[b-2mhyuuv09x] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .memory-tags[b-2mhyuuv09x] {
        gap: 0.5rem;
    }

    .memory-actions[b-2mhyuuv09x] {
        justify-content: stretch;
        margin-top: 0.5rem;
    }

    .btn-view[b-2mhyuuv09x], .btn-chat[b-2mhyuuv09x], .btn-delete[b-2mhyuuv09x] {
        flex: 1;
        text-align: center;
    }

    .pagination[b-2mhyuuv09x] {
        flex-direction: column;
        gap: 1rem;
    }

    .category-quick-filters[b-2mhyuuv09x] {
        justify-content: center;
    }
    
    .quick-filter-label[b-2mhyuuv09x] {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }
}

/* In-place archive confirmation styles */
.memories-list .memory-card[b-2mhyuuv09x]{
    transition: height 400ms ease, transform 300ms ease, opacity 400ms ease, padding 300ms ease;
    overflow: hidden;
}

.memories-list .memory-card.confirming-archive .memory-image[b-2mhyuuv09x],
.memories-list .memory-card.confirming-archive .memory-content[b-2mhyuuv09x],
.memories-list .memory-card.confirming-archive .memory-footer[b-2mhyuuv09x]{
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 350ms ease, transform 350ms ease;
}

.memories-list .memory-card.confirming-archive[b-2mhyuuv09x]{
    padding-top:6px;
    padding-bottom:6px;
}

.memory-confirmation[b-2mhyuuv09x]{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:12px;
    padding:8px 4px;
    opacity:0;
    transform: translateY(6px);
    transition: opacity 350ms ease, transform 350ms ease;
}

.memory-card.confirming-archive .memory-confirmation[b-2mhyuuv09x]{
    opacity:1;
    transform: translateY(0);
}

.memory-confirmation .confirmation-message[b-2mhyuuv09x]{
    font-size:0.95rem;
    color:var(--bs-body-color);
}

.memory-confirmation .btn-undo[b-2mhyuuv09x]{
    background:transparent;
    border:1px solid rgba(0,0,0,0.08);
    padding:6px 10px;
    border-radius:6px;
    color:var(--bs-primary);
    cursor:pointer;
}

/* When the card finishes and is removed, parent layout will animate naturally; we ensure the height transition is smooth by relying on padding/overflow. */
/* /Components/WelcomeBackResumeModal.razor.rz.scp.css */
/* ========================================= */
/*        Shared Modal Overlay Styling       */
/* ========================================= */

.modal-overlay[b-u2h9j6vidd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ensure THIS is the background color applied for BOTH modals */
    background-color: rgba(40, 25, 15, 0.55); /* Lighter overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Base z-index - content inside modals will have higher values */
    z-index: 1000;
}

    .modal-overlay.visible[b-u2h9j6vidd] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-u2h9j6vidd] {
    position: relative; /* Needed for pseudo-elements/absolute positioning */
    padding: 30px 45px;
    border-radius: 18px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    z-index: 1002; /* Ensure content is above potential background layers */
}

.modal-overlay.visible .modal-content[b-u2h9j6vidd] {
    transform: scale(1);
}

/* --- Layered Effect for Modal --- */
.modal-content.layered-modal[b-u2h9j6vidd] {
    background-color: rgb(255, 242, 236); /* The top layer color */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow for top layer */
}

    /* The background layer */
    .modal-content.layered-modal[b-u2h9j6vidd]::before {
        content: '';
        position: absolute;
        /* Make it slightly larger than the parent */
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        /* Style the background layer */
        background: rgba(255, 255, 255, 0.6); /* Semi-transparent white - adjust as needed */
        border-radius: 22px; /* Slightly more rounded than the main content */
        z-index: -1; /* Place it behind the main content */
    }

/* ========================================= */
/*      Welcome Back Resume Modal Styling   */
/* ========================================= */

.welcome-back-modal[b-u2h9j6vidd] {
    max-width: 500px;
}

/* --- Header Styling --- */
.welcome-back-header[b-u2h9j6vidd] {
    margin-bottom: 25px;
}

.welcome-back-headline[b-u2h9j6vidd] {
    font-size: 1.8rem;
    font-weight: 600;
    color: #5c4033;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.25;
}

.welcome-back-subtext[b-u2h9j6vidd] {
    font-size: 1rem;
    color: #7d6c66;
    margin-bottom: 0;
    line-height: 1.4;
    padding: 0 10px;
}

/* --- Progress Indicator Styling --- */
.creation-progress[b-u2h9j6vidd] {
    margin: 25px 0;
    padding: 20px 0;
    border-top: 1px solid #e8e4e2;
    border-bottom: 1px solid #e8e4e2;
}

.progress-steps[b-u2h9j6vidd] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.progress-step[b-u2h9j6vidd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.progress-step.completed[b-u2h9j6vidd] {
    opacity: 1;
}

.progress-step.next[b-u2h9j6vidd] {
    opacity: 0.7;
}

.step-icon[b-u2h9j6vidd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #e8e4e2;
    color: #7d6c66;
}

.progress-step.completed .step-icon[b-u2h9j6vidd] {
    background-color: #4CAF50;
    color: white;
}

.progress-step.next .step-icon[b-u2h9j6vidd] {
    background-color: #ff9d7e;
    color: white;
}

.step-label[b-u2h9j6vidd] {
    font-size: 0.8rem;
    color: #7d6c66;
    font-weight: 500;
}

/* --- Modal Actions Styling --- */
.modal-actions[b-u2h9j6vidd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary-large[b-u2h9j6vidd],
.btn-secondary-large[b-u2h9j6vidd] {
    padding: 16px 20px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
}

.btn-primary-large[b-u2h9j6vidd] {
    background-color: #ff9d7e;
    color: white;
}

.btn-primary-large:hover[b-u2h9j6vidd] {
    background-color: #ff855f;
    transform: translateY(-1px);
}

.btn-secondary-large[b-u2h9j6vidd] {
    background-color: #f7f5f4;
    color: #5c4033;
    border: 1px solid #e8e4e2;
}

.btn-secondary-large:hover[b-u2h9j6vidd] {
    background-color: #edf2f7;
    transform: translateY(-1px);
}

.button-content[b-u2h9j6vidd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.button-icon[b-u2h9j6vidd] {
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.button-text[b-u2h9j6vidd] {
    flex: 1;
}

.button-title[b-u2h9j6vidd] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: inherit;
}

.button-subtitle[b-u2h9j6vidd] {
    font-size: 0.85rem;
    opacity: 0.8;
    color: inherit;
}

.tertiary-action[b-u2h9j6vidd] {
    text-align: center;
    margin-top: 15px;
}

.discard-link[b-u2h9j6vidd] {
    color: #8f8886;
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.discard-link:hover[b-u2h9j6vidd] {
    color: #7d6c66;
}

/* --- Responsive Design --- */
@media (max-width: 480px) {
    .modal-content[b-u2h9j6vidd] {
        padding: 25px 30px;
        max-width: 95%;
    }

    .welcome-back-headline[b-u2h9j6vidd] {
        font-size: 1.6rem;
    }

    .progress-steps[b-u2h9j6vidd] {
        gap: 20px;
    }

    .step-icon[b-u2h9j6vidd] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .step-label[b-u2h9j6vidd] {
        font-size: 0.75rem;
    }

    .btn-primary-large[b-u2h9j6vidd],
    .btn-secondary-large[b-u2h9j6vidd] {
        padding: 14px 16px;
    }

    .button-content[b-u2h9j6vidd] {
        gap: 10px;
    }

    .button-icon[b-u2h9j6vidd] {
        font-size: 1.1rem;
        width: 20px;
        height: 20px;
    }
}