<Container padding="40" width="fill" height="fill" background="#11111B" alignX="Center" alignY="Center">
    <Column spacing="18" align="Center">
        <Text content="Configurações" size="32" bold="true" color="#F5E0DC" />

        <Column spacing="8" width="320">
            <Text content="Nome de exibição" size="14" bold="true" color="#A6ADC8" />
            <TextInput placeholder="Seu nome..." value="user_name" onChange="mudar_nome" width="fill" padding="10" />
        </Column>

        <!-- Navegar para outra tela mantém o estado; o nome editado aparece no perfil -->
        <Button text="Ver perfil" navigateTo="perfil" color="#89B4FA" width="320" padding="12" />
        <Button text="Voltar" navigateBack="true" color="#313244" width="320" padding="12" />
    </Column>
</Container>
