.Pixso-frame-2_791 { width: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: visible; background-color: var(--bg-light, #F9FAFE); } .frame-content-2_802 { box-sizing: border-box; padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; } .user-info-save-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background-color: var(--bg-white, #ffffff); box-shadow: 0 -2px 12px rgba(26, 25, 24, 0.06); box-sizing: border-box; } .user-info-save-bar__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 12px; background-color: var(--accent-orange, #FF6B35); } .user-info-save-bar__text { font-size: var(--font-size-md, 16px); font-family: var(--font-family); font-weight: 600; color: var(--text-inverse, #ffffff); line-height: 1; } .avatar-block { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 14px; box-shadow: 0 2px 10px rgba(26, 25, 24, 0.03); background-color: var(--bg-white); flex-shrink: 0; overflow: hidden; box-sizing: border-box; } .avatar-block__inner { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background-color: var(--bg-light, #f9fafe); } .avatar-block__photo { width: 100%; height: 100%; display: block; } .avatar-block__change { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 28px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; background-color: rgba(0, 0, 0, 0.55); z-index: 2; box-sizing: border-box; } .avatar-block__icon { width: 12px; height: 12px; flex-shrink: 0; display: block; filter: brightness(0) invert(1); } .avatar-block__text { font-size: var(--font-size-xs, 11px); line-height: 1; color: #ffffff; white-space: nowrap; } .frame-content-2_811, .frame-content-2_817, .frame-content-2_826, .frame-content-2_842, .frame-content-2_848, .frame-content-2_859 { min-width: 0; } .Pixso-paragraph-2_813, .Pixso-paragraph-2_844, .Pixso-paragraph-2_861 { display: block; min-width: 0; } .gender-btn { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 8px; background-color: var(--bg-light, #F9FAFE); flex-shrink: 0; } .gender-btn__icon { width: 14px; height: 14px; display: block; flex-shrink: 0; } .gender-btn__text { font-size: var(--font-size-base); font-family: var(--font-family); font-weight: 500; color: var(--text-light, #8A99B4); white-space: nowrap; } .gender-btn--active { background-color: var(--accent-orange, #FF6B35); } .gender-btn--active .gender-btn__text { color: var(--text-inverse, #ffffff); } .goal-tags { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; box-sizing: border-box; } .goal-tag { display: flex; align-items: center; justify-content: center; padding: 7px 16px; border-radius: 100px; border: 1px solid rgba(209, 208, 205, 1); background-color: var(--bg-white, #ffffff); flex-shrink: 0; box-sizing: border-box; } .goal-tag__text { font-size: var(--font-size-base); font-family: var(--font-family); font-weight: 500; color: var(--text-muted, #5E6F8D); white-space: nowrap; } .goal-tag--selected { border-color: var(--accent-orange, #FF6B35); background-color: var(--accent-orange, #FF6B35); } .goal-tag--selected .goal-tag__text { color: var(--text-inverse, #ffffff); }